How To Add Smart Jquery Featured Slider to Blogger/Websites

This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider.I recommend to DOWNLOAD java script files and host it yourself.Also you can see the DEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO0I0WNaegRamBAb34IYHY65r7edZ7bVXorit2hLdZkBEEBpDj1IM41FZhpXCFCM06mbtSoj221apg-3Sn1Sf2PK_SbdPQsUzoWSKf_3tlPKyFlqn0iMQSHH89iNnsTCpV29xwRZ6H_pKD/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO0I0WNaegRamBAb34IYHY65r7edZ7bVXorit2hLdZkBEEBpDj1IM41FZhpXCFCM06mbtSoj221apg-3Sn1Sf2PK_SbdPQsUzoWSKf_3tlPKyFlqn0iMQSHH89iNnsTCpV29xwRZ6H_pKD/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_9LZJmkGZarbuMH7zJcoZO7MyIvMGR8Zr6ZI5tgQZhFU4Kx1f5GtkBk8DmpnY2r4h7f2JNTeFHMgGRP6F9nArR9-zd8UFJXWlUxS9bBVQKd0y9ZO5wWyXM8C2ktXZezds1YHGYUaTHELr/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZ1sZa5JvgmPzj0W1w_Lhsx7NYDxydVithnltNqIn5gBxIebe9pdRFoGVkqVknA8L97uOuva7drpr2UzzVOp_A1iyr-jjRrbFatPnZSCe67m_-f9ONxLN7CQJeTUgI_mlETvaX2Pokh8p/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6IwcFbGcU25e3bqxQeHM4MW5XIyrBbSVaLB6FvuQ34HmNdzsJ-pq2S1hb91D5eohWuPVF2Vd8rEg4YJ1sjoRVSuwKJ8qFNo1xeUmDlI-zMq3vLLQH0G_j_S84weQ2byh6HaZIxkcw_91H/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71pCogJg0wVFURPGsMtf98TtMNNsN2ZV-RYLsAklKDqRk_mcLumuP6etRViHtKy3RZqGXsPZxfsJtkrZ83jzPMvQ_4ySxjOSux4D4Hu4wk4WsBRmRVpCjevS2s8l-aPooAoNKJOKBQhv2/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPU23kD7fww6x2YStxx7Pl9QTRhyphenhyphenN6IIVn8a1trAQ94RxbH-ZbcnmtJXREtEXj3l0keYroHnCff4cI1TGJdhk-LSqXMGKEUysmkYvrH6Hbd2qvbk64LJbYqlEcZjL9Hsubgb9hBAVX5ix/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.

How To Create JQuery Featured Content Slideshow

In this tutorial I am going to explain,how to create a slideshow to show your featured content to visitors.This is very easy to add and configure.This slideshow is working using jquery.You do not want to host any java script file yourself to add this slideshow to your blog.So you can add this slideshow to your site with in few minutes.Default width=600px and height=240px.But you can change it easily to match it for your website.

If you like add this slideshow to your blogger blog or website,then follow the steps given below.



1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </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:600px;
height:240px;
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:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
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>

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg418XQwiMhMttuFtmxL8AlN33L3vH3qNJ53ZOHrWVN0BaVjpOMaV5a-R7RomNRU0jNthXeOnUnS2XqFI5Wm_6KnU3eK0XHryNpsL6NyzyFfPHXdzJ5_N8BEAS1Z3ummYfgLwAsx2F29bw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvWags6BLRsVzGCcNA6_toW7fGtsNZy0V79NjePbDOEfh0zCoYTmyXu_ljnVxHcm87HMfw4_f9PC4OydGJyKfNjDYdt0Q9QGnrRFrHQ-6tihRz6G8tTY3tuIMPjNS7qzKSj808qJ2hQg/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXEwOcpqai1RB901bXGxG_EH5AuLhZ4oN4GzeK1BrG-9e4DlHsPKM8gxA2NmO0VQKhTuAlYdLDNfR9ce3SBrefS3zmuhF38DcCtNuelb615PtlOFG_Gf6le4Rv8aFmtfgo6HzsuKC518/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rnGyuG-pgZXl43rzSmPPBFt7k-wbPLDS6Lk226IiwiNNtkfiYAEeCqcrLnASLXpLuh8j9BPxAHic9-q6Ws8wucySZa9Yt3FhEvtDmPrUyuttWEErkrFRlYE9e389AntQjCe4tvkMCO4/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

