How To Add CSS Cool Image Effect For Blogger

How To Add  CSS Cool Image Effect For Blogger

Demo Here

1.  Log in to your blogger account and Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below one of below code.

<a href="http://www.bloggertrix.com" target="_blank">
<img src="URL" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</a>

*Replace with bloggertrix.com with your URL
*Replace with URL  with your URL

4. Save HTML/Javascript. 
you are done.
( You can use this code for  when you  making the post.)

Continue reading →

10 Cool Twitter Following Image Gadget For Blogger

Visitors like attractive blogs. If we have cool  blog, they will
like to visit our blog daily. So today im going to explain how
 to get more twitter follower with using cool follower
image gadget.

1. Log in to blogger and Go to  Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste One of below code as your like

i

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylFEd2rZ-DEoYqZczcR-nvSIemGJIcZhxv9zFme_Uz8oG3QnhoUIj2c_jszz7Jk_-WYx63bqCEJ5a8M8dwi9vWshCnFY4Z0tgwxp-SbK_1nn2U2FX2kCXtcdq5buBUOzLB8uy3l7_OVrM/s1600/Follow+Twitter1.gif"title="follow me on Twitter" border="0" /></a>

ii

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvzwFDhxY1f34HVp6PW7mD4BLvzshyphenhyphenJA06-H4IfLEpVefm0fajDggJYUXydXSk2ZPAwalUs9D1FLpOuUQ91pYi51vm3mP2cuM3_kSIk13o7LiZn_OMgItLsOi9lII6zzyd0wYqoAZk4_J/s1600/Follow+Twitter2.png"title="follow me on Twitter" border="0" /></a>

iii

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw94bcvbnrjX59RPZG-i4sTR9dzrvoTlhv5hQYadddAeA9Qazt-dQuGQn1W4ja8Qyag5da_CxqJM6p5vGEb63q5VyVWjI7aGgujUx4T-B_V4YEgwMzSOoxpbM5vKhXLJWE9aKWcLeqSyUA/s1600/Follow+Twitter3.png"title="follow me on Twitter" border="0" /></a>

iv

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBpo-W2EvRwnjvVGHILbhRo7TSYfjfVALgnvLhydMZcvUT1LYz0IonNhtd2u8U1D00ErBY1cDIRxwG3k3qmKbvqlvp65USgJyoeKx_scliGUKLQ6KpD-W2cGwArN_7ytquQvINbkFrLT0/s1600/Follow+Twitter4.png"title="follow me on Twitter" border="0" /></a>

v

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYI6xGdm_YUSVYCPxSAfacGLR1O_Uo8k_UGa5NOpqxuDiRyIfnOfqT2vjRCYPjU89ZC3wDoVf6cy5GTzzIEU11rCUWhuEQz8MhW4ZThsHkChcoeeDljcrd2tm1YOxBBAfgnkHMix9BIVLq/s1600/follow+twitter6.png"title="follow me on Twitter" border="0" /></a>

vi

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOZyPNB7j9dBmrSJ-U2n3f95EIaK7jt3pfIML8jNZIK4blmBWpL64zOpPuVps2BpdBh1jqbl4dOpqCg5BRaiuOp7ZpNq4ZKemlRzpwNHThZ2DSXl0-Icq9ULP06j-YIV4NwoaQs5KW59W/s1600/Follow+Twitter7.png"title="follow me on Twitter" border="0" /></a>

vii

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUKO3dOvZDhOPiXxBnf9IklqTrKztrKsCgQUeCHH6TTDeiny-0Yx20rtI2PGfAnY81eMIGe59sCmaOO9usIKpqvNQ9Rc3HAqDuKdKcNcM0Ckjx9v_eDfAG6fyNT3KIHBslddtpKC8nnWYF/s1600/twitter5.png"title="follow me on Twitter" border="0" /></a>

viii

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWMTdl0BBI8LamFcH7cuIWpHHENPfpR4_7jlWaPwg3JjxszKqBt5ZaCg680MUJswRAEnbKlUBZRp3_Eem0qIeQPGfwL7_G8nXQJJM6FVcxlOBq45WhiqN4nfY76pVpUNwyjGxbsf61irs4/s1600/twitter+7.png"title="follow me on Twitter" border="0" /></a>

