Articles by "Gadget"
Showing posts with label Gadget. Show all posts
Jinsi ya kuweka facebook coment katika blog yako fuata hatua hizi hapa chini leo sina maneno mengi maana hata hii makala naandika lakini sina mood poa ya kuandika so nikikosea nikumbushe kwenye comment

kwanza ingia hapa https://developers.facebook.com/docs/plugins/comments/ kisha fungua app kulia juu utaona set project bonyeza hapo kisha fuata maelezo

ukishafanikiwa bonyeza tena hii link https://developers.facebook.com/docs/plugins/comments/ kisha nenda sehemu iliyoandikwa  Comments Plugin Code Generator 

kisha bonyeza get code 
Sasa tafuta code hii <body> kisha copy hizo code za kwanza kisha paste juu ya code hii <body>

kisha copy code hizo za mwisho weka/paste sehemu ambayo unahitaji facebook comment box itokee

nimeshamaliza maelezo yangu 
Habari, baada ya kupata maombi kadhaa kutoka kwa wasomaji wangu kuhusu kuwajulisha kuweka button ya whatsapp share katika blog zao basi leo natimiza haja zenu japo kuwa nimechelewa kidogo hili ni kutokana na kuwa busy na shughuli za kujitafutia riziki za kila siku.

mfano wa button hiyo ni kama inavyoonekana pichani
ndio hizi code hapa chini ndio kwaajili ya whatsapp button share hivyo zicopy na kwenda kuzipaste katika html ya blog yako sehemu ambayo ungependa button hiyo ionekane


<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<a class="addthis_button_whatsapp"></a>
lakini pia kama unahitaji kuweka button share zote kama hapo pichani tumia code hizi hapa chini

<div class='addthis_toolbox addthis_default_style '>
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
        <a class='addthis_button_facebook_share' fb:share:layout='button_count'/>
    <a class='addthis_button_facebook_send'/>
        <script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<a class='addthis_button_whatsapp'/>
    <a class='addthis_button_tweet'/>
    <a class='addthis_button_google_plusone' g:plusone:size='inline'/>
    </div>
    
  <script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
Code zote ni kwa msaada wa website ya Addthis

Whats up people, Today I have something very special for you :)
Presenting a set of 15+ custom styles for official facebook likebox widget and I am sure you will definitely like it. Facebook likebox is plugin which is used by almost every website and blog but the main problem is that facebook developers don't provide much options to customize it as you want. So here, By using some CSS code, I have managed to customize background and other things. Now without wasting time lets have a look on them but before that we will see how to add it to blogger blog.

How to add it to blogger blog
Copy code of your desired style and paste it in Notepad
Replace Riyadibhai with your facebook fanpage username, Copy new code
Now login to your Blogger Dashboard
Select your blog
Go to Layout > Add Widget > HTML/JavaScript
Paste the code
YaY!!! You are done :)
Now lets have a look on styles
Style 1

