July 2012 ~ Blogger Tutorials

Saturday, July 14, 2012

Add the Recommended Post Slide out Widget

To add the widget to your blog, you can use this one click installer.

<div  id="bpslidein" style="display:none;"> <div  class="help">?</div><div class="expand">+</div>  <div class="close">X</div> <p>Recommended for  you</p> <div id="bpslidein_image"></div> <div   id="bpslidein_title">Loading..</div> </div>  <script>  if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof  bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof  bp_dom_loaded=='boolean')bp_dom_loaded=false;else var  bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function  bp_async_loader(src,callback,id){var  script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var   previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var   newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else  newcallback=callback;if(bp_dom_loaded){newcallback()}else  bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var   head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof  bp_domLoaded!='function')function  bp_domLoaded(callback){bp_dom_loaded=true;var  len=bp_onload_queue.length;for(var  i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")}  </script> <a  href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html"  target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaw5YuhdVUehH1cVdV0VdwQtIWfhK362nQomCXi0Lve-KDum152rXES0dxTwsOhVhHFd1VX2jQJdFcWxOIB65i30vCwhwdioFQw92z6tIvNE6mgyCTOhIR2rIt7kfXc4pWs_FMd4-4vLo/I/bloggerplugins.png"  alt="Recommended Post Slide Out For Blogger" /></a>

Customizing the Recommended Slide out

1. End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder
e.g.: <div id='bpslidein_place_holder'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.
In your template Find,(You will have to expand the Widget Templates)

<div class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-1'>

<data:post.body/>

Immediately below any of these, add the following snippet and save our template

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Now when the reader scrolls down to this div, the slide will open up.
2. Customizing the Look and Feel of the Slide out.
You can obviously style the Recommended Slide out. But before you do that, you have to add this variable definition to your template
<script>var bpslidein_custom_css=true;</script>
This should be added somewhere above the Slide Out Widget. If this variable is not set, a default StyleSheet will be used to spice up the Recommended Slide out.
Once this variable is set to true, you can add your own CSS definitions. You can add your CSS at Template Designer > Advanced > Add CSS
This is the default set of Style definitions applied to the Widget. You can modify them and use it.

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

3. Other Stuff that you can edit
You can edit the Title of the Widget and the Loading text by editing the Widget Content.

One Time Facebook Pop Up Like Box For Blogger

1:17 PM Blog-Tutorials No comments

One Time Facebook Pop Up Like Box For Blogger

Posted : Friday, January 27, 2012 | Post Author : Paul Crowe | Categories: Blogger, Facebook, Gadgets 85 comments

0 0 Stumble0 New

Last September i published a post showing How to add a one time Email Rss subscription pop up on Blogger.Since then i have had a number of requests for a similar gadget but with a Facebook page like box instead of the Email form.So in this post we have just that.When a visitor lands on your blog a pop up box will appear with the option to like your Facebook page.The gadget will only appear on the first visit so your readers or you wont have to see it every time.

For this i have used the gadget from the great MyBloggerTricks making just a few small changes.Check out the demo and screenshot below.

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Add a gadget > Choose html/javascript.

Step 2. Copy and Paste the following code into the Html/Javascript gadget, there is a lot of code make sure to get it all :

Important - This is a scroll box make sure to get all the code.

-----------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------
Important - You have two ways to make it work for your blog, firstly Change spiceupyourblog highlighted in yellow with your facebook username.Find more information on creating a professional Facebook page and username here.Or if your page does not have a simple username you can create your like box here and replace the code in bold above with the code you get.

Important 2 - If you already have jQuery script in your template remove the line in red.

Fixed Position Slide Open Egg Social Bookmarking Gadget For Blogger

12:47 PM Blog-Tutorials 2 comments

A few weeks ago i published "Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger".In this post we have the same social bookmarking gadget but this time it will not be shaped as a heart but instead an ovel egg shape.The share egg sits in the bottom corner of your blog and remains fixed as the reader scrolls the page.On hover the egg slides open to reveal bookmarking buttons for your readers to share posts on Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.This is a great gadget to get the attention of your readers and have them bookmarking your posts.I have the tutorial to add the gadget to your Blogger blog below but first check out the screenshot and live demo.

Add The Share This Egg To Your Blog

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose "Edit Html" > Then Proceed, as shown in the video below.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </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: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://blog4tutorial.blogspot.com">Blogger Wordpress Gadgets</a>

Important, Move The Position Of The Gadget :

The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.

Step 6. Save Your Template.

Add The Animated Sassy Bookmarking Gadget To Your Blog

12:34 PM Blog-Tutorials No comments

Step 1. In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</body>

Step 3. Copy and Paste the following code Directly Above / Before </body>

<div class='shr_ss shr_publisher'>

</div>


<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://goo.gl/FUa0Q'>Animated Social Gadget</a> - <a href='http://blog4tutorial.blogspot.com/'>Blogger And Wordpress Tips</a></small>

Step 4. Save Your Template.

Fixed Scrolling Social Bookmarking Bar Beside Posts For Blogger

11:47 AM Blog-Tutorials No comments

The most requested tutorial over the last few months has been for the scrolling share buttons that sit alongside posts and scroll down the page with the reader.This gadget is popular on all the top blogs and really does help increase the number of times your posts get shared on Twitter, Facebook and other social networks.Using jQuery we attach a bar to the side of your blog posts with bookmarking buttons, as the page scrolls the bar neatly follows giving readers the option to share at any time.The gadget I have been using for the past few months and I share with you today has the following options : Twitter Share, Facebook Like, Stumble Upon, Google+, Pinterest Pin It and a Rss Feed Icon.Wordpress users can try out the Wordpress Share Bar listed in this post.

At the moment this gadget is in use here so you should be able to see it, you can also see another demo below.

As this is an advanced gadget there are 9 steps to add it to your blog so more than ever its important to back up your template first in case of mistakes, then take your time and you should have no problems.

Add The Sticky Scroll Bar To Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<b:includable id='post' var='post'>

Step 3. Copy and Paste the following code Directly Below / After <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='paulcrowepro' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:blog.url + "&amp;send=false&amp;layout=box_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=90"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:90px;'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center><br/><a href='http://feeds.feedburner.com/blog4tutorial' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDko-i7hRTsg8q5ZqJfQzsDeXXy-i3ElHAaebJQCA2vMbyPzpOAKfLdKQXM5ObwynEU5dr7vHxUc54Z0EAsJaz37UCCqBlbgP8KXwsSVJtereC6amT0GJXVGysWeRYcZnHYArl-AlFBgU/s1600/rss-seat.png'/></a>
<br/><a href='http://blog4tutorial.blogspot.com/' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div></b:if>

Important - Replace the URL in yellow with your Rss Feed URL.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

/*Start Sticky Bar Css http://blog4tutorialblogspot.com*/
#share-buttons {
background: none repeat scroll 0 0 #fff;
border: 1px solid #CCCCCC;
left: -80px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;

}
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}
.facebook.sbutton .fb_ltr{width:40px !important;}
.post-outer{height:auto;}
#main{position:relative;}
#main-wrapper{position:relative;}
/*End Sticky Bar Css http://blog4tutorialblogspot.com*/

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 7. Copy And Paste The Following Code Directly Above / Before </head>

Note - The line of code in Yellow is the jQuery script.If you previously added jQuery to your template you do not need to add this.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://yourjavascript.com/4701293254/share-bar-script.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})

});
</script>

Step 8. Save your template.

If successfully complete then Enjoy

Blogger Tutorials

Pages

Categories

Visitor!

Bhoot FM

Latest Movies

Portable Software

Online Earning

Latest Natok Collection

Latest Movies

Saturday, July 14, 2012

Recommended Post Slide out for Blogger

Add the Recommended Post Slide out Widget

Customizing the Recommended Slide out

Monday, July 9, 2012

One Time Facebook Pop Up Like Box For Blogger

One Time Facebook Pop Up Like Box For Blogger

Fixed Position Slide Open Egg Social Bookmarking Gadget For Blogger

Add The Share This Egg To Your Blog

Add The Animated Sassy Bookmarking Gadget To Your Blog

Fixed Scrolling Social Bookmarking Bar Beside Posts For Blogger

Add The Sticky Scroll Bar To Blogger

Keep In Touch!

Popular Posts

Labels

Blog Archive