 |
| Demo |
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 |
.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'>Lưu lại và thưởng thức thôi!
<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>
No comments