Tutos For blogger

Beautiful Email subscription widget With Mouse Hover Effect for blogger

noreply@blogger.com (Unknown) — Mon, 07 Jan 2013 13:16:00 +0000

Hi readers, in this post i will tell how to add an stylish mouse hover effect subscription widget To Blogger, This widget is used by lordhtml. It is A cool and simple widget that you can easily add in your blogger sidebar.

Live Demo

To add this widget to your Blogger Blog Follow these Simple Steps :

Go TO Your Blogger Dashboard
Choose Layouts
Now CLick On Add A Gadget
From The Pop Out Menu And Choose Html/Javascript
Then Paste The Below in the box

<style>

.subscriptionboc

{

border-style:solid;

border-width:2px;

border-color:#000;

padding:20px;

width:250px;

    background:#fff;

transition: box-shadow .777s;

-webkit-transition: box-shadow .777s;

-moz-transition: box-shadow .777s;

-o-transition: box-shadow .777s;

-ms-transition: box-shadow .777s;

}

.subscriptionboc:hover

{

-moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

.paratraf

{

     font-size:20px;

    font-family:'georgia';

    text-align:center;

color:#000;

}

.feed-links{display:none;}

.enteremail

{

   background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

    color: #8B8B8B;

    padding: 10px 40px;

border-style:solid;

border-width:2px;

border-color:#CACACA;

}

.forspace

{

    padding:15px;

}

.button45

{

     background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    background:#249334;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

}

</style>
<div class="subscriptionboc">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutosforblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">For Latest news And Updates Sign Up</div><p>         <div class="forspace">
            <center>
                <input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}"/></center></div>
        </p>
        <input type="hidden" value="tutosforblogger" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
                    <center>
        <input class="button45" type="submit" value="Sign Up" /></center></form>
</div>

Now Change this Tutosforblogger with your feedburner username and save the widget.

Wordpress Email Subscription widget for blogger

noreply@blogger.com (Unknown) — Mon, 07 Jan 2013 13:04:00 +0000

Hi Guys, Today I will Show you how to add a email subscription widget like in wordpress blogs. This widget is adapted from wordpress. This an awesome email subscription widget which can be used to increase your feedburner subscribers and also makes your blog look professional and smart looking. The instalation of this Widget is so easy All You should is copy and paste the code.

This A Live demo of The widget :

Live Demo

to add this widget, just followthese simple steps:

go to your blogger dashboard
now, go to layouts and click on add a widget --> html javascript
copy and paste the below code in the gadget box.

<center>

<div align="center" id="truebloggertricks-Subscribe-wrapper">

<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">

<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">

GET FREE EMAIL UPDATES</h3>

<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">

Join us for free and get valuable content delivered right through your inbox.</div>

<br />

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />

<input class="email" id="truebloggertricks_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />

<div class="separator" style="clear: both; text-align: center;">

</div>

<input name="uri" type="hidden" value="truebloggertricks" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>

</div>

</div>

</center>

<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;

background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;

text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;

margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;

padding: 5px;border: none;}#ig-subscription-optin input.name {

background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3cGAVruhUe15TvYWCMEA_BZKLPXpWwJ3h_DOUXbpHwqk5ru8KQuh7b9HpuPa_OjHDakndbMsTEoX6zXWy9ApziOekcu9CHoxrz7D9OvXc740kBpFqJZcz_wI40n-ZgQzEdfkoRVZmS26/s1600/subscribe-name.png) no-repeat center right;}

#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;

font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}

Replace truebloggertricks with your feedburner username.

Css Search Box with Select Option For blogger

noreply@blogger.com (Unknown) — Fri, 30 Nov 2012 23:20:00 +0000

Hi readers :) Today i will tell how to add An Advanced Search box to your blogger blog. I have already shared many search boxes like stylish CSS3 search box and Others. So in this post, let me share the same search box but a little bit difference.

As this post title mentions, this search box includes a selection box along with search box. That means, it makes your search more easy with advanced select option. Anyway the following instructions may lead you to install this widget in better detail.

to Add this Search Box to Blog/Website Follow these easy steps :

Step 1 : Blogger Dashboard → Template → Edit HTML → Proceed → Tick Expand Widget Templates → and search for ]]></b:skin>

Step 2 : paste The Below Code just above ]]></b:skin>.

#search-form { margin:70px 0 100px 170px; width:690px; overflow:hidden; }
#search-page-border { border:1px solid #dbdbdb; border-radius:4px; padding:7px; float:left; }
.search-terms { font-size:26px; border:none; }
#search-which { margin:0 10px; padding-left:8px; border-left:1px solid #dbdbdb; }
#search-which, select option { font-size:26px; }
#search-submit { padding:12px 30px; margin-left:20px; font-size:20px; float:left; color:#333333; background:#cccccc; border:none; border-radius: 3px; }
.accessibly-hidden {left: -999em;position: absolute;}

Now Save your Template and I suggest this search box to add in your blog’s static page. I think it’ll be much better rather than adding this widget in Add a Gadget. Now here’s the HTML code snippet that makes your search box in whole sense. And Don’t forget to change your post page from Compose to HTML while adding this seach box.

<form action="#" method="post" id="search-form">
<span id="search-page-border">
<label class="accessibly-hidden">Search for:</label> <input type="text" class="search-terms" name="search-terms" onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search...'; }" value="Search..." />
<label for="search-which" class="accessibly-hidden">Search these:</label><select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option><option value="posts">Posts</option></select> </span>
<input type="submit" name="search-submit" id="search-submit" value="Search" />
</form>

publish your blog page and you’re done!

Google Style Fixed Top Menu Bar For Blogger

noreply@blogger.com (Unknown) — Wed, 28 Nov 2012 00:01:00 +0000

Hi Guys How Are you ? Fine ? ok, Today i will show you how to add a Google style fixed top menu bar to your Blogger Blog, using CSS - HTML And Javascript codes. You Can See A demo of This Top Menu Bar in google home Page.

