How To Create jQuery Content Slider in Blogger

Do you know what is content slider? It's like a slideshow. You can watch the demo.


Like it? Let's add it.

Steps:
1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), ]]></b:skin>

3. Copy below code and paste it just before the ]]></b:skin> tag.
#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;
}

4.  Now, search this code (Ctrl + F), </head>

5.  Copy below code and paste it just before the </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()}}
});
//]]>

6. Save your template. Now go to your Dashboard >> Design >> Page Element >> Add a Gadget >> 'HTML/Javascript'.

7.  Add the code below;
<!-- Slideshow HTML START-->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML END -->

8.  To add new slideshow, just add this code;
<div class="slide">
<h2>CONTENT TITLE</h2>
<p><a href="POST URL"><img alt="" width="215" src="IMAGE URL" height="145"/></a>POST SUMMARY</p>
</div>

DONE!

Blogger Released Official Lightbox Image Viewer System

Do not need to use any hack code to magnify the image on blogger blog anymore. Now Blogger.com has provided the official Lightbox image viewer system. You can take a look at your blog. Just click on the image on your entry post, then it will magnify itself and there is also has image thumbnail under the preview image to select which image you want to look at.


Just click on the [x] button at the right top corner or just click on the dark area to back to normal.

Interesting!

You also can disable this feature - tutorial here.

How To Add Colorful Effect For Your Links For Blogger


Let's add some fun to your blog by adding cool effect to your links when your visitors hover it. It’ll be lighting and colorful. It's easy and let's do it.


How To Add Page Navigation to Blogger


Page navigation script will replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page. It gives you more easy to discover your old entry. Let's know how.

Change Blogger Favicon More Easily

HH already made a tutorial about how to change favicon previously. Now for this tutorial, it's more easier than previous trick. Blogger already got the service for you. You only need to choose your own or create yourself. Let's know how.

How To Add Google Plus Profile Widget in Blogger

This widget will show real time followers stats of Google Plus circles and also with a “Add me To Circles”  Button. It's completely customizable. The number of followers displayed automatically. You just need to get the code and put it on your blog. Add it now!

How To Add Static Twitter Follow Me Button in Blogger

Wanna make your visitor to easy to follow you in Twitter? Twitter is the good social network to promote your blog. Why? Because Twitter is second most popular social network with 200,000,000 estimated unique monthly visitors according to eBizMBA. This widget is the best to do so . Let's add it.

How To Add Image Magnifier in Blogger

This the creative hack to enlarge or zoom image in blogger. With this hack, you will be able to zoom in the image in blogger by clicking on the image. It's a simple hack. Only need a few steps to add it into your blog.


#STEPS:
1. Go to your Dashboard >> Design >> Edit HTML.

2. Search this code (Ctrl + F), </body>

3. Copy and paste this just CODE above </body> tag.

4. Save your template.

How to apply Image Magnify:

1. Add this class="magnify" data-magnifyby="1.5"  on each image you want to magnify. 

2. You need to go to Edit HTML section instead of Compose section. Example :
<img class="magnify" data-magnifyby="1.5" src="Image URL" />
3. Finish.

Nice and easy. :)

How To Active Microsoft Office 2010

Assalamualaikum~

Our reader Yvonne ask about how to activate the MS Office 2010 in HH Forum. So, all you need is this tool to activate your copy of Microsoft Office. Easy to use. Only 3 in steps.

How To Add Twitter Flying Bird in Blogger

You have a blog and twitter account? Many of you already have their own accounts. This widget will give your visitors to easily communicate with your twitter account. The bird widget will fly over the site. it's compatible with all browsers. You will love it.

How To Add Floating Share Button Beside The Post

This widget make it easy for visitors to share any articles of your blog at any time. This widget is floating on the edge of your blog even if you scroll down. By a single click, your visitors can spread the contents of your blog to the world.

Add it to your blog.