ix

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii3JvboRAZzp2Ydv_2gbCJOxj81c6Yq4S_Qy6F2u05FViABGLZ7dJxyqyj-OKmPjOEUfwomrJbBm7dHb0cISI407vt9Oxo3FH4-AkOGgidCSdezUCvnuqhzFjNhKcbPZDdZ9tUSi5tPOju/s1600/twitter8.png"title="follow me on Twitter" border="0" /></a>

x

<a href="http://twitter.com/Bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsreGrgoV6oR8-MeKslzbnCKRlQrxpB4hLy_pCXp_3bcRajqTr1QWq9hM0R6Hc5gah_Bp291bt_otoagPmSs2mL3_neGzzOh_8dMFMGfefepuQQsASaOvKZScHrinU45sA3mbMp6yXmi_D/s1600/twitter9.jpg"title="follow me on Twitter" border="0" /></a>

*Replace Bloggertrix with your Twitter name

4. Click save 'HTML/JavaScript'
    You are done,

Continue reading →

How To Add Images For Blogger Page Navigation

This is a cool trick for your blog.some Templates don't have
this icons. so you can add this icons as your like.
its easy , follow these steps.

1. Log it to blogger and go to Design > Edit HTML

2.Make sure you put check mark to “Expand Widget Templates”

3.Find this code by using Ctrl+F 
(This is for previous page)


title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

In this above code select  <data:olderPageTitle/> code and replace with below code 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2N5EXIvvcO-F4Z6JSn8lofSiRXV3OPsKgYQLBaXucqgHnXfZVBYHf0RRVN3CcoPOkKAzcU0sjFHVC3birnwOioMduY1UMGY662iIR9Vcvj5v3YleGliFMMGyyPlrbOMJd447qX23kIwt/s320/Button-Previous-icon.png'/>


4. Find this code by using Ctrl+F
(This is for Next page)

title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

In this above code select  <data:newerPageTitle/> code and replace with below code 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwbbX0SCeD76yr4FhUlyAiq3Qb6kVh7NSQVtBq5UGYS41C0LltwkYXujADU8yeuaStEHeNG2ulpwJ4RdcnSRHvAOGN0OsTW6D769ifphn8BrIIt2Cs4XI5rHtkBh-xniL8o0ypoHdnObUq/s320/Button-Next-icon.png'/>


5. Find this code by using Ctrl+F
(This is for Home page)

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
In this above code select  <data:homeMsg/> code and replace with below code 
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCnR31fr84dOH9_4ruGjLqLwIqb72AeuY9IOj1xB3I2okTdLFpzT0wPeAZnjcpFYNYkzJKEjkqGp2_QHbjB-GD661EuvIOcWdQ5jHZxJCVSoALKBCpct67qglLm5m2rxku_TqOpXSK7uC/s320/Home.png'/>

6. Save your template.

7. Now you are done.
You can change icon URL as your like

Continue reading →

How Add Cool Jquery Slide Show For Blogger Part 3

This is also cool slide show to your blog.Follow instruction
to add it to your blog.

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code before  ]]></b:skin> tag

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

6. Now Go to Design >>page Element

7.Click Add gadget  and Select HTML/JavaScript 

8. Now paste paste below code

<!-- Slideshow HTML by www.wierdwalker.blogspot.com -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Thor (2011)</h2><p><a href="http://tinyurl.com/nlqnby"><img alt="Thor (2011)" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TWCYXJt27hto8b2-WTcsxmpBc6yKd4wOG92Lhqn0JP34gtvR38rqHnNBz-7WZvdvTn988hinsBXgvtrbVczlk9Qwys_DCEG7AXJgBi4chA207PIEw_vEjSIMT5D_YFiOwGEx7hdrPiES/s320/Thor+2011.jpg" height="145"/></a>The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders. </p>
</div>

<div class="slide">
<h2>Sucker Punch</h2>

<p><a href="#"><img alt="Sucker Punch" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZUChMXIRs7sWSJirXxzuGp-AjTYM8j8-Lp1d63GnkNAYoGTkcOZT4vqJfSR8g8nbSIg-qKVY94Pa6FE0yngelLhQesOQwuBnXI82tpmljMUSM4Tm4Sg_y1devuH_JxjT17Iwe1j8NPSN/s320/Sucker+Punch.png" height="145"/></a>Sucker Punch is a 2011 action-fantasy thriller musical film about the fantasies of a young woman who is committed to a mental institution. It was written by Steve Shibuya and Zack Snyder and directed by Snyder</p></div>