To add this Beautiful Top Menu Bar to Your Blog You Should follow these Steps :

Go to Templete » Edit HTML » Click on Proced.
Check The “Expand Widget Templates” Box.
And search for ]]></b:skin>
Right Above ]]></b:skin> Paste This Code :

.menu{

position:fixed;

top:0;

left:0;

width:100%;

font:13px/27px Arial,sans-serif;

color:#3366cc;

height:30px;

background:#2D2D2D;

}

.menu a:hover{

background-color:#676767;

color:#CCCCCC;

}

.menu a{

text-decoration:none;

padding:6px 8px 7px;

color:#CCCCCC;

outline:none;

}

.menu ul{

list-style:none;

margin:0;

padding:0 0 0 10px;

}

.menu ul li{

padding:0;

float:left;

}

.menu ul li ul li{

padding:0;

float:none;

margin:0 0 0 0px;

width:100%;

}

.menu ul li ul{

position:absolute;

border:1px solid #C3D1EC;

/*box-shadow*/

-webkit-box-shadow:0 1px 5px #CCCCCC;

-moz-box-shadow:0 1px 5px #CCCCCC;

box-shadow:0 1px 5px #CCCCCC;

margin-top:-1px;

display:none;

padding:0px 16px 0px 0;

}

.active ul{

display:block !important;

}

.single ul{

display:block !important;

}

.active a{

background-color:white;

border:1px solid #C3D1EC;

border-bottom:0;

/*box-shadow*/

-webkit-box-shadow:0 -1px 5px #CCCCCC;

-moz-box-shadow:0 -1px 5px #CCCCCC;

box-shadow:0 -1px 5px #CCCCCC;

display:block;

height:29px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#3366CC;

}

/*Styling for the link of the current page*/

.current a{

background-color:#2D2D2D;

border-top:2px solid #DD4B39;/*red ribbon at top*/

border-bottom:0;

display:block;

height:25px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#FFFFFF;

font-weight:bold;

}

.active a:hover{

background-color:white;

color:#3366CC;

}

.active ul a:hover{

background-color:#e4ebf8;

}

.active ul a{

border:0 !important;

/*box-shadow*/

-webkit-box-shadow:0 0 0 #CCCCCC;

-moz-box-shadow:0 0 0 #CCCCCC;

box-shadow:0 0 0 #CCCCCC;

border:0;

width:100%;

}

.arrow{

border-color:#C0C0C0 transparent white;

border-style:solid dashed dashed;

margin-left:5px;

position:relative;

top:10px;

}

.mid-line{

background-color:#FFF;

border-top:1px solid #e5e5e5;

font-size:0;

}

So we have successfully added the skin of this menu bar. Now lets go to the second part. That's adding Markup-HTML. Press Ctrl + F and Find This Code :

<body>

Now Add This Code Just Below The Above Code

<div class="menu">

<ul>

<li class="single-link"> <a target="_blank" href="http://plus.google.com">+You</a>

</li>

 <li class="current">

<a target="_blank" href="http://www.google.co.in/">Web</a>

</li>

<li class="single-link"> <a target="_blank" href="http://orkut.com">Orkut</a>

</li>

<li class="single-link"> <a target="_blank" href="http://gmail.com">Gmail</a>

</li>

<li class="single-link"> <a target="_blank" href="https://www.google.com/calendar">Calendar</a>

</li>

<li class="single-link"> <a target="_blank" href="https://docs.google.com">Documents</a>

</li>

<li class="single-link"> <a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>

</li>

<li> <a href="#">More<span class="arrow"></span></a>

<ul>

<li><a href="http://www.google.co.in/reader">Reader</a></li>

<li><a href="https://sites.google.com">Sites</a></li>

<li><a href="http://groups.google.co.in">Groups</a></li>

<li><a href="http://www.youtube.com">YouTube</a></li>

<li>

<div class="mid-line">

</div>

</li>

<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>

<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>

<li><a href="http://translate.google.co.in/">Translate</a></li>

<li><a href="http://books.google.co.in">Books</a></li>

<li><a href="http://scholar.google.co.in/">Scholar</a></li>

<li><a href="http://blogsearch.google.co.in">Blogs</a></li>

<li>

<div class="mid-line">

</div>

</li>

<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>

<li>

<div class="mid-line">

</div>

</li>

</ul>

</li>

</ul>

</div>

Now we are gonna to add The Javascript Code for This Top Menu Bar, Press Ctrl+F And search the code shown below :

</head>

Now Add The below Code Just Above : </head>

<script>

$(function ($) {

$.fn.fixedMenu = function () {

return this.each(function () {

var menu = $(this);

$("html").click(function() {

menu.find('.active').removeClass('active');

});

menu.find('ul li > a').bind('click', function (event) {

event.stopPropagation();

//check whether the particular link has a dropdown

if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {

//hiding drop down menu when it is clicked again

if ($(this).parent().hasClass('active')) {

$(this).parent().removeClass('active');

}

else {

//displaying the drop down menu

$(this).parent().parent().find('.active').removeClass('active');

$(this).parent().addClass('active');

}

}

else {

//hiding the drop down menu when some other link is clicked

$(this).parent().parent().find('.active').removeClass('active');

}

})

});

}

})(jQuery);

</script><script>

$('document').ready(function(){

$('.menu').fixedMenu();

});

</script>

i Hop you Like This Tutorial and this Top menu bar

That’s All

Add a Stylish Feedburner Email Form Below Blog Posts

noreply@blogger.com (Unknown) — Tue, 02 Oct 2012 19:59:00 +0000

Hi Guys Today i will tell You how to add a nice Email Form Under Your Blog Posts, One of the most strategic positions that’s been proven to be effective, This Email Form Including a styled feeedburner email subscription form along with social media buttons can go a long way in increasing the number of your feed subscribers. Apart from this, this widget can increase your facebook fans and twitter followers and Google+.

after adding it below your posts the widget should look like This :

To add this widget to your blogger blog you should follow these steps :

