How to Remove Showing Posts With Label in Blogger

The "Showing posts with label" notification  always shows  above the posts everytime time you click on a label link. I know some of  us don't want to show it in our blogs since it is quiet useless and just occupy additional space in our post. If that is the case, this article is useful for you.

Removing "Showing post with label...show all posts" (Version 1)

Step 1. Go to  BloggerDashboard >> Template >> Edit HTML (always back-up your template)
Step 2. Click anywhere inside the template code, then search - using CTRL+F -  and find the code below:

<b:includable id='status-message'>

Step 3. After you have found it, click on the sideways arrow before to it, to expand the rest of the code.

Step 4. Below is this code that you need to remove,

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

Step 5. Remove all that set of code and  replace it with the code below,

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 6. Save your template and you're done. Enjoy!  : >)

Removing "Showing post with label...show all posts" (Version 2)

Here is another way of removing it from your blog using only a simple  css on it. Please follow  the steps below:
Step 1. From your Blogger Dashboard, go to  Template and click Edit HTML.
Step 2. Search the code below

]]></b:skin>

Step 3.  Just above the code in step 3, add the css  below,

.status-msg-wrap{
display:none;
}

Step 4. Save your template and say Bravo!

Professional Random Posts Widget for Blogger with image thumbnails and snippets

Random posts widget in Blogger sites is needed when you  have too many posts and visitors don't always have the mind to go through all the articles written  just  to make an idea of your blog's content. This type of widget allows your visitors to find content more easily and therefore  it is useful to gain popularity in the blogosphere. In this post  I will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and it snippets.

Click For Live Demo

Also Check :

1. How to Add Related Posts Widget
2. How to Add Widget Below First Post in Blogger
3. How to Add Recommended For You In Blogger

Show Random Posts with Thumbnails and Posts Summary in Blogger

Step 1. Go to your  Blogger  account
Step 2. Click  Layout.
Step 3. Click on the Add a gadget link and select Html/JavaScript from the popup window.
Step 4. After selecting the Html/Javascript,  add the following code below with its styles being attached.

<style>
#random-posts img{border-radius: 70px;float:left;margin-right:5px;
width:40px;height:40px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Step 5. After pasting the above code, give your new widget a title .You can type "Random Posts, Selected Post, Recommended Post" or any  related name  that you want.

Random Posts Options

- Thumbnail dimensions: 
Adjust the border radius (roundness) of the image thumbnails by changing 70px in the second line.
Adjust the size of the thumbnails in pixels, replace the 40px value of the third line.

- Summary length: 
You can control the the length of the summary (in characters) by changing the 0 value from var rdp_snippet_length=0;
In the above code  I set  it to 0 in order to have no snippet , but if you want to add snippet of your random post, please add numerical value like 100, 110, etc.

- Post info: 
if you want to hide the post date and comment count change 'yes' from var rdp_info='yes'; to 'no';

- Font Size for Posts Titles and Summary: 
Change the font size  11px ( 9th line) for the post snippet.
Modify the value 12px (7th line) in order to change font size for the posts title.

Step 6. Click on the Save button and you're done! Your sidebar will display a random posts widget on each of your blog pages.
reference: helplogger

How to Hide Site/Blog From Google Search Engine Result Page?

Do you want to hide your blog  from Google Search Engine Result Page? Sounds Weird! But for your blog who is designed for private use only, then  this tutorial is the answer! Although displaying your blog in search engine results page (SERP) is important to bring more organic traffic and money on it  but   through Blogger.com settings you can now hide it  by  just following the few easy steps below.

Step 1. Go to Blogger Dashboard
Step 2. Click  Settings >> Basic
Step 3. After clicking the Basic button, click  now the "Edit" link in  your Privacy settings.

Note: There are two settings (which are listed below) under privacy settings with corresponding  "Yes" and "No" options.

1.Add your blog to our listings

A Listed blog may be linked to from Blogger.com, such as the Blogger home page and Next Blog. If you select "No" your blog will not appear in these places, but it will still be available on the Internet. This blog will still be displayed on your profile unless you hide it.

2. Let search engines find your blog

If you select "Yes" blogger will include your blog in Google Blog Search and ping Weblogs.com. If you select "No", everyone can still view your blog but search engines will be instructed not to crawl it. If there are links to your blog from other websites, search engines may still suggest your blog in response to queries.

Check "No"  buttons for both above settings and click "Save changes".
You have now successfully hide (put your blog in a more private settings) from search engines in blogger listings.

