Articles by "Blogger Widgets"
Showing posts with label Blogger Widgets. Show all posts

As salaam aleikum ndugu zangu wasomaji wa blog hii, kutokana na ombi la ndugu yetu Mfangavo kuhusu kujua jinsi ya kuweka sticky Ads basi nimeonelea niandae makala kamili ili tunufaike sote kwa pamoja wenda na wewe ulikuwa mmoja miongoni mwa watu waliohangaika kujaribu kufahamu jambo hili ila jitihada zako zikagonga ukuta, basi leo wacha nikupe suluhisho la jambo lako hilo kuwa makini katika usomaji wako ili upate kunielewa vema.

Hapa chini nimekuwekea code ambazo utaziweka katika blog yako katika upande wa Layout




<div style="left:0;position: fixed;text-align:center;bottom: 0px;width:100%;z-index:9999;"><center><a href="weka link ya tangazo lako">
<img src="weka code ya adsense hapa/ weka link ya picha ya tangazo lako">
</a></center></div>



Twende sawa sasa hizo code unazoziona hapo juu ndio code tutacazo zitumia katika kukamilisha jambo letu hili copy code hizo  kisha nenda katika Layout ya blog yako kisha bonyeza Add a Gadget kama uovyoona katika picha hapo chini
 Kisha chagua Gadget iliyoandikwa HTML/JavaScript kama unavyoona pichani hapo chini, hapo ndio tutakapozikweka code zetu
 Kisha utaona uwanja ambao hauna kitu pacte/pachika code zako ulizozikopi hapo juu kwenye sehemu ya Title usiandike kitu, edit/rekebisha code zako kisha bonyeza sehemu iliyoandikwa save
 Shabbash mpaka kufikia hapo utakuwa umefanikiwa kuweka Tangazo mnato/mgando katika blog yako hata kama mtu atafungua post ataliona tangazo hilo kama unavyoona pichani hapa chini


Bila shaka nimejitahidi kurahisisha katika kuelezea Jambo letu hili kama utakuwa kuna sehemu hujaelewa basi unaweza kuniachia maoni yako hapo chini nami nitajitahidi kukusaidia kadri nitakavyoelewa

makala hii Imeandikwa na Riyadi Bhai Sambaza kama Ilivyo kama unahitaji kukopi makala zetu zilizopo katika blog hii wasiliana nami kwa email RiyadiBhai@gmail.com


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...