Go to Templete » Edit HTML » Click on Proced
Check The “Expand Widget Templates” Box
And search for <data:post.body/>
Right Below the Above Code Paste This Code :

<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4bLogSoGNQAdzMv_M51AqqcAJHn15djwqGopyxgCuIB8EfbeuYE93a1WRP4nEdOGiDX7mR8b6paXLgLDSe6QNkGvOj-TAX_fu_5s5hNYsVFBudqhRrglGKKYcUbmGJHnBoWEj6OUsuf9/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tutosforblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tutosforblogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>

<input alt='' class='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/tutosforblogger' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggD2JTsFnCC7J5epExhTJ-DhLX1LPSN0AUXSgfqZGHGejeCUBj5TkKiweZwVfTRAggOlAk3OVGAmybFpHW284AJ4cJ9l-U4bLTBNuddvA-Fm6-IkpskRF9v5c4nH9w9cbJWnGg9S3JFKA/s1600/rss-30×43.png'/></a>

<a href='Twitter' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQRm3KrUWWfWSp8djQSef7NVWlM7s6TSZFKbeADTClHC5PvhUSiZ_vTDWvFUsemN-FcmNfb7LqdWiY4N957xK94b32E_LE2NOWs-yndpQcWGy3IXWizNaPzklJ2QPJ7eVzFPmtcpC2jU/s1600/twitter-30×43.png'/></a>

<a href='Facebook' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBtxE7VOcm9W5r6s4Sq0jhhsgnn95uHsalwD5nqpwdRh84zy9TKVi6E6yM625V0iUza6FFaj8J3dAKyH9wSCgCy8DudvDPWR6kE1AVwX4AwEwrVb8J3p_XadGcxdCQSKfxeIns7yzUcA/s1600/facebook-30×43.png'/></a>

<a href='Google+' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HVoX_IwSygvuwdwEecD0d-HkGlVvLiGQBPT-IxF4dtEXD-8s9a56_b1WbThOSxzzbyz9oiLUv9KA2ZvELe9xjo6p6-6Df_vabzzKNDLSOaEv7dK2RPThJenRxaXYN-BDk_aMEzXJw7s/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>

Things to change in the code :

tutosforblogger : Replace this with your feed title.
Twitter : Replace with Your Twitter Profile Url.
Facebook : Replace with Your Facebook Fans Page or Your Profile link.
Google+ : Replace with Your Google+ Profile Link.

Save Your Template And View your blog To see the new Email Form.

See You :)

Write For Us

noreply@blogger.com (Unknown) — Sun, 12 Aug 2012 08:32:00 +0000

I’m looking for writers who can write a nice posts, ideas or news For Tutos For Blogger , We looking for tutorials,guides and news About blogger and blogging general Tips.
If you are interested then we’d like to hear from you.

1- sorts of posts we looking for :

blogging tutorials.
Blogger tricks.
Blogs Seo.
Make money using a blog.
Blogger news.
Free blogger Templates.

2- Please contact Me with the following info :

Your Name, will appear as the author name.
Your e-mail
Your blog url
Would you like to become a regular author or not?
What kind of topics would you like to write about on Tutos For Blogger?
2-4 Sentences About You
Your Avatar if possible

Contact Me :

CSS Image Gallery For All Websites

noreply@blogger.com (Unknown) — Sun, 12 Aug 2012 08:21:00 +0000

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

The Css Code :

<style type="text/css">
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>

The HTML Code :

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>
<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>
<br />
<a class="thumbnail" href="#thumb">tutos for blogger<span><img src="media/tutosforblogger.gif" /><br />tutos for blogger</span></a>
<br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>
</div>

For Blogger Add the Css Code Above ]]></b:skin> And you can use The HTML code in Your Post .

It’s Done :)

ِChange The Design of The Default Tag Cloud in Blogger

noreply@blogger.com (Unknown) — Mon, 06 Aug 2012 21:45:00 +0000

to show our tags in a cloud we can use a gadget option "Labels" in Blogger, now The Question Is how to change the design of the Default tag cloud , Once you add a gadget in the sidebar, a tag cloud will have a default layout that fits, more or less to the rest of the sidebar. To change the size, text color, separation, etc…. we should add a few lines of CSS in the template,
ok Let's Do it :)

Go to blogger.com > Design > Edit HTML and check on the box “Expand Widget Templates“
Find this code :

]]></ b: skin>