JavaScript Image Slider For Blogger

An apology to all my vivid readers since I was not updating my blog for the last  few days  but don't worry because today I  will be  sharing a cool slider which works with JavaScript and no jQuery and flash is needed. This contains a beautiful slice effect which slices image into 12 parts, this main feature increase beauty of the slider and attract more to your readers to stay longer in your blog/site .Another great feature of this slider is it is highly customizable so that  editing may not be a problem  as you wish and which will perfectly suits to your blog. I would say thanks menucool whom the the credit should go and I have created a bloggerized version of this slider to works perfectly with your blogger blog. I know some of you already know already but for those who have not yet seen this, you can proceed to the steps below for the implementation.

You  can see the screenshotshot above which I used before in  my sidebar,  I utilized the images from the  different scenes of our country who recently suffered from the disaster made by an earthquake.

Live Demo

JavaScript Image Slider For Blogger

Step 1. Go to Blogger Dashboard
Step 2. Layout
Step 3. Click on Add a Gadget
Step 4. Select HTML/JavaScript (below header) Paste code inside it,

<style type="text/css">
/* By Bloggingtipsandtrix.blogspot.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
     
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg" alt="Image slider1" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg" alt="Image slider 2" /></a>
<a href="#"><img src="http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg" alt="Image slider 3" /></a>
<a href="#"><img src="http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg" alt="Image slider 4" /></a>
<a href="#"><img src="http://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg" alt="Image slider 5"/></a>
</div>
<div id="
Image slider1" style="display: none;">
Image Slider by <a href="http://bloggingtipsandtrix.blogspot.com/" target="_blank">bloggingtipsandtrix.blogspot.com</a>
</div>
<div id="
Image slider 2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Customizations:



• Change the Image URL in black bold texts with your own.
• Replace the texts in orange bold with your own image caption below the image

Step 5. You may now save your work.

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a  menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses  an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized  to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.

Live Demo

How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Step 1.  Adding the Script

A. Go to your Blogger Dashboard >> Template Click
B. Hit the  Edit HTML button
C. Find or Control F the code below in your template

</head>

D. After finding the above code, place the code below code just above the code in Step 1 C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

A. Look for the code below

]]></b:skin>

B. Add the following code below just above the code in Step 2 A.

/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ STARTS here*/ 

.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; 
}
.magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; 
}
 .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893;
 }
 .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f;
 } 
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; 
}
 .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727;
 }
 .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); 
} 
.lavalamp a { text-decoration: none; color: #262626; line-height: 20px; 
}
 .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; 
}
 .lavalamp ul li { list-style: none; float:left; text-align: center; 
} .lavalamp ul li a { padding: 0 20px; text-align: center;
 } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; 
} 
/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ ENDS here*/ 

C. You may now save your template

Step 3. Adding this widget on your blog

A. Now go back to your Blogger Dashboard
B. Click Lay-out  button >> Add a Gadget. Choose HTML/JavaScript
C. Copy the code below and paste it inside the empty space and drag it below Header section.

<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Free Templates</a></li>

<li><a href="#">Recipes</a></li>

<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Customizations:

• Replace # with your (URL) link
• Replace Home, About, Contact. etc. with your link text which you want to appear on the menu.
• If you want to change background color of the menu then replace <div class="lavalamp dark">  with one of the code below.

<div class="lavalamp dark">

<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">

D. Click Save Arrangement

How to Add Recommended For You In Blogger

Most the times visitors will tend to read only one post per blog  and jump to another site to look for another informations. In order to let them stay longer with your blog you need some gadget or widget like "Other People are Reading Version 1 and 2 " and "Recommended for You" in order to boast also your pageviews everyday. Today in this tutorial, I will share to you on how to add recommended for you Widget. Don't worry for the process are very simple, just follow the steps below.You can see the live demo when you scroll down at the bottom of this page.

Adding Recommended For You In Blogger

Step 1. Go to Blogger Dasboard
Step 2. Click Lay- out
Step 3. Hit the Add  Gadget button
Step 4. Select HTML/Javascript gadget
Step 5. Copy the code below and paste it inside the blank page in your HTML/Javascript gadget in step 4

<div id="hlslidein" style="display:none;"> <div class="expand">*</div> <div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image"></div> <div id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_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(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i ){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://helplogger.blogspot.ro/2012/06/recommended-post-slide-out-widget-for.html" target="_blank"></a>

