How to Add Favorite/Bookmark Button to Blogger - 2 ways

<h2>Adding a Cross-Browser compatible 'Add to Favorites' or 'Bookmark this Site' button to Blogger sites for easy Social Bookmarking</h2><ul id="allmethods"><li><a href="#method1">Javascript based Favorite/Bookmark Button</a></li><li><a href="#method2">External Bookmarking Service</a></li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-u5b6VaWJ995Q_2oZDQeuC3uYva-RGFmvcT4JsVOn129clxqsW5F851Nji8avuY491TDlOWDUZmNf2Ta25w577uJ4YO1Iirgqnjh8pj5BWrF0-fYVPXYe7OW_MA8R13IRTwo8FYxAq-Y/s1600/how+to+add+a+favorite+or+add+to+bookmark+button+to+your+website+or+blog+via+geniushowto.blogspot.com+blogger+web+tutorials.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="how to add a favorite or add to bookmark button to your website or blog via geniushowto.blogspot.com blogger web tutorials" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-u5b6VaWJ995Q_2oZDQeuC3uYva-RGFmvcT4JsVOn129clxqsW5F851Nji8avuY491TDlOWDUZmNf2Ta25w577uJ4YO1Iirgqnjh8pj5BWrF0-fYVPXYe7OW_MA8R13IRTwo8FYxAq-Y/s1600/how+to+add+a+favorite+or+add+to+bookmark+button+to+your+website+or+blog+via+geniushowto.blogspot.com+blogger+web+tutorials.jpg" title="how to add a favorite or add to bookmark button to your websites and blogs" width="320" /></a></div>One of the coolest inventions on the web apart from the tremendously increasing information via blogs and websites is ability of the readers to follow their favorite food blogs, technology trends, viral videos and lots of helpful educational material available online that makes life a lot easier when compared to age without Internet,but due to the tremendously increasing Social Media and availability of several awesome guides and How to's on the same topic it creates a Information overload scenario due to limited time and social media distractions in such a case the single most powerful tool that comes to once's rescue is the bookmark or add to favorites button available under various names for various popular browsers like Google Chrome, Internet Explorer,Safari, Firefox, Opera, etc. Adding a Bookmark button ensures that readers see it bookmark it and keep coming back to the same info as it's readily available to them via their browsers. In this how to you will learn how to add a Favorite/bookmark button to your websites and blogs in 2 simple ways. <br /><div class="adsen"><ins class="adsbygoogle" data-ad-client="ca-pub-1512503513394857" data-ad-format="auto" data-ad-slot="3047709721" style="display: block;"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script></div><h3 style="text-align: left;">Instructions to Follow:</h3><div><ol><li><section id="method1"><h4>Adding Favorite/Bookmark Button using Javascript</h4></section>In this method we will add a cross-browser compatible add to favorites/bookmark this site button script to your blogger articles or site pages which will work without slowing down your site and will degrade gracefully in Javascript disabled websites as well. Start by <b>adding the below script just above your </body> tag in your blogger template.</b><div class="codeme"><pre><script type="text/javascript"><br /> $(function() {<br /> $("#bookmarkme").click(function() {<br /> // Mozilla Firefox Bookmark<br /> if ('sidebar' in window && 'addPanel' in window.sidebar) { <br /> window.sidebar.addPanel(location.href,document.title,"");<br /> } else if( /*@cc_on!@*/false) { // IE Favorite script via geniushowto.blogspot.com @Nell<br /> window.external.AddFavorite(location.href,document.title); <br /> } else { // webkit - safari/chrome<br /> alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');<br /> }<br /> });<br /> });<br /></script><br /></pre></div>Since the above script is written in Jquery you will need to have Jquery enabled on your website or blog and if you haven't then you can enable it by <b>adding the below code just above your </head> section of blogger template.</b><div class="codeme"><pre><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><br /></pre></div>Now it's time to place the bookmark or favorite button to your blog which you can do by <b>adding the below code wherever you want the bookmark button to display</b> on your site like below the title or in footer of the article. <div class="codeme"><pre><a style="{color:white}:link {color: white}:visited {color:white}:hover {color:white}:active{color:white};text-decoration: none;" id="bookmarkme" href="#" rel="sidebar" title="<span id="colormegreen">Bookmark this page or Add to Your Favorites</span>"><div style="background:rgba(0,156,255,.8);height:70px;width:235px;padding:1px;"><div style="background:url(http://i.imgur.com/s2lEgSh.png) no-repeat;width:64px;height:64px;float:left;"></div><div style="font-size:25px;padding:4px 0 4px 0;color:white;text-shadow:1px 2px rgba(0,0,0,.6);"><span style="color: red;">Bookmark this Page </span></div></div></a><br /></pre></div>You can <b>customize the "Bookmark text and title" as displayed in green and Red in the above code</b> according your desire. You can see a live demo of the bookmark button below: <div style="padding-bottom: 10px; padding-left: 34%; padding-top: 10px;"><a class="addthis_button_favorites" style="color: white}:link {color: white}:visited {color:white} :hover {color:white}:active {color:white}; text-decoration: none;" title="Bookmark this page or Add to Your Favorites"><br /><div style="background: rgba(0,156,255,.8); height: 70px; padding: 1px; width: 225px;"><div style="background: url(http://i.imgur.com/s2lEgSh.png) no-repeat; float: left; height: 64px; width: 64px;"></div><div style="color: white; font-size: 22px; padding: 4px 0 4px 0; text-shadow: 1px 2px rgba(0,0,0,.6);">Bookmark this Page</div></div></a></div></li><li><section id="method2"><h4>Adding Favorite/Bookmark Button using External Bookmarking Services</h4></section>External Social Bookmarking services are great as they come with lots of social bookmarking services like Digg,delicious and more apart from social sharing platforms like Facebook,Google+,Pinterest and Twitter. These social media bookmarking widgets also consist of a Add to favorites or simple bookmark buttons which do the similar function as that of the method-1. You can try <a href="http://www.addthis.com/" rel="nofollow" target="_blank">Addthis</a> which has a cool bookmarking button and comes with more than a million customizable social share icons. You can see a demo below: <div style="padding-bottom: 10px; padding-left: 34%; padding-top: 10px;"><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_favorites"></a><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_share"></a><a class="addthis_button_pinterest_share"></a><a class="addthis_button_compact"></a></div><script async="true" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511771110ccc639e" type="text/javascript"></script></div>Similarly you can try other external Social Sharing Services to include the bookmarking feature within your site but it has a demerit as well which you can read in the ending paragraph of this article. </li><div class="adsen"><ins class="adsbygoogle" data-ad-client="ca-pub-1512503513394857" data-ad-format="auto" data-ad-slot="3047709721" style="display: block;"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script></div></ol>You might be wondering about the demerit Method-2 has in using external bookmarking services and the demerit is nothing but slowed down pagespeed of your blog due to inclusion of external Javascript file which is very minimal in case of Method-1 but it has a solution as well to avoid slowing down of your webpages and it's simple <a href="http://geniushowto.blogspot.com/2014/07/how-to-do-defer-loading-of-javascript.html" target="_blank">defer loading of external Javascript files</a> which will load your external scripts only after whole page has loaded reducing burden of loading external JS while your whole page loads normally. Usually external social Bookmarking services include several services compiled together as a result they take time to load due to big file size. In either way these buttons help readers to bookmark their favorite pages with ease while it's a win win situation for bloggers and other website developers in terms of returning readers. </div>