Add The below code Just Above ]]></ b: skin>

    .cloud-label-widget-content {
    text-align:center;
    font-weight: bold;
    }
    .cloud-label-widget-content span {
    padding: 0 0 0 5px;
    }
    .label-size-1 a {color: #8b8989; font-size: 10px;}
    .label-size-2 a {color: #000000; font-size: 12px;}
    .label-size-3 a {color: #4682b4; font-size: 14px;}
    .label-size-4 a {color: #dccdc; font-size: 15px;}
    .label-size-5 a {color: #6495ed; font-size: 18px;}

Modifications :

.cloud-label-widget-content {
Controls the design of the container of the cloud,
.cloud-label-widget-content span {
Controls the distance between the labels,
.label-size
Here we control the text color and size of each of the labels, according to the five options that the gadget provides.
In this case we do, is to include the CSS to add between <style type='text/css'> and </ style> and place it right after the label template <body>.

Matt Black Tabs ( Horizontal CSS Menus ) For All Websites

noreply@blogger.com (Unknown) — Mon, 06 Aug 2012 15:33:00 +0000

There's often beauty in simplicity. Matt Black Tabs is a clean CSS list menu that uses no images, and very small in footprint. Each tab is floated left to achieve its look and all contained in a wrapper that negate the need to manually clear "float" for the contents that immediately follow.Matt Black is a Cool Horizontal Menu With Css. To Add This Menu To Your Blogger Follow These Simple Below steps :

Go to blogger.com > Design > Edit HTML

check on the box “Expand Widget Templates“

add The below CSS code just above/before ]]></b:skin> tag in your template,

<style type="text/css">
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>

Now go to Page/Edit Layout.
Click on Add a Gadget > HTML/Javascript.
Paste below code and save it.

<div class="mattblacktabs">
<ul>
<li><a href="http://www.Tutosforblogger.blogspot.com/">Home</a></li>
<li><a href="http://www.Tutosforblogger.blogspot.com/">Templates</a></li>
<li><a href="http://www.Tutosforblogger.blogspot.com/">CSS</a></li>
<li><a href="http://www.Tutosforblogger.blogspot.com/">Blogger tutorials</a></li>
<li><a href="http://Tutosforblogger.blogspot.com/">My blog</a></li>
</ul>
</div>

That’s All

Random Post Widget For Blogger blog

noreply@blogger.com (Unknown) — Sun, 05 Aug 2012 19:54:00 +0000

Hi Every Body :) Today i will show You How To Add A Random Post Wideget To Your Blogger Blog, This Widget Alows your blog viewers/readers/visitors to see posts at random.

Go to your blogger dashboard, Click Layout.
Add a Gadget >> HTML/JavaScript.
And paste the below code.

<div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'View Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#myLuckyPost a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#myLuckyPost a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>

save the Gadget ,

Style Blogger Labels With Css

noreply@blogger.com (Unknown) — Sun, 05 Aug 2012 14:08:00 +0000

By Adding Some Css Codes to your blogger Template You Can Customize Your Labels With Cool Effect.This labels is Created by Stylifyyourblog. This label hack can be easily applied to your labels By just Follow The Below Steps :

Go to Blogger Dashboard > Design > Edit HTML.
Download/Backup your template.
Find ]]></b:skin>
Add below code just above ]]></b:skin>

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}
.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}
.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}
#Label1 {
    height: 210px;
}
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Now Save Your Template, And You Are Done !

That’s All :)

Change Default Blogger Anonymous Avatar Comments

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 19:53:00 +0000

Hi Guys, in This Tutos i will Show You How to Change default Blogger anonymous avatar on threaded comments. After Blogger announced new feature of threaded comment, we still can costumize avatar for whose comment with 'anonymous' or 'Name/URL'. At first time Blogger using blank image http://img1.blogblog.com/img/blank.gif, so we can hack the template with background for avatar.
Now Blogger using avatar with URL http://img1.blogblog.com/img/anon36.png, and we can't hack this image with background. But we should use jQuery script to hack this.

To change default Blogger anonymous avatar, follow simple steps below :

Go to Blogger Dashboard > Template
Download a copy of it
Click on Edit HTML
Hit Proceed
Check Expand Widget Templates
Add This Code Just Before </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'your-avatar-url-here')
.ssyby('blank')
</script>

Replace Your avatar url Here with your avatar URL.
Save Your Template.

Social Media Subscribing Widget For Blogger with Hover Effect

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 19:18:00 +0000

Hi blogger’s In this post I will give you a tutorial about adding Social Media subscribing Widget With Search Bar and Cool Hover Effect to Blogger/Blogspot. Social sharing is a most important thing to all blogger. It increases traffic on your blog, Now lets see how to add this Widget to your blog.

Live Demo

Follow These Steps to add Thsi Widget To Your Blogger/blogspot :

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin> and paste the following code just above it.

/* -------------SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQRKy1t-akKT9GsCR7MsF9dxN4HUBbj1FoSZnyqVPZnooa6vJQsmei03-bzZoNDc2fD1A80wqswu7GCv4N3yNRRI-gDNL-70syzUAtVICCh7CH9zmQkc505WZvpQbtYZBNNsdKMCzS4TY/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

>> To Change width of search box edit width:350px
>> To change width of search input area edit width:80%

Go to Blogger Dashboard > Layout
Add a Gadget
Select HTML/Javascript and copy and paste the code below :

<div class='topsearch'>
<div class='clerfix' id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1KyuEgNk5eD7MTeIaMTG8uald50eEP81lLu6wsCmca87di99TDOWIUj6EWxvBUTHS-m9xrbMCMT-nyAGYxnkZ4cd_poGk8cT3U-s9elnN8dSA7EggSk7HkeAHoaskGyVC3s6qReRbR8/s1600/search.png' title='Search' type='image'/>
</form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKjfNtCporJeEhhigp_rgMhyphenhyphenJ0VCDY-SHfRr5yuj_Mjcxus_VuzpZdklMWImvqfpiv26IXj3fC0n4ZyPu9BFrFbc1sC0r98OR6KqpZowFBVkAGwpeSKfW6sqq-t0rIgBYWOmWH5zh5pZA/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl "feeds/posts/default"'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBixyl8kYC6Rav3YW2x3nSWZgNadqJqiIKJwHtBIlHe1ykxIgfT5EyG7RVndCYowt1qrKwfwrFBGJrVYEhq-AJqpPids4y-cCEhr438xNULZQpl26NWXdUI0UVoRm-W5CuJzQyyml-Buud/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLUqXlN6vSywNmek9TYeE4WLQcdJWbq0eI9XylMsK4I2jGs5bBu_NhbMftaExwRp0XWA8HJRokY09qZ_cxCdmJaJ6zAB_-XkHwR23ts3PLUGjkj1rybVMJF1vUJRwLft7BJ6IcDTWG9ZNr/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>

>> Change USERNAME with your Twitter username
>> Change USERNAME with your Facebook page username

Save Your Template and You Are Done !

Cool Subscribe Widget With Css3 For Blogger/blog

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 19:12:00 +0000

One of the most beautiful gadgets that you can use to enhance your blogger/blogspot is the Subscribe widget V2 With Css3. This is a new version of his previous work and this one has the most common social media platforms like Twitter, Feedburner, and Facebook. The Subscribe Widget V2 with CSS3 is similar in nature as version 1, with the same classic look but with upgrades like CSS3 transitions and box shadows. The latest color combination also makes it more professional

Live Demo

To Add This Widget to Your Blogger Blog Follow Simple Below Steps :

Go to Blogger Dashboard > Layout
Add a Gadget
Select HTML/Javascript and copy and paste the code below :

<style>
/* ---------Subscribe Widget V2----------- */
.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>

