Ngoc anh blog giới thiệu cho các bạn tạo 1 wedget nó xuất hiện các nội dung , hoặc mô tả với các hiệu ứng tinh tế nó khá nhẹ khi các bạn thê...
Ngoc anh blog giới thiệu cho các bạn tạo 1 wedget nó xuất hiện các nội dung , hoặc mô tả với các hiệu ứng tinh tế nó khá nhẹ khi các bạn thêm vào blog của bạn nó khá nhẹ nha các bạn yên tâm về tốc độ tải trang của web nhé.
Cài đặt Widget tương tự như Google AdSense
Cài đặt Widget
B1 : thêm CSS bên dưới lên trước thẻ </head><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>( nếu template của các bạn có đoạn CSS này rồi thì bỏ qua nhé ).
B2 : Thêm đoạn mã sau đây lên trước thẻ ]]></b:skin> hoặc </style>
/* Widget-GA */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h2.iklan-header:first-child{border-top:0}
.iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}B3 : coppy đoạn code bên dưới pass lên trước </body><script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>Lưu mẫu lạiB4 : Vào bố cục > tạo widget ( thêm tiện ích ) sau đó các bạn thêm đoạn mã bên dưới vào và lưu lại
<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'> <!-- iklan ke 1 --> <div data-header="Template cách làm hay V2"> <span class='isi-iklan'> <span class='judul-iklan' onclick="window.open('/');">Template cách làm hay V2</span> <span class='url-iklan' onclick="window.open('/');">www.ngocanhblog.com</span> <span class='panah-besar' onclick="window.open('http://www.ngocanhblog.com/2015/12/template-cach-lam-hay-v2-chuan-seo-w3c-htlm5.html');"></span> <p class='isi'>Xem Thêm</p> </span> </div> <!-- iklan ke 2 --> <div data-header="Template bán hàng điện tử"> <span class='isi-iklan'> <span class='judul-iklan' onclick="window.open('/');">Template bán hàng điện tử</span> <span class='url-iklan' onclick="window.open('/');">www.ngocanhblog.com</span> <span class='panah-besar' onclick="window.open('http://www.ngocanhblog.com/2015/12/template-blogspot-ban-hang-dien-tu-dien-thoai-dong-ho-chuyen-nghiep.html');"></span> <p class='isi'>Xem Thêm</p> </span> </div> <!-- iklan ke 3 --> <div data-header="Tìm kiếm tùy chỉnh của google"> <span class='isi-iklan'> <span class='judul-iklan' onclick="window.open('/');">Tìm kiếm tùy chỉnh của google</span> <span class='url-iklan' onclick="window.open('/');">www.ngocanhblog.com</span> <span class='panah-besar' onclick="window.open('http://www.ngocanhblog.com/2015/12/cai-dat-cong-cu-tim-kiem-tuy-chinh-cua-google-vao-blogspot.html');"></span> <p class='isi'>Xem Thêm</p> </span> </div> <!-- iklan ke 4 --> <div data-header="SEO All in One Pack 2015-2016"> <span class='isi-iklan'> <span class='judul-iklan' onclick="window.open('/');">SEO All in One Pack 2015-2016</span> <span class='url-iklan' onclick="window.open('/');">www.ngocanhblog.com</span> <span class='panah-besar' onclick="window.open('http://www.ngocanhblog.com/2015/11/seo-all-in-one-pack-2015-2016-cho-blogspot.html');"></span> <p class='isi'>Xem Thêm</p> </span> </div> <!-- iklan ke 5 --> <div data-header="Kiếm tiền trên mạng Internet"> <span class='isi-iklan'> <span class='judul-iklan' onclick="window.open('/');">Kiếm tiền trên mạng Internet</span> <span class='url-iklan' onclick="window.open('/');">www.ngocanhblog.com</span> <span class='panah-besar' onclick="window.open('http://www.ngocanhblog.com/2015/11/kiem-tien-tren-mang-internet-cho-blog-web-nhu-the-nao.html');"></span> <p class='isi'>Xem Thêm</p> </span> </div>Thay phần MÀU HỒNG thành tên và ulr của blog các bạn .
Ok các bạn quay lại trang chủ và sem thành quả của mình nào . Thủ thuật này nhìn đẹp mắt và chuyên nghiệp , tạo cho độc giả khi vào thăm blog của các bạn có thể nhìn thấy cũng giống như là các bạn thông báo có những bài viết hay và nổi bật của blog.
Chúc các bạn thành công .
Chia sẻ:
Nhận cập nhật các bài viết mới của Ngocanhblog
Mẹo nhỏ khi bình luận