How To Add Random,Rotating Images for Blogger Header

In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.

1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see <body> tag.

3.Now copy below code and paste it just after the <body> tag.

<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

NOTE :

Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.

If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).

You can add different number of images than 5.But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:

<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-6&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-7&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-8&quot;
var random=Math.round(7*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.

How To Add Twitter Follow me Button to Blogger/Website

This tutorial will explain to you how to add Twitter Follow me Button to your blogger blog or any other web site.This service is provided by Tweetmeme.com.This Follow button is for website and blog publishers that want to encourage their audience to follow them on twitter. This button provides the interface to see the follower count of a particular user and a button which upon pressing opens the follow pop-up providing a number of different views and statistics about the user from additional services such as Twitter Grader, Twitalyzer and Twitter Counter.

If you are a blogger then follow the steps below to add this 'Twitter follow button' to your blogger post.



1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

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

4.Now Copy your "Tweetmeme Follow Button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Tweetmeme Follow Button" code just before <data:post.body/> .

Code 1:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">
tweetmeme_screen_name = 'yourtwitterusername';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:


Code 2:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">
tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'compact';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:


Code 3:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">

tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'square';
tweetmeme_size = '50';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:


NOTE : Remember to replace yourtwitterusername with your real twitter username.

If you are not a blogger,you can too add this code simply your website.

5.Now save your template and you are done.

"Blogger Stats" - Check Traffic of Your Blog through Blogger

Few days ago, Blogger, has introduced a full-featured, real time stat service for your blogspot blog.The new Stats feature shows all traffic stats data of your bloggger blog, in a simple, easy-to-understand graphical user interface.

So now you can check traffic stats of your blogger blog without using any third party services.You have nothing to install or configure.It monitors and analyzes your visitor traffic in real time, which technically is not possible with other tools, not even in Google Analytics.

The coolest thing about the new Blogger Stats is that it monitors and analyzes your visitor traffic in near-real-time. You can see which posts are getting the most visits and which sites are sending traffic to your blog right now. For example, if a reader shares one of your blog posts on Twitter and the post is getting lots of clicks, you will see a traffic increase in Blogger Stats almost instantly, with the particular Tweet mentioning your post being identified as the traffic source. Of course, traffic data across longer time periods (day/week/month) and all-time historical data are available as well.

From Blogger in draft

Right now it's available for Blogger in Draft only, but soon you can see this feature in your main Blogger dashboard.To check this feature,Login to your Blogger in Draft dashboard.You can see a link called "Stats".Look at below:



Click on that link and now you can check your blog traffic stats directly from blogger.Here you can check features like page views of your blogger posts,Traffic Sources of your blog,popular search keywords that send visitors to your blog, which country your visitors come from, and which web browsers they are using,etc...



This new feature will helpful to all blogger users to know what's going on with your blog right now.As a blogger I am very happy with this new feature of blogger.

How To Add Blogger Official Share Buttons

In this tutorial I will explains, how to add blogger new share buttons to your blogspot blog.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show Share Buttons in Page Elements section.



But this method does not work for you,follow the steps given below to add blogger share buttons to your blog.

Blogger now offers new share buttons. The new buttons can be placed under each post and let your blog readers easily share your post via email, Blogger, and popular social networks�we now support Google Buzz, Twitter, and Facebook, and we plan to add more services in the future.

-From Blogger Buzz

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

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

4.Now Copy below "Blogger Sharing buttons" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste "Blogger Sharing buttons" code just before <data:post.body/> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

This will show blogger sharing buttons below post header.But if you want to show share buttons below blogger post,then paste your code just after <data:post.body/>.

5.Now save your template and you are done.