<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyB3WmUWKBD3x_L8nRb1qemIon3sgcPi0dzf7PRIJTnPsN6ZjT1RR5aropgwptOGyuj_9-_4kvcZ6TE_qjtl_0vO6Cs9Bkw2ZwYSWGxLt9r0_6SSBl9k8fWjP4NpxGEyFyFx08ATkBhxF7/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMFoGn68VhHMcPhvv3k1BeqrMjCLoNVIoyWrjDyORxGo05JY0LI34KGvQXZBMJi2uRO9Tv6MMmNw0_umkEAymufz-1Y4kc5QGj7ez9kW5lQRb91v_hmYr1_tBZICGcokuhUxXrYXY1hXp/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29IHNraBxbvhp6cq7Wra4qebhW7XnP1_i3Fw3MQQK-Vn3hSOQmfTz9YekUgMogZGdcetwIJLLe-A_wWmPQEaiH69KZnounqkmmeF3B73nc-makc50fqdHRavuOv2v4yF61sG3mkgDHTJY/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<!—End Classic Subscribe Widget V2—>

Replace the following with your own :

http://feeds.feedburner.com/USERNAME >> with your own Feedburner id.

http://twitter.com/USERNAME >> Change with your own Twitter id.

http://facebook.com/USERNAME >> with your own Facebook fan page link.

Click save And you are done :)

“Link To This Post” Widget For Blogger

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 03:10:00 +0000

another best way to increase page views and traffic on your blog, is “Link to this post widget” For Blogger. This widget contains two text areas,in first it contains a URL of that respective post and the second text area contains a HTML code which includes title and URL of your post.Another great feature of this widget is it updates automatically , That’s Mean’s you dont have to update it When you post a new article on your blog.Also the installation this widget is so easy you just need to add a little code in your blog.

Live Demo

To Add "Link To This Post" Widget Below Every Blogger Post, follow simple steps below:

Go to Blogger Dashboard > Template > Edit HTML
Check Expand Widget Templates
Search for This Code :

<data:post.body/>

If you can't find ==> <data:post.body/> then find :

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

Or :

<div class='post-footer'>

And add This code just above it.

<b:if cond='data:blog.pageType == "item"'>
<p style='color: #7AA1C3;font-weight: bold;'>If you Like This Article,Then Help us by copying one of the codes below.</p>
<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea><br/>
<br/><p style='color: #CF152A;font-weight: bold;'>Paste This HTML Code On Your Page:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><a href="<data:post.url/>"><data:post.title/></a></textarea>
<div style='text-align: right;font-size: x-small;'>
<a href='http://tutosforblogger.blogspot.com/2012/08/link-to-this-post-widget-for-blogger.html' target='_blank'><span style="color: #838383;">Get This Widget</span></a></div></b:if>

Save Your Template

How To Add Simple Go to Top Button To Blogger

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 02:57:00 +0000

Hello reader’s In this post I will give you a tutorial about adding the simple Go to top button to your blogger blog With Css And JQuery. When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.You Can see a Demo in My blog :)

Now lets see how to add this button to your blogger :

Go to Blogger Dashboard > Design > Edit HTML.
search for this Code </body> .
Add below code just above/before </body> tag.

<style type="text/css">
#hb-gotop{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#hb-gotop").scrollToTop();
});
</script>
<a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>

Save Your template And Your have successfully added this button to your blog.

Add A Social Subscription Box With Search Bar For Blogger

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 02:48:00 +0000

many blogger adds their social networking profile links in their blogs Because The Social networks plays an important role in increasing traffic on there blogs, Today i will Show you How to add A social subscription box with Search bar to your blogger very easily just using CSS and HTML codes.It contains your Feedburner Link,Twitter Profile Link,Facebook Page Link,Google + and search bar. Installation of this widget extremely easy you just have to copy and paste the codes.

Live Demo

follow simple steps below :

Go to Blogger Dashboard > Design > Edit HTML.
Backup/Download your template.
check expand widget templates.
Now search for ]]></b:skin>
Add below code just above ]]></b:skin>

/* ---------Social Media Widget----------- */
#search {
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbsuE05Hs4t6u-um3LvCtXQEKyigJi9MxsuObRnWIWyLzmgnxFkRYe2u-vErADJI9s0B-0OorJMiPieRCYg9psLPIov2mhnj1AtsLJ9oI-vBHhuJDCH3Fi8NStjh8iR7GhmwN52S5b-g/s1600/search.png ) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget
{background:#F5F4EF;
border:1px solid #E7E6DE;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
}
.social-connect-widget:hover{
border:1px solid #CBCBC2;
background:#FFF
}
.social-connect-widget a{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,Sans-serif;
color:#4B4D4E
}
.social-connect-widget a:hover{
text-decoration:underline;
color:#F77C04
}
.social-connect-widget img{
vertical-align:middle;
margin-right:5px;
height:32px;
width:32;
}

Now go to Page layout
Add a Gadget > HTML/JavaScript.
Paste below code.