<div class="slide">
<h2>crysis2</h2><p><a href="#"><img alt="crysis2" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjT6fPGl__mm1ucjuCgzEi-eRIo-tNzNuxSlZ3QKSr1XLCrYLgHmQNO4_8epYgVpOHD_BSzhuaSVhdD9v_8Euft4Km28vuNRgY-fC56pXRa_WI-L0U7diyjJsHv9nPYRz8q-s204NpLoay/s320/crysis2.png" height="145"/></a>Crysis 2 is a first-person shooter video game developed by Crytek, published by Electronic Arts and released in North America, Australia, and Europe in March 2011 for Microsoft Windows, PlayStation 3, and Xbox 360. Officially announced on June 1, 2009, the game is the second main installment of the Crysis series, and is the sequel to the 2007 video game Crysis and Crysis Warhead.[3</p></div>

<div class="slide">
<h2>Pirates of the Caribbean 4</h2><p><a href="#"><img alt="Pirates of the Caribbean 4" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjSj1im6Edl4ZZez2FHArUTO2GhL00xuXhpTwj7cJu-E7ARr7Dysz3MtFXUZ7eNqRWJEXUsBaOvDoajgDy2DSsnVRVc_ss9adFvrMO9J4WNGX5LdJ-wkWaC1SxTs0c62TWw9RK9wxtXZz/s320/Pirates+of+the+Caribbean.png" height="145"/></a>aptain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz), and he's not sure if it's love -- or if she's a ruthless con artist who's using him to find the fabled Fountain of Youth. When she forces him aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard (McShane)</p></div>
</div>
</div></div>
<!-- Slideshow HTML -->

Replace # your URL
you can replace description and image URL with your own.

9. Now save  'HTML/JavaScript' 
You are done.

Continue reading →

Cool Jquery Slide Show to Your blogger Part 2

 This is nice slide show to your blogger,add it and make
your blog attractive.

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:400px;
height:250px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:400px;
height:250px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

If you want, you can change image width and height (highlighted with different color)

4. Now Go to Design >>page Element

5.Click Add gadget  and Select HTML/JavaScript 

6. Now paste paste below code

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYDYf2OOBnKBXZnFPTNgKM3eG7udUCJffa4hOy8DLM7zIC50lp53zLJ3wgTVUADiAK9JgbF0zVRwmtzVlQnbu1fqfJBiLRJQ1uB0sI1oIlKVktXxjX4O6dBNx6EVBoCG-7Vj8Xbg-DEd3/s1600/image+4.jpg" title="Image 1 title here" alt="Image 1 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawGZsc9HsohlGluvUOrZZdG5ildCNIAwQP02j3VigcLQ7Hlihhb5fHdxVnXuLoU5HRo-O5znF3K7NtBk3r0ukYPcA_322_PPVrdANAfafP5KIvcGXV5WdJJ2fb8Y4vv1bAlLxuv0XFAyJ/s1600/image+1.jpg" title="Image 2 title here" alt="Image 2 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBK-_zEYjWRBx238SRL9e_GSQlOC3LZKWNtFN-JX3UoW3KE01VifdMFwkaGMYnKkE25OxalGqqFZZxx41E-NiPjpu46EZyGkVxKLxjK_YAeqRRatfi8jmbmuy4DkN2QbNy3upUgj4xlHwe/s1600/image+3.jpg" title="Image 3 title here" alt="Image 3 Description here" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41zev4IrMtLV7mIWuA32qgGdH35EDdk6TWaZhbkY9U9ZCAgDmjgKyY1yF13KmlqHGTFgOF38t7NFDB7fvP0nW0iHXjNgRl6gAXWgYyY43SVxl7ZZJtx8FWphhmdn549_qEUYi8o1FP8yj/s1600/bla_image.png" title="Image 4 title here" alt="Image 4 Description here" /></a></li>
</ul>

Replace # your URL
Replace Red color words with  image title
Replace Red color words with  image description

7. Now save  HTML/JavaScript  
You are done.

Continue reading →

How to add stylish Jquery post widget to blogger

How to add stylish Jquery post widget to blogger

This is cool widget to your blogger.you can get nice look to your blog.try it.
Click here to  DEMO

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 

4. Paste below code before ]]></b:skin> tag

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:336px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoKzWrxZ0xSQ7Aw8l1_5Us_DLwlYNlTD2l7ZIhsEowctv50QY20NuEv8OEUWlgtc0nO5fioo-vsffeRj1ykL4h0cyJL1_7TCRmbjcS16IYWLsx5j6lq6WmeDdVD2txzvFRUNvAiOQB6Q/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaqzaaR2KLxvMUfr0wk782SWlmQkjVemJQEea1o4E726PLWxeBzpCBNy4oZ6PMYSCcJT5UPSd407RiQ4IVkuVx5y-9BHWI9fgwFt4ttwmnk80oi4AuBksa8oeeOrTVgfVyU9ouyn4fmVA/s1600/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

