Make any Blogger' widget sticky

Hey fellas! If you do blogging, then you must know to customize your template: How make any widget sticky? You should already know about Widget. Just Start here. I's always interested in finding a trick like that...

Procedure:

1# First You should know the Widget's ID, the  simplest way to do it is:

• Open Widget to edit it. This edit button is shown right at down-right corner. Click it to open the edit-widget.
• Now there will be a new opened window of your browser [may be different].
• Just in the address bar, at the end, see the Widget's ID. Normally it is HTML1, HTML2 and so on. [See screenshot below]
  

2#  Now, Go to Template>Edit HTML.
3# Press Ctrl+F to find something [you must choose the template-edit box by clicking it, first]. Write something like:
</body>
Hit Enter to find the above piece.
4# Now, just above it. Copy and paste the following text:

<script>
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

5# Just replace YOUR_WIDGET_ID with your original ID [like HTML1, HTML2....] [See Screenshot Below]

6# Now, your widget will be stick to the scroll, and will move with the scroll....Enjoy and don't forget to share.

Continue Reading >>

Add A Facebook Like Pop-up To Your Blog.

If you have a blog and you want to add a beautiful Facebook like button in your blog. Then follow these steps:
1. Go to http://blogger.com
2. Go to your blog.
3. Click on Layout.
4. Now, click on Add a Gadget.
5. Select HTML
6. Copy and paste the following code in it.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2
FOSTRICKZ&amp;width=300&amp;
height=190&amp;show_faces=true&amp;colorscheme=Light&
amp;stream=false&amp;border_color&amp;header=false"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:312px; height:190px;" allowtransparency="true"></iframe>
<a href="#" rel="dofollow" target="_blank" title="blogger templates"><img src="#" alt="" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" rel="dofollow" target="_blank" title=""><img src="#" alt="blogger widgets" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="#" target="_blank" title="like box Widget"></a></div> 

7. You can replace "light" with "dark" if your blog's background color is dark. Also remember to replace "OS-TRICKZ" with your own facebook page. They are the letters which are found after the facebook complete address when you go to your page
8. Now, just save it. Locate it, where you want. Enjoy.........

Continue Reading >>

Fully Customize Jump Break in Blogger

The people using jump break Should know these hacks/Customization to enhance their blog beauty and performance. I will show you how to Display blogger Jump Break Post Page Link Text, Display it on Right/Left, Hide Jump break, Increase Text size, Change font...... You Should backup your template first. To do customizations Read the Post Carefully.
Also check: How to add Auto-Read More Hack/Option in Blogger

Customizing Blogger Jump break:

Change Post Page Link Text:

By Default Post page link text is Read More. You can change it by doing as follows..

1. Go to Blogger>Layout.

2. In the Blog Posts section, Click on Edit. [see screenshot of this step]
3.  It will pop-up a new Window Replace Read More with Your Desired text (e.g Continue Reading, Read full etc) [see screen shot of this step]

4.Save and exit.

Display Jump break Link On Right/Left:

By default Post page link is Displaying on Left which may annoy a blogger user. To Display it on Right add the following CSS code.

1.Go to Blogger>Template.

2.Click on Edit Template.

3.Press Ctrl+F to find the Following Code:

]]></b:skin>

4.Now, add the following code before/above it: [see screenshot of this step]

.jump-link { float: right; }

5. Save Your Template.

Hide Jump Break Link:

Hiding a jump link may be helpful. Because The full post page can also be viewed by clicking on Post title link which is displayed at the starting point of a post. To hide it do the following.

1.Go to Blogger>Template.
2.Click on Edit Template.
3.Press Ctrl+F to find the Following Code:

]]></b:skin>

4.Now, add the following code before/above it: [see screenshot of this step]

.jump-link { display:none; }

5.Save your template.

Change font size and Style:

1.Go to Blogger>Template.
2.Click on Edit Template.
3.Press Ctrl+F to find the Following Code:
]]></b:skin>
4.To increase font size and style, add the following code before/above it:  [see screenshot of this step]