Step 6. Save your work.
Note: To be more effective, drag this gadget in your footer area 

Enjoy And Happy blogging

How to Use Static Pages

Professional looking blog is always an ambition of a newbie blogger. As a newbie blogger  you should utilize static pages.  Before when I make my About, Contact, Privacy Policy, Disclaimer and Search Result Page, I used to treat them as post not as page. So when I make a sitemap in my blog, those documents appeared as one of my posts published. And that looks very unprofessional so I made another research  with  other professional blogs and I had found that  they are using pages with the items I’ve mentioned above. Today, I will share to you simple steps in making pages of your blog. Please follow the steps below.

Step 1. Go to Blogger Dashboard >> Click Pages (not post)

Step 2. New page >> Then hit the blank page button

Step 3. Then type the title and the content as you normally do when make an article in your blog.

Step 4. Publish your work

Step 5. Hide it your blog

Step 6. Copy the URL of that publish page and put that links in your menu tabs as one of the links or you can put it anywhere in your blog.

See my contact and about page in my menu tabs as one of the examples. You will notice the p in the URL as a distinguishing mark of a pages.

That’s all and  thank you for spending your precious time with us.
Hope you learn something from this post.
HAVE A NICE DAY AND PEACE TO ALL US BROTHERS!

How to Add Facebook Pop-Up Like Box with Images

Recently, I have shared a facebook widget i.e., "Adding Facebook Likebox in Blogger with Timer". But the that  facebook widget doesn't contain any images or faces of  those  facebook fans who likes your page. In order to answer that question. I made another research and thank God! because  I've made it.The codes that I'm going to share in this tutorial were from MBT and do some modifications  in order to deliver it  more nicely at my best.

Live Demo

Features of this facebook widget:

• This stunning facebook pop up like widget will help you to increase your blogs facebook likes and also gives a professional look to your blog.


• It has a transparent look and a quick closable button which loads real fast.


• It has timer facility which you can control the visibility of the number of pop up for your readers (show pop up for your readers at your desired days).

Steps to Add Facebook Like Box Pop Up widget in your Blog

Step 1. Go To Blogger Dashboard > Lay-out > Add an HTML/Javascript Gadget 
Step 2. In the blank page, paste the code below

<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }

#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->

        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Receive  updates via Facebook. PLEASE Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>

Step 3. Save  template and refresh your page to see your  "Facebook Pop-up Like Box Widget"

Customization:

1.Replace  https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl with your facebook fan page URL .
2. If you don't want this pop up load for every refresh then you can replace the red highlighted False to true and set your desired days to load it on your blog by changing the above *30 to your desired days.

Happy Blogging Friends and Love Thy Neighbours!

How to Add Translate Widget with Flags or Banner in Blogger

Adding a translate widget in Blogger seems to be old but still have a big impact  on your user's experience once they read your contents. I believe others prefer to read content online with their own language  and today I  gonna share to you on how to add this kind of widget in two simple manner. Without any adieu! Let us now start with the process.

How to Add Translate Widget with Flags or Banner in Blogger

You can install this widget directly to your sidebar by clicking this link
Step 1. Go to Blogger Dashboard
Step 2. Click Lay- out
Step 3. Hit the Add a Gadget button
Step 4. Scrool down and select HTML/Javascript button
Step 4. Copy the code below and paste it inside the blank page in your HTML/Javascript button

<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator by  Bloggingtipsandtrix.blogspot.com--><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><noscript></noscript><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/><span style="float:right;margin:3px 5px;font-size:10px;"></span></form>< !-- Widget Flag Translator by  Bloggingtipsandtrix.blogspot.com Powered by Google--></div>

Step 5. Save your Template and you are done!

Visit your blog with a new widget that translate content to different languages throughout the globe.
Happy Blogging To Everybody!

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger

A drop down menu  can be observed in many blogs but if you make it it in an outstanding way your blog is in the spotlight from the rest of other blogs throughout the web. In this tutorial I will share to you a special type of dropdown down menu which I have learned from helplogger wherin its sub-tabs are displayed in two columns and is also made with CSS, and the good things is we will not add  any scripts on it which is the cause of your slow blog loading . Another feature is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along.

Live Demo

Adding a Horizontal Drop-Down Menu  With Sub Tabs  In Two Columns In Blogger

