Facebook like Box Helps to get in Touch with Our Facebook Fan Page in an Easy Manner. So let's Stylify the Like Box And Attract Your Readers With Stylish Facebook Like Box.
So here i am Going To Show You How to Add this Awesome Facebook like Box Along with Follow Us Icons Widget to Blogger.It's better To Add this Widget On Your Sidebar.You Can Also Add this Below Your Posts.
Preview:.
So let's Follow the Below Steps To Add the Widget.
So here i am Going To Show You How to Add this Awesome Facebook like Box Along with Follow Us Icons Widget to Blogger.It's better To Add this Widget On Your Sidebar.You Can Also Add this Below Your Posts.
Preview:.
So let's Follow the Below Steps To Add the Widget.
Facebook Like Box with Follow Us Buttons
- Go to Blogger Dashboard > Design > Add a Gadget >Html / Javascript
- Now Copy the Below Code And Paste in it.
- Save the Widget.
<div class="socialbox mb-2" style="background-color: white; background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(240, 240, 240) 100%); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(233, 233, 233); box-shadow: rgba(0, 0, 0, 0.792969) 0px 4px 4px -4px; color: #373737; font-family: 'Segoe UI', 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 22.100000381469727px; margin-bottom: 25px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 6px 15px 10px 10px; position: relative; width: 275px;"><div id="sidebar-socials-upper" style="margin: 0px; padding: 0px;"><div id="fb_likebox" style="height: 156px; margin: 0px; padding: 0px; width: 300px;"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftechnouniversity&width=300&colorscheme=light&show_faces=true&border_color=%23f0f0f0&stream=false&header=false&height=258" style="border-style: none; height: 156px; left: -11px; overflow: hidden; position: relative; top: -7px; width: 300px;"></iframe></div><div class="clearfix" style="margin: 0px; padding: 0px;"></div></div><div id="sidebar-socials-more" style="margin: 0px; padding: 0px; text-align: center;"><a class="icon twitter" href="http://twitter.com/saikiransama" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -840px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="TheNextWeb on Twitter"></a> <a class="icon googleplus" href="https://plus.google.com/115081025762845243709/?prsrc=3" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -820px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="TheNextWeb on Google+"></a> <a class="icon spreadus" href="http://spread.us/settings/saikiransama" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -800px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="Spread TheNextWeb on Twitter"></a> <a class="icon flickr" href="http://flickr.com/saikiransama" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -700px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="GIB on Flickr"></a> <a class="icon tumblr" href="http://goodinblogging.tumblr.com/" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -720px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="GIB on Tumblr"></a> <a class="icon linkedin" href="http://www.linkedin.com/groups/Next-Web-54197" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -779px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 20px;" target="_blank" title="GIB on LinkedIn"></a> <a class="icon youtube" href="http://www.youtube.com/user/goodinblogging" style="background-image: url(http://cdn.thenextweb.com/wp-content/themes/gintonic/static/images/sprite_v6.png); background-position: -760px -450px; background-repeat: no-repeat no-repeat; color: #373737; display: inline-block; height: 19px; line-height: 1em; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -9999px; width: 19px;" target="_blank" title="GIB on YouTube"></a> </div></div></div>Now Change the Highlighted Url's and Usernames With Yours. And Save the Widget.You Can Also Change the Size and Images If You Know Some Coding. That's it Now Enjoy..
INspired by the next web
0 comments:
Post a Comment