<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search";}" onfocus="if (this.value == "Search") {this.value = "";}" type="text" value="Search" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLwNX2-f-cX-dImMzYXaIa-AlVy_0TqFgrL-0vgNI2vMrww5eF0ulmgAYbKptCgVL3nsAamsvohk7ZWxB9mt5m8BRmsAKn4GId6PHDhYQu7a4wMbtFxtgsujDWIN0zl8kn5l2DlkIfWU/s1600/rss-black.png " /><a href="http://feeds.feedburner.com/username" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskJBqWKZBy0UtmM1c7AMfSURERkeN6lxd-O09je4iO-yUaVdGlaf-zDcmxAxe0KGWxbGS3lyTgtFvnMR-U6Odx3fYXSJfK7TovE5J6d3IgnIjK5xQSzjHkoqGcBSsGr9NCbVfnHAgy6g/s1600/twitter-black.png " title="follow us on twitter!" /><a href="http://twitter.com/username" target="_blank">Follow Me on Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwZEhKKrnYxAUAQtZYHi4HqdQny0z4UPXPIOSUsvtPFv14awKPR4PHpLhVdXa_sDE_zx3hDJLIdpAuyVwmVsz-JL2HmCWFApmu5NNVQjNedcUQxnNhBuqLUarqw2B4QXEzD9gW-e3qdg/s1600/facebook.png title='Be Our Fan" /><a href="http://www.facebook.com/username" target="_blank">Follow Me on Facebook!</a>
</div>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcKEqO03FMZPRlEdtjYYvLN0KwItX15fGNpKHkyUc1F55vVfICvfkuEz5u2LGtl0CKbMbXUayBdjH0TthPjymLiisln6ojsWg4mL7UB89rT9aKs0G7lqYYcohLGRhdbPyoo6FrD5UreLQ/s1600/g-plus-logo.png " /><a href="https://plus.google.com/username" target="_blank">Add Me on Google+!</a>
</div>

Change this :

useraname : your feedburner id
username : your twitter username
username : your facebook fan page id
username : your google plus id

Click Save and You Are Done :)

Social Media Subscribing Widget With Count For Blogger

noreply@blogger.com (Unknown) — Fri, 03 Aug 2012 02:07:00 +0000

Hi Guys! in this post i will Tell How To Add A wordpess Style Subscribtion widget with count & cool image hover effect which increases the beauty of this gadget.The main part of this widget is you can show the number of your subscribers and you can update the number of your subscribers anytime by just editing some numbers.

Social Media Widgets are the quite right and interesting way to maintain your blogs visitors interest.

Demo

Go to Blogger Dashboard > Design > Edit Layout.
Add a Gadget > HTML/Javascript.
Paste below code.

<style>
.rss {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrWJxwv3ITXCYOK-dsbv8stq4lMPjXV1gGAe_Spp3wXUYUDah_aVxbbIiPX5O463X9KG4FByj7h7V071pLTTnMjK1_yCAOKbXy9LBz90eiZ-lQtI3tGqjdixgq_e1_IKjoPX1Ci34M6Hs/s1600/rss+sepia.png ) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}
.rss:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNreW1SiEOdujaKZ8kjXQN1INROqpy4QqZw74pWuIrT_k-CDHG9m17doSzb33joPkNwCg5mfLdI_SoBVe0ES7CDV4-NKV4tAfFsSMgBDDruJBNedF9Q5GHjaSooscSEfNRJnpG4kzC1tM/s1600/rss.png ) no-repeat;
}
.twitter {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGvHVc7l5VQ0k59D7RZjKoD24Ew7BV0APmzS5IGCWLg2HURidzesMBU12-p3RRmYf9MtsuqcQ5dpEsRo_ZETafmn9LIGq1Zjf7-777K3PRo7VjCgHqXisCQsTbLT1WZphhIzsi8T6JB0/s1600/twitter.png ) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}
.twitter:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LLW9ctAP7gXTRyMViD444pzKNJSPnfyUh6_vyiU3PfWdczXkZGZh2WFsWZcIxNk2ajNk3Odo9mivH1BvbO7pVxkgqGg79y-1OYRwdu5dtGk2L5Jn5BKd8PSNm_3V7uEMIS42aJwGypk/s1600/twittter.png ) no-repeat;
}
.facebook {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge24FXyHmm96Rl-nA62y5MGOMQ5bnSd__W0yJLzLrOs50tDoTSbXKKWtzCOeuCXrodXZ7iosdnojBTAhxI_TnBOc6fUZs-qNRKRajmYl7yKvWYpK7vhghyphsQa3jJKDiW9UpSco42g5k/s1600/fb+sepia.png ) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}
.facebook:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5DgH90oudu97OvAG_4KjKrrpNMfBG7RvuQHdIOMD1pC1YWwDFJItOZvpT6MYlgfzxzS6A8aLj1pA57M4P9ASmF_X5eF9fhvTawZvntR0m8r0yVT7SUOYg18ujfTEWzOgUrpD2xc0cqo/s1600/facebook-logo.png ) no-repeat;
}
.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia, sans-serif, Times;
    font-size: 1.5em;
    font-style: italic;
    color: #D3C5B1;
    padding-top: 05px;
    text-shadow: 1px 1px #B2A99D;
}
.follower-rss a, .follower-twitter a, .follower-facebook a {
    color: #AA9C89;
}
.follower-rss span {
    font-size: 2.2em;
    font-weight: bold;
    font-style: italic;
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}
</style>
<div class='rss'>
    <div class='follower-rss'>
        <span>
            <a href='http://feeds.feedburner.com/username'>33</a>
        </span>loyal readers</div>
</div>
<div class='twitter'>
    <div class='follower-twitter'>
        <span>
            <a href='http://twitter.com/#!/username' rel="nofollow">270</a>
        </span>followers</div>
</div>
<div class='facebook'>
    <div class='follower-facebook'>
        <span>
            <a href='http://www.facebook.com/username'>63</a>
        </span>fans</div>
</div>

Replace The Links Below With Your Links And Number oF Followers

<a href='http://feeds.feedburner.com/username'>33</a> :
<a href='http://twitter.com/#!/username' rel="nofollow">270</a>
<a href='http://www.facebook.com/username'>63</a>

Save You Gadget And You Are Done !

Automatic read more hack for blogger

noreply@blogger.com (Unknown) — Sun, 29 Jul 2012 00:56:00 +0000

Hi Bloggers , In some popular blogs it takes too much time to load completely. One of the reason is some blogs don’t use the jump breaks. And some blogs who didn’t use jump breaks before have many posts and they can’t add the read more hack to all posts because it’s a waste of time. Here is the hack for all bloggers to add automatic post summary and thumbnail.

Step1 :
Go to blogger.com > Design > Edit HTML and check on the box “ Widgets”>Expand Widget Templates“
Use [Ctrl+F] to Find The Code below :

