Thủ Thuật Blogspot

Hướng dẫn thay đổi phong cách bài viết xem nhiều (Popular Posts) cho blogspot có đánh số thứ tự cực kỳ phong cách.

Bài viết xem nhiều siêu đẹp cho blogspot

Hướng dẫn làm đẹp tiện ích bài viết xem nhiều trên blogspot

/* CSS Popular Post */
.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;}

Bấm lưu mẫu và trở lại phần bố cục các bạn chỉnh sửa phần bài viết xem nhiều và cấu hình như sau :

Hình minh họa 1

Bây giờ thì đã hoàn thành rồi quá đơn giản để có một widget bài viết xem nhiều cực kỳ phong cách đúng không nào. Hãy thêm tiện ích này để quá trình tự học seo của bạn trở nên đơn giản hơn nhé,

Bài viết hướng dẫn chèn tiện ích facebook like box pup khi có người dùng vào blogspot chi tiết nhất.

Facebook like box pup cho blogspot

Facebook pup like box cho blogspot là một tiện ích bật lên khi có người dùng vào website của bạn được sử dụng css và javascript đạt chuẩn HTML5 và W3c. Nếu bạn muốn tăng like fanpage của mình thì đây là một tiện ích phù hợp cho bạn. Và bay giờ là bài hướng dẫn chèn facebook like box pup vào blogspot.

Nên xem :  Thủ thuật blogspot cho dân tự học seo

Hướng dẫn thêm tiện ích facebook like box pup cho blogspot

/*=============== CSS Popup Like box by bloghong.com ======================*/
.mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none}
.mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.mspopup .mspopup-close:hover{color:#535353}
.mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383}
.mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.mspopup .mspopup-content{padding:10px 20px}

Bước 2 : Thêm javascript trên thẻ </body>

<script src=’https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js’ type=’text/javascript’/> <script type=’text/javascript’>
$(&#39;#popup-box&#39;).mspopup({
&#39;autoOpen&#39;: true
});
</script>

Bước 3 :  Chèn tiếp đoạn code này ngay bên dưới đoạn code ở bước 2, hoặc có thể thêm vào một tiện ích ở phần Bố Cục.

<div id=”popup-box” class=”mspopup”>
<div class=”mspopup-container”>
<div class=”mspopup-header”>
<div class=”mspopup-close” data-dismiss=”mspopup”>x</div>
Like us and Join with our community
<p> Get our all latest update from our facebook page, Its free and speedy</p>
</div>
<div class=”mspopup-content”>
<div class=”fb-page” data-href=”https://www.facebook.com/w3thietkblogspot/” data-width=”400″ data-height=”300″ data-small-header=”true” data-adapt-container-width=”true” data-hide-cover=”true” data-show-facepile=”true” data-show-posts=”false”><div class=”fb-xfbml-parse-ignore”></div></div>
</div>
</div>
</div>

Sửa link fanpage của tôi thành của bạn nhé.
>> Biểu tượng cảm xúc facebook
Cuối cùng tiến hành lưu mẫu lại và kiểm tra thành quả ở trang chủ trên blog coi hộp facebook like box pup có hoạt động không. Nếu bị trục trặc gì hãy cứ comments bên dưới để được trợ giúp. Chúc các bạn tự học seo sớm có kết quả tốt.

Sau đây là bài viết hướng dẫn cách chèn nút chia sẻ mạng xã hội siêu đẹp ở cuối bài viết trên blogspot của bạn.

Nút chia sẻ mạng xã hội cuối bài viết Blogspot

Đây là bài viết đầu tiên chia sẻ về thủ thuật blogspot là một hướng dẫn thêm nút chia sẻ mạng xã hội cho blogspot như hình trên vào cuối bài viết. Tiện ích mạng xã hội này hoàn toàn dùng css rất đẹp mắt tôi nghĩ là cái mà các bạn đang tìm đây rồi.

Vì sao cần phải thêm nút chia sẻ mạng xã hội?

/* CSS Share Button */
.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}

<link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’ rel=’stylesheet’/>

Bước 3 : Tiếp tục tìm đến  <data:post.body/> thêm đoạn code này ngay sau nó

<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 mẫu có nhiều hơn 1 thẻ  <data:post.body/> nên bạn chèn lần lượt cho đến khi nào vừa ý nhé.

Bây giờ thì hãy lưu mẫu lại và xem thành quả vừa làm được xem thế nào nhé, quay trở lại một bài viết bất kỳ thưởng thức nút chia sẻ mạng xã hội mà bạn vừa làm đi nào.