Selamat Datang Di Blog Kami Clicking Here!

Ad 468 X 60

Monday, April 22, 2013

Cara Mengganti Home,Newer Dan Older Di Blogspot


 Cara Mengganti Newer, Older & Home Navigasi

Dalam tutorial ini i menunjukkan kepada Anda Bagaimana untuk mengganti Newer Post, Olser Post dan Home link Navigasi dengan tombol gambar. Link-link navigasi yang terletak di bawah Pos (s) Bagian. Jika Anda menggunakan bernomor Navigasi Halaman widget, link ini terlihat pada setiap posting saja. karena halaman bernomor navigasi tidak bekerja pada tunggal halaman posting. dan dengan menambahkan tombol gambar, tidak ada efek mengambil halaman widget navigasi.

Cara Mengganti Home,Older dan Newer Navigasi Dengan Gambar

Important!!! Back Up your Template before Making any changes in Template.
  1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
  2. Click on  Expand Template Widgets checkbox

Cara mengganti OLDER Post

cari kode HTML <data:olderPageTitle/> ganti dengan kode dibawah ini<img src='http://1.bp.blogspot.com/-xtb-_7jEjIY/Th69y6t9sVI/AAAAAAAABKQ/slLsdQ43ZMc/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

Cara mengganti Newer Post

cari kode HTML  <data:newerPageTitle/>ganti dengan kode dibawah ini

<imgsrc='http://2.bp.blogspot.com/Odp_sQbM7_s/Th69zJM7FcI/AAAAAAAABKU/cjzpZkRMtM0/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

Cara mengganti Home

cari kode HTML <data:homeMsg/> ganti dengan kode dibawah ini

<imgsrc='http://2.bp.blogspot.com/Tm9sP0CPQBs/Th69yh2PpZI/AAAAAAAABKM/R_0wxEBGVuM/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

anda dapat mengganti kode tersebut diatas dengan gambar yang anda miliki dan sesuai dengan keinginan anda.

Read More »

Cara Ganti Pesan Post a Comment Di Blogger


Cara Ganti "Poskan Komentar" Pesan di Blogger Dengan Gambar Atau Text

Anda dapat mengganti memposting pesan komentar yang muncul di kotak komentar bagian header blogger dengan gambar, teks atau bahkan keduanya. Kebanyakan blogger menggantinya dengan kebijakan komentar, sehingga untuk memberitahukan commenter dengan aturan dan peraturan membimbing komentar di blog mereka. Saya punya beberapa gambar keren yang dapat Anda gunakan untuk mengganti posting pesan komentar di kotak komentar bagian header Anda.
Lihat contoh dari apa yang kita bicarakan pada gambar di bawah.


How To Change Post A Comment Message

  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" (Old blogger interface)
  • Click on "Template" > "Edit HTML" > "Proceed" (New blogger interface)
  • Mark/Tick "Expand Widget Template" (Remember to back up your template)
  • Use ctrl F to find the code below.


<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Now replace the code highlighted code above with any of the image code below.


Image Style 01




Image Code

<a href='http://www.realcombiz.com'><img alt='Get Blogger Tips' src='http://4.bp.blogspot.com/-pzcXyDYy9xI/UHGl24zEopI/AAAAAAAAB1w/2W2PFvrdLfs/s1600/get+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://1.bp.blogspot.com/-ZsH2LHKKFp4/UG_nbBma0GI/AAAAAAAAByc/TpAR-SkLkOE/s1600/comment+preview+1.png'/>



Image Style 02




Image Code

<a href='http://www.realcombiz.com'><img alt='Get Blogger Tips' src='http://4.bp.blogspot.com/-pzcXyDYy9xI/UHGl24zEopI/AAAAAAAAB1w/2W2PFvrdLfs/s1600/get+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://3.bp.blogspot.com/-nv2hq0j3gP0/UG_n8vK_vbI/AAAAAAAAByk/HWHVy3HMCqA/s1600/comment+preview+2.gif'/>



Image Style 03




Image Code

<a href='http://www.realcombiz.com'><img alt='Get Blogger Tips' src='http://4.bp.blogspot.com/-pzcXyDYy9xI/UHGl24zEopI/AAAAAAAAB1w/2W2PFvrdLfs/s1600/get+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://2.bp.blogspot.com/-3l-xQ2IOOZs/UG_oTWSJIZI/AAAAAAAABys/7gZLzvvn-yA/s1600/comment+preview+3.png'/>



Image Style 04




Image Code

<a href='http://www.realcombiz.com'><img alt='Get Blogger Tips' src='http://4.bp.blogspot.com/-pzcXyDYy9xI/UHGl24zEopI/AAAAAAAAB1w/2W2PFvrdLfs/s1600/get+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://2.bp.blogspot.com/-4pE_FK3FnDk/UG_od82bHsI/AAAAAAAABy0/kTc-py2lYFk/s1600/Comment+preview+4.gif'/>



Image Style 05




Image Code

<a href='http://www.realcombiz.com'><img alt='Get Blogger Tips' src='http://4.bp.blogspot.com/-pzcXyDYy9xI/UHGl24zEopI/AAAAAAAAB1w/2W2PFvrdLfs/s1600/get+blogger+tips.png'/></a><img alt='Comment here' border='0' src='http://1.bp.blogspot.com/-P-31ZKdS2Hs/UG_ovIxIjAI/AAAAAAAABy8/-3gTdUvwK1k/s1600/comment+preview+5.png'/>

  • Now click Save Template and you are done.


