How To Make Drop Down Menu Tabs By using CSS3

Internet is already flooded with blogging tutorials that talks on making menu tabs through using css3 which makes the whole thing impressive and beautiful. I will show you the same tutorial but I will make it a little bit different since  I will add a very small and simple trick that is, make the home tab to be highlighted as you open your blog  pages. It is  cool and professional type of menu tabs for your blog. Without much words to say, let us go with the process!
See the live demo for " Drop Down Menu Tabs With CSS3".

Read Also: How To Add Fancy CSS3 & JQuery Lavalamp Menu For Blogger

Making Drop Down Down Menu Through  CSS3

Step 1. Go to Blogger Dashboard >> Lay out
Step 2. Click  Add  a Gadget >> HTML/Javascript
Step 3. Paste the code below inside the blank page or space

<style>
/*------ CSS3 Drop Down Menu By BTAT (http://bloggingtipsandtrix.blogspot.com)---------*/
#btat-menu, #btat-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#btat-menu :first-child > a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 6px;
border-radius: 4px 0px 0px 4px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu {
width: 560px;
height:38px;
margin: 60px auto;
border: 0px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu:before,
#btat-menu:after {
content: "";
display: table;
}
#btat-menu:after {
clear: both;
}
#btat-menu {
zoom:1;
}
#btat-menu li {
float: left;
border-right: 0px solid #158aee;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#btat-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#btat-menu li:hover > a {
color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
*html #btat-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#btat-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#btat-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#btat-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#btat-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#btat-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#btat-menu ul a {
padding: 10px;
height:15px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#btat-menu ul a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #168eca;
}
#btat-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#btat-menu ul li:first-child a:hover:after {
border-bottom-color: #168eca;
}
#btat-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#btat-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
height:10px;
}
</style>
<br />
<ul id="btat-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Replace the "#" sign with your own link and the bolded words (Home, Categories, css, graphic design etc. )with your own title.

Step 4. Save and you're done!

Recommended for you:

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger
How To Create A Drop Down Menu To Blogger/Blogspot
Create Multi Level Drop Down Menu In Blogger

If you have  more questions regarding its customizations just contact me through this link and I will try my very  best to help you.

Thanks buddies and Peace OUT!!!

How to Make Rotating Image Holder For Blogger Images

Hello guys out there, are you looking for a different and unique  hover effects style to your images? Today, I will share you a rotating image holder for a specific image(s) in your blogger blog. This tutorial was made possible after I visited the about page of  Md. Atiqur Rahman of Bangladesh. This tutorial is divided into  two parts : First, the putting of HTML in your Blogger post editor's page and the second is adding the CSS in your Blogger template source code.

Live demo :  How to Make Rotating Image Holder For Blogger Images

Add Rotating Image Holder For Blogger Images

Part A.  Adding HTML code to Blogger Post Editor's page

Step 1. Go to Blogger Dashboard >>  Post or New Post
Step 2. Switch it HTML mode and paste the code below

<div align="center">
<div class="imgholder">
<div class="outer1 circle">
</div>
<div class="outer2 circle">
</div>
<br />
<figure>
   <img src="http://2.bp.blogspot.com/-0qwO4JXS1Dg/U1p3N65cHdI/AAAAAAAACJw/huqQ8h200qU/s1600/blogger+guest+author.jpg" />
   <figcaption class="caption">Manny Pacman</figcaption>
  </figure>
 </div>
</div>

Step 3.  Replace the  orange bold line with the  image url of your own and the red bold line with your own  image caption.

Recommended: How to upload images to Blogger and Get Image Link

Step 4. Save your work and your halfway done!

Part B. Adding of CSS to Blogger Template Source Code

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look the code below

]]></b:skin>

Step 3. Copy the code below and paste it above the code in step 2

