Facebook LIke Widget for blogger with Ribbon Stylish Effect

Facebook, being the most used social networking site, we blogger have made many steps to get ahead in increasing traffic. Facebook really gives you more traffic regarding social media. I previously made an article on Why Your Traffic Is Not Improving Using Social Media , if you missed it then you should surely have a look at it. Traffic is key to success and it grows your adsense. It’s sounds yes…Ok I also made a previous artcile in Adding Facebook Like Widget To BloggerWith Customization, Check it if you missed it. Then today let’s make something new and have fun with facebook like widget to your blog.

This Facebook Likebox widget design from use of the new social like plugin of facebook developer code and css design code. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates. In this article, I would like to provide you two kind of widgets, choose the best to your blog. You need to follow two steps, One adding a gadget to your blog, and adding the code into your HTML.

  1. Login into blogger.com
  2. Select your blog if you have many
  3. Then migrate to Layout –> Click on “Add A Gadget
  4. You get a windows open then find for HTML / JAVASCRIPT and click “+” button
  5. Then copy the below code and paste it there and make your editing.
  6. Then click on save.
  7. You may visit you blog and have fun. Remember you can also move your widget and choose a better place for your popular post widget with scrolling effect for blogger.

WIDGET CODE PROCESS 1 :

    <div class=”fb-wrapper”>
    <div class=”fb-inner”>
    <div class=”ribbon-wrapper-blue”>
    <div class=”ribbon-blue”>Facebook Like</div>
    </div>
    <center><iframe allowtransparency=”false” frameborder=”0″ scrolling=”no” src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/bloggerbulk&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335″ style=”background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;”></iframe>
    </center>
    </div>
    </div>

    Hope you made the first part of our tutorial successful. Now let’s have a look into the second part.

    MUST  READ How To Create A Backup To Your Template Must Read
    Now,

    • Goto Template –> Edit HTML ( Note You Should Always Have A Backup To Your Template )
    • Then search for ]]></b:skin> use  ( CTRL + F to find it quickly )
    • Choose your CSS Code and copy the code and paste it before it / above it.
    • Click On Save Template
    • Visit your blog and have fun.

    FIRST EXAMPLE CSS CODE :

    Facebook_like_widget_for_blogger_with_ribbon

     

    .fb-wrapper {padding:5px; margin: 50px auto; width: 276px; height: 360px; border-radius: 0px; position: relative; z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1pxsolid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}.fb-inner {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff} .ribbon-wrapper-blue { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;} .ribbon-blue { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #306EFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF)); background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF); background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF); background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF); background-image: -o-linear-gradient(top, #306EFF, #3BB9FF); color: #fff; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3);} .ribbon-blue:before, .ribbon-green:after { content: “”; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px;} .ribbon-green:before { left: 0;}.ribbon-green:after { right: 0;}

    SECOND EXAMPLE CSS CODE :

    Adding_facebook_like_widget_to_blogger_with_banner

    .fb-wrapper {padding:5px; margin: 50px auto; width: 276px; height: 360px; border-radius: 0px; position: relative; z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1pxsolid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}.fb-inner {border:1px outset #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #f9fafe;-webkit-box-shadow:0 0 0 1px #f9fafe;box-shadow:0 0 0 1px #f9fafe
    } .ribbon-wrapper-blue { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; opacity:0.8;filter:alpha(opacity=80);} .ribbon-wrapper-blue:hover { width: 90px; height: 90px; overflow: hidden; position: absolute; top: -4px; right: -4px; opacity:1.0;filter:alpha(opacity=100);}
    .ribbon-blue { font: bold 10px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(275,275,275,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 10px 0; left: -7px; top: 18px; width: 130px; background-color: #068cfd; background-image: -webkit-gradient(linear, left top, left bottom, from(#068cfd), to(#068cfd)); background-image: -webkit-linear-gradient(top, #068cfd, #068cfd); background-image: -moz-linear-gradient(top, #068cfd, #068cfd); background-image: -ms-linear-gradient(top, #068cfd, #068cfd); background-image: -o-linear-gradient(top, #068cfd, #068cfd); color: #fff; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); box-shadow: 0px 0px 3px rgba(0,0,0,0.5);} .ribbon-blue:before, .ribbon-blue:after { content: “”; border-top: 6px solid #068cfd; border-left: 6px solid transparent; border-right: 6px solid transparent; position:absolute; bottom: -3px;} .ribbon-blue:before { left: 0;}.ribbon-blue:after { right: 0;}

    Choose the best widget to your blog. And remember stay with us on social media for more amazing tutorials on blogger widgets and facebook tips.

    CUSTOMIZATION OF CODE :

    • If you have any problem like not visible of the banner, at the exact location of the widget, then you need to edit the highlighted green colour code , and also remeber while editing remove ‘ – ‘ and use as top: 3px, right 3px;
    • If you use widget one and want the exact look of the widget as shown in image, then you need to edit the WIDGET CODE , find for Facebook Like and replace it with Facebook.

     

    HAPPY BLOGGING 
    USE THE COMMENT BOX BELOW IF YOU HAVE ANY DOUBTS

    Article By Tharun

    Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

    Comments

    Leave a Reply