.jump-link a, .jump-link a:visited {
font-size:15px;
font-family: "Georgia";
font-wei.pagenavi{
clear:both;margin:10px auto;text-align:center
}

5. Save Your Template and Enjoy. :)

Continue Reading >>

Add Beautiful sliding Share Buttons Widget under Each Post Manually in Your Blog Only by OS-trickz

Sharing buttons are important part of any blog. They help greatly in spreading A Blog content and also to increase the blog visitors. The default buttons provided by blogger not fulfill the requirements As, it provides only Small set of Social media buttons. Now, i, m sharing a good set of beautiful sliding social media buttons which help in Sharing a post.

Procedure for adding Sharing buttons:

1.Go to Blogger Dashboard Home>Template>Edit Template.
2.Click any where in Template section and press Ctrl+F to find the following code:

<b:if cond='data:post.hasJumpLink'>

3.After Find this code add the following code just above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class='sharelordhtml'> <center><div class='headinglordhtml'>Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>&#8203; <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6QECXAQKRXni8tEtY_BsC1iycza503cHgdeF1OmvPt7VUbOKgnFjVdzz38wDNTxTDyqcY32IstR8ItQH7nVwJVFAdc7RqGT5UtWcOwpvdJ2IdOCdzk1tsQuJnnnZVAzO9VHfDRJ3ZIAO/s0/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbt803Z4uiSthQHzBSYRI6CUfpwAsWZPeLgWQ2WcfoKNuqGspIe9UrR1dI-oO8dZYukcycXMpHywIEurE6eJ8KSjaYJpZy8DA29OV7BuHLHitfYGE13pYZv_Mr3ouklPcp93AZlGQZJvfE/s0/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFerMYCeYRhE01iumFuyZhkb_dL8aDvl12v48QSf4e46Kt3CMOJjBXQIQZXAyW6L-4S2lfe6SoGB7I0C3dT5lWgX0VYVZsz_Ki4Aiay7qWEvnQCaAokSPU1LZSKc1_zxjDMSqAS8YDl-AH/s0/google%252525252b.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuQe_-iVws3JWwrJOzfoWt9MfJUN4bXkDHbXrakvsc-aWERUi4jc5RTCpG7Ho9Yw7VkmHZ3-VTEG4Rps-54-MndHWlPwmfxMd75i0kzds_S2nca6Wn8m2CwmRwT4tcRYa1rdUkjZvgH7a/s0/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkqr83r0dHas0_o7hHr0Nrur_YUFK8c0oI7mkY1emSJCJHWjwyb2H3Af5zDVqGlAVHF1wkO8Xkd2jWIUS1Xyh2c-6yFRqze3xJ96JRNBocROZW5zxnqZKMy542-llCfPmMnwpDbbIk4wMk/s0/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuvI2GeFYXegYYMpZrRUr_0RzyExg2stVj1DXDQF4mgsCVqZqBdOnwd5hPv3PoLyc2hjzIe-73fhu_3Tn4koP8nY7nA1HpMK6L3EA3cEC_cQrIWii0lwxALbW0sxT1GIz7AhGnEGtnMKB/s0/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWdgDw8Luu15hfFOepUR-2GEWRXXuPlf4uV08GAzjRP7hv5_t6EBo1rZ302ipKCfge56JpOFP_lLXvwpt5g-_wa0F5nuQisNxL_T6uSZm2SwoLaxyT78kzkvDFwy4OoMP4-3kI-B5lnFEr/s0/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNDJNzyiFGVHVfmCLY-EYIvDQzpWPjZscWdRjf1sw5rliDcLU9BM5Ex8ljtoHm3Hox05cPAmM2oMnVbWAEqP9bblDhaxtNEl7TNIDOlBdVzZPwXSAL65bAwAbBWEhd6XkOSRrH7EHS8l_/s0/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLNguZwGxmpYqUTn4UyQP_LJrhO6iiP6cCG21DLZXHQO2-9y8Pebpd56UvGofcuHXIDTtQqDST_EMqiIdHv3_jPWzNUrG-XPMV8PL8kAOk8xw8z604cgcFvRj5co7Men9hS3H7drrboUC/s0/tbi-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: &#39;Englebert&#39;, sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  &#8203; </style>  </b:if>