5. Now find  </head> tag

6. Paste below code before </head> tag

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

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

<script type='text/javascript'>

    $(document).ready(function(){

        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: 
&quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, 
true);

    });

</script>

7. Go to Design >> Page Element

8. Click Add Gadget and select 'HTML/Javascript'

9. Paste below one of below code.

<div id="featured">

          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />
<span>Cool nature</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uWjT7LtrL-koGBzdJX8pvwZUrUwAI6AaVJeBsf-E6zKgIGvzsYNm0DjtgcSpt0IUjRpWJ_3VCcvdbhAjLRdnZc4PQ90j-UsPdvRsS38VYhw4n5F3xbQ0yeGFqTZw0gqr8BH6lmr6Mm4B/s320/bloggertrix.2.jpg" />
<span>Fresh  Fruit</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0cx05xfNblJng0TB_5Fo753vjr5JPxkq9-RvyKZVJH_i0MHbMHpTyn-T2jQ6mTo4h2XsT2_LySUy5EHYREfPR2gYGsjWa27U8_g6K9dBLuyGpSJvG9yvo0SGxQ8fYjLaqCH-f0R2hcXo/s320/bloggertrix.5.jpg" /><span>Foods</span></a></li>

            <li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVnMwIILNEXwIWJXlQ4sL4PuV04iDm2llSigfHKaSgknJlsh-ijGi7W902YWPEQkYitIsqdAQoJukFWh9-q7z3VwXSlQbpVajNnIEONzPn3-7O3gNUJb9g479lZtIQPm0cEY6ny9yf66O/s320/bloggertrix.4.JPG" />
<span>Amzing nature</span></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />

             <div class="info">
                <h2><a href="#fragment-1">Cool nature</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Second Content -->
        <div id="fragment-2" style="" class="ui-tabs-panel">
            <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uWjT7LtrL-koGBzdJX8pvwZUrUwAI6AaVJeBsf-E6zKgIGvzsYNm0DjtgcSpt0IUjRpWJ_3VCcvdbhAjLRdnZc4PQ90j-UsPdvRsS38VYhw4n5F3xbQ0yeGFqTZw0gqr8BH6lmr6Mm4B/s320/bloggertrix.2.jpg" />

             <div class="info">
                <h2><a href="#fragment-2">Fresh fruit</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel">
            <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPxzlUD7PcRTsC2UgXB_k6c7ecgetSiDmL4Lkl0jXq0bjVkzgGeD0i5HdeYSZSpzMzeV4aSbqMQ66f8p1Hbs4ko-VxJuhas0xBfVxk2LGT6UhHRPr45_YuiJJ09iBRPHKD7VZGvSCWc041/s320/bloggertrix.1.jpg" />

             <div class="info">
                <h2><a href="#fragment-3">Foods</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVnMwIILNEXwIWJXlQ4sL4PuV04iDm2llSigfHKaSgknJlsh-ijGi7W902YWPEQkYitIsqdAQoJukFWh9-q7z3VwXSlQbpVajNnIEONzPn3-7O3gNUJb9g479lZtIQPm0cEY6ny9yf66O/s320/bloggertrix.4.JPG" />

             <div class="info">
                <h2><a href="#fragment-4">AMzing nature</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
             </div></div>
<a href="http://www.bloggertrix.com"><img alt="Best Bloger tricks" src="http://img1.blogblog.com/img/blank.gif"/>
</a></div>

*Replace red URL with your image URL
* If you want you can replace  #fragment-1 to #fragment-4 with your link URL

10. Save it. you are done.

Continue reading →

How to add CSS animated hover to blogger

How to add CSS animated hover to blogger

Earlier i made post about How to make image hover
(mouse over button)  i used 2 image for that. But this
is totally different. i used CSS and use 1 image for it.
special thing is you can add description for this.
you can see below image for demo. move your mouse
 to there.lets  see how to make it.

Your text here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

<!--Start animated hover-->
#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
<!--End animated hover-->

Now you can add this zoom hover for your image for anywhere your blog. ill give a example to do this

5. Click on "Posting" >> "New Post" and  go to Edit HTML