.imgholder:hover img {
opacity: 1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder img {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 120px;
z-index: 2;
/* border-radius: 100px; */
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
opacity: 0.3;
filter: alpha(opacity = 30);
box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
/* -webkit-box-shadow: 0 0 5px #000; */
transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transition: opacity 1s, transform 1s ease-in-out 0.3s;
-moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s;
-webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover .outer1 {
border-color: #0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow: 0 0 10px #0285E2;
-moz-box-shadow: 0 0 10px #0285E2;
-webkit-box-shadow: 0 0 10px #0285E2;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.imgholder:hover .outer2{ opacity:0.9; filter: alpha(opacity = 90); transform: scale(1,1) rotate(-10deg); -ms-transform: scale(1,1) rotate(-10deg); -moz-transform: scale(1,1) rotate(-10deg); -webkit-transform: scale(1,1)rotate(-10deg);}
.imgholder .outer1 {
top: -8px;
left: -8px;
width: 120px;
height: 120px;
z-index: 2;
border: 8px solid;
border-color: #DEEBFC;
box-shadow: 0 0 3px #AFD3FF;
-moz-ox-shadow: 0 0 3px #AFD3FF;
-webkit-box-shadow: 0 0 3px #AFD3FF;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
/* background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); */
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s;
-moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s;
-webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;
}
.imgholder .circle {
position: absolute;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder .outer2 {
top: -18px;
left: -18px;
width: 136px;
height: 136px;
z-index: 1;
border: 10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow: 0 0 20px #8EB9FF;
-moz-box-shadow: 0 0 20px #8EB9FF;
-webkit-box-shadow: 0 0 20px #8EB9FF;
opacity: 0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);
transition: opacity 0.5s, transform 0.7s ease-out;
-moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out;
-webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;
}
.imgholder .circle {
position: absolute;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder:hover figcaption {
top: 85%;
}
.imgholder figcaption {
position: absolute;
left: -5px;
top: 31%;
width: 130px;
color: #004E87;
font-weight: bold;
text-shadow: -1px -1px 0 #fff;
z-index: 4;
transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-webkit-transition: top 0.5s ease-out;
}

Step 4. Save your work and your done with the tutorial

Customization:

We will focus  first  on the image holder on its default and with  a mouse hover effects on it.
On default for image holder outer 1: Change the hexadecimal color #DEEBFC with another one. You can try also  our hexadecimal colors.

With mouse hover for image holder outer 1: Replace the hexadecimal colors #0088EA #7FC9FF #0088EA #7FC9FF with another sets. The sequence is from top (#0088EA), right (#7FC9FF ), bottom (#0088EA ), and left ( #7FC9FF) respectively.

 With mouse hover for image holder outer 2:  Just change the hexadecimal colors #D6E5FC #9BC8FF #D6E5FC #9BC8FF with another sets. The sequence is from top (#D6E5FC), right (#9BC8FF ), bottom (#D6E5FC), and left ( #9BC8FF ) respectively.

 For the image holder caption in its default setting, change #004E87  to change  the color of the image caption. You can also change the margin by customizing the top and left attributes of the CSS under .imgholder figcaption.

And finally for the hover effect on the  image caption, replace the margin attribute which is 85% for the top margin depending on the position of your caption of the image on your post.

Add Multi Menu Tabs Widget in Blogger Sidebar

Hello guys, I wanna share you a trick about adding Multi Menu Tabs Widget in  your Blogger sidebar. This widget looks similar to Wordpress blog and therefore it is more good looking. Some features here are:

Live Demo

• You can add as many widgets as you want inside a single tab/line.


• Beautiful and highly customizable CSS.


• Jquery effects are added this time to the tab views.

Without much word to say, let us now learn how to add this professional looking tab widget into your Blogger sidebar . Don't worry dear because we will make this tutorial easy and simple to install.

How To Add this Multi Tabbed Widget To Blogger?

We will divide tutorial  into   three easy parts which are:

• Adding  JQuery and JavaScript to your Blogger templates


• Adding the CSS


• Adding the HTML

Adding the JQuery and JavaScript to your Blogger Templates

Step 1. Go To Blogger >> Design >> Edit HTML ( Backup your template for reference)
Step 2. Search for

]]></b:skin>

Step 3. Just below or after that code in (Step 2) paste this code
Step 4. Save your template and your halfway done!

Adding the CSS

Step 1.  Inside your template, again  search for  the code below

]]></b:skin>

Step 2. Just above it paste the code below,

/*---- Multi Tab Widget for Sidebar  by BTT ----*/