How To Add Text To Comment Box Header Section

  • Go to "Settings" > "Comments" > "Comment Form Message" (Old blogger interface)
  • Go to "Settings" > "Posts and Comments" > click on Add below "Comment Form Message" (New Blogger Interface)
  • Write your text in the box provided and click on Save arrangement.
That's all!
Take few seconds to share this post with friends/followers and take good care of yourself and your love one's. 

Read More »

Saturday, April 13, 2013

Cara Merubah Older Dan Newer Dengan Judul Postingan


Cara Merubah Older Dan Newer Dengan Judul Postingan

change older posts newer posts with titlesNetOopsblog protected image
Ubah posting Link Navigasi Tulisan lebih baru dan posting lama oleh Pos Sesuai Titles.This mengagumkan Blogger Hack memungkinkan pengunjung blog Anda Tahu posting baru dan lama dan mereka dapat pergi ke Posts. Ini mengagumkan trik dilakukan menggunakan beberapa script jquery.







Menambahkan Jquery Script

CCopy and paste the below code before </body>




<br />
<!--Start post title http://netoopsblog.blogspot.com --><br />
<a href='http://netoopsblog.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br />
</b:if><br />
<a href='http://netoopsblog.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS Code

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}

Read More »

Optimasi SEO H1 di Judul Postingan Blogspot


Optimize your post title to H1 tags better SEO Blogger Hack

Increase SEO with h1 tag Blogger hackNetOopsblog protected image
This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.





  • Go to Blogger Account
  • Select Template -> Edit HTML [click Proceed
  • Find the code like below [Find easily using Crtl+F]
  • Or simply find <H3


<h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
  </h3>
  • and Change it with <H1 [Change all H3 to H1]
  • Change all H3 tags with H1 tag
  • Done ..Wait for few weeks you can find the change in Google SERP.
  • Your Blog pages will show in Google Search Page.

Read More »

Menambahkan Icon Yahoo Smileys di Komentar Blogspot


How to Add Yahoo Smileys on Blogger Threaded Comments?

Yahoo smileys for Blogger Threaded CommentsNetOopsblog protected image
I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger Kang Ismet and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.
Follow the instructions Below..







To see demo :
Go to Comments OR Click Here 

What's inside this article?
How to Add yahoo smileys to Blogger Threaded comments in 3 steps..?
  • Go to Blogger Account
  • Go to Template -> Edit HTML [click Proceed]

Add CSS Code

img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Add Javascript Code

  • Find </body> and copy the below code just above it.
<script src='https://netoopscodes.googlecode.com/svn/branches/Js files/ysmiley threaded comments-min.js' type='text/javascript'/>
  •   Save the template
    Save Template

Add HTML Code

  • Check Expand Widget Templates
  • Find <div class='post-footer-line post-footer-line-3'>
  • Find the next </b:includable> and copy the code above it
Example
 </div>
.
Place code here 


</b:includable>

  • Copy the below code above </b:includable>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='netoopsblogysmile' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://netoopsblog.blogspot.com"></a></b:if>

  • Save the Template
  • That's all

Read More »

Cara Merubah Kotak Komen di Blogspot


How to Change comments style on Blogger?

Style your Comments Block BloggerNetOopsblog protected image
First of all i'm saying sorry to all for the delay of posting.
This is a tutorial about how to style your comments block with effective designs.
This is done using Simple css Scripts.
The demo of a styled comments block is as follows.








Click the link below to see demo
Demo page
What's inside this article?

Comments Style Version 1.0


.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 3px 9px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;

}

.comments .comment-block {

background: none repeat scroll 0 0 #E2E2E2;
border: 4px solid #ABABAB;
border-radius: 3px 3px 3px 3px;
padding: 3px 10px;

}

.continue a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 3px 8px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}
.comment-block:hover > .comment-header {
border-bottom: 2px solid #000;
-moz-transition: border-color .5s ease;

}

.comment-header a {

color: #000000 !important;

}

#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;

}

.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}

Comments Style Version 2.0


.comments .comment-block {
background: url("http://1.bp.blogspot.com/-UP3vcAami5s/T-wKLoD6pXI/AAAAAAAAARw/LEw4T0G8yXo/s1600/bg.png") repeat scroll 0 0 transparent;
border: 4px solid #EAEAEA;
border-radius: 3px 3px 3px 3px;
box-shadow: 3px 3px 0 #D6D6D6;
margin-left: 48px;
padding: 3px 10px;
position: relative;
}
#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
.comment-header {
border-bottom: 2px solid #F1F1F1;
}
.comment-block:hover > .comment-header {
-moz-transition: border-color 0.5s ease 0s;
border-bottom: 2px solid #000000;
}
.comments .comment .comment-actions a {
background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
border: 2px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 4px 11px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}

Read More »

Monday, April 8, 2013

Membuat slideshow


1.Login to your blogger dashboard--> layout- -> 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.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
 s3Slider

 Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
NOTE : To change the speed of slideshow, change the value 4000.
4.Save your template.
5.Now go to Layout-->Page Element and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>
NOTE : Replace YOUR-LINK-HERE and images with your content.
Now you have successfully installed this slide show to your site.

Read More »