How to Add Favorite/Bookmark Button to Blogger - 2 ways

Adding a Cross-Browser compatible 'Add to Favorites' or 'Bookmark this Site' button to Blogger sites for easy Social Bookmar...

Read more »

How to do defer loading of Javascript on websites and Blogs

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;">Deferring Javascript files and Scripts load time for Faster Page Speed and quicker loading Websites and Blogs as recommended by Google for making web faster</h2><ul id="allmethods"><li><a href="#step0">What is Defer load Javascript</a></li><li><a href="#step1">Page Speed Test</a></li><li><a href="#step2">Deferring Internal Scripts</a></li><li><a href="#step3">Deferring External Scripts (Google PageSpeed guideline)</a></li><li><a href="#step4">Deferring Multiple Scripts at a time</a></li><li><a href="#step5">What to defer and What not to</a></li></ul><div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J4UjBp5nH2L83tDK5IHLcUqBU0eJCEOvXTHhTLwdJBfe43PG1LwVAod_H2fv4JGBgYoMBXQlNlPbACSWhR2tlKbaKiZ5Ap9dcvXBpyfcyvoE3-YVeqq8CH9o6oLj2u8SAXR0kHnGSSQ/s1600/how+to+defer+parse+or+defer+load+javascript+files+and+codes+on+your+site+or+blog+via+geniushowto.blogspot.com+google+page+speed+recommendations.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="how to defer parse or defer load javascript files and codes on your site or blog via geniushowto.blogspot.com google pagespeed recommendations" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J4UjBp5nH2L83tDK5IHLcUqBU0eJCEOvXTHhTLwdJBfe43PG1LwVAod_H2fv4JGBgYoMBXQlNlPbACSWhR2tlKbaKiZ5Ap9dcvXBpyfcyvoE3-YVeqq8CH9o6oLj2u8SAXR0kHnGSSQ/s1600/how+to+defer+parse+or+defer+load+javascript+files+and+codes+on+your+site+or+blog+via+geniushowto.blogspot.com+google+page+speed+recommendations.jpg" title="how to defer parse or defer load javascript files and codes on your site or blog" width="320"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Defer parsing Javascript files and codes for Faster sites</td></tr></tbody></table>Whether you are a Web developer or a normal Blogger or a owner of a highly popular eCommerce site everyone wants their site to look awesome to attract more visitors and push in the user engagement by using Javascript to add in the necessary interaction to their site but in the process they make their sites super slow, as sites now are full of interactions and the user has to wait for the full site to load which is just a signal that your site's ranking is going to be very poor as your are not following the Google page speed guidelines which clearly ranks websites based on the starting load time a webpage takes to load, the faster it is the higher it is ranked. Now you don't have to remove all the Javascript based interactions from your website to make your site's Google Page speed score better but you can have both interaction and page speed at the same time by correctly deferring Javascript files and scripts on your website or blog. The key here is to defer the loading of external Javascript files and scripts and show the actual content first, that is faster initial load time while deferred Javascript files load at their own pace getting them ready by the time user scrolls down the content, that is user doesn't have to wait for the interactions to load first and can have amazing user experience at the same time. Now let's get started with defer loading your Javascript files on your site or blog.<br></div></div><a href="http://geniushowto.blogspot.com/2014/07/how-to-do-defer-loading-of-javascript.html#more">Read more »</a>

How to do defer loading of Javascript on websites and Blogs

Deferring Javascript files and Scripts load time for Faster Page Speed and quicker loading Websites and Blogs as recommended by Google for m...

Read more »