4.Now, Save Your Template and enjoy.

Continue Reading >>

Submit Your Blog/Website To 100+ Search engines With only One Click

Hi bloggians, Every one of you want traffic and page views of your website. But some may face a lot problems by conducting their url/sitemap of your site to search engines. There are lots of search engines on Internet but someone is unable to submit its site to all these search engines. Amazingly there is a trick by which you can do this work with in a second. Carefully read this article as follows....

How to submit your site/blog?

• Procedure is so simple, Just go Rankontoponline website.
• Submite your exact site url and Your Email.
  
• Hit submit button.
  
• Wait for a while until it informs you the submission form of your site.
• Note: After submitted you website wait for until optimization, If you repeat this process with in 4 weeks you may get banned.

That,s it this is the trick. Hope that this article was helpful to you. Enjoy :)

Continue Reading >>

How to add Go to Top and Go to Bottom Button using Jquery in blogger?

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fade-In and fade-Out effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button
Step 2. Make backup of your template.
Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

    /* Up and Down Buttons with jQuery
    ----------------------------------------------- */
    .button_up{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fJhk4xMPJHOrKLZf5-cQ9VVUNq4JZiPqyLf4XNL9Upr2KbD7fkk6VzbLl2wD7Ybp0RnzWEZ9bry9cC_QrRGVAbZ5_eF8ScTV4_O6IoCL61bVFhIcQ0MkN9YPzBgqyCa_h-AUsRV8myQ/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:280px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .button_down{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTA-XE7OOZYan4li6BWhU7wy11Ml8KyBx-x9_eHoCcu15La843yAQfBbL-RNBhIwBJvvrjLg0AZJWjZJRIgmmyMLIoD2AlI4_cIRwFq8f5QdijCJXXaGKdB0ildRiQ7patioWrJwaUSY8/s16/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:242px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }

Step 5. Now search (CTRL + F) for this tag: 

</body>

Step 6. And just above it, paste the following code:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    <div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_down' style='display:none;'/>

    <script>
    //<![CDATA[
    (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

    $(function() {
    var $elem = $('body');
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'1'});
    });
    $('#button_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#button_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>
Step 7. Finally, Save your Template. Enjoy!

Continue Reading >>

Fix breaking out/overlapping of Images on Sidebar on bloggers Blog posts pages

In some blogs there is a problem with post images i-e they are overlapping on sidebar which is not good for any blogger user. I have also faced this badness. But fortunately, i found an hack to limit the size of images on blog posts to not be shown as broken or overlapping on sidebar. i decided to post it on my blog. This hack is very simple and easy.
To done this hack, just do the following...

Procedure to fix images on blog posts:

Step 1: Go to blogger>template>customize>advance> Add CSS.
Step 2: Add following code in CSS section and then click on Apply on blog.
.post img {max-width:98% !important}
You can also go to template>edit html and then, paste this code before ]]></b:skin>

That,s it. Now, you have fixed up your blog post images. This was a simple hack but very very helpful. Thanks for visiting.

Continue Reading >>

Make A particular Image to be shown only in Home Pages and not be shown in Blog Post Pages

The people using Auto Read More Hack use a suitable image for every post. Some images are not suitable to be shown on Post Pages. To hide images/pictures from your blog posts and to make them appear only in homepage, we have to add just a small piece of CSS code in our template and then use the class "hidepic" each time we want to hide an image, Just follow the next steps:

Procedure:

Step 1. Go to Dashboard - Template - Edit HTML
Step 2.Make a Back up of your template.
Step 3. Find (CTRL + F) this code in your template:

        }]]></b:skin>

