 |
| 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 |
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"> //<!--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.
$(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&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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>
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.
 |
| Nút chia sẻ dưới bài viết blogspot |
Bước 1 : Thêm đoạn code sau trên thẻ </head>
<style>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.
/* 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'/>
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 == "item"'>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é.
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul>
</div> </b:if>
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.
 |
| Mẫu bài viết xem nhiều cho blogspot |
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:'Oswald',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ướ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'/>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.
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<style>
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',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>
<div id="subscribebox">Thay những thông số trước khi lưu nhé.
<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('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' 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>
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 |
Bước 1 : Thêm code sau trên </head>
<style>Bước 2 : Thêm đoạn phần sau dưới <data: post.body/>
/* 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:if cond='data:blog.pageType == "item"'>Trong đó :
<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>
+ 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 == "item"'>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.
Nội dung tại đây chỉ hiển thị ở bài đăng
</b:if>
Xem thêm : Hướng dẫn cài đặt template cho blogger