Step 1. Go to Blogger Dashboard
Step 2. Click "Layout" and hit "Page Elements" section.
Step 3. Click on the "Add a Gadget" link just under your header image From the Gadget's List, select "HTML/JavaScript" option.
Step 4. Copy and paste the code below and paste it in the blank page.
Note: Replace the "Title" and "SubTab" title section of this widget with your own.

<div id='btttab'>
<div id='btttopwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Replace 'http://YOUR URL HERE.com' with the URL of your post. or you can just put a # sign  on it.

To add as many of the main tabs as you need,  just copy the entire code below for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

Step 5. Now let's go a step further and add the CSS style in our Template. Back to Blogger Dashboard, go to Template > Edit HTML
Step 6. Search for the tag ]]></b:skin> and just above it paste the code below.

/* Horizontal menu with 2 columns
----------------------------------------------- */
#btttab {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#btttopwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Step 7. Now find (CTRL + F) this line: It will also have some little lines or codes beneath it like the below:

.tabs-inner {
  margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;

  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
}

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

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

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

  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;

  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);

  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

Step 8. Delete the code above until you reach the code :

/* Headings
----------------------------------------------- */

Step 9. Replace the  code that you have removed above, add this one:

#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-inner {padding: 0 0px;}

Step 10. Save the Template and you are done pal!


If you have any questions or need help, regarding this post please leave a comment below.
Thank you and Have blissful blogging!!!

How to Show or Hide Blog Content With Images Using CSS

Quality content always plays an important role in Search Engine Optimazation plus with the professional looks of your blog will add more spices and consequently be always be remembered  by your unique vistors. In order to give a long and  lasting  impression to them you should put an images  but not just putting it as you normally do. We will add CSS on it in order to present it as it covers your blog content and it goes sideways upon mouse hover on it. But it doesn't end there, we will hide it as it goes sideways in order to make it more professional as it moves.Feel excited! Follow the steps below.

See first the live demo and have a mouse hover on it to see the classic effect .

How to Show or Hide/Cover Blog Content With Images Using CSS

Step 1. Go to your post and select what particular content do you want to apply this trick  or you may click New post
Step 2. Copy the code below and paste it in your Blogger Post Editor's Page (it must be in HTML Mode)

<div class="cover slide_in">
<div class="right_gate1">
</div>
<div class="left_gate1">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here </div>

Step 3. Publish or Update your post. Now you are halfway done.
Next proceeding steps will put CSS on your Template HTML Editor
Step 5. Go back to Blogger Dashboard and click Template
Step 6. Hit the Edit HTML button
Step 7. Control F or find  the tag below

]]></b:skin>

Step 8. Paste the  CSS code below just above the tag ]]></b:skin>