.BTT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.BTT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.BTT-tabs li:first-child{margin:0}
.BTT-tabs li a{color:#fff;background:#158aee;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;border-radius:5px;-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 2px 6px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;}
.BTT-tabs li a:hover,.BTT-tabs li a.BTT-tabs-current{background:#8168FD;color:#fff;text-decoration:none}
.BTT-tabs-content{border: 1px dotted #ddd}
.BTT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Adding the HTML

Step 1.  Search/look for  the code below

<div id='sidebar-wrapper'>

or

<div class='column-right-inner'>

Step 2. Just below that code in step 1. paste the code below,

<div class='BTT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                $(&quot;ul.BTT-tabs-widget-BTT-id li:first a&quot;).addClass(&quot;BTT-tabs-current&quot;).show();
                $(&quot;.BTT-tabs-content-widget-BTT-id:first&quot;).show();
                $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).click(function() {
                    $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).removeClass(&quot;BTT-tabs-current a&quot;);
                    $(this).addClass(&quot;BTT-tabs-current&quot;);
                    $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='BTT-tabs BTT-tabs-widget-BTT-id'>
<li><a href='#widget-BTT-id1'>About</a></li>
<li><a href='#widget-BTT-id2'>Blog Archive</a></li>
<li><a href='#widget-BTT-id3'>Follow by Email</a></li>
</ul>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                    
</div>
<div style='clear:both;'/>                      
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                      
</div>
                     
<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<div style='clear:both;'/>

You can replace About Me, Blog Archive and Follow by Email with your Widget Titles that you will be adding.

Step 3.  Now Go To Page Elements and you will see something like the screenshot below,

Let me know how you find it?

Hope this tutorial help you in some other ways. Peace and blessings buddies =D
Credits from: MBT

How to Add Hover Effect to Images in Posts

Hi guys!, Today, I will share you  a simple trick on how to add hover effect to all blog images by  adding/putting only a simple css to your template. I know images will add life to your posts and help your article to rank more in search engine result page. And to be more professional, we will add a soft touch on it.
Have your mouse cursor touch the image below for the live demo.

Also Read:
How to Add Different Hover Effects on Blogger Images
How to Put Alt Tag In Blogger Images-Increase Traffic

Putting Hover Effect To All Post Images

Step 1. Go to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Look or find the code below

]]></b:skin>

Step 3. Just above or after the code above, paste the code below

.post-body img {
opacity:0.7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border:5px solid #ddd;
border-radius:10px;
background: #ffffff;
}
.post-body img:hover {
opacity:1.0;
}

Customization (Optional)

• Change the opacity (0.7) of the image (in no hover effect state).  You can set it as "0" which is completely transparent and "1" is not tranparent.
• Change the transition speed of the hover effect ( 0.2s). The bigger the value(.5, .6, .7, .8, .9, 1 and so on) the slower it will undergo the hover effect and the lower the value (.4, .3, .2, .1,) the fastest the hover effect is.
• You can also edit the value of the border which are:
  5px- The bigger the value the bigger is the its border
  solid- There are different border styles  where you can choose here
  #ddd- This the color of your image border. You can select here other (hexadecimal) colors
• And finally, change the opacity "opacity:1.0" of the opacity  of the post image when the mouse hover is applied on it.

Step 4. Save your template and Congratulations!

Your comments and suggestions are always welcome. Please drop it at our comment box below.
Peace! #: )

Create a CSS Image Slider with Thumbnails for Blogger

Hey guys, are you having a problem on how to make image galleries/sliders for your blog? This tutorial is the answer for it. Photoblogs  need this kind of trick in order to show their images in a nice and professional manner but not only for those kind of blogs since we need photos occasionally to present some ideas in our readers.  In this tutorial, I will show you  the steps on how to make it. An overview of this is tweak is  having a mini blocks of images at the top which will enlarged at the bottom each time an image is selected  upon hover of the mouse on the  thumbnail and that was acquired through adding some CSS on it.

See demo here.

How to Add A CSS Image Slider with Thumbnails to Blogger

Step 1. Log in to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3.  Look for the code below by  pasting it inside the search box and hit Enter.

</head>

Step 4. Just above/before the  tag above, paste the css code below:

<style type='text/css'>
.bttimage-container {
position: relative;
width: 620px;
height: 610px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.bttimage-container a {
display: inline;
text-decoration: none;
}
.post-body img {
max-width: 600px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
</style>

Step 5. Save template button.

Step 6. Go back to Blogger Dashboard and select any of the post you have published or you may choose a New Post where you will add the add the HTML code  inside a post or page by clicking the HTML section/button.

Hint:

Another way of putting the  HTML codes is thorough going ether to Lay -out and choose Add a new Gadget buttom then click HTML/Javascript.

<div class="bttimage-container">
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="BIG-THUMB-URL1" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL3" />
<img class="large-thumbnail" src="BIG-THUMB-URL3" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL4" />
<img class="large-thumbnail" src="BIG-THUMB-URL4" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL5" />
<img class="large-thumbnail" src="BIG-THUMB-URL5" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

Customization:

• Replace http://bloggingtipsandtrix.blogspot.com/ with the url of your page/post where you want to land a certain link.


• To add pics inside the image slider just replace MINI-THUMB-URL and LARGE-THUMB-URL texts with the URL of your image.


• The URL for the SMALL-THUMB-URL and BIG-THUMB-URL in every set or box is the same. See blockquote below for an example. Or you can do it separately depending on your preferences.

<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="http://1.bp.blogspot.com/-ispDhJV3UqI/UvOfxiWF_DI/AAAAAAAACFM/pYfePxYyqUU/s1600/photo+slider+in+blogger.png" />
<img class="large-thumbnail" src="http://1.bp.blogspot.com/-ispDhJV3UqI/UvOfxiWF_DI/AAAAAAAACFM/pYfePxYyqUU/s1600/photo+slider+in+blogger.png" />
</a>

Note:

The last LARGE-THUMB-URL1 should be replaced with the URL of the default image that will appear on your slider.

Read this post to know how to get the image URL from your uploaded photo in Blogger.

Also read:

How To Show Or Hide/Cover Blog Content With Images Using CSS

Step 7. Finally, save your widget/gadget or publish your page/post and that's it! Enjoy Buddies :-)
Credits: helplogger.blogspot.com

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!