আসসালামুয়ালাইকুম,

আশা করি সকলেই ভাল আছেন। আজ আমি আপনাদের শিখাব কিভাবে আপনার ব্লগে একটি সুন্দর Social Subscribe box উইডগেট যুক্ত করবেন

এইটি অনেকটা WordPress এর মতো এবং দেখতেও অনেক সুন্দর

প্রয়োজনে এইখানে ক্লিক করে ডেমো দেখতে পারেন অথবা আমি আপনাদের জন্য একটি ছবি নিচে যুক্ত করে দিচ্ছি

অনেক কথা বলে ফেললাম এইবার কাজ করার পালা

প্রথমে আপনার ব্লগারে প্রবেশ করুন

এইবার Template >> Edit HTML এ ক্লিক করে Ctrl+F চেপে ধরে ]]></b:skin> সার্চ করুন

এইবার নিচের কোডগুলো কপি করে ]]></b:skin> এর সামনে পেস্ট করে দিন

/*
* alokitobd.org All in one Social Subscription Box
* ——————————————————–*/
div.socialbox-mbl,
div.socialbox-mbl ul,
div.socialbox-mbl ul li,
div.socialbox-mbl ul li p,
div.socialbox-mbl ul li img,
div.socialbox-mbl ul li p span,
div.socialbox-mbl ul li a{
background: none;
border: none;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}

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

div.socialbox-mbl ul li a,
div.socialbox-mbl ul li img{
display: inline;
width: auto;
}

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

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

div.socialbox-mbl.mbl-classic ul{
background: url(http://3.bp.blogspot.com/-ea9PfovQmzk/UN8yR7Ma9cI/AAAAAAAAKbI/fGdJIUYyaH8/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.socialbox-mbl.mbl-classic ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 40px;
overflow: hidden;
padding: 19px 9px 0 9px;
}

div.socialbox-mbl.mbl-classic ul li:last-child{
border-bottom: none;
}

div.socialbox-mbl.mbl-classic ul li img{
border: none;
margin-right: 10px;
float: left;
}

div.socialbox-mbl.mbl-classic ul li p{
display: inline;
position: relative;
top : -3px;
}

div.socialbox-mbl.mbl-classic ul li p span{
color: #425763;
font-weight: bold;
}

div.socialbox-mbl.mbl-classic ul li a.socialbox-button{
background: url(http://3.bp.blogspot.com/-l4GuvokNR7k/UN8yB38xKtI/AAAAAAAAKbA/sD2VwGzVx9A/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.socialbox-mbl.mbl-classic ul li a.socialbox-button:hover{
background: url(http://3.bp.blogspot.com/-l4GuvokNR7k/UN8yB38xKtI/AAAAAAAAKbA/sD2VwGzVx9A/s1600/classic-button.png) 0 -27px no-repeat;
}

div.socialbox-mbl.mbl-classic ul li a.socialbox-button:active{
background: url(http://3.bp.blogspot.com/-l4GuvokNR7k/UN8yB38xKtI/AAAAAAAAKbA/sD2VwGzVx9A/s1600/classic-button.png) 0 -54px no-repeat;
}

এইবার সেভ করুন

এখন আবার Layout >> Add a Gadget এ ক্লিক করে HTML/JavaScript সিলেক্ট করুন এইবার নিচের কোডগুলো কপি করে পেস্ট করুন

<!– Alokitobd.org All in one Social Subscription Box –>

<div style=”width: 300px!important”>

<ul>

 <li>

<a href=”http://www.facebook.com/mybloggerlab” title=”Like on Facebook” rel=”nofollow” target=”_blank”><img src=”http://3.bp.blogspot.com/–bi0CGqDZJ8/UN8N-Mmfv7I/AAAAAAAAKX8/uaMfzJ6qRoU/s1600/facebook_16.png” alt=”Facebook” />

</a><p><span>3500</span> Fans</p><a href=”http://www.facebook.com/mybloggerlab” rel=”nofollow”  title=”Like on Facebook” target=”_blank”>Like</a>

</li>

<li>

<a href=”http://twitter.com/mybloggerlab” title=”Follow on Twitter” rel=”nofollow”  target=”_blank”><img src=”http://3.bp.blogspot.com/-74-W-RRRlrc/UN8NIc_p-rI/AAAAAAAAKXw/zZ3h9PfUcro/s1600/twitter.png” alt=”Twitter” /></a><p><span>3000</span> Followers</p><a href=”http://twitter.com/mybloggerlab” 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=”http://3.bp.blogspot.com/-hZ-iCjY7ZEk/UN8Lqvu_lzI/AAAAAAAAKV4/NDVmDp0q7nk/s1600/youtube_16.png” alt=”YouTube” /></a><p><span>400</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/fosterzone” title=”Follow on Pinterest” rel=”nofollow”  target=”_blank”><img src=”http://1.bp.blogspot.com/-FRqoLOjovMM/UN8KYnXP5ZI/AAAAAAAAKVo/SARIQBtxHIE/s1600/Pinterestmbl.png” alt=”Pinterest” /></a><p><span>200</span> Followers</p><a href=”http://pinterest.com/fosterzone” rel=”nofollow”  class=”socialbox-button” title=”Follow on Pinterest” target=”_blank” >Follow</a>

</li>

<li>

<a href=”https://plus.google.com/u/0/106374439082237286396″ title=”Follow on Google+” rel=”nofollow” target=”_blank”><img src=”http://2.bp.blogspot.com/-RxL4JXKt65o/UN8LG1Yc0zI/AAAAAAAAKVw/xIpDulb4etE/s1600/Googleplusmbl.png” alt=”Google+” /></a><p><span>1000</span> Followers</p><a href=”https://plus.google.com/u/0/106374439082237286396″ rel=”nofollow”  class=”socialbox-button” title=”Follow on Google+” target=”_blank” >Follow</a>

</li>

</ul>

</div>

<!– End –>