আসসালামু আলাইকুম , আজকে আমি আপনাদের জন্য দারুন একটি নতুন সোশ্যাল ট্যাব ওয়েডগেট নিয়ে এলাম আশাকরি আপনাদের সবার খুব ভাল লাগেব । আমি আশাকরি এই ট্যাব ওয়েডগেট এর আগে দেখেননি । যাই হোক নীচে থেকে এই নতুন ব্লগার সোশ্যাল ট্যাব ওয়েডগেট টি ডেমো সহ কিভাবে আপনার ব্লগে যুক্ত করবেন সেটা দেখে নিন ।








ডেমো দেখা হয়েগেল নীচে থেকে দেখে নিন কিভাবে এই ট্যাব আপনার ব্লগে যুক্ত করবেন । খুবি সোজা টিপস গুল দেখুন ।



  • প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন ।
  • ড্যাশবোর্ড থেকে Layout → Add a Gadget এ ক্লিক করুন ।
  • এবার HTML/Javascript এ ক্লিক করে Content ঘরে নীচের কোড গুল বসান ।




<style>
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* CSS Code Start */
 
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 3px;
        /*distance between tabs*/
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border: 1px solid #CCC;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
        border-radius: 3px 3px 0 0;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        border: 1px solid #B7B7B7;
        background: #F0F0F0 url(http://1.bp.blogspot.com/-XoUjhUwwcsA/VIh-sZtQNbI/AAAAAAAADwk/ECGNslzqmAw/s1600/hb-tabbg.gif) 0 -50px repeat-x;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: white;
        border: 1px solid #B7B7B7;
        border-bottom-color: white;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #B7B7B7;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#view1">
            <img src="http://1.bp.blogspot.com/-u4mNaIL8dp0/VIXIENew_CI/AAAAAAAADvg/ne3Aol0ASeI/s1600/helperblogger.com-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view2">
            <img src="http://2.bp.blogspot.com/-mzuxb3eVkaQ/VIXIE4zdcPI/AAAAAAAADvw/lwTtNBnT4zQ/s1600/helperblogger.com-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view3">
            <img src="http://1.bp.blogspot.com/-rrTnEmJBPeI/VIXIELyFe_I/AAAAAAAADvk/TyNg-Jocujc/s1600/helperblogger.com-gplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view4">
            <img src="http://4.bp.blogspot.com/-oiG2eSzC0ZY/VIXIEEtXGjI/AAAAAAAADvo/0jbevzq2uog/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="view1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fesobndhu&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
    </div>
    <div id="view2">
        <div id="twitter-box"></div>
        <script>
            var tw_user = 'asobondhu';
            var tw_width = 260;
            var tw_height = 250;
            var no_face = 8;
            (function() {
                var tw_box = document.createElement('script');
                tw_box.type = 'text/javascript';
                tw_box.async = true;
                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
            })();
        </script>
    </div>
    <div id="view3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/106527290580119996124" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="view4">
        <a href="http://pinterest.com/esobondhu/">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
    <div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"><a href="http://www.esobondhu.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
    </div>
</div>



উপরের হাইলাইট নাম গুল মুছে সেখানে যথা ক্রমে Esobondhu মুছে সেখানে ফেসবুক user নাম দিন এবং asobondhu মুছে সেখান টুইটার user নাম দিন এবং 106527290580119996124 মুছে সেখানে আপনার গুগল+ user নাম দিন আবার esobondhu মুছে সেখানে আপনার pinterest user নাম বসিয়ে দিন ব্যাস Save এ ক্লিক করে বেরিয়ে আপনার ব্লগ দেখুন ।


আশাকরি পোস্টটি আপনাদের ভাল ও কাজে আসবে । কোন রকম সমস্যা হলে নীচে কমেন্ট করুন পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

শেয়ার করুন :→

একটি মন্তব্য পোস্ট করুন Blogger

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

 
Top
Blogger Widgets