</head>

And add the below code just above it

    <script type=’text/javascript’>
    var thumbnail_mode = "float" ;
    summary_noimg = 530;
    summary_img = 440;
    img_thumb_height = 220;
    img_thumb_width = 220;
    </script>
    <script src=’http://impresionate.googlecode.com/svn/excerpt.js’ type=’text/javascript’/>

To edit the image height and width change the blue-colored numbers.
Step2 :
search for This Code :

<data:post.body/>

And replace it with the below code,

    <b:if cond=’data:blog.pageType == "item"’>
    <data:post.body/>
    <b:else/>
    <b:if cond=’data:blog.pageType == "static_page"’>
    <data:post.body/>
    <b:else/>
    <div expr:id=’"summary" + data:post.id’>
    <data:post.body/>
    </div>
    <script type=’text/javascript’>
    createSummaryAndThumb("summary<data:post.id/>");
    </script>
    <div style=’clear: both;’/>
    <span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Read more >></b></a></span>
    </b:if>
    </b:if>

To rename the Jump Break text change the red colored text with Continue reading>> or anything you like.

Lavalamp Menu With Css3 For Blogger

noreply@blogger.com (Unknown) — Sun, 29 Jul 2012 00:13:00 +0000

Hi Bloggers , lava lamp menu is A beautiful Horizontal tab menu with css3 for Blogger blog, This Tab menu suits every blog and you can choose your own color. if you want add this beautiful widget tour blog Follow these steps :

go to your Dashboard > Design > Edit HTML and check “Expand Widget Templates“

Copy and paste the below Code Above ]]></b:skin>

/*LAVALAMP START*/
.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;
}
.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);
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
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;
}

Now add the below JavaScript just above </head>

<script src='http://yourjavascript.com/3131111161/jquery-1.4.1.min.js'/>
<script src='http://yourjavascript.com/1414311106/lavalamp.js'/>

Now go to your blogger dashboard and click Design > Add a Gadget > HTML/JavaScript and paste the below Code there.

<div class='lavalamp'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='YOUR-LINK-HERE'>About</a></li>
<li><a href='YOUR-LINK-HERE'>Blog</a></li>
<li><a href='YOUR-LINK-HERE'>Services</a></li>
<li><a href='YOUR-LINK-HERE'>Portfolio</a></li>
<li><a href='YOUR-LINK-HERE'>Contacts</a></li>
</ul>
<div class='floatr'/>
</div>

Change (YOUR-LINK-HERE) With Your Links

Cool Numbered Page Navigation Widget for Blogger

noreply@blogger.com (Unknown) — Sun, 29 Jul 2012 00:02:00 +0000

Hi ! Today i Will Tell You How To Add a Cool Numbered Page Navigation widget To Your Blogger Blog, you can add This numbered page navigation to your blog With Deferent Colors. To Add This Cool Numbered Page Navigation To your Blogger Follow These Steps :

go to your Dashboard > Design > Edit HTML and check “Expand Widget Templates“

By Using (Ctrl+F) Find This Code :

]]></b:skin>

Add The Following Code Above it

.pagenavi {
    width:300px;
    margin: 50px auto;
}
.pagenavi span, .pagenavi a {
    display: block;
    text-decoration: none;
    color: #717171;
    font: bold 11px Arial, sans-serif;
    text-shadow: 0px 1px white;
    padding: 5px 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
    background: #f9f9f9;
    background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
    background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
    background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:hover,.pagenavi a:hover {
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
    border:none;
    color:#575757;
}
.pagenavi a.current {
    color: white;
    text-shadow: 0px 1px #3f789f;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    background: #7cb9e5;
    background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
    background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
    background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
    background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
    background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:hover {
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    background: #99cefc;
    background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
    background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
    background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
    background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
    background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:active {
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}

search for this Line :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Add This code Below it

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Now Find This Code :

<!– navigation –>
<b:include name='nextprev'/>

Replace it with the below Code :

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Numbered Page Navigation ( The Best One )

noreply@blogger.com (Unknown) — Sat, 28 Jul 2012 23:59:00 +0000

Hello readers,today i will give You the Best Numbered Page Navigation widget For Blogger Blog, which looks awesome. you can add This numbered page navigation to your blog in a few Seconds . To Add This Widget To your Blogger Blog Follow These Steps :

go to your Dashboard > Design > Edit HTML and check on the box “ Widgets”>Expand Widget Templates“

Using (Ctrl+F) Find This Code :

]]></b:skin>

Add The Following Code Above it

.pagenavi{
position: relative;
display: block;
width: 400px;
height: 40px;
overflow: visible;
margin: 50px auto;
border: 10px solid rgba(255,255,255,0.5);
/*border-radius*/
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*box-shadow*/
-webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
-moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
}
.pagenavi span,.pagenavi a{
font: bold 20px/30px Tahoma, Arial;
cursor: pointer;
text-decoration: none;
color: #464646;
display: block;
float: left;
margin-left: 2px;
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
padding: 2px 10px;
min-width: 10px;
text-align: center;
position: relative;
text-shadow: #fff 0 1px 0;
background: #cdcdcd;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9)));
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
}
.pagenavi a:after {
content: '';
position: absolute;
bottom: -3px;
height: 100%;
display: block;
width: 100%;
left: 0;
/*box-shadow*/
-webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
}
.pagenavi a:first-child::after {
/*border-radius*/
-webkit-border-radius: 500px 0 0 500px;
-moz-border-radius: 500px 0 0 500px;
border-radius: 500px 0 0 500px;
}
.pagenavi a:last-child::after {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
}
.pagenavi a.current:after {
height: 1px;
bottom: -1px;
}
.pagenavi a:before {
content: '';
position: absolute;
top: 1px;
height: 100%;
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
width: 1px;
display: block;
background: rgba(0,0,0,0.4);
right: -1px;
}
.pagenavi a:last-child::before { display: none !important }
.pagenavi a:first-child {
/*border-radius*/
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:last-child {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:hover {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
}
.pagenavi a:active {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
top: 1px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a:active:after { bottom: -2px }
.pagenavi a:active:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: 0px;
}
.pagenavi a.current {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
top: 2px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a.current:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: -1px;
}
.pagenavi a.current:active:after { bottom: -1px }

search for this Line :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Add This code Below it

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Now Find This Code :

<!– navigation –>
<b:include name='nextprev'/>

Replace it with the below Code :

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

add an Animated Description panel to your images

noreply@blogger.com (Unknown) — Wed, 11 Jul 2012 23:41:00 +0000

- Hi in this Tutorials i will Show You How To add an Animated Description panel to images that slides open when the mouse rolls over the image using CSS3 transitions. By wrapping the image inside a relatively positioned container alongside a newly injected description DIV to house the description itself, we can slide the later into view using CSS3's transform:translate() property. All four sliding directions are shown below (up, down, right, or left). The onset of the sliding animation is delayed by 0.5 seconds each time using the transition-delay property, so it occurs after that of the CSS3 shadow being added to the image to create the effect of a raised image. The result is a cool image with a sliding description panel that uses nothing more than HTML/ CSS to create the effect.

- The following works best in a modern browser that supports CSS3 transitions, namely, IE10+, FF3.5+, Chrome/Safari, and Opera 10. Lesser browsers such as IE9 will still see the description panel onMouseover, just sans the transition:

To add this effect to your images fllows these steps :

Go To Blogger > Layout > Edit HTML
Search for the code :

]]></b:skin>

Add the code Below above : ]]></b:skin>