6. Paste below code where you want

<div id="image-hover">
<div id='figure'>
<a href="http://www.bloggertrix.com" target="_blank">
<img src="Image URL"></a>
<span class='caption'>
Your Text here
</span></div></div>

* Replace Image URL with your image URL
* Replace Your Text Here with your text
* Replace http://www.bloggertrix.com your URL
you are done.Good luck.

Continue reading →

How to make Bubble Effect for blogger image/icons

How to make Bubble Effect for blogger

See below Images for Demo

• 
• 
• 
• 

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

/*URL: http:www.bloggertrix.com */
.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 65px;

height:60px;

}



.bubblewrap li img{

width: 55px; 

height: 60px; 

border:0;

margin-right: 12px; 

-webkit-transition:-webkit-transform 0.1s ease-in; 

-o-transition:-o-transform 0.1s ease-in; 

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8); 

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

} 

5.Now paste this HTML code where you want to add your images.

/*URL: http:www.bloggertrix.com */<ul class="bubblewrap">

<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.bloggertrix.com/"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Add to Twitter" /></a></li>
</ul>

6. If you want Change above Red color URL with Your Icon URL

7.Now you can add this to your page.thanks.

Continue reading →

How to add Image Zoom Hover Effect to blogger

 How to add Image Zoom Hover Effect to blogger

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

/*URL: http:www.bloggertrix.com */
.hovergallery img{
-webkit-transform:scale(0.8); 
-moz-transform:scale(0.8); 
-o-transform:scale(0.8); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
opacity: 0.7; 
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
opacity: 1;
}

Now you can add this zoom hover for your image. ill give a example to do this

5. Click on "Posting" >> "New Post" and  go to edit HTML

<a class="hovergallery" href="http://www.bloggertrix.com" target="_blank">
<img src=" http://1.bp.blogspot.com/_XoMK3ToWnac/TOnzgjW6lgI
/AAAAAAAAAOg/ZjqasXcFpxo/s1600/blogger.jpg" /></a>

    


*Replace  http://www.bloggertrix.com  with your link
*Replace  http://1.bp.blogspot.com/_XoMK3ToWnac/TOnzgjW6lgI
/AAAAAAAAAOg/ZjqasXcFpxo/s1600/blogger.jpg with image URL

6. Now you can click publish post and enjoy with Zoom image hover

Continue reading →

How to make image hover (mouse over button)

How to make image hover (mouse over button)

Image hover is a mouse over button. when you move
courser to button,you will see some animate on there.
you have to use two image for this.lets try it.

Image 1

Image 2

1. Log in to your blogger account and Go to "Posting" >> "New Post"

2.  Paste below code

<a href="http://www.bloggertrix.com/">
<img src="http://i530.photobucket.com/albums/dd341/herrolim/donlot.png" 
onmouseover="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlotOver.png';" 
onmouseout="this.src='http://i530.photobucket.com/albums/dd341/herrolim/donlot.png';" /></a>

3. you can change http://www.bloggertrix.com/ with your link

done.

Continue reading →

How to install yahoo messenger on blogger

How to install yahoo messenger on blogger

1. Log in to blogger and Go to  Design >> Page Element

2.Now click Add Gadget and select the HTML/Javascript

3.Now paste below code.

<a href="ymsgr:sendIM? yahooid "> 
<img src="http://opi.yahoo.com/online?u= yahooid &m=g&t= 1 &l=us"/> 
 </a> </ A> 

*Replace  yahooid  with your yahoo id
*Replace 1 with your like. see the below image list and put your number.

Image list

5. Now click save. you are done.

Continue reading →

How to add image before blog post title

How to add image before blog post title

1. Log in to blogger and Go to Design >> Edit HTML

2.Click on "Expand Widget Templates"  checked

3.  Scroll down and to this code

<b:if cond='data:post.url'>
<a expr:href='data:post.url'> <data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

 
4. now paste this code between  <a expr:href='data:post.url'> and <data:post.title/>.

<img src="YOUR-IMAGE-URL" style="border-width: 0px;" />

*Replace with  YOUR-IMAGE-URL Use correct image URL

5. Now save your template you are done.

Continue reading →

How to disable right click on Blogger image

1. Log in to blogger and Go to Design >> Page Element

2. Click  'Add a Gadget' and select 'HTML/Javascript'

3.Paste below code.

<script language="JavaScript1.2">

var clickmessage="Right click disabled on images!"

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>

4. Now click save you are done.

Continue reading →