Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it’s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.
No HTML is required for hoverbuttons; all you have to do is load the JavaScript listed below. Once you have this installed, images should show a Pin It button when hovered over. (If you're already running pinit.js, just add the data-pin-hover="true" attribute to the existing SCRIPT tag.)
1. Go to your blogger dashboard>>Template>> Edit HTML
2. and find the following code in your template code.
</body>
3. and put it just above your closing </BODY>
tag. (provided by pinterst).
4. Click on save button and you're done..!!!
<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Note:- If you are already using pinterest pin it button then just add following attribute code in pinterest script tag.
data-pin-hover="ture"
You can see complete script above in step 3.
Note:- If you're not already running pinit.js on your page, please visit the Widget Builder to find out more about the Pin It button and the rest of Pinterest's fleet of handy widgets.
CSS background images, images that are under 80 by 80 pixels in size, images that have the data-pin-no-hover="true" attribute set, images that have the nopin="nopin" attribute set, and images whose SRC attribute starts with data: won't show hover buttons.
You can definitely still use Pinterest regular Pin It button, and we think these new hover buttons are pretty nice, too..!!
<style>
.mbt-subscribe-box-email-field {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2F4GxQ9WLvTwnP_p1aPkl0sqqsyq6ybxsLkNsZo5fk4UVM9CVo4cp8Jvr2e-ZKW57h6bHp2CBgY-UmePsB-HdykNst8z7rnpzYv-2KAdPDGmxfnvz4W8aEXU79FnFJLiIUq1cZbixrrhi/s1600/sprites.png) no-repeat 0 -28px;
width: 280px;
float: left;
color: #777;
margin: 0 0 10px 0;
padding: 10px 30px;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.mbt-subscribe-box-email-button {
background: #09f;
width: 280px;
float: left;
color: #fff;
font-family: 'Verdana, Arial;
font-size: 16px;
font-weight: bold;
padding: 10px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-transform: small-caps;
}
.mbt-subscribe-box-email-button:hover {
background: #303030;
}
</style>
<!-- Social Profile Icons Start-->
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/bl0ggertricks' imageanchor='1' target='_blank' title='Grab Our Rss Feed'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXp4ZAlOCNbC-CMiKH12jN_dUJz745KxZBwjfSo-jBPQ-Pu_0bugB6sccHJHtflzYyCffKAsLueYy1mZaMALb2kwO81qPCGQHKPo6i59cwnsAuT0hU-LbzbEXXEmRL80vuCGinAVFx37D/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&loc=en_US' imageanchor='1' rel='nofollow' target='_blank' title='Get Free Updates Via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ExcFDVM5Y7tELnZtNvSs13GtMqL4LFDmpv6aljs3v2l4gdI2uV6_SQeWDneb8SyYYl27XpL2HeWaimxX2dj1CSLZ6lHJLbXnKFA3-WLgVedxhZ4NqBjIveAyVVpNFVu0GKh_5CTrDb82/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/mybloggertiks' imageanchor='1' rel='nofollow' target='_blank' title='Like Our Facebook Page'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWqyCjbEt4SYV3uKTrxOhq10Ok3vmt4wpu6vbfgV-ScS56BI5C8pr-DeVrHRvjwm-xIU5niIbczZXLK-ZzeBwNjCXHh5n8FO6Ekcaozm4_Et3tPBuNPVjeZF5SmpcUnJNW4iSHG79ea91/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/mybloggerstricks' imageanchor='1' rel='nofollow' target='_blank' title='Follow Our Updates On Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYiJcamdaqiZ6EtK3HJfQTc46AGWea5RFXUo_jMRi_P0IenullSj0vQSk-4uun5viukybD-fqixRDoE8l9j1Hy9suvzvZ3KrvEtgww0aJDuwF_GDlSsMF842EjRBaup26Qx9XFZ6IjJpL/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/108204301284356444972' rel='nofollow' target='_blank'><img alt='Follow Me on Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/mybloggertrickx/' rel='nofollow' target='_blank'><img alt='Follow Me on Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>
<!-- Feedburner Chicklet Start-->
<center>
<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&fg=444444&anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>
<!-- Social Profile Icons End-->
<!-- Feedburner Chicklet Start-->
<!-- Twitter Follow Button Start-->
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/mybloggertriks" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MyBloggerTricks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Twitter Follow Button End-->
<!-- Facebook Like Button Start-->
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/mybloggerstricks' data-send='true' data-show-faces='false' data-width='280'/>
</div>
<!-- Facebook Like Button End-->
<!-- Google plus Badge Start-->
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/108204301284356444972" data-layout="landscape" data-rel="author"></div>
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/103598710564060829080" data-layout="landscape" data-rel="publisher"></div>
</div>
<!-- Google plus Badge end-->
<!-- Email Subscription Start-->
<center>
<div class="mbt-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks" class="mbt-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Bl0ggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="mbt-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address"/><input class="mbt-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center></div>
<!-- Email Subscription End-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<style>
.Mbt-Social-metro {
width: 960px;
float: left;
margin: 0;
padding: 1em 0;
}
.Mbt-Social-metro ul {
margin: 0;
padding: 0;
}
.Mbt-Social-metro ul li {
list-style: none;
list-style-type: none;
padding: 0;
text-transform: none;
margin: 0;
float: left;
display: inline-block;
width: 20%;
}
.Mbt-Social-metro ul li a {
font-size: 80%;
color: #fff!important;
display: block;
}
.Mbt-Social-metro ul li a:hover {
color: #000!important;
background-color: #999;
text-decoration: none;
}
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmLHyJhbestPKm-46_S0K7BbCkYmBGNMFM4SpFWrDTLdjzIfsoUbS82G5zRmKbk3pj4kdy7ksxd07WO6VsufUE2sBsl_jaj7OT7tpfzePtM-rfoxMOQfhxZGoT_lUNJ-CTa5rsE5AzLX5/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;
background-size: 20px;
padding: 10px 50px;
}
.Mbt-Social-metro ul li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZZlz8L4ggtv6HJsPCR1Atj5FwkbgTfGJy_BPyhuq4EDcGGsfq1mCZLjYrpPWLuL9JK-_QeC5Xy25GqjbPfoCQdqStJ7P5KXX81GebcqgMjcPM60QtYQwZQaI9ba6GdZVZ8ZMKWmgkngY/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 20px;
padding: 10px 50px;
}
.Mbt-Social-metro ul li .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvq0fcyX-LkkkHzZ2O_HQaBNVIB8rjx2lyCY4lyqDIFxEYKSlQwGzBGhZjD68wT1-cPQ9rFVemgy0NGRFPsCaIAIQ_r55pqdSVFdfLj-kjfh6FizatJrr3dZONfW099m0cL3wUtgmFHTXZ/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;
background-size: 20px;
padding: 10px 50px;
}
.Mbt-Social-metro ul li .google {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZs_K6BCMx4VvvVhvixANxgMes66cwpRR9dfrPExJrzcBVrROpUg8t-Z-M4ENwVO8fgY2uPYstQdgdw0Fbzwf_gVSCrPeFhDZd8bZH5i6od2eZnGsvOH7ZP5sxs2JZGsFATCF_XRVcTMCf/s1600/google.png") no-repeat scroll 10px center #D44937;
background-size: 20px;
padding: 10px 50px;
}
.Mbt-Social-metro ul li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWQ7lcTxILSrdGUP4WTFXqjjWAbQfRwHdPI0cKOOajmSuGuS-N_bUBUiGPBAc-HqbZAx8iK-YDcRjFeYlSMyvWdTiq1uxTEH4Iu_7fuuJOgPxw4Q-mofcc3CynXur8S7o8KfYvRn3UFMn/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
background-size: 20px;
padding: 10px 50px;
}
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.Mbt-Social-metro ul li {
width: 50%;
};
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.Mbt-Social-metro ul li {
width: 50%;
};
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li {
width: 100%;
};
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggertricks'>Subscribe our Feed</a></li>
<li><a class='twitter' href='https://twitter.com/mybloggertriks'>Follow me on Twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/mybloggertriks'>Find me on Facebook</a></li>
<li><a class='google' href='https://plus.google.com/#'>Join me on Google+</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/mybloggertriks'>Connect with LinkedIn</a></li>
</ul>
</div>
Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. It’s about how to add a pop out facebook like box with slide effect. I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.
1. Go To your Blogger Dashboard>>Template>> Edit HTML
2. and click on HTML Code then press CTRL+F and Find the Following code.
</head>
3. and paste the following jquery link before </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
4. Find the following code.
</body>
5. and paste the following code before/above </body>
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqF9i3F2Sg5ptxB5Wg97HI8pzpRWnsMi-FOtoU6kwICrNeZeOnoIPEwpFNR_9LgmFNi7CP8FePjKkb4d4eYENToqVrTR94QZryqO_BMd7C0AGPokcVsOJdF7uw6mMz3BwkltNiU3OBIeq/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = 'medium'; // Duration of Animation
w2b('#fbplikebox').css({right: -250, 'top' : 350 })
w2b('#fbplikebox').hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b('#fbplikebox').show();
});
})(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'></div>
<iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>
http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&
6. Replace “Bloggertricks” with you facebook page user name highlighted above in blue.
7. Click on save button and take your blog new look..
Visit your Blogs to see it floating at the right side of your webpage. The widget was created by Harish and we reshared at BLOGGERTRICKS. If you wish to change the direction, width, height, background. of the Likebox or make the image changes then do let me know. Thanks for reading our post.
Today we will learn how to add a face book like box by using javascript to Bloggers Blog. Social networking websites like Face book, Twitter and Google+ are providing the custom follow and like boxes which helps every blogger. Now social networks are one the most important part of blogging. Face book like box help you to extend your reach and connect to the audience by proving them a mean to join you on face book. It does not only help you to grow your community but traffic as well. If people like your content they will voluntary like your Face book page. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Face book developers have made this thing very easy to integrate a Face book like box in to your Blog by adding a few lines of code in it. We have already covered in our previous article how you can add a Face book like/fan box to blogger blog using Iframe.. you can see live demo on sidebar of our blog.
1. First you need to go Face book Developer Page & Create your fan box by using your page user name and page id. (Get your Face book page user name & id URL by Visiting your Face book fan page.)
2. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
3. Click on get code (you will get code look like screenshot below)
4. Go To Blogger Dashboard>> Template>>Edit HTML
5. Press CTRL+F and Find the Following code. “</body>”
6. and paste 1st code before/above </body>
7. finally click on save and you are done first step.
8. Go to your blogger layout and click on add a gadget and choose HTML/JavaScript
9. Paste 2nd code in text area.
10 write your Desired name in title section( If you hide face book like box Header while you creating this. if you no hide while you creating like box so your don’t need write gadget title.)
11. Finally click on save take new look of your blog..
For Further Help See Video Tutorial. Enjoy! Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging..!!
Guest Post - Our host is Eric Santos, (Has explained Social Popularity.)The spawning of internet has led to the explosion of social media because many people are joining it in hordes. With over a billion members, sites such as face book have become overcrowded. Many companies are jostling for marketing space in the online sphere and the techniques of attracting the users are becoming stale. The Saturation of the market calls for innovative methods which could attract traffic to the website. Recent Market research has shown that the fan base of major companies on social media is dwindling. Many corporations are trying to devise new strategies for retaining the users and adding new ones.
In past people used the advertising platform as a means to enhance the customer base because it ensured round the clock presence. The medium is losing its sheen because people are indifferent towards the advertisement appearing in the sponsored section. Companies are making it more complex; however it does not have any results. Therefore, they are focusing on enhancing the ranking of the website in the organic search engine listings.
Initially an explosive growth of the social media buoyed the people to extend the number of followers; nevertheless it has only become a numbers game because many people are not even bothered about the regular updates. Apps like DWIBBLES ( dwibbles ), Prismatic (getprismatic) could become solution for the users because it is tailor made for them by customizing the updates that users actually want to see. Undesired updates are rejected by the application because they are too many and tend to clutter the mindset. Apps like DWIBBLES are responsible for bringing in new and relevant feeds to the users.
The ticker and the graph are introduced by the face book to ensure that organic sharing is accomplished without pushing a button. Using a third party application, one can limit the number of updates to a great extent. To enhance the customer base, one has to be innovative and make the people interactive on the status updates. Although, a community might have many members but all of them are not interested in the products or services unless they are cajoled into.
The solution is not to acquire the different platforms but deploy novel ideas to attract the number of followers. They should be responsive unlike the present scenarios where their interaction is limited to only the likes on the updates. Photo sharing is one of the best methods to inculcate interest among the users so that they could participate in discussion.
</head>
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
</body>
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisOrnament'/><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:'
<data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script></div>
Facebook Page Is Also Good Way To Promote your Blog And Increase Readers. This Facebook Box Will Help Your Visitor To Become A Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page (This Is Better Than Email Newsletter). Follow These Steps To Add Facebook Like Box To Blogger Blog. See how many users already Liked your page.
Like your Facebook page with just one click, without having to visit the page.Read your page’s recent posts (if you choose to display them).Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers. Follow the Simple Steps. in my previous I share with Facebook Activity Feed Widget Check out the our previous post.
1. Go to Facebook Developer Page
2. Get your Facebook page id URL by Visiting your Facebook fan page.
3. and paste your fan page url in Facebook Page url box like screen shoot below.
4. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
5. Click Get Code button when done. You’ll be given two codes, titled iframe and XFBML. You only need the iframe code.
The Iframe Code Should Look Like This . Don not Copy This Code
6. Copy the code (the code provided by Facebook, not the sample code in no.5).
7. In Blogger Dashborad, go to Layout and click a Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box. Save and view your blog. For Further Help See Video Tutorial. Enjoy!
Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging.
july 2003 - Present
My skills include HTML, CSS, PHP ,MySQL,JavaScript,jQuery,Open source development, and Cyber security. I also have experience with SEO and online advertising.Office and records management, database administration, customer support, travel coordination.Microsoft productivity software (Word, Excel, etc),Windows...