Thủ Thuật Blogger : 5 tiện ích không thể thiếu cho blogspot

Responsive Ad Here
Thủ thuật blogspot cần thiết
5 thủ thuật cần thiết cho blogspot
Không dừng lại ở việc chia sẻ template blogspot mà tại đây Azatemplate còn chia sẻ nhiều kiến thức seo và thủ thuật blogspot hấp dẫn. Gần đâ tại một bài hướng dẫn cách seo on-page tôi có nhắc đến 1 số tiện ích nên có, vậy bài này sẽ là hướng dẫn chi tiết hơn cho các bạn.

Thủ thuật blogspot thì một blogger ai cũng có thể thêm vào website của mình, nhưng cái gì cũng vậy chỉ nên áp dụng những cái cần thiết chứ không nên quá lạm dụng để làm blog của mình trở nên quá nặng nề giảm đi tính thân thiện người dùng, cũng như giảm thứ hạng tìm kiếm.


TIN LIÊN QUAN

=> Share template blogspot bán hàng việt hóa full mới nhất

=> Các template bán hàng cho blogspot responsive chuẩn seo

=>Template blogspot bán hàng free đẹp, chuyên nghiệp

Các thủ thuật blospot này theo kinh nghiệm của tôi là cần thiết để giúp blog của bạn tăng CTR lên đáng kể. Hãy cùng tôi khám phá nào.

# 5 thủ thuật blogspot không thể thiếu cho blogger

1. Facebook like box

Đây là một thủ thuật blogspot đơn giản để bạn có một facebook like box nằm bên trái màn hình rê chuột sẽ hiện ra cực bắt mắt.
Facebook like box cho blogspot
Facebook Like Box
Hướng dẫn cài đặt

Bước 1 :  Thêm đoạn code sau trên thẻ </head>
<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
Bước 2 : Tạo 1 tiện ích ở phần bố cục hoặc dán code này trên thẻ </body>
<script type="text/javascript"> //<!--
$(document).ready(function() {$(".msfslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //-->
</script> <style type="text/css"> .msfslikebox{background: url("http://i.imgur.com/pQGrWuH.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .msfslikebox div{border:none;position:relative;display:block;} .msfslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .msfslikebox span a{color: #808080;text-decoration:none;} .msfslikebox span a:hover{text-decoration:underline;} </style><div class="msfslikebox"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F323885721378063&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" style="border:4px solid rgb(53, 102, 203); overflow: hidden; height: 266px; width: 240px;background:#fff;"></iframe></div></div>
Thay dãy ID mình bôi đậm thành tên hoặc ID Fanpage của bạn là xong, có một thủ thuật hỗ trợ seo rất tốt cho Fanpage.

2. Tạo nút like share ở dưới bài viết 

Đây là một thủ thuật blogspot hay phải nói rằng cực kỳ tốt cho blogspot bởi lẽ nó góp phần vào việc tăng thứ hạng cực kỳ nhanh nếu bài viết của bạn có ý nghĩa.
Tạo nút chia sẻ cho blogspot
Nút chia sẻ dưới bài viết blogspot
Hướng dẫn cài đặt

Bước 1 : Thêm đoạn code sau trên thẻ </head>
<style>
/* CSS Share Button Azatemplate*/
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Link css kia nếu blog của bạn đã có rồi thì ko cần thêm nữa nhé, nhiệm vụ của nó là hiển thị những cái icon như trong hình.

Bước 2 : Tìm đến thẻ <data:post.body/> và thêm dưới nó đoạn code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul>
</div> </b:if>
Lưu ý : Trong code có rất nhiều thẻ này nên bạn cứ thay và lưu cho đến khi nào nó hiển thị ở nơi bạn vừa ý nhé.

3.  Bài viết xem nhiều cho blogspot

Đây chính xác là một thủ thuật seo blogspot bởi lẽ khi bạn tối ưu blogger quá đà nhất là xóa những css mặc định của nó thì phần bài viết liên quan sẽ bị lỗi và thủ thuật này sẽ dành cho bạn khắc phục.

bài viết xem nhiều cho blogspot
Mẫu bài viết xem nhiều cho blogspot
Hướng dẫn cài đặt

Thủ thuật blogger blogspot này thì khá đơn giản chỉ cần bạn tìm đến thẻ ]]></b:skin> và thêm giúp mình đoạn css sau trên nó là được.
/* CSS Popular Post  Azatemplate*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

4. Hộp đăng kí mail cho blogspot 

Đây là một thủ thuật blogspot đẹp mà bạn không thể bỏ qua, nếu bạn muốn người dùng có thể nhận những bài đăng mới của bạn qua mail ngay khi bạn xuất bản chúng.
hộp đăng kí nhận bài đăng mới cho blogspot
hộp đăng kí nhận bài đăng mới cho blogspot
Hướng dẫn cài đặt

Bước 1 : Chèn đoạn code sau trên </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<style>
#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
</style>
Bước 2 : Thêm đoạn code sau tại nơi cần hiển thị, có thể thêm ở widget bố cục.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://www.azatemplate.com/2017/06/thu-thuat-blogger-blogspot.html" rel="dofollow" target="_blank"> Get This Widget</a></div>
Thay những thông số trước khi lưu nhé.

 5. Tạo khung tác giả dưới mỗi bài đăng blogspot

Đây là một box thủ thuật blogspot đẹp giúp hiển thị thông tin tác giả người đăng, thông tin sẽ được tự động thấy từ Google Plus (Tên, giới thiệu).
Hộp tác giả cho blogspot
Hộp tác giả cho blogspot
Hướng dẫn cài đặt

Bước 1 : Thêm code sau trên </head> 
<style>
/* CSS Author Bio Box by Azatemplate */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}</style>
Bước 2 : Thêm đoạn phần sau dưới <data: post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4>Author: <a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/> </p>
<div class='authorsocial'>
<a class='img-circle1' href='#LINK' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#LINK' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#LINK' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
Trong đó : 

+ Thay #LINK là đường dẫn liên kết đến mạng xã hội

Đó chính là những thủ thuật blogspot cần thiết nhất cho blogspot của bạn mà tôi muốn gởi đến. Ngoài ra còn có 1 tiện ích nữa rất hay đó là đối với những tiện ích nào bạn muốn chỉ hiển thị ở trang bài đăng thì sử dụng thẻ sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Nội dung tại đây chỉ hiển thị ở bài đăng
</b:if>
Chúc các bạn có một trải nghiệm tuyệt vời với những thủ thuật blogspot cực đẹp của mình, xin chân thành cảm ơn các bạn đã đọc.
Responsive Ad Here

Author:

velit viverra minim sed metus egestas sapien consectetuer, ac etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla, in vitae id augue vitae.