Cách chèn Social subscription botton cho blogspot

Demo

Chào tất cả các bạn!
Nếu bạn muốn blog của bạn được nhiều người biết đến thì khâu quảng bá blog và cách để độc giả theo dõi bạn qua Social Subscription là hoàn toàn cần thiết. Hôm nay 4TipsVn sẽ hướng dẫn các bạn cách chèn một box Social Subscription cho blogspot. Bài này mình có tham khảo tại askwithloud.com Demo như hình trên luôn nhé!
Bước 1: Đăng nhập Blogger.
Bước 2: Chọn Mẫu và chọn chỉnh sửa HTML

Chỉnh sửa mẫu ở chế độ HTML

Bước 3: Coppy đoạn CSS sau dán nó lên trước thẻ ]]></b:skin>

.widget .social-icon{padding-bottom:0;padding-top:0;margin:0;overflow:hidden;text-align:center;border-top:1px solid rgba(255,255,255,0.15)} .widget .social-icon:before{content:"";width:100%;top:0;position:absolute;height:1px;display:block;background-color:rgba(0,0,0,0.11)} .social-icon a{color:#F7F7F7;text-decoration:none;display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;font-size:14px} .icon-twitter:before{content:"\f099"} .icon-facebook:before{content:"\f09a"} .icon-google:before{content:"\f0d5"} .icon-rss:before{content:"\f09e"} .icon-linkedin:before{content:"\f0e1"} .icon-dribbble:before{content:"\f17d"} .icon-pinterest:before{content:"\f0d2"} .icon-youtube:before{content:"\f167"} .icon-vimeo:before{content:"\f194"} .icon-skype:before{content:"\f17e"} .icon-deviantart:before{content:"\f1bd"} .icon-flickr:before{content:"\f16e"} .icon-stumbleupon:before{content:"\f1a4"} .icon-tumblr:before{content:"\f173"} .icon-delicious:before{content:"\f1a5"} .icon-digg:before{content:"\f1a6"} .icon-lastfm:before{content:"\f202"} .icon-wordpress:before{content:"\f19a"} .icon-instagram:before{content:"\f16d"} .icon-apple:before{content:"\f179"} .icon-dropbox:before{content:"\f16b"} .icon-behance:before{content:"\f1b4"} .icon-reddit:before{content:"\f1a1"} .social-icon li{display:inline} .social-wrap{overflow:hidden} .social-wrap li{width:25%;float:left;height:110px;text-align:center;padding-left:0!important;margin-bottom:0!important;line-height:1em} .social-wrap li:before{display:none!important} .social-wrap .icon-counter,.social-wrap .social-desc{display:block} .social-desc span{display:block;color:#616161} .item-count{font-weight:400;font-size:17px} .item-text{font-size:11px} .social-wrap .fa{width:50px;text-shadow:0 1px 2px rgba(0,0,0,0.10);height:50px;line-height:50px;box-shadow:0 2px 3px rgba(0,0,0,0.10);text-align:center;margin-bottom:10px;font-size:24px;background-color:#E9E9E9} .social-wrap .fa:after{content:"\f0d7";color:#E9E9E9;top:100%;position:absolute;line-height:14px;height:14px;left:50%;text-align:center;width:16px;margin-left:-8px;margin-top:-6px} .social-wrap .icon-twitter,.social-wrap a:hover .icon-twitter:after{color:#2DAAE1} .social-wrap .icon-facebook,.social-wrap a:hover .icon-facebook:after{color:#3C5B9B} .social-wrap .icon-google,.social-wrap a:hover .icon-google:after{color:#F63E28} .social-wrap .icon-rss,.social-wrap a:hover .icon-rss:after{color:#FA8C27} .social-wrap .icon-linkedin,.social-wrap a:hover .icon-linkedin:after{color:#0173B2} .social-wrap .icon-dribbble,.social-wrap a:hover .icon-dribbble:after{color:#F9538F} .social-wrap .icon-pinterest,.social-wrap a:hover .icon-pinterest:after{color:#CB2027} .social-wrap .icon-youtube,.social-wrap a:hover .icon-youtube:after{color:#CD332D} .social-wrap .icon-vimeo,.social-wrap a:hover .icon-vimeo:after{color:#44BBFF} .social-wrap .icon-skype,.social-wrap a:hover .icon-skype:after{color:#00AFF0} .social-wrap .icon-deviantart,.social-wrap a:hover .icon-deviantart:after{color:#4B5D50} .social-wrap .icon-flickr,.social-wrap a:hover .icon-flickr:after{color:#0063DB} .social-wrap .icon-stumbleupon,.social-wrap a:hover .icon-stumbleupon:after{color:#EB4924} .social-wrap .icon-tumblr,.social-wrap a:hover .icon-tumblr:after{color:#2C4762} .social-wrap .icon-delicious,.social-wrap a:hover .icon-delicious:after{color:#3274D1} .social-wrap .icon-digg,.social-wrap a:hover .icon-digg:after{color:#14589E} .social-wrap .icon-lastfm,.social-wrap a:hover .icon-lastfm:after{color:#D51007} .social-wrap .icon-wordpress,.social-wrap a:hover .icon-wordpress:after{color:#21759B} .social-wrap .icon-instagram,.social-wrap a:hover .icon-instagram:after{color:#3F729B} .social-wrap .icon-apple,.social-wrap a:hover:after{color:#B9BFC1} .social-wrap .icon-dropbox,.social-wrap a:hover .icon-dropbox:after{color:#2281CF} .social-wrap .icon-behance,.social-wrap a:hover .icon-behance:after{color:#1769ff} .social-wrap .icon-reddit,.social-wrap a:hover .icon-reddit:after{color:#FF4500} .social-wrap a:hover,.social-wrap a:focus{text-decoration:none} .social-wrap a:hover .fa{color:#FFFFFF} .social-icon .icon-twitter:hover,a:hover .icon-twitter,.icons-twitter .fa,.authorSocial .icon-twitter{background-color:#2DAAE1} .social-icon .icon-facebook:hover,a:hover .icon-facebook,.icons-facebook .fa,.authorSocial .icon-facebook{background-color:#3C5B9B} .social-icon .icon-google:hover,a:hover .icon-google,.icons-gplus .fa,.authorSocial .icon-google{background-color:#F63E28} .social-icon .icon-rss:hover,a:hover .icon-rss{background-color:#FA8C27} .social-icon .icon-linkedin:hover,a:hover .icon-linkedin,.icons-linkedin .fa,.authorSocial .icon-linkedin{background-color:#0173B2} .social-icon .icon-dribbble:hover,a:hover .icon-dribbble,.authorSocial .icon-dribbble{background-color:#F9538F} .social-icon .icon-pinterest:hover,a:hover .icon-pinterest,.icons-pinterest .fa,.authorSocial .icon-pinterest{background-color:#CB2027} .social-icon .icon-youtube:hover,a:hover .icon-youtube,.authorSocial .icon-youtube{background-color:#CD332D} .social-icon .icon-vimeo:hover,a:hover .icon-vimeo,.authorSocial .icon-vimeo{background-color:#44BBFF} .social-icon .icon-skype:hover,a:hover .icon-skype,.authorSocial .icon-skype{background-color:#00AFF0} .social-icon .icon-deviantart:hover,a:hover .icon-deviantart,.authorSocial .icon-deviantart{background-color:#4B5D50} .social-icon .icon-flickr:hover,a:hover .icon-flickr,.authorSocial .icon-flickr{background-color:#0063DB} .social-icon .icon-stumbleupon:hover,a:hover .icon-stumbleupon,.authorSocial .icon-stumbleupon{background-color:#EB4924} .social-icon .icon-tumblr:hover,a:hover .icon-tumblr,.authorSocial .icon-tumblr{background-color:#2C4762} .social-icon .icon-delicious:hover,a:hover .icon-delicious{background-color:#3274D1} .social-icon .icon-digg:hover,a:hover .icon-digg{background-color:#14589E} .social-icon .icon-lastfm:hover,a:hover .icon-lastfm{background-color:#D51007} .social-icon .icon-wordpress:hover,a:hover .icon-wordpress{background-color:#21759B} .social-icon .icon-instagram:hover,a:hover .icon-instagram{background-color:#3F729B} .social-icon .icon-apple:hover,a:hover .icon-apple{background-color:#B9BFC1} .social-icon .icon-dropbox:hover,a:hover .icon-dropbox{background-color:#2281CF} .social-icon .icon-behance:hover,a:hover .icon-behance{background-color:#1769ff} .social-icon .icon-reddit:hover,a:hover .icon-reddit{background-color:#FF4500} .icons-whatsapp .fa{background-color: #5cbe4a} .sharesinfo{position:absolute;width:auto;right:15px;left:0;top:50%;margin-top:-16px;padding:0;z-index:4;display:none;text-align:center} .sharesinfo .fa{width:32px;height:32px;line-height:32px;color:#FFFFFF;font-size:14px} .sharesinfo a:hover,.sharesinfo a:focus{text-decoration:none} .sharesinfo a{display:inline-block;height:32px;width:32px;cursor:pointer} .sharesinfo span{color:#FFFFFF;font-size:12px;height:18px;line-height:18px;position:absolute;top:-30px;left:-9px;right:-9px;background-color:#D32F2F;display:none} .sharesinfo b{font-weight:300;background-color:rgba(0, 0, 0, 0.4);padding:0 2px;display:inline-block;float:left} .sharesinfo a:hover span{display:block} .sharesinfo span:before{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;width:0;height:0;border:5px solid transparent;border-top-color:#D32F2F} .wasupport .sharesinfo .icons-whatsapp {display:inline-block} .wasupport .item-share .icons-whatsapp {display:block}

Bước 4: Coppy đoạn mã sau và chèn vào nơi các bác muốn cái box đó xuất hiện, thường là ta chèn vào tiện ích HTML/Javascript trên bố cục.

<div class='widget-content social-wrap'>
<ul>
<li><a href='http://last.fm' rel='nofollow' target='_blank' title='lastfm [530]'><span class='icon-counter'><i class='fa icon-lastfm [530]'></i></span><div class='social-desc'><div class='hide-count'>lastfm [530]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://google.com' rel='nofollow' target='_blank' title='google [8695]'><span class='icon-counter'><i class='fa icon-google [8695]'></i></span><div class='social-desc'><div class='hide-count'>google [8695]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://youtube.com' rel='nofollow' target='_blank' title='youtube [456M]'><span class='icon-counter'><i class='fa icon-youtube [456M]'></i></span><div class='social-desc'><div class='hide-count'>youtube [456M]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://pinterest.com' rel='nofollow' target='_blank' title='pinterest [567]'><span class='icon-counter'><i class='fa icon-pinterest [567]'></i></span><div class='social-desc'><div class='hide-count'>pinterest [567]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://instagram.com' rel='nofollow' target='_blank' title='instagram [8796]'><span class='icon-counter'><i class='fa icon-instagram [8796]'></i></span><div class='social-desc'><div class='hide-count'>instagram [8796]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://rss.com' rel='nofollow' target='_blank' title='rss [2.9k]'><span class='icon-counter'><i class='fa icon-rss [2.9k]'></i></span><div class='social-desc'><div class='hide-count'>rss [2.9k]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://twitter.com' rel='nofollow' target='_blank' title='twitter [200]'><span class='icon-counter'><i class='fa icon-twitter [200]'></i></span><div class='social-desc'><div class='hide-count'>twitter [200]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://facebook.com' rel='nofollow' target='_blank' title='facebook [1.2M]'><span class='icon-counter'><i class='fa icon-facebook [1.2M]'></i></span><div class='social-desc'><div class='hide-count'>facebook [1.2M]</div><span class='item-text'>Followers</span></div></a></li>
</ul>
</div>

Lưu lại và thưởng thức thôi!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait