আজ আপনার ব্লগার সাইট এর জন্য একটি মেট্রো সোশ্যাল Widget নিয়ে হাজির হয়েছি।

এটি মেট্রো স্টাইল এর কারনে দেখতে খুব সুন্দর। ব্যাবহার করে দেখুন। ভাল লাগবে আশা করি।

সাপোর্টঃ এটি ছয়টি সোশ্যাল নেটওয়ার্ক সমর্থন করে। এগুলো হল  ঃ

• Facebook
• Google Plus
• Linkedin
• Pinterest
• FeedBurner
• Twitter

কিভাবে ইন্সটল করবেন?

এটি ইন্সটল করা অনেক সহজ। নীচের ধাপগুলি অনুসরন করুন।

• প্রথম এ Blogger > Dashboard > Template এ যান.
• এরপর Edit HTML এ ক্লিক করুন.
• তারপর CTRL+F চেপে ]]></b:skin> খুজে বের করুন।
• খুজে পেলে নীচের কোড টি কপি করে ]]></b:skin> এর উপরে পেস্ট করুন।

/* Social Widget
------------------------------------------------------------ */
.news {background: url("http://4.bp.blogspot.com/-aTJMWUG1gz8/UOOJ56YawkI/AAAAAAAABz0/FyPF59-fH1Q/s000/rss.png") no-repeat top right;}
.news #subbox { font-family: PT Sans Narrow; font-size: 14px; margin: 10px -6px 0 0;padding: 4px;width: 190px;}
.simple-social-icons { overflow: hidden; } .simple-social-icons .alignleft, .simple-social-icons .alignright { margin: 10px; padding: 0; } .simple-social-icons ul li { background: none !important; border: none !important; float: left; list-style-type: none !important; margin: 0 5px 10px !important; padding: 0 !important; } .simple-social-icons ul li a, .simple-social-icons ul li a:hover { background: #2780c7 url("http://1.bp.blogspot.com/-hDuHwvDVbhk/UOOJ6YhtehI/AAAAAAAABz8/9sYjaTGjVYw/s000/sprite_32x32.png") no-repeat; -moz-border-radius: 0px -webkit-border-radius: 0px; border-radius: 0px; display: block; height: 32px; overflow: hidden; text-indent: -999px; width: 32px; } .simple-social-icons ul li a:hover { background-color: #222; }.simple-social-icons ul li.social-facebook a, .simple-social-icons ul li.social-facebook a:hover { background-position: -64px 0; }.simple-social-icons ul li.social-gplus a, .simple-social-icons ul li.social-gplus a:hover { background-position: -96px 0; }.simple-social-icons ul li.social-linkedin a, .simple-social-icons ul li.social-linkedin a:hover { background-position: -128px 0; }.simple-social-icons ul li.social-pinterest a, .simple-social-icons ul li.social-pinterest a:hover { background-position: -160px 0; }.simple-social-icons ul li.social-rss a, .simple-social-icons ul li.social-rss a:hover { background-position: -192px 0; }.simple-social-icons ul li.social-twitter a, .simple-social-icons ul li.social-twitter a:hover { background-position: -256px 0; }

পেস্ট করা হয়ে গেলে সেভ করুন। এখন পরের ধাপ 😀

• এখন Blogger Dashboard > Layout এ যান.
• Choose "Add a Gadget".(একটি পপ আপ উইন্ডো আসবে )
• সেখান থেকে HTML/JavaScript সিলেক্ট করুন।
• তারপর নীচের কোড টি কপি করে পেস্ট করুন।

<div class='widget simple-social-icons' id='simple-social-icons-2'><div class='widget-wrap'>
<ul class='alignleft'><li class='social-facebook'><a href='http://www.facebook.com/YOUR_USERNAME'>Facebook</a></li>
<li class='social-gplus'><a href='https://plus.google.com/#'>Google+</a></li>
<li class='social-linkedin'><a href='http://www.linkedin.com/#'>Linkedin</a></li>
<li class='social-pinterest'><a href='http://pinterest.com/YOUR_USERNAME'>Pinterest</a></li>
<li class='social-rss'><a href='http://feeds2.feedburner.com/#'>RSS</a></li>
<li class='social-twitter'><a href='http://twitter.com/YOUR_USERNAME'>Twitter</a></li>
</ul></div></div>

**  YOUR_USERNAME এর জায়গায় আপনার ইউজারনেম দিতে ভুলবেন না:D

কোন ভুল হলে ক্ষমা করবেন।

আমার একটি ব্লগ আছে যেখানে এটি পূর্বে প্রকাশিত হয়েছে । ব্লগটি নতুন । কিছুদিন হল প্রকাশিত হয়েছে । চাইলে ঘুরে আসতে পারেন এখান থেকে।

ধন্যবাদ।