Step 4. Copy and paste the following code just below it

<b:if cond='data:blog.pageType != &quot;index&quot;'>
    <style>
    .hidepic{
    display: none;
    }
    </style>
    </b:if>

Screen Shot

Step 5. Save the Te mplate.

Now every time you create a post, firstly add the pic you want to hide and then switch to HTML tab where you'll see the HTML code of the image you have added that will look something like this:

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nzC9cWyqr5lUsWK_Zn3bMCpC_i8it42SwB5TMi_8A_SQg7RLAE41Nnap2nlKBTqy3eDB9mUNqiUK7OVB5nY_0xm2AstEk4wLyx7H5zX0YCi2o92x1MVW6_w-L25LHXzmHZ10apOtMcg/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nzC9cWyqr5lUsWK_Zn3bMCpC_i8it42SwB5TMi_8A_SQg7RLAE41Nnap2nlKBTqy3eDB9mUNqiUK7OVB5nY_0xm2AstEk4wLyx7H5zX0YCi2o92x1MVW6_w-L25LHXzmHZ10apOtMcg/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added
(if the image is at the middle of the text, then the code should be found at the middle)

Step 6. Replace "separator" with "hidepic" - see the screenshot below:
If you need more help, please leave a comment below. Thanks for visiting.

Continue Reading >>

How to Remove Post Footers From Home Pages in Your Blog?

Unfortunately, by default they display the footer for each post which really clutters up your home page. For bloggians Using auto read more option this can be very annoying for them. The good news is, with just a few lines of code you can configure your blog so footers only display on actual posts and not on the home page.

Remove Post Footers from Home page

• Go to blogger > Template > Edit HTML.
• Now, find ]]></b:skin>.
• Copy the following code just below it.

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display:none;}
</style>
</b:if>

[SCREEN SHOT]

• Now, view your blog and post footer will not be displaying at Home pages.
• Enjoy :)

If you found any problem just drop the comments. Thanks for visiting.

Continue Reading >>

Add Auto Read More With thumbnails for blogger posts fully working for almost all Templates In Blogger

Some bloggians use Jump break Option to add a read more Option. Now, we are going to apply a script to done this work Automatically. This hack will summarize content and show only summary in Home page. Using automatic read more on your blog will make your blog load faster by showing few content of post instead of the full post on the homepage.Automatic read more for blogger posts can be done by inputting some code into your blog templates.

Procedure:

Step 1. Find (CRTL + F) this code:

    </head>

Step 2.Copy and paste following code with above </head>:

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js' ></script>

The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summary.If the post does not have an image just a text summery will be displayed.

summary_ noimg= 430; --> The length of the summary if the post does not have a thumbnail.
summary_img = 340; --> The length of the summary if there is an image in the post that will be converted into a thumbnail.
img_thumb_height = 120; --> The height in pixels of the thumbnail.
img_thumb_width = 120; --> The width in pixels of the thumbnail.

Step 3. Find the following code by using Ctrl+F  key.

<data:post.body/>

Step 4. Replace the following code with above code. 
Note: if you found three codes like above in your template replace the following code with all.

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style='clear: both;'/>
    <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
    </b:if>
    </b:if>

You can change the highlighted text with Continue Reading, Read Full etc.

Step 5. Save Your template and enjoy Auto read more.

Continue Reading >>

Add attractive Horizontal Navigation Menu With drop Down submenus Also with Search engine By using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

• From your Blogger's Dashboard, go to Template > Edit HTML and search (CTRL + F) for the following line:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
[Screenshot]

• Remove the code in red. You may have many parts as the one in red, delete all you find.