/**--- Hiding Blog Content With Images Starts here---**/
.cover {
position: relative;
width: 540px;
height: 282px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.slide_in {
overflow: hidden;
}
.left_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
right: 50%;
left: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.right_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.slide_in .right_gate1 {
background: url(http://1.bp.blogspot.com/-kWgW71XVQ0E/UiCk5acur8I/AAAAAAAABsY/Fo_oucRARTw/s1600/hide+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(http://3.bp.blogspot.com/-gKdeozSvTVU/UiClhKm4wMI/AAAAAAAABsg/eOn8Ygi_lAc/s1600/show+image+using+css.png)#DBDCDE;
border: 1px solid #F0F0F0;
}
.cover:hover .right_gate1 {
left: 100%;
right: -50%;
}
.cover:hover .left_gate1 {
right: 100%;
left: -50%;
}
/**--- Hiding Blog Content With Images Ends here---**/

Customization:

• Just simply change the blue bold text (for the right image) and red bold text (for the left image) bold text with your own image URL

Step 9. Preview and if you're satisfied with the result you may now Save your template.

Enjoy now your new style of putting pictures in blog post.
Happy Blogging Friends!

Also Check:

• How to Upload image Link in Blogger and get the Image Link on it
• How to add alt Tag to your Images, Increase Blog Traffic!

How to Show or Hide/Cover Blog Content With Images Using CSS

Quality content always plays an important role in Search Engine Optimazation plus with the professional looks of your blog will add more spices and consequently be always be remembered  by your unique vistors. In order to give a long and  lasting  impression to them you should put an images  but not just putting it as you normally do. We will add CSS on it in order to present it as it covers your blog content and it goes sideways upon mouse hover on it. But it doesn't end there, we will hide it as it goes sideways in order to make it more professional as it moves.Feel excited! Follow the steps below.

See first the live demo and have a mouse hover on it to see the classic effect .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam erat, ullamcorper et dictum sit amet, cursus a eros. Maecenas a nisi sed lacus ultricies auctor. Duis fermentum, sapien sed cursus cursus, arcu metus condimentum sem, non ultricies urna nisi ut tortor. In auctor tortor vel arcu pharetra, sed fermentum leo placerat. Aenean tempus massa id sapien vestibulum pretium. Curabitur et adipiscing enim. Donec sit amet sodales turpis, quis bibendum orci. Donec a eros libero.

Sed mollis euismod mauris ac hendrerit. Pellentesque eu rhoncus lorem. Donec eleifend mattis leo, molestie aliquam lectus sagittis cursus. Nulla mollis ligula lacus, vitae molestie tellus convallis ac. Nullam suscipit mauris sit amet mi dictum rutrum. Duis porttitor felis id tortor pretium rhoncus. Aenean vel tristique dui. Quisque eget condimentum lorem. Phasellus porta placerat arcu, rhoncus pulvinar augue feugiat sed. Nam ligula sapien, aliquam et vehicula sed, hendrerit vitae dui. Maecenas sed felis sed sapien varius dictum sed eget lorem. Aenean condimentum bibendum commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam erat, ullamcorper et dictum sit amet, cursus a eros. Maecenas a nisi sed lacus ultricies auctor. Duis fermentum, sapien sed cursus cursus, arcu metus condimentum sem, non ultricies urna nisi ut tortor. In auctor tortor vel arcu pharetra, sed fermentum leo placerat. Aenean tempus massa id sapien vestibulum pretium. Curabitur et adipiscing enim. Donec sit amet sodales turpis, quis bibendum orci. Donec a eros libero.

How to Show or Hide/Cover Blog Content With Images Using CSS

See Complete Tutorial Here

Adding alt Tag to Images to Increase Blog Traffic

In my previous tutorial on 10 Basic SEO Tips for Newbie Bloggers, I have mentioned there about adding alt tag to images in order to receive  a huge amount of traffic to your blog and I had  promised there to make a separate tutorial on how to add alt tag to images. 

Reason Behind in Putting Tag in to your Images

The main reason why we need to put alt tag to the images being uploaded in our blog is to tell robots that the image she encountered is part of the  content and not a garbage one. Robots like human beings read our content, look for every detail and when they come across  to our image HTML code they do not recognize what the image is all about if it has no  tag. She can't judge if  that particular image  is all about  CSS or  Basic SEO Tips.  Now in order to let robots index each of our images  we must add an alt Tag on it.This type of Tag  is  special  because it let spiders to describe, categorize and even index as I have said above. In short, this type of Tag tells the robot about the reason of putting that kind of  image in that particular content or page.

Adding alt Tag to Images to Increase Blog Traffic

Note: This is via HTML Mode in Your Blogger Post Editor page
Step 1. Choose a Post or Create New Post
Step 2.  Add Image as you normally do
Step 3. After you have uploaded an image  to your post, switch you Blogger Post Editor page in HTML mode. You will see HTML code like the below:

<a href="http://3.bp.blogspot.com/-17cPWrJiEvI/UhrrZvz-G1I/AAAAAAAABpE/OslpFGjJGaE/s1600/lights.jpg" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-17cPWrJiEvI/UhrrZvz-G1I/AAAAAAAABpE/OslpFGjJGaE/s320/lights.jpg" /></a>

The code above may look like odd and yet  robot can't identify it since it has no Tag. Now In order to optimize the above image HTML code, we will add alt Tag on it after the red bold text. See the illustration below:

<a href="http://3.bp.blogspot.com/-17cPWrJiEvI/UhrrZvz-G1I/AAAAAAAABpE/OslpFGjJGaE/s1600/lights.jpg" imageanchor="1" ><img alt="add hover effects on images" border="0" src="http://3.bp.blogspot.com/-17cPWrJiEvI/UhrrZvz-G1I/AAAAAAAABpE/OslpFGjJGaE/s320/lights.jpg" /></a>

Step 3. After you have done your post you may now publish  or update  it.

Adding Alt Tag to Images to Increase Blog Traffic Via Compose Mode

An easy way to add alt tag to your uploaded images is through  putting it directly to the images in the Compose Mode
Step 1. Upload or add image to your post(s) as you normally do (be sure to switch your Blogger Post Editor page in the Compose Mode)
Step 2. Highlight the image by clicking it.
Step 3. Below the highlighted image you will see an option on what you are going to do with the image like transform it to smaller, mediun, large or x-large, original size, aligning, putting caption, adding properties or even removing it in your post. From among that choices, select PROPERTIES option. See the screenshot below,

Step 4. In the first blank space put a title on your image (still related to your content)
Step 5. In the second blank space, this is where you are going to put your alt tag (limit your tag to four rich targeted keywords, the lesser the better)

Step 6. Publish or Update your post! And you are done
 Try to practice this habit of putting alt Tag to your images before it is too late for in the near future a huge traffic will come to your blog. Good Luck Bro!

Customize Cloud Labels Into Bricks Using CSS

Having  a label(s) in our posts is a vital part in order to let our readers be easily directed to what tutorials they want to read in our blog. In order to  make your labels  be presentable we need to add CSS on it. In this tutorial, I will show you on how to style your label in a form of bricks like appearance. The code below can be customized in several manner to create exciting label designs. You can also add background images to them.
Live Demo

Customize Cloud Label Into Bricks Using CSS

Check Also:
How to Customize Labels in Blogger (Another Version Using CSS3!)
Follow the easy steps below:
Step 1. Go to Blogger > Settings> Layouts
Step 2. Click add a gadget and choose Labels                  
Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example

Note: Too much labels on homepage look awkward. Showcase your best categories only.

Step 3. Now save the widget and go back to Blogger Dashboard settings
Step 4. Click Template ( have a backup of your template for your reference)
Step 5. Click Edit HTML
Step 6. Search for the code below

]]></b:skin>

 Step 7.   Just above the code in Step 6, paste the following CSS code:

