আমাদের কথা খুঁজে নিন
আপনার ব্লগে যুক্ত করুন একটি Social Subscribe box উইডগেট
আসসালামুয়ালাইকুম,
আশা করি সকলেই ভাল আছেন। আজ আমি আপনাদের শিখাব কিভাবে আপনার ব্লগে একটি সুন্দর 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 সিলেক্ট করুন এইবার নিচের কোডগুলো কপি করে পেস্ট করুন
অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।