সুন্দর ডিজাইনের সোস্যাল প্রোফাইল গ্যাজেট যোগ করুন

এর আগে আমি আরো অনেক সোস্যাল বিষয়ে লিখেছি।এর আগে আমি দিয়েছিলাম কিভাবে উল্টা ধরনের সোস্যাল প্রোফাইল গ্যাজেট যোগ করবেন। আজ আরেকটি সোস্যাল প্রোফাইল গ্যাজেট দেব এটি দেখতে খুবই সুন্দর।সামান্য কিছু কোড যোগ করে এটি করতে পারবেন।এর জন্য বাড়তি কোন টেকনিক ফলো করতে হবে না।

এটাতে ফেসবুক,টুইটার,গুগল প্লাস,পিন্টারেস্ট,ও লিঙ্কডইন সোস্যাল পোফাইল যোগ করা যাবে।

কিভাবে যোগ করবেন?

১। যোগ করার জন্য প্রথমে আপনার ব্লগে লগিন করুন।
২। এবার Layout থেকে Add A Gadget এ ক্লিক করুন।
৩। HTML/Javascript সিলেক্ট করুন।
৪। ফাঁকা বক্সের মধ্যে নিচের কোড গুলো পেস্ট করুন।

 <style>

    .social-wrap {
    margin:0 auto;
    padding:0px;
    text-decoration: none;
    }

    .social-wrap ul li {
    list-style-type: none;
    border-bottom:none;
    margin:0 auto;
    background: none;
    padding:0px;
    line-height: 0!important;
    }

    .social-wrap li a {
    margin:5px 3px 0px 0px !important;
    padding:0px;
    width:50px;
    height:50px;
    text-indent:-99999px;
    float:left;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
    .social-wrap li a.facebook1 {
    background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px 0px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.facebook1:hover {
    background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -73px;
    }
    .social-wrap li a.twitter1 {
    background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -127px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.twitter1:hover {
    background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -204px;
    }
    .social-wrap li a.google-p1 {
    background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -254px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.google-p1:hover {
    background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -330px;
    }
    .social-wrap li a.rss1 {
    background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -381px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.rss1:hover {
    background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -454px;
    }

    .social-wrap li a.pinit1 {
    background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -508px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.pinit1:hover {
    background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -580px;
    }

    .social-wrap li a.linkdin1 {
    background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -635px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-wrap li a.linkdin1:hover {
    background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghnEZWGJZrASqJluxCznVyEIZPl0sKPoWSBGM8tnx7B4EwUrIfSGEA2xLhDVXd5k0ITJrnfN99D5TlwtCVdHodtrOLAMKCWzkJAqEbydOfsZl4eS78pCcTCPK4Pu93a8Bo00P9S2IRBMrP/s1600/social_sprites.png) no-repeat 0px -711px;
    }


</style>

    <div class='social-wrap'>
    <ul>
    <li><a class='facebook1' href='http://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
    <li><a class='twitter1' href='http://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
    <li><a class='google-p1' href='https://plus.google.com/+username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
    <li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
    <li><a class='pinit1' href='http://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
    <li><a class='linkdin1' href='http://www.linkedin.com/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
    </ul>
    </div>

এবার লাল কালারের Username লেখা জায়গায় আপনার সোস্যাল মিডিয়ার প্রোফাইল লিঙ্কটি দিন।তারপর সেভ করুন আশা করি সফল ভাবে আপনি এটি যোগ করতে পেরেছেন।
ভালো লাগলে বন্ধুদের সাথে শেয়ার করুন।সবাইকে জানার সুযোগ করে দিন।