[Blogger] All in One Social Subscribe Box

Bài viết này mình sẽ chia sẻ một thủ thuật tạo widget All in One Social Subscribe cho Blogger (các bạn xem hình trên). Sau đây là các bước thực hiện:

Bước 1: Vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* All in One Social Subscribe Box by kjmagic.blogspot.com */
div.kjsocialbox,
div.kjsocialbox ul,
div.kjsocialbox ul li,
div.kjsocialbox ul li p,
div.kjsocialbox ul li img,
div.kjsocialbox ul li p span,
div.kjsocialbox ul li a{
 background: none;
 border: none;
 font-style: normal;
 font-weight: normal;
 margin: 0;
 padding: 0;
}

div.kjsocialbox ul,
div.kjsocialbox ul li{
 list-style: none;
}

div.kjsocialbox ul li a,
div.kjsocialbox ul li img{
 display: inline;
 width: auto;
}

div.kjsocialbox ul li a.socialbox-button{
 text-align: center;
}

div.kjsocialbox.kjclassic{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

div.kjsocialbox.kjclassic ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimJBip4Pa2V1VeY2eKuFNu-x7m7um1G8U1g2O0UYroaD_P_Db_CNu7jngk4vCNWHdR_RXX_7_YxoyHoRXm5pekkq-cV1de1tFHaTFgXssANrT2wiCM1xBZBRotEb-vq-dJ1S79bhyFA/s1600/classic-background.png) repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
margin: 0 !important;
padding: 0;
}
  
div.kjsocialbox.kjclassic ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 40px;
overflow: hidden;
padding: 19px 9px 0 9px;
}
  
div.kjsocialbox.kjclassic ul li:last-child{
border-bottom: none;
}
    
div.kjsocialbox.kjclassic ul li img{
border: none;
margin-right: 10px;
float: left;
}

div.kjsocialbox.kjclassic ul li p{
display: inline;
position: relative;
top : -3px;
}
    
div.kjsocialbox.kjclassic ul li p span{
color: #425763;
font-weight: bold;
}
  
div.kjsocialbox.kjclassic ul li a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEY3rmn4xrGyJ9eIxQCFVjdcSV2BCBQbOo8gyE4qFwVaIsHUFWadjOb2TWbOfpaVgjGYlD3Q5LJ_7UU4nXoJbOTz_Q4jE_iVLfeZs3Ofa7dD-W1DUNvMhAN9Mwi1eHJd_KSbzQNyLuQ/s1600/classic-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -4px;
}
  
div.kjsocialbox.kjclassic ul li a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEY3rmn4xrGyJ9eIxQCFVjdcSV2BCBQbOo8gyE4qFwVaIsHUFWadjOb2TWbOfpaVgjGYlD3Q5LJ_7UU4nXoJbOTz_Q4jE_iVLfeZs3Ofa7dD-W1DUNvMhAN9Mwi1eHJd_KSbzQNyLuQ/s1600/classic-button.png) 0 -27px no-repeat;
}
   
div.kjsocialbox.kjclassic ul li a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEY3rmn4xrGyJ9eIxQCFVjdcSV2BCBQbOo8gyE4qFwVaIsHUFWadjOb2TWbOfpaVgjGYlD3Q5LJ_7UU4nXoJbOTz_Q4jE_iVLfeZs3Ofa7dD-W1DUNvMhAN9Mwi1eHJd_KSbzQNyLuQ/s1600/classic-button.png) 0 -54px no-repeat;
}

Bước 2: Lưu template. Vào Bố cục, tạo một tiện ích HTML/JavaScripts và dán đoạn code bên dưới vào phần nội dung:

<!--All in one Social Subscription Box by kjmagic.blogspot.com-->
<div class="kjsocialbox kjclassic" style="width: 280px !important">
 
<ul>

 <li>
<a href="http://www.facebook.com/kj.magician" title="Like on Facebook" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70OccdoSyGw9VbHs49dhGp1BPzJALwnNsCL2NGEBCNRAZAkzbsm3tN75YvKUJ3p63UggFB3lLbY1ARQA5Djk5KKC28f8R9Lr3FBoLN5zInfEl60M_OAyZdEgthgA69-6US5iaCrh6Dg/s1600/facebook_16.png" alt="Facebook" />
</a><p><span>500</span> Fans</p><a href="http://www.facebook.com/kj.magician" class="socialbox-button" rel="nofollow"  title="Like on Facebook" target="_blank">Like</a>
</li>
 
<li>
<a href="http://twitter.com/quocdoantrinh" title="Follow on Twitter" rel="nofollow"  target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivgp7xHYoAVM1GVVUBkqyBcwPuoOjk94H6hlsRHC6bwLbuiVSVkP8xkuwC7AwdNCr5h3Dmhx0DonbQeeMcwkrw9TX4zaFNjTsbn2DYn4AVfgMXfqm9KEjYdIHwwcUnmdtDmQMb-eqeOw/s1600/twitter.png" alt="Twitter" /></a><p><span>2000</span> Followers</p><a href="http://twitter.com/quocdoantrinh" class="socialbox-button" rel="nofollow"  title="Follow on Twitter" target="_blank" >Follow</a>
</li>
        
<li>
<a href="#" title="Subscribe to Youtube Channel" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVbkEsuwjdq2Pk_9AAC9Ddnpegxmvd1qrNGzbXYN_tqyRwEptSl07xwPFwXvE94WHam2HBN0A7pmq1dSR4ybLe5n1PvWcsysewK3u9xr0vRZmbvGIYSO4lKlg2v3jSrQrDeqrzFjdbA/s1600/youtube_16.png" alt="YouTube" /></a><p><span>350</span> Subscribers</p><a href="#" rel="nofollow" class="socialbox-button" title="Subscribe to Youtube Channel" target="_blank" >Subscribe</a>
</li>
    
<li>
<a href="http://pinterest.com/your-ID" title="Follow on Pinterest" rel="nofollow"  target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZIq1XzHXr5LZmQWtlzDg2YCGYpiBY_54-g2HXQAG0kKE9Xkm50aHwlOgCXPpa09BatvM-oBqq_9AYeWd0M2hRfpBRlX9HcHU-E645nD7c5wnp2Eet3KmIrg0DPkGYHr0hG1_h-0tecw/s1600/Pinterestmbl.png" alt="Pinterest" /></a><p><span>100</span> Followers</p><a href="http://pinterest.com/your-ID" rel="nofollow"  class="socialbox-button" title="Follow on Pinterest" target="_blank" >Follow</a>
</li>
      
<li>
<a href="https://plus.google.com/u/0/your-gplus-ID" title="Follow on Google+" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpkzRXwb13qnpGeGXQt177jmkSWx3I_uC_9xy7w2vzTwNsCBLNGitAmZdn0vOQ2uAN-HVZrYFylYvn1JaqZOnkzoqeJV-G0wmhjaHKR7g-NozF42VPPuHPhExVgw-YAcjvI0o9T6TDNA/s1600/Googleplusmbl.png" alt="Google+" /></a><p><span>800</span> Followers</p><a href="https://plus.google.com/u/0/your-gplus-ID" rel="nofollow"  class="socialbox-button" title="Follow on Google+" target="_blank" >Follow</a>
</li>   
   
</ul>
  
</div>
<!--/All in one Social Subscription Box by kjmagic.blogspot.com-->

• Chỉnh sửa những chỗ mình đánh dấu thành ID tương ứng của bạn.
• Chú ý những số mình in đậm, bạn sẽ phải cập nhật thường xuyên bằng tay.
• 280px là độ rộng của widget. 

Chúc các bạn thành công !