• then find /* Tabs   (code in green) in this section in your template

and remove all that is within it, until you reach to the Headings part. The code which is to be removed should be following or similar like it

.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

• Then add this to where the code has been removed (instead of the code in green):

 #crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}
Having done this, we can finally add our menu.

How To Add Horizontal Drop Down Menu to Blogger 

To put this horizontal menu with submenus in your blog, then follow the next steps:

Step 1. From Template, go to Edit HTML and just above ]]></b:skin> paste these styles:

 /* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px;  
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFrcgBifhg9HC1M779Kagp7iITOwq-eNx1yO6cWz9k_1DkogHXLOjXMnbIiaoCX3c0bK2m7pFnSx0NEVZ2Yq3LP57GhN3kuHWumcp4BRfXRTLPlB0JLhQlVu3mqWJ0Q7gcnvA1ysXkns/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFrcgBifhg9HC1M779Kagp7iITOwq-eNx1yO6cWz9k_1DkogHXLOjXMnbIiaoCX3c0bK2m7pFnSx0NEVZ2Yq3LP57GhN3kuHWumcp4BRfXRTLPlB0JLhQlVu3mqWJ0Q7gcnvA1ysXkns/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search { 
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHy4-Rhjtv9BXW0-bMt7Thn63VKmrdP8Yp3T_Zu7eUUlkJwS0cCKfVj0pKedH7GNds4yHLvbFfJS5aRNhHlLpO_2KXIXFUSOIN7PVqxKYxW7KTIIB-ingJH38yvmkCVyLClXLTJE0ybJI/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

[Screenshot]

Step 2. Save the Template
Step 3. Go to Layout > click on Add a Gadget link
Step 4. Choose HTML/Javascript and paste the following inside the empty box:

 <div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

Customization:

Just change title1 with your own title and link url with your own link and so on. Just do like this with submenu links
And that's it. Now Save your Widget and enjoy your new drop down menu.

Continue Reading >>

Add Beautifull Metro UI style Search Engine in your blog

Search engines are important part of blog. Every one blog should have some good working search engines. I, had given you many search engines but today i,m gonna show you a metro style search engine. To add this just follow these steps:

Procedure:

• Go to blogger-dashboard>layout and then, click on add a gadget.
• Choose HTML/Java script from the pop-up window.
• Now, copy and paste the following code in the content area:

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type and hit Enter"/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

• Save and Enjoy.

If you found any type of problem just drop the comment

Continue Reading >>

Add Recent Posts Widget With Thumbnail previews in your blog

Today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your Blogger blog, then follow the steps below:

Steps

• Go To Blogger > Layout and click on "Add a Gadget" link.
• From the pop-up window, scroll down and choose HTML/JavaScript
• Paste inside the empty box, the following code:

 <div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://os-trickz.blogspot.com/2013/07/add-recent-posts-widget-with-thumbnail.html" target="_blank" title="Grab this widget">Recent Posts Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqiPEmAE7xK-s7s24dqpnzT26sH2x5cfbAjy6oceSO4gexOnirvbHOos871Cwy-nHaoyEXDqoz3AiK1ICsH3utD7yGISeO3sXfPDyUGMZtV-gAZ8YaDdW9uA80lUpyXFyKrsIUzrooI0/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

• Change YOUR-BLOG/SITE-URL with the url address of your site/blog
• Save your widget. And you're done.

Customizations:

• To disable the scroll bar, remove the number 500
• By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
• if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10

Continue Reading >>

How to Add And Fully Customize the "Link-With-In" Related Posts Gadget In Your blog?

The Link Within Related Posts With Thumbnails Gadget is hugely popular among bloggers using every blog platform.It works with Any template. With no code needed to add the gadget to your blog and the script automatically generating the posts to be listed. Link Within is easy to use and effective.However there are some changes you may like to make to the gadget in terms of appearance, Text and Position of the gadget.In this post we will see how to do the following.

1. How To Get The Link Within Related Posts With Thumbnails

Adding the gadget to your blog is quick and easy.First follow this link to the Link Within Website.On the homepage fill in your Email, Blog URL, Platform (This Tutorial Is For Blogger) and number of related posts you want displayed.For most Blogger templates you should display 4 posts.Click Get Widget. You will now be directed to the second installation page.

• Click Install Widget for blogger to pop up in a new window.

• If you have more than one blog choose the blog you want the gadget added to.

• The widget title will be Link Within.

• Click add widget.

The gadget has now been added to your blog.

2. Change The Title Of Link Within Gadget

By default The Text above the related posts is "You May Also Like" but you can change this.
A. In you dashboard click Layout > Edit Html

B. Find The Following Piece of code in your blogs html.It wont be hard to find it's at the very top :

    <head>

C. Copy The Code Below And Paste It Directly Below <head>

    <script>linkwithin_text='YOUR TITLE TEXT HERE:'</script>

D. Replace YOUR TITLE TEXT HERE with the title you want displayed and save your template.

3. Move The Position Of The Gadget Below Your Posts

If you have a number of gadgets below your posts like social bookmark buttons, AdSense or Rss options you may like to move the Link Within Related Posts Widget.Here is how you can place the gadget into position.

A. In your template place the following code were you want the gadget to be displayed :

    <div class="linkwithin_div"></div>
Save your template.

4. Display The Gadget In Only The Post Pages On Your Blog and not in home

If you use the read more post summary's on your blog you will want the gadget displayed on the post pages only.To display the Link With in gadget on only Post pages. Just Do the following Steps:
A.Find Your Installed gadget i-e "link with in" by using Ctrl+F key.
B.Just copy and Paste the below given code Just After <b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

C.Now, Like first step just copy and paste the give piece of code before </b:includable>

</b:if>
[see screen shot]

 That,s it Now, Link with in Will n,t be displayed in home page and will only be under each post page.

5. Remove The Link Within Link Below Related Posts

Add the following Css to your blog :

    #linkwithin_logolink_0 {display:none;}

That should help you get the most from the great Link Within related posts gadget.If you have any questions or suggestions drop them in the comments below.

Continue Reading >>

How to Add A beautiful Jquery Drop-Down Menu bar For Blogger?

A Beautiful  Drop-Down Menu For Blogger Blogspot:

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps for Adding the jQuery Drop-Down menu:

1. Go to Blogger Dashboard > Template > Edit HTML
   
    
2.   Search for  "]]></b:skin>"  code.( Tip: You can find it by pressing Ctrl+F keys).
3. Add the following CSS code before/above it.

 #jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

4.Now find this piece of code.
    </head>

5.Add Following code immediately before/above it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

6.Click on Save Template button.
7.Go to Layout > click on "Add a gadget" link.

8.Choose HTML/JavaScript from the pop-up window.
9.Paste the following code in the empty box.
 
<ul id="jsddm">
      <li><a href="#">Home</a>
      <li><a href="#">Link 1</a>
      <ul>
      <li><a href="#">Drop 1-1</a></li>
      <li><a href="#">Drop 1-2</a></li>
      <li><a href="#">Drop 1-3</a></li>
      </ul>
      </li>
     <li><a href="#">Link 2</a>
      <ul>
      <li><a href="#">Drop 2-1</a></li>
      <li><a href="#">Drop 2-2</a></li>
      </ul>
      </li>
     <li><a href="#">Link 3</a>
      <ul>
      <li><a href="#">Drop 3-1</a></li>
      <li><a href="#">Drop 3-2</a></li>
      <li><a href="#">Drop 3-3</a></li>
      <li><a href="#">Drop 3-4</a></li>
      </ul>
      </li>
     <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      </li></ul>



 
Note :You must change links titles and replace the # symbol with the URL address of each of your links.

Important:

 1.
- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.

- if drop down links are not showing, do the following:

Go back to Template > Edit HTML and search (CTRL + F) for this code:

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You should change 1 with 3 and no with yes like this:

    <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


Save the Template.
2.

Next thing to do is to go to Layout and drag your menu immediately below your header

Then click on Save Arrangement
Enjoy :)

Continue Reading >>