<style>
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto; /* reset from default */
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide{
width: 150px; /* reset from default */
top:15px;
left:0;
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide{
top:0;
bottom:auto; /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}
</style>

Use This Codes Below For Add the animated description panel to your images , Make sure each container contains explicit width/height attrs that reflect the dimensions of the showcased image

Code1 :

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="Url of your image" />
<div class="desc">
Description Her
</div>
</div>
<br />

Code 2 :

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="Url of your image" />
<div class="desc rightslide">

Description Her
</div>
</div>
<br />

Code 3 :

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="Url of your image" />
<div class="desc upslide">

Description Her
</div>
</div>
<br />

Code 4 :

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="Url of your image" />
<div class="desc leftslide">
Description Her
</div>
</div>

I Hop this Effect Working with you ==> See You :)

make money blogging ( get paid to blog )

noreply@blogger.com (Unknown) — Mon, 09 Jul 2012 22:44:00 +0000

One of the easiest, most popular and profitable ways to generate an additional income stream from your blog/s is to do some paid posting through paid blogging networks. Connecting paying advertisers with bloggers-for-hire, paid blogging networks simply act as a bridge or middle-man.
Bloggers are basically paid to write and post their opinions and reviews of advertiser websites, products and/or services. But, because each paid blogging network is different - rules, guidelines and requirements vary.
Being professional and consistent are key in order to build a good reputation for yourself. Making money through paid blogging and posting can earn you a realistic $100 to $500 or more per month with each blog.

To help get you started with paid blogging, follow these steps:

Instructions :

In Notepad or other text editor, make a list of 7 to 10 keywords that describe your blog site. Then, beneath this list, create and write a keyword-rich description of your blog. Save it! You're going to need to copy and paste this information on your applications to paid blogging networks. Trust me, this will save you a ton of time.
Browse the following paid blogging network sites (direct links to these sites are found at the end under the Resources section)

PayPerPost.com
These folks pioneered the "get paid to blog" concept. Besides being the most popular paid blogging network, I've found that they always seem to have the most job opportunities available at any given time. PayPerPost pays bloggers anywhere from $5 to over $200 per completed and approved post.

Bloggerwave.com
Although Bloggerwave is a smaller paid blogging network and lists fewer open job opportunties, their site is super blogger-friendly and easy to to navigate. Bloggers here get paid a minimum of $10 for each completed and approved post. Bloggerwave also pays on time and like clock-work.

Smorty.com
You'll like Smorty because they pay from $6 to $100 for each post and they pay-out weekly. A great feature with Smorty is that bloggers are allowed to have multiple blogs so income earning potential is unlimited. The Pagerank of your blog along with a high Smorty smart score determines how much you can earn - up to $100 per post.

ReviewMe.com
Bloggers - get paid to review products and services on your site. You control what you review. You will be paid $20.00 to $200.00 for each completed review that you post on your site.

LoudLaunch.com
With LoudLaunch the amount you are paid per post is based on your blog ranking? LoudLaunch allows bloggers to be compensated for distributing our advertisers LoudLaunch press releases. Search through our advertisers latest press release campaigns, select campaigns aligned with your blog, post a Micro Press Release on your blog based on the advertisers campaign, and be compensated based on the exposure your blog can deliver.

Blogitive.com
Once you are approved to the Blogitive system, you are given access to opportunities from companies to post about their news releases. You are paid per posting. The standard amount is per post is $5. This may vary depending on the sponsor. You must have a PayPal account in order to get paid with Blogitive.

BloggingAds.com
BloggingAds is different. They supply the advertisers, the text and the money, all you have to do is post the ad on your blog. We are looking for bloggers to post one-time ads on their blog sites for money.

The Original Post

Camino blogger template

noreply@blogger.com (Unknown) — Mon, 09 Jul 2012 01:49:00 +0000

Camino is a free blogger template custom design with 1 Left Sidebar, 1 Right Sidebar, 3 Column, Ads Ready, Black, Blogger, Bookmark Ready, Elegant, Fixed, Slideshow, White, Wordpress Look, type of this template is : 2 Sidebar, 3 column, Adapted from WordPress, Black, Blue, Elegant, Featured Section, Fixed width, Header Banner, Left Sidebar, Magazine, Right Sidebar, Slider, Top Navigation Bar, Web 2.0, White, Movie

Designer :

newwpthemes.com

Template Author :

Lasantha Bandara / premiumbloggertemplates.com

Download Live Demo