/*-----Bricks Style Labels Cloud Widget by Bloggingtipsandtrix.blogspot.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

Optional Customization:

• If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

Step 8.  Save your template and you are  done!
Visit your blogs and look your new  labels  with a new professional looks.
Hope you find this tutorial a helpful one and if you have some questions regarding this post, feel free to leave it in our comment box. I will try my best to answer your queries.

How to Replace Newer, Older, and Home Links with an Image

Another area that seems interesting to customize is the home, newer, and older links in our blog. Replacing a beautiful image on it is the best way to attract our readers to navigate our older posts and it that manner our daily pageviews will increase dramatically.

Replace Newer, Older, and Home Links with an Image

Step 1. Go To Blogger > Template (back -up your template for reference)
Step 2. Edit HTML
Step 3. Search for the tag below

<data:newerPageTitle/>

         Replace it with this code,

<img src="URL-OF-PREVIOUS-BUTTON"/>

Step 4. Now search for second code,

<data:olderPageTitle/>

         Replace it with this,

<img src="URL-OF-NEXT-BUTTON"/>

Step 5. Then search for this,

<data:homeMsg/>

         Replace with this one

<img src="URL-OF-HOME-BUTTON"/>

Note: Make sure to replace the URLs with the Image Links of your uploaded Images.  

 You can also use my own images link below:

---

http://4.bp.blogspot.com/-L60-I_HWW2Y/Uhd0skYJ-UI/AAAAAAAABmY/4ayyHarb1wc/s1600/photofun-251018398.jpg

http://4.bp.blogspot.com/-vjD82XSfrvw/Uhd7gWUIzLI/AAAAAAAABnA/ILQIQR3LjBU/s1600/photofun-1333223112.jpg

---

http://3.bp.blogspot.com/-KXiPTxJBJ_0/Uhd1hcdvybI/AAAAAAAABmg/sDK8SYI94oI/s1600/photofun-27343763.jpg

http://4.bp.blogspot.com/-p0Kw-P0yIsc/Uhd73U9eHMI/AAAAAAAABnI/MIuufe0S7-4/s1600/photofun-1034621941.jpg

---

http://4.bp.blogspot.com/-2CG1ZWAmQVQ/Uhd2E5SQEQI/AAAAAAAABmo/al7mNvMB2jI/s1600/photofun-277312947.jpg

http://3.bp.blogspot.com/-QoZR6FIqCDc/Uhd8ot5WX9I/AAAAAAAABnU/oCdkt588JQo/s1600/photofun-1194819151.jpg 

---

Step 6.     Finally save your template and enjoy the new look of your home,newer, and previous links!

Check Also:

• Adding Drop Cap To Each Blogger Post
• Adding Link To Your Youtube Video Account
• Putting A Show - Hide Effect Or Content Spoiler In Blogger

Happy Blogging Friends!!!