<style type="text/css">
    .hbfbOuter {
        background-color: #F4F4F4;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #000000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 2


<style type="text/css">
    .hbfbOuter {
        background-color: #FFDFFF;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #AD72A8;
        -webkit-box-shadow: inset 0 0 10px #AD72A8;
        box-shadow: inset 0 0 10px #AD72A8;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FRiyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 3



<style type="text/css">
    .hbfbOuter {
        background-color: #CBFFD6;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #447444;
        -webkit-box-shadow: inset 0 0 10px #447444;
        box-shadow: inset 0 0 10px #447444;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>



Style 4


<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-63WM6qQ8PIw/VJkf_Hw5QxI/AAAAAAAAD0Q/Mo6RsQ0kvDI/s1600/hb-custom-facebook-likebox1.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.Riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 5

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-tvv61adlm6s/VJkgAXNUFjI/AAAAAAAAD0w/zJpCfBb3bdE/s1600/hb-custom-facebook-likebox2.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 6

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-fE_VY-EqHQo/VJkgA4vOuYI/AAAAAAAAD0o/mZ6iRp4SqoA/s1600/hb-custom-facebook-likebox3.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 7

<style type="text/css">

    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/--DbsKDS3yns/VJkgBu9fXnI/AAAAAAAAD04/ioyHqXCVgXQ/s1600/hb-custom-facebook-likebox4.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 8

<style type="text/css">

    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-gsq-_nZ2cfM/VJkgDD0O6AI/AAAAAAAAD1I/n49o7hMuBUc/s1600/hb-custom-facebook-likebox5.jpg);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #00000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow: inset 0 0 10px #000000;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 9

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-LgoaT2r91e8/VJkgDv_C98I/AAAAAAAAD1U/xWUVG0UhgJ4/s1600/hb-custom-facebook-likebox6.png) repeat-y;
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div>

Style 10

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-sSZv99SpRBc/VJkgDppxALI/AAAAAAAAD1M/wv7S0tkCSqs/s1600/hb-custom-facebook-likebox7.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 11

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://3.bp.blogspot.com/-vIOKkGyw8DI/VJkgEUHKEvI/AAAAAAAAD1Y/k_sNFc_UI3Q/s1600/hb-custom-facebook-likebox8.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 12

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-qD_cJrEjZFY/VJkgE6dnX9I/AAAAAAAAD1k/DwMbNzbT2Yg/s1600/hb-custom-facebook-likebox9.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 13

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://2.bp.blogspot.com/-x8LVc9d6iT8/VJkf_kXB2bI/AAAAAAAAD0c/mH6k8IFGbac/s1600/hb-custom-facebook-likebox10.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 14


<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://3.bp.blogspot.com/-BQpSUKysBow/VJkf_ZeFIGI/AAAAAAAAD0U/lUOQzMPSI7A/s1600/hb-custom-facebook-likebox11.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 15

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-IrlH1WC4PQg/VJkgACMXvrI/AAAAAAAAD0k/N6MiD9MjHog/s1600/hb-custom-facebook-likebox12.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 16

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://1.bp.blogspot.com/-t-PL9gabCX0/VJlbAVGoGdI/AAAAAAAAD14/pepygmu4vWo/s320/hb-custom-facebook-likebox13.jpg);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Style 17

<style type="text/css">
    .hbfbOuter {
        background: urlundefinedhttp://4.bp.blogspot.com/-dRvX7Hr_3U4/VJlcZF3go0I/AAAAAAAAD2E/XVEEJ8kRpdY/s1600/hb-custom-facebook-likebox14.gif);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">

    <div class="hbfbInner">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Friyadibhai&amp;width=242&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.riyadibhai.blogspot.com/" target="_blank">Get this widget</a></div></div>

Credits
Patterns and backgrounds -
subtlepatterns.com
colourlovers.com
google

Widget -
Riyadi Bhai

Note - If you want to share this widget on your blog then you have to link back to this article.
Final Words
Hope you have liked it friends, if you are getting any trouble while installation of widget then feel free to comment below :) I will respond as soon as time allows.

Have a nice day..
  1. Happy Blogging...
Blogger gives you the opportunity to promote your content via many social networks. Back in year 2009, when WhatsApp was launched, no one knew that it would challenge the graph of Facebook. In the year 2013, WhatsApp was declared as the most used social network, leaving Facebook behind. Today in this article, we will show you how to add whatsapp share button in blogger.

Here is an illustrated graph of WhatsApp versus other social networks
After witnessing its increasing popularity, blogger now provides you the opportunity to add WhatsApp share button to your blog. After telling you how to add various widgets in the blog, in this article we will tell you about WhatsApp widget.

What Should You Add Whatsapp Share Button:

With the increased use of mobile phones by each passing day, it is necessary for you to make the best use of your phone by optimizing it and enabling it so share sites, writing content or anything you liked and want to share with your friends as well.

In the beginning WhatsApp was only a mobile feature but its increasing fame led to its availability on web as well. Now, just think about how beneficial it would be for you if one of your subscribers like any article on your blog and he shared it via WhatsApp, more the people view his shared article, more your website traffic will boost.


How to Add Whatsapp Share button in Blogger:

Before adding WhatsApp share button to blogger, first we will discuss its position. It is recommended to add such traffic boosting widgets at the end of your article instead of putting them to the side bar running along the entire length of your blog.

You can add WhatsApp share button with the help of following method:

Move your mouse pointer and go to Template >> Edit HTML. Look for your old share buttons. Add the following code with you previous share buttons. BE KEEN WITH THE CODES!


<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://dl.dropboxusercontent.com/u/7330191/whatsapp-sharing.js&quot;;h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End -->
Preview your template and then save it.

Once above all steps are executed successfully it means that you are successful in execution of the task assigned. Now you could preview the blog and need to save the changes to the template by pressing the orange “Save template” button.