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 toptienich 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!