17 + Feature Slider Content untuk Website Dan Blog

17 + Feature Slider Content untuk Blogger Menggunakan jQuery

Anda harus sudah tahu tentang JQuery Feature Konten Slider.Today kita akan melihat bagaimana cara menambahkan 17 + jQuery fitur slider konten / slideshow untuk blog atau website.Almost semua blogger menggunakan isi, yang termasuk slider.Contents adalah cara yang bagus untuk menunjukkan banyak konten dalam area yang lebih kecil dari suatu halaman web atau blog. Pintu geser otomatis adalah konten dinamis di banyak situs populer di web.Ini adalah teknik yang hebat untuk mewakili berbagai jenis konten dalam ruang terbatas dan cara yang baik untuk melibatkan user.You mungkin telah memperhatikan bahwa banyak situs baru yang sedang bekerja daerah dengan konten yang dapat digeser atau perubahan dengan cara apapun.


Apakah Anda tertarik untuk menerapkan slider konten dalam situs web Anda? Checkout daftar ini! Di sini saya akan mengajarkan Anda, bagaimana cara menambahkan slider menampilkan konten ke blogger Anda / blogspot blogs.You 'kembali tidak yakin apa itu sebenarnya? You `ll lihat di bawah ;)






Feature Slider Konten untuk Blogger Menggunakan jQuery

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

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

<script type="text/javascript">
. $ (Document) ready (function () {$ ("# menampilkan> ul") tab ({fx: {opacity:.. "Toggle"}}) tab ("rotate", 5000, true);});
</ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Blogger Tips dan Trik "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Fitur {
width: 400px;
padding-right: 250px;
position: relative;
height: 250px;
background: # fff;
border: 5px solid # ccc;
}
# Menampilkan ul.ui-tab-nav {
position: absolute;
top: 0; kiri: 400px;
list-style: none;
padding: 0; margin: 0;
width: 250px;
}
# Menampilkan ul.ui-tab-nav li {
padding: 1px 0; padding-left: 13px;
font-size: 12px;
color: # 666;
}
# Menampilkan ul.ui-tab-nav li rentang {
font-size: 11px; font-family: Verdana;
line-height: 18px;
}
# Fitur. Ui-tab-panel {
width: 400px; height: 250px;
background: # 999; position: relative;
overflow: hidden;
}
# Fitur. Ui-tab-hide {
display: none;
}
# Menampilkan li.ui-tab-nav-butir a {/ * Pada Hover Style * /
display: block;
height: 60px;
color: # 333; background: # fff;
line-height: 20px;
garis besar: none;
}
# Menampilkan li.ui-tab-nav-butir a: hover {
background: # f2f2f2;
}
# Menampilkan li.ui-tab-yang dipilih {/ * gaya tab Dipilih * /
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibY8OjL_95Jo0LWkwmZB7_d9POOtc5cbBonfak84rz2NzCIWE4ErtVGgHMb8xrRW6hL9-Okd9omhy1EWMGrXogrRgJJDrpnfsmnruuWNpIaHCER_JvhIQ_q-Ur3VJtIa8UQjhA9zHhZ0h3/s1600/selected-item.gif') kiri atas tidak mengulang-;
}
# Menampilkan ul.ui-tab-nav li.ui-tab-memilih {
background: # ccc;
}
# Menampilkan ul.ui-tab-nav li img {
float: left; margin: 2px 5px;
background: # fff;
padding: 2px;
border: 1px solid # eee;
}
# Fitur. Ui-tab-panel. Info {
position: absolute;
top: 180px; kiri: 0;
height: 70px; width: 400px;
background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNnhBbKBm62hovokL5wL8dVa74yAd5hLLXAmYzT0FoY1S4XQf9QZiK3vg7xx7S7mWmHjxaT3dT-hU9X3PS334K-6SipiP67zkRY_x8vPlo52HJvUsFh2yoB4avR6yNP5Ad9-ORljSyqEfD/s1600/117s1g9.jpg');
}
Info # fitur. H2 {
font-size: 14px; font-family: Georgia, serif;
color: # fff; padding: 5px; margin: 0;
overflow: hidden;
}
Info # fitur. P {
margin: 0 5px;
font-family: Verdana; font-size: 11px;
line-height: 15px; color: # f0f0f0;
}
# Menampilkan informasi. A {
text-decoration: none;
color: # fff;
}
# Menampilkan informasi a: hover {.
text-decoration: underline;
}

</ Style>


<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1"> <a href="#fragment-1"> <img alt = "menampilkan 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMrvHuf9F8C65e9qJAJCzh8IZ0P7tBn5C22PJ-O8HPEH8P_Sjc-V-Fqh_Quf4ELw742Si9yyHaazLGZMaXwej7prPq6pxU7hwQGjTqLvGDIyqZKu7ogZ-k5Yej9I83G58mMArvdzeR04k/s1600/Change+Mouse+Cursor+Generator.png"/><span>TITLE 1 </ span> </ a> </ li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"> <a href="#fragment-2"> <img alt = "menampilkan 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1h49trhXtFfWEdLeC1s3GutjOLQvpM8udnwCuQZjGn0icyh5u_uP4L8GxI5USt2O2pTC5jQyYCgioE7nMMmCBbIdyLefbcx9S8f3fS1zqDk03Iz-Y2RYN_BfEJH22Y6gjkJPSmWOXhivU/s1600/Numbered+Page+Navigation.png"/><span>TITLE 2 </ span> </ a> </ li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"> <a href="#fragment-3"> <img alt = "menampilkan 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9r9hE4dJ5w8ZcR2YcORstoVSzDEJRoAU8HMMpcHB8z2lYTh-3jxA-VVuwz6ZVBZ5rQUNKi8lD5MxugzM46e5VF8ogmi7uDi8z1ntRcxJc4FjxKDuevFKhwTCVLky0EgM_ZzvrIu7VTgNY/s1600/Snow+Cursor+Code+Generatort.png"/><span>TITLE 3 </ span> </ a> </ li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"> <a href="#fragment-4"> <img alt = "menampilkan 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJAIQaZFiKHCireCKb4BLqDLJ8QO4eQINd4p94XG8IGc__rBY3zoGauVgE9Z9rew02pxhU-353SbXDVvYfQosOMPejzpvdQcqQ0ACRz4NHsXWVgBYTqM7BpczyQL5oZotATqqQic7Cwck/s1600/Blogger+Falling+Object+Generator.gif"/><span>TITLE 4 </ span> </ a> </ li>
</ Ul>


<-! Content Pertama ->
<div id="fragment-1" class="ui-tabs-panel" style="">
<Img alt = "" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/>
<div class="info">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 1 </ a> </ h2>
<p> TEKS-OF-THE-SLIDE 1 </ p>
</ Div>
</ Div>

<-! Konten Kedua ->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<Img alt = "" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/>
<div class="info">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 2 </ a> </ h2>
<p> TEKS-OF-THE-SLIDE 2 </ p>
</ Div>
</ Div>

<-! Content Ketiga ->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<Img alt = "" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/>
<div class="info">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 3 </ a> </ h2>
<p> TEKS-OF-THE-SLIDE 3 </ p>
</ Div>
</ Div>

<-! Konten Keempat ->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<Img alt = "" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/>
<div class="info">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 4 </ a> </ h2>
<p> TEKS-OF-THE-SLIDE 4 </ p>
</ Div>
</ Div>

</ Div>
<div style="clear:both;"> </ div>
<br/>
<div> </ div>

Dan sekarang klik Save















Simple jQuery Feature Content Slider untuk Blogger Blog

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/w17addojuvj5unl/freebloggerhelp-jquery.flow.1.2.auto.js" <script </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
$ ("# MyController"). JFlow ({
slide: "# slide",
controller: ". jFlowControl", / / ​​harus menjadi kelas, digunakan. tanda
slideWrapper: "# jFlowSlide", / / ​​harus id, penggunaan tanda #
selectedWrapper: "jFlowSelected", / / ​​hanya teks murni, ada tanda-tanda
auto: true, / / ​​perubahan auto slide, standar yang benar
width: "610px",
height: "235px",
Durasi: 400,
prev: ". jFlowPrev", / / ​​harus menjadi kelas, digunakan. tanda
berikutnya: ". jFlowNext" / / harus menjadi kelas, digunakan. tanda
});
});
</ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Blogger Tips dan Trik "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# JFlowSlide {background: # f8f8f8; font-family: Georgia; }
# MyController {font-family: Georgia; padding: 2px 0; width: 610px; background: # 000000; }
# MyController span.jFlowSelected {background: # 43A0D5; margin-right: 0px; }
. Slide-wrapper {padding: 5px; }
. Slide-thumbnail {width: 300px; float: left; }
. Img slide-thumbnail {max-width: 300px; }
. Slide-rincian {width: 290px; float: right; margin-left: 10px;}
. Slide-rincian h2 {font-size: 1.5em; font-style: italic; font-weight: normal; line-height: 1; margin: 0; }
.. Slide-detail deskripsi {margin-top: 10px; }
. JFlowControl, jFlowPrev, jFlowNext {color: # FFF;.. kursor: pointer; padding-left: 5px; padding-right: 5px; padding-top: 2px; Padding-bottom: 2px; }
.. JFlowControl: hover, jFlowPrev: hover, jFlowNext: hover {background:. # 43A0D5; }
</ Style>



<div class="jflow-content-slider">
<div id="slides">
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" alt = "" />
</ Div>
<div class="slide-details">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 1 </ a> </ h2>

<div class="description">
TEKS-OF-THE-SLIDE 1
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" alt = "" />
</ Div>
<div class="slide-details">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 2 </ a> </ h2>
<div class="description">
TEKS-OF-THE-SLIDE 2
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" alt = "" />
</ Div>
<div class="slide-details">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 3 </ a> </ h2>
<div class="description">
TEKS-OF-THE-SLIDE 3
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" alt = "" />
</ Div>
<div class="slide-details">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 4 </ a> </ h2>
<div class="description">
TEKS-OF-THE-SLIDE 4
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" alt = "" />
</ Div>
<div class="slide-details">
<h2> <a href="#" target="_blank"> JUDUL-OF-THE-SLIDE 5 </ a> </ h2>
<div class="description">
TEKS-OF-THE-SLIDE 5
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
</ Div>

<div id="myController">
<span class="jFlowPrev"> Prev </ span>
<span class="jFlowControl"> 1 </ span>
<span class="jFlowControl"> 2 </ span>
<span class="jFlowControl"> 3 </ span>
<span class="jFlowControl"> 4 </ span>
<span class="jFlowControl"> 5 </ span>
<span class="jFlowNext"> Berikutnya </ span>
</ Div>
<div class="clear"> </ div>
</ Div>

Cara Tambah Pintar Jquery Feature Slider untuk Blogger / Website

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

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

<script src="http://dl.dropboxusercontent.com/s/3uxu6uv7k0zn3he/jquery.jcarousel.pack.js" type="text/javascript"> </ script>

type="text/javascript"> src="http://dl.dropboxusercontent.com/s/vsk53rhw4xvkhc2/jquery-ui-personalized-1.5.2.packed.js" <script </ script>

<script type="text/javascript">
jQuery (document) ready (function. () {
jQuery ('# mycarousel'). jcarousel ({
membungkus: "baik",
gulir: 2,
animasi: "lambat"
});
fungsi mycarousel_initCallback (korsel) {
jQuery ('# fitur-next-button'). mengikat ('klik', function () {
carousel.next ();
return false;
});

jQuery ('# fitur-prev-tombol'). mengikat ('klik', function () {
carousel.prev ();
return false;
});
jQuery ('. tombol-nav rentang'). mengikat ('klik', function () {
carousel.scroll (jQuery.jcarousel.intval (jQuery (ini) text ()).);
return false;
});
};
jQuery ('# fitur-carousel'). jcarousel ({
membungkus: "baik",
gulir: 1,
auto: 10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Blogger Tips dan Trik "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
.. Jcarousel-skin-tango jcarousel-container {-moz-border-radius: 10px;}
.. Jcarousel-skin-tango jcarousel-kontainer-horisontal {width: 941px; margin: 0 auto; padding: 20px 0;}
.. Jcarousel-skin-tango jcarousel-clip-horisontal {width: 941px; height: 254px;}
.. Jcarousel-skin-tango jcarousel-item {width: 307px; height: 254px;}
.. Jcarousel-skin-tango jcarousel-item-horisontal {margin-right: 10px;}
.. Jcarousel-skin-tango jcarousel-item-placeholder {background: # fff; color: # 000;}
. Jcarousel-kulit-tango. Jcarousel-next-horisontal {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRh6EFCuygc-z9yInmH5cTpn-tNaC7hoVC5EdtwKNdHXdHG4JL9dCMCPkqaGi5EpXT5byIQaIKtmQIxCKNHnjUc0yVA8RR5PvgNht6iGyXtL5kzhm9trZPD-TVWffWizvgyVmuMn-KLxzr/s1600/image-slider-button.png) no-repeat scroll-46px 0;
kursor: pointer;
height: 254px;
kanan: 20px;
position: absolute;
top: 0;
width: 46px;
}
. Jcarousel-kulit-tango. Jcarousel-prev-horisontal {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRh6EFCuygc-z9yInmH5cTpn-tNaC7hoVC5EdtwKNdHXdHG4JL9dCMCPkqaGi5EpXT5byIQaIKtmQIxCKNHnjUc0yVA8RR5PvgNht6iGyXtL5kzhm9trZPD-TVWffWizvgyVmuMn-KLxzr/s1600/image-slider-button.png) no-repeat scroll 0 0;
kursor: pointer;
height: 254px;
kiri: 20px;
position: absolute;
top: 0;
width: 46px;
}
. Jcarousel-container {position: relative;}
. Jcarousel-klip {z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative;}
. Jcarousel-list {z-index: 1; overflow: hidden; position: relative; top: 0; kiri: 0; margin: 0; padding: 0;}
.. Jcarousel-list li, jcarousel-item {float: kiri; list-style: none; width: 75px; height: 75px;}
.-Jcarousel berikutnya {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>



<div id="news-slider">
<ul class="jcarousel-skin-tango" id="mycarousel">
<li> <a href="#" target="_blank"> <img height = "254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width = "307" /> </ a> </ li>
<li> <a href="#" target="_blank"> <img height = "254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width = "307" /> </ a> </ li>
<li> <a href="#" target="_blank"> <img height = "254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width = "307" /> </ a> </ li>
<li> <a href="#" target="_blank"> <img height = "254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width = "307" /> </ a> </ li>
<li> <a href="#" target="_blank"> <img height = "254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width = "307" /> </ a> </ li>

</ Ul>
</ Div>

<div class="clear"> </ div>

Cara Membuat JQuery Feature Konten Slideshow

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"/> </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/v9vvehruur3swp7/n17-content-slider-01.js" <script </ script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<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;
kiri: 0;
kanan: 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;
kiri: 0;
color: # fff;
background: # 000;
z-index: 500;
}
# Slideshow-caption. Slide-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>


<ul class="slideshow">

<a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIQOV6dSzKqS3qv8tjrfzTOTGKcdskAevLYGgVSeuMPnoXQfbWl9L32OzSKX3ZhZk8WecHjxLM7Bq6-pq0GT6CdDSo8SoipMfDTxEQVKnCUSlwBzfcN7Vduij9HPEAOJCHTRy_E-xJDi5f/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" title = "Ini adalah fitur posting 1 judul" alt = "Ganti Teks ini Dengan Anda Menarik Kirim 1 Deskripsi." /> </ A> </ li>

<a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHKcm3ZiIQCMKrSkotlFIf1GY7isrpIuc0NA4Acua1h-nDVPbr4JU5JmQS6k-CB0Zlo7zCsWWRl_qhuzg06LXfjd0R4kQ4RkwcslkNhqFbMdugaV3xD2jlUOnImWpilWGblD35RAC9YC_/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" title = "Ini adalah fitur posting 2 title" alt = "Ganti Teks ini Dengan Anda Menarik Kirim 2 Deskripsi." /> </ A> </ li>

<a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcTenlWqw9HwxYg6hL1oAcwn3WRnHcd4DRWHd8J2c5p9a2fYLuq4H70drV9m32XcKkgh6O6y5yvqmZnmQ9ReV-ZOm8o8TtetyzXgCiBqrq2fWDNKPej7LLAvAn2x8prHHqlvVeA0eocf3/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" title = "Ini adalah fitur posting 3 title" alt = "Ganti Teks ini Dengan Anda Menarik Kirim 3 Keterangan." /> </ A> </ li>

<a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_csIKBitW86aoxHMRV07MmS-kXJDWrHzApF9ki_SNhW0SM8E_P9CC6ixiZ4uvQtVkx60c8Oe-jtZJSpgTCMd5LGBHvSfd0tJFE6ISJQVLo8JRvTMfbd7fsz3C4WnHuQr5ZWkIIs4_v2i/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" title = "Ini adalah fitur posting 4 title" alt = "Ganti Teks ini Dengan Anda Menarik Kirim 4 Deskripsi." /> </ A> </ li>

<a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT-qnUon-ZgBw9q0uF7JfFTu8QhoHRxGzLHHi4scm20CZH2l10UcuiWnDWrE7fz4BL_Fe6SlikgbjJLWjOZy7gT98vvXiU1nYwZQi-jhnIXY1C5XuMctzpvQtUzs7mk56iVIbMzGUsI0_/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" title = "Ini adalah fitur posting 5 title" alt = "Ganti Teks ini Dengan Anda Menarik Kirim 5 Keterangan." /> </ A> </ li>

</ Ul>

Cara Tambah jQuery Unggulan Posting Slider ke blogger

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

type="text/javascript"> src="http://code.jquery.com/jquery-1.10.2.js" <script </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/0mezn2b26i6e87o/n17-content-slider-02.js" <script </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/vkumw8qp4ldgis0/n17-content-slider-03.js" <script </ script>
<script type="text/javascript">

/ / <! [CDATA [

$ (Document). Ready (function () {
$ ('# Tabzine> ul') tab. ({Fx: {height: 'beralih', opacity: 'beralih'}});

});

/ /]]>
</ Script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick ('headend');
</ Script> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Blogger Tips dan Trik "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; top: 0px; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Glidercontent {
margin: 5px 0 12px 0px;
}
. Glidecontentwrapper {
position: relative;
width: 629px;
height: 300px;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
background: # fff;
}
. Glidecontent {
position: absolute;
padding: 0px 5px 0px 5px;
width: 610px;
color: # 555;
margin: 0px 5px;
height: 100%;
overflow: hidden;
float: left;
background: # fff;
}
. Glidim {
float: left;
}
. Glidim img {
margin: 0px 5px 5px 0px;
padding: 7px 7px;
}
. Glidecontent h2 {
margin: 0px 0px 0px 0px;
padding: 5px 0px;
font-size: 24px;
line-height: 24px;
font-weight: bold;
overflow: hidden;
font-family: Georgia, Century gothic, Arial, Tahoma, sans-serif;
}
. Glidecontent h2 a: link, glidecontent h2 a:. Visited {
color: # 303843;
}
. Glidecontent p {
margin: 0px 0px 0px 0px;
padding: 5px 0px;
font-size: 14px;
line-height: 22px;
overflow: hidden;
font-family: Georgia, Century gothic, Arial, Tahoma, sans-serif;
color: # 696d70;
}
. Glidebot {
width: 630px;
height: 18px;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GIpVGYZE72uyBxdpe1xYL-I5jlfYa49ZxTHAnlEXx14X3ppPfoBAv4LNa-rmgnsF5TkyuUKKcxeZ6g6Rgb11ebJ7HeUJy_NGm8fvN-4h_3RLK_GJUx_W6hbn5a-jZh6en5SpKOlOUWls/) pusat tidak mengulang-;
margin: 0px 0px 5px 12px;
padding: 0px 0px;
float: left;
}
. Gnav {/ * gaya DIV digunakan untuk berisi link Toggler. * /
width: 100px;
height: 50px;
z-index: 150;
float: right;
padding-right: 25px;
}
. Glidecontenttoggler {/ * gaya DIV digunakan untuk berisi link Toggler. * /
height: 35px;
z-index: 150;
width: 650px;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4PZe5sfdB_ir4mhLF-WnWJGpdjsxtZdCXjp59mabOfXFphvmU5h_HkHRI1nINQO2hXZDC7m5_uJgvpdfvdbbfHWysXnJm9oQBqLJKUPvKsCEnLW3o2FR3j6nXSvP4u5aGiU2dacmyqzP/) no-repeat;
}
. Glidecontenttoggler a {/ * gaya untuk setiap link navigasi dalam Toggler * /
menampilkan:-moz-inline-box;
display: inline-block;
color: # 2e6ab1;
font-weight: bold;
text-decoration: none;
}
. Glidecontenttoggler a.selected {/ * gaya untuk halaman yang dipilih tautan Toggler. ". Yang dipilih" kelas otomatis dihasilkan! * /
background: # E4EFFA;
warna: hitam;
}
. Glidecontenttoggler a: hover {
background: # E4EFFA;
warna: hitam;
}
. Glidecontenttoggler a.toc {/ * style untuk link Toggler individual (halaman 1, halaman 2, dll). ". Toc" kelas otomatis dihasilkan! * /
}
. Glidecontenttoggler a.prev {/ * gaya untuk "prev" dan "next" Link Toggler. ". Prev" dan ". berikutnya" kelas otomatis dihasilkan! * /
top: 9px;
kanan: 25px;
position: absolute;
display: block;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDL1D0JAP8wXuBEnOZYo-9LLh-E3SwI6zcCSDLhFpBVotzRA8Jv-6uHBtFAdxmbr2sz_0lwQgxFwMrV3XBvPKvIYCXORHsXwkm2nEIQKT3fXhTup_tLWrwP3VTGODQbWsPP5jeqi-nUqYm/) meninggalkan no-repeat;
width: 50px;
height: 17px;
}
. Glidecontenttoggler a.next {
float: right;
display: block;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHfMNhtQEk62dRamt6UUCgdi1w0nbuyXtXo4NT0_Z9SvOF3D4i1djuImCnFViXkT7Oerkqk8Cm590mcLxxqGQBQfjCS3lQ-kLHjOxNeCyxs-4r9i1GNM-BloeciAcrtdyAa-BeYy2_y6_j/) benar tidak mengulang-;
width: 20px;
height: 17px;
position: absolute;
top: 9px;
kanan: 15px;
}
</ Style>


<div id="content">
<script type="text/javascript">
featuredcontentglider.init ({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
dipilih: 0,
persiststate: true,
speed: 500,
arah: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] / / jika auto rotate diaktifkan, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</ Script>

<-! Glider Content ->
<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"> </ a>
<a class="next" href="#"> </ a>
</ Div>
<div id="glidecontent1" class="glidecontent1 section"> <div id="HTML98" class="widget HTML">
<div class="widget-content">


<div class="glidecontent">

<h2> <a href="#" target="_blank"> ini adalah fitur posting 1 judul </ a> </ h2>
<p> Ganti Teks ini Dengan Anda Unggulan Kirim 1 Keterangan. </ p>
</ Div>




<div class="glidecontent">

<h2> <a href="#" target="_blank"> ini adalah fitur posting 2 judul </ a> </ h2>


<p> Ganti Teks ini Dengan Anda Unggulan Kirim 2 Deskripsi. </ p>
</ Div>



<div class="glidecontent">

<h2> <a href="#" target="_blank"> ini adalah fitur posting 3 judul </ a> </ h2>


<p> Ganti Teks ini Dengan Anda Unggulan Kirim 3 Keterangan. </ p>
</ Div>



<div class="glidecontent">

<h2> <a href="#" target="_blank"> ini adalah fitur posting 4 judul </ a> </ h2>


<p> Ganti Teks ini Dengan Anda Unggulan Kirim 4 Deskripsi. </ p>
</ Div>



<div class="glidecontent">

<h2> <a href="#" target="_blank"> ini adalah fitur posting 5 judul </ a> </ h2>


<p> Ganti Teks ini Dengan Anda Unggulan Kirim 5 Keterangan. </ p>
</ Div>



</ Div>
</ Div> </ div>
</ Div>
<-! / Glider Content ->
<div class="glidebot"> </ div>
<div class="clear"> </ div> </ div>

Cara Tambah jQuery Images Slider untuk Blogger

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

type="text/javascript"> src="http://code.jquery.com/jquery-1.10.2.js" <script </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/d2ki5h01tgnpezq/n17-content-slider-04.js" <script </ script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Myslides {
background: # 2c3133;
}
. Stepcarousel {
position: relative; / * Meninggalkan nilai ini saja * /
overflow: scroll; / * Meninggalkan nilai ini saja * /
width: 95%; / * Lebar Carousel Viewer sendiri * /
height: 165px; / * Tinggi cukup harus sesuai tinggi konten terbesar di * /
margin: 0px 14px 5px 14px;
background: # 2c3133;
}
. Stepcarousel. Belt {
position: absolute; / * Meninggalkan nilai ini saja * /
kiri: 0;
top: 0;
}
. Stepcarousel. Panel {
float: left; / * Meninggalkan nilai ini saja * /
overflow: hidden; / * Klip konten yang pergi dimensi luar memegang panel DIV * /
margin: 10px 17px; / * Marjin sekitar setiap panel * /
width: 220px; / * Lebar setiap panel memegang setiap konten. Jika dihapus, lebar harus didefinisikan secara individual pada setiap DIV konten kemudian. * /
background: # 202325;
height: 140px;
border: 1px solid # 393f42;
}
. Stepcarousel. Panel p {
text-align: left; / * Meninggalkan nilai ini saja * /
overflow: hidden; / * Klip konten yang pergi dimensi luar memegang panel DIV * /
margin: 5px 5px; / * Marjin sekitar setiap panel * /
}
. Stepcarousel. Panel h2 {
text-align: left; / * Meninggalkan nilai ini saja * /
height: 20px;
overflow: hidden; / * Klip konten yang pergi dimensi luar memegang panel DIV * /
margin: 2px 5px; / * Marjin sekitar setiap panel * /
font-size: 16px;
font-weight: bold;
text-align: center;
font-family: Georgia, abad gothic, Arial, Verdana, sans-serif;
}
. Stepcarousel. Panel img {
float: left; / * Meninggalkan nilai ini saja * /
background: # 040404; / * Klip konten yang pergi dimensi luar memegang panel DIV * /
margin: 10px 10px 10px 10px; / * Marjin sekitar setiap panel * /
padding: 0px 0px;
}
</ Style>



<div id="myslides">

<script type="text/javascript">
stepcarousel.setup ({
galleryid: 'mygallery', / / ​​id of carousel DIV
beltclass: 'belt', / / ​​class of inner "belt" DIV berisi semua DIVs panel
panelclass: 'panel', / / ​​kelas DIVs panel setiap konten memegang
panelbehavior: {speed: 500, sampul: true, bertahan: true},
defaultbuttons: {mengaktifkan: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidq2E0pqkO5HIOV_UflhfWMbjxUgxN_r7Idkk_qGyVQXeuYhvZDznJPg0n7Bg-rSnx6G33zH5H44KtRDhWBVtv0ZtxWizMIQRSm6xwdDT1pIOkZv9hXm4LYQiauR0JHpbghjjv-wLZK-_f/', -14, 60], rightnav: [' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibC53LBbaETrfMxKTTWdx4GIgvm8EEjdmW66q0AXEOscdtkjaEpnJs-lUe2jdM47LYCI8OTL65_l8mX8y75u8hENrI5t4qXuQDT5gGhvg2wgQPrtdAHyhvg9l0j0F8KFuqOpcU-f8SEFbi/ ', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], / / ​​register 3 variabel yang berisi panel saat ini (mulai), panel saat ini (terakhir), dan jumlah panel
contenttype: ['eksternal'] / / pengaturan konten ['inline'] atau ['eksternal', 'path_to_external_file']
})
</ Script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="#" target="_blank" title=" Ini adalah fitur posting 1 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height = "120" />
</ A>
</ Div>

<div class="panel">
<a href="#" target="_blank" title=" Ini adalah fitur posting 2 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height = "120" />
</ A>
</ Div>

<div class="panel">
<a href="#" target="_blank" title=" Ini adalah fitur posting 3 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height = "120" />
</ A>
</ Div>

<div class="panel">
<a href="#" target="_blank" title=" Ini adalah fitur posting 4 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height = "120" />
</ A>
</ Div>

<div class="panel">
<a href="#" title=" Ini adalah fitur posting 5 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height = "120" />
</ A>
</ Div>


</ Div>
</ Div>
</ Div>
<div class="clear"> </ div>

Cara Tambah MooTools Slider Feature Konten untuk blogger

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

type="text/javascript"> src="http://dl.dropboxusercontent.com/s/vwtrzaxf2skkh3d/mootools-slider.svn.js" <script </ script>
type="text/javascript"> src="http://dl.dropboxusercontent.com/s/7suygwl77j21xcb/n17-content-slider-05.js" <script </ script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Slider-stage {width: 100%; overflow: auto; meluap-x: hidden; meluap-y: hidden; height: 200px; margin: 0 auto; border: 2px solid # 000000; background-color: # 000000; }
# Slider-tombol {float: kiri; width: 100%; margin: 0 auto; border: 2px solid # 000000; color: # ffffff; font-weight: bold; background-color: # 000000; filter: alpha (opacity = 60); opacity: 0.6;}
# Slider-list {width: 4500px; border: 0; margin: 0; padding: 0; kiri: 400px;}
# Slider-list li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
margin-right: 4px;
padding: 4px;
background: # Dedede;
float: left;
width: 200px;
height: 200px;
}
</ Style>



<div id="slider-stage">

<ul id="slider-list">

<li id="l1"> <a href="#" target="_blank" title=" Ini adalah fitur posting 1 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height = "200" /> </ a> </ li>

<li id="l2"> <a href="#" target="_blank" title=" Ini adalah fitur posting 2 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height = "200" /> </ a> </ li>

<li id="l3"> <a href="#" target="_blank" title=" Ini adalah fitur posting 3 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height = "200" /> </ a> </ li>

<li id="l4"> <a href="#" target="_blank" title=" Ini adalah fitur posting 4 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height = "200" /> </ a> </ li>

<li id="l5"> <a href="#" title=" Ini adalah fitur posting 5 judul ">
<Img alt = "" width = "200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height = "200" /> </ a> </ li>

</ Ul>

</ Div>

<div id="slider-buttons">
<a id="previous" href="#"> sebelumnya </ a> | <a id="next" href="#"> Berikutnya </ a>
</ Div>

<div class="clear"> </ div>

Luar biasa Konten SlideShow Slider untuk Blogger / WebSite

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

type="text/javascript"> src="http://dl.dropboxusercontent.com/s/hz434tv9jv8yjgh/excellent-slideshow-compressed.js" <script </ script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Slideshow {list-style: none; color: # fff}
# Slideshow rentang {display: none}
# Wrapper {width: 506px; margin: 50px auto; display: none}
# Wrapper * {margin: 0; padding: 0}
# Fullsize {position: relative; width: 500px; height: 300px; padding: 2px; border: 1px solid # ccc; background: # 000}
# Informasi {position: absolute; bottom: 0; width: 500px; height: 0; background: # 000; color: # fff; overflow: hidden; z-index: 200; opacity: 0,7; filter: alpha (opacity = 70)}
# Informasi h3 {padding: 4px 8px 3px; font-size: 14px}
# Informasi p {padding: 0 8px 8px}
# Gambar {width: 500px}
# Gambar img {position: absolute; z-index: 25; width: auto}
. Imgnav {position: absolute; width: 25%; height: 306px; kursor: pointer; z-index: 150}
# Imgprev {kiri: 0; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sPxYExzncp5I1InDaFZVRFRRtScSW25NE3eGx50AsnKdTNEOlFD0NBbFSr-DA6m10TOtsSY9fwfAWEa7uOMHZ1EZSqwfe4dWdyjQkZoxYP_jqu-MH1dM3gj2IveRwBNJzt8TnDv6Jz3E/) kiri tengah no-repeat}
# Imgnext {kanan: 0; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkUn-POBrI8biuna-infS0f28FNQioIya0fkDQ1B34yuxKm8qaLDL1-2NpmWWWt4OfVszWgF8_hkTZ4uxLfhJqQLTJNmhhjEEbJVNj4xCooXOYfD5Lv0i0oN5FBWRui2z9Z_MN6fJhadU/) kanan tengah no-repeat}
# Imglink {position: absolute; height: 306px; width: 100%; z-index: 100; opacity: .4; filter: alpha (opacity = 40)}
. Linkhover {background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0udMCs8UPELXGjD273gvAsY91OcxPICddoSf0hdhGiaYfqxka17p3ISsrnF_CW7DFvx-0Qg48hKIPfz83Cl_C1Vgl_XXOKovfDc6XXWyB9w-ebDrhn8_-QFau-KcC32AcPKob0m-XmaHJ/) pusat pusat no-repeat}
# Thumbnail {margin-top: 15px}
# Slideleft {float: kiri; width: 20px; height: 81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPMhGHJecisfiW8gr31Xbpp00GEZLiJAoC01o1hXB-oHfeOHkS3rxm7AO0VBszVCIsmkhsuiVgHYoKVgyIrElFzU9X_lOX9q6Cl64uyTuLffBCeAhmnX8tVVP_LJNkv0Pmj0b7xKmaXJK/) pusat pusat tidak mengulang-; background-color: # 222}
# Slideleft: hover {background-color: # 333}
# Slideright {float: right; width: 20px; height: 81px; pusat # 222 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HA0NX4LsoeIm4YLzANPz9czmOtE9ffInHrmzTEmh50XNtXhFkKqq7Hjod2s_6n7Eeuo8umWcDP-iF73Xrx0co4NYr7S_PJX08CahEra8hxQF4ZS4YgzqaEug7BGdEgUCO63SF3irMBvO/) pusat no-repeat}: background
# Slideright: hover {background-color: # 333}
# Slidearea {float: kiri; position: relative; width: 456px; margin-left: 5px; height: 81px; overflow: hidden}
# Slider {position: absolute; kiri: 0; height: 81px}
# Slider img {cursor: pointer; border: 1px solid # 666; padding: 2px}
</ Style>


<div style="float:left;">

<ul id="slideshow">


<li>
<h3> Masukkan Judul 1 Berikut </ h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3b0bLEnd8Rzvv7H3ITYlJC_yiTLJeJxY4lgImWEJ0sbzAtY_niqL4Jq-GS9tW2tkwXzru7MVkawXf6tRU_zor6hDkSS3XZ3vfvOsdkqxTAQLj0wVtL37AtEPSJGgh0NDPEILqJQ7tgfLA/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png</span>

<p> Masukkan Keterangan 1 sini. </ p>
<a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFXypz4S8-KfAvjkqD0JXw1Rx_kIek0mIcOTSuPF6uzSmRElD-fq2FERP3Avu-rN-nAjLpXtJhR9S3lzXr9lrmkz5TMOZ_qCbG_Lk04RyTKnkzDgBLnnwqUVo5tvSJRjbyx7Q2R6URX1b/s1600/Change+Mouse+Cursor+Generator.png" alt = "" /> </ a>
</ Li>


<li>
<h3> Masukkan Judul 2 Berikut </ h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHbmpmvF_ofoUDc9Th6FLHf1hvhrT6upzu2zN3qUOWVEHslTQS_WnVqgRJNuU3UZCI7EU8GUNc4T_1_3rMJp4vnEVKT5cmSdhzVnZc3FNWSNXfq9cEsj95YHvppH3oy_RylF26n1X8aqm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png</span>

<p> Masukkan Deskripsi 2 Berikut. </ p>
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1K9XeWtJkDQWJPv5IQeHZa4mvGyFfRAF6OWWyr-p9joDLG_f_hDY1FwQ8MaJ1ZHfVKCcSc7YevXEo5ORUDnnuW9n-C44BPE0pIzyC5MBjMAetXaTvTtrV28JBubdt4KVGTT0-athLP21/s1600/Numbered+Page+Navigation.png" alt = "" />
</ Li>


<li>
<h3> Masukkan Judul 3 Berikut </ h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBby6VTgEpWIGm7dPpul2ktNe4aDvJW5by-u_9WwbJN0asvBR1aca3J3WDlSTuH45GIJ5_-syWh7iJk0_t4YbsGvKIpd2JB_WFfGXoPeWuSYItHQAZhjmf_wc-mTz6ni8vLnMuC9x0ZMb/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png</span>

<p> Masukkan Deskripsi 3 Disini. </ p>
<a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGC7ltDTu6w0EOIL6z-DNVl85HbecXj8kE8sVIm-YyH-NlfGpg5dxY9Tm44hEcPr93G-Swkaut556_KjQnhawKXCkgG_kgbYSnx0AiMBlNmPsuBs5NjvpZyaQ0tcjKua4LxVtXvS1RRQkd/s1600/Snow+Cursor+Code+Generatort.png" alt = "" /> </ a>
</ Li>


<li>
<h3> Masukkan Judul 4 Berikut </ h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0ZeRin-PAFBWX8WjqKtaDH3wgCyYVNl-M008xwvlCDfmgjWzb5r44NOrvN6XOicWtnr5Q0lst3I3BVefPEKDUVLjqiJhBkoOSGhRJaGkrcj2f3TMAmLoU2alVlKx0zFLr52iHOZhNL-_/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png</span>

<p> Masukkan Deskripsi 4 sini. </ p>
<a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyI5fsZW56B2FMYFafpkZ1GOFlI-2nluDlq5YDTgCWXRYmhQ0NAvMb5igebynJCS1uBLbSZq3-DWgTsfbB-3oJn1ZxvC7YsluDDiFzfpUsALECeLWzanZvEw3w62XWt6I3J5pCj-6o047/s1600/Blogger+Falling+Object+Generator.png" alt = "" /> </ a>
</ Li>


<li>
<h3> Masukkan Judul 5 Berikut </ h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkm0ryXFJlDzU-Wh1rgq3t8hG8h3xYEsJYP1GIf1W_q4E50LgeFsFD-Mx2eTobvFArYRUjJJAl3natwpKqbUIpU2QWWgBFfhfCAGUKCYCj-TBcNeBNeC7LB84EBcAllJGMp9h2XVcZu6s/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png</span>

<p> Masukkan Keterangan 5 Here. </ p>
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8JYzVrs8f6dZGgTj4IalkISTxOe5YGbklPSVuMPi1tat1QuQJOo8Vr7_bdf6Qx2gRX6neRHPCEVbxVpRsYeFt2W1sH-frDn2YiDtUjqaglq6417ac8zSf9M12ra1lWTGr5zFSBMpcdnQ/s1600/Animated+Flash+Clock.png" alt = "" />
</ Li>


</ Ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"> </ div>

<div id="imglink"> </ div>

<div id="imgnext" class="imgnav" title="Next Image"> </ div>

<div id="image"> </ div>

<div id="information">
<h3> </ h3>
</ p>
</ Div>
</ Div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"> </ div>

<div id="slidearea">

<div id="slider"> </ div>

</ Div>

<div id="slideright" title="Slide Right"> </ div>

</ Div>

</ Div>

</ Div>


<script type='text/javascript'>
. $ ('Slide') mungkin dikenakan biaya 'tidak ada';
. $ ('Wrapper') mungkin dikenakan biaya 'blok';
slideshow var = TINY.slideshow baru ("slide");
window.onload = function () {
slideshow.auto = true;
slideshow.speed = 5;
slideshow.link = "linkhover";
slideshow.info = "informasi";
slideshow.thumbs = "slider";
slideshow.left = "slideleft";
slideshow.right = "slideright";
slideshow.scrollSpeed ​​= 4;
slideshow.spacing = 5;
slideshow.active = "# fff";
slideshow.init ("slide", "gambar", "imgprev", "imgnext", "imglink");
}
</ Script>

Potret Menarik Slideshow Slider untuk Blogger / Website

Hidup Demo

1. Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.

2. Paste kode berikut di HTML / Javascript Box.

type="text/javascript"> src="http://dl.dropboxusercontent.com/s/zgclngmcv796411/n17-content-slider-06.js" <script </ script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
# Slider4 {
border: 2px solid # 181818;
background: # ffffff;
margin-left: 9px;
}
# Paginate-slider4 {
border-color: # 181818;
margin-left: 9px;
margin-top: 4px;
}
# Nomor pd halaman buku-slider4 a img {
width: 80px;
height: 60px;
border: 2px solid # 181818;
margin-top: 5px;
}
# Paginate-slider4 img a: hover, # paginate-slider4 a.selected img {
border: 2px solid # ffc04e;
}
. Sliderwrapper {
position: relative; / * Meninggalkan seperti * /
overflow: hidden; / * Meninggalkan seperti * /
border: 10px angkatan laut yang solid;
width: 500px; / * Lebar slider konten fitur * /
height: 325px;
}
. Sliderwrapper. Contentdiv {
visibility: hidden; / * Meninggalkan seperti * /
position: absolute; / * Meninggalkan seperti * /
kiri: 0; / * Meninggalkan seperti * /
top: 0; / * Meninggalkan seperti * /
padding: 5px;
background: white;
width: 500px; / * Lebar DIVs konten dalam slider. Total lebar harus sama lebar bagian slider ini * /
height: 100%;
filter: PROGID: DXImageTransform.Microsoft.alpha (opacity = 100);
-Moz-opacity: 1;
opacity: 1;
}
. Pagination {
width: 500px; / * Lebar pagination DIV. Total lebar harus sama lebar luar slider ini * /
text-align: right;
background-color: # ffffff;
padding: 0px 5px;
}
. Pagination a {
padding: 0 5px;
text-decoration: none;
color: # 181818;
background: # ffffff;
}
. Pagination a: hover, pagination a.selected {.
color: # 181818;
background-color: # ffffff;
}
</ Style>


<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<Div style = "background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3b0bLEnd8Rzvv7H3ITYlJC_yiTLJeJxY4lgImWEJ0sbzAtY_niqL4Jq-GS9tW2tkwXzru7MVkawXf6tRU_zor6hDkSS3XZ3vfvOsdkqxTAQLj0wVtL37AtEPSJGgh0NDPEILqJQ7tgfLA/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png ') kiri tengah no-repeat "class =" contentdiv ">
</ Div>

<Div style = "background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHbmpmvF_ofoUDc9Th6FLHf1hvhrT6upzu2zN3qUOWVEHslTQS_WnVqgRJNuU3UZCI7EU8GUNc4T_1_3rMJp4vnEVKT5cmSdhzVnZc3FNWSNXfq9cEsj95YHvppH3oy_RylF26n1X8aqm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png ') kiri tengah no-repeat "class =" contentdiv ">
</ Div>

<Div style = "background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBby6VTgEpWIGm7dPpul2ktNe4aDvJW5by-u_9WwbJN0asvBR1aca3J3WDlSTuH45GIJ5_-syWh7iJk0_t4YbsGvKIpd2JB_WFfGXoPeWuSYItHQAZhjmf_wc-mTz6ni8vLnMuC9x0ZMb/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png ') kiri tengah no-repeat "class =" contentdiv ">
</ Div>

<Div style = "background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0ZeRin-PAFBWX8WjqKtaDH3wgCyYVNl-M008xwvlCDfmgjWzb5r44NOrvN6XOicWtnr5Q0lst3I3BVefPEKDUVLjqiJhBkoOSGhRJaGkrcj2f3TMAmLoU2alVlKx0zFLr52iHOZhNL-_/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png ') kiri tengah no-repeat "class =" contentdiv ">
</ Div>

<Div style = "background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkm0ryXFJlDzU-Wh1rgq3t8hG8h3xYEsJYP1GIf1W_q4E50LgeFsFD-Mx2eTobvFArYRUjJJAl3natwpKqbUIpU2QWWgBFfhfCAGUKCYCj-TBcNeBNeC7LB84EBcAllJGMp9h2XVcZu6s/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png ') kiri tengah no-repeat "class =" contentdiv ">
</ Div>

</ Div>

<div id="paginate-slider4">

<a href="#" target="_blank" class="toc"> <img alt = "Image1" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFXypz4S8-KfAvjkqD0JXw1Rx_kIek0mIcOTSuPF6uzSmRElD-fq2FERP3Avu-rN-nAjLpXtJhR9S3lzXr9lrmkz5TMOZ_qCbG_Lk04RyTKnkzDgBLnnwqUVo5tvSJRjbyx7Q2R6URX1b/s1600/Change+Mouse+Cursor+Generator.png "/></a>

<a href="#" target="_blank" class="toc"> <img alt = "Image2" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1K9XeWtJkDQWJPv5IQeHZa4mvGyFfRAF6OWWyr-p9joDLG_f_hDY1FwQ8MaJ1ZHfVKCcSc7YevXEo5ORUDnnuW9n-C44BPE0pIzyC5MBjMAetXaTvTtrV28JBubdt4KVGTT0-athLP21/s1600/Numbered+Page+Navigation.png "/></a>

<a href="#" target="_blank" class="toc"> <img alt = "Image3" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGC7ltDTu6w0EOIL6z-DNVl85HbecXj8kE8sVIm-YyH-NlfGpg5dxY9Tm44hEcPr93G-Swkaut556_KjQnhawKXCkgG_kgbYSnx0AiMBlNmPsuBs5NjvpZyaQ0tcjKua4LxVtXvS1RRQkd/s1600/Snow+Cursor+Code+Generatort.png "/></a>

<a href="#" target="_blank" class="toc"> <img alt = "Image4" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyI5fsZW56B2FMYFafpkZ1GOFlI-2nluDlq5YDTgCWXRYmhQ0NAvMb5igebynJCS1uBLbSZq3-DWgTsfbB-3oJn1ZxvC7YsluDDiFzfpUsALECeLWzanZvEw3w62XWt6I3J5pCj-6o047/s1600/Blogger+Falling+Object+Generator.png "/></a>

<a href="#" target="_blank" class="toc"> <img alt = "image5" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8JYzVrs8f6dZGgTj4IalkISTxOe5YGbklPSVuMPi1tat1QuQJOo8Vr7_bdf6Qx2gRX6neRHPCEVbxVpRsYeFt2W1sH-frDn2YiDtUjqaglq6417ac8zSf9M12ra1lWTGr5zFSBMpcdnQ/s1600/Animated+Flash+Clock.png "/></a>

</ Div>

<script type="text/javascript">
featuredcontentslider.init ({
id: "slider4", / / ​​id slider utama DIV
contentsource: ["inline", ""], / / ​​Nilai valid: ["inline", ""] atau ["ajax", "path_to_file"]
toc: "markup", / / ​​Nilai valid: "# increment", "markup", ["label1", "label2", dll]
NextPrev: ["", "Next"], / / ​​label untuk "prev" dan "next" link. Set ke "" untuk menyembunyikan.
revealtype: "mouseover", / / ​​Perilaku link pagination untuk mengungkapkan slide: "klik" atau "mouseover"
enablefade: [benar, 0,1], / / ​​[benar / salah, fadedegree]
autorotate: [benar, 5000], / / ​​[benar / salah, pausetime]
onChange: function (previndex, curindex) {handler / / event dipecat setiap kali perubahan script geser
/ / Previndex memegang indeks slide terakhir dilihat b4 saat ini (1 = 1 slide, 2 = 2 dll)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</ Script>

</ Div>

<div class="clear"> </ div>

Smooth Jquery Featured Post Slideshow For Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"/></script>
<script type="text/javascript">
$ (Document). Ready (function () {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</ Script>
<script src="http://dl.dropboxusercontent.com/s/xuany11mndz8nwm/n17-content-slider-07.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
kiri: 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>



<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIQOV6dSzKqS3qv8tjrfzTOTGKcdskAevLYGgVSeuMPnoXQfbWl9L32OzSKX3ZhZk8WecHjxLM7Bq6-pq0GT6CdDSo8SoipMfDTxEQVKnCUSlwBzfcN7Vduij9HPEAOJCHTRy_E-xJDi5f/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" /><span> Title-of-Post-1 </span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHKcm3ZiIQCMKrSkotlFIf1GY7isrpIuc0NA4Acua1h-nDVPbr4JU5JmQS6k-CB0Zlo7zCsWWRl_qhuzg06LXfjd0R4kQ4RkwcslkNhqFbMdugaV3xD2jlUOnImWpilWGblD35RAC9YC_/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" /><span> Title-of-Post-2 </span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcTenlWqw9HwxYg6hL1oAcwn3WRnHcd4DRWHd8J2c5p9a2fYLuq4H70drV9m32XcKkgh6O6y5yvqmZnmQ9ReV-ZOm8o8TtetyzXgCiBqrq2fWDNKPej7LLAvAn2x8prHHqlvVeA0eocf3/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" /><span> Title-of-Post-3 </span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_csIKBitW86aoxHMRV07MmS-kXJDWrHzApF9ki_SNhW0SM8E_P9CC6ixiZ4uvQtVkx60c8Oe-jtZJSpgTCMd5LGBHvSfd0tJFE6ISJQVLo8JRvTMfbd7fsz3C4WnHuQr5ZWkIIs4_v2i/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" /><span> Title-of-Post-4 </span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT-qnUon-ZgBw9q0uF7JfFTu8QhoHRxGzLHHi4scm20CZH2l10UcuiWnDWrE7fz4BL_Fe6SlikgbjJLWjOZy7gT98vvXiU1nYwZQi-jhnIXY1C5XuMctzpvQtUzs7mk56iVIbMzGUsI0_/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" /><span> Title-of-Post-5 </span></a></li>

<li class="s3sliderImage"></li>
</ Ul>
</ Div>

<div class="clear"> </ div>
</ Div>

How To Add Featured Post Content Slider to Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"/></script>
<script type="text/javascript">
/ / <! [CDATA [

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</ Script>
<script src="http://dl.dropboxusercontent.com/s/hzvrb89dqcv4tnd/n17-content-slider-08.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/is3b1bz385zi88h/n17-content-slider-09.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ac9jbr5hwssjnqh/n17-content-slider-010.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position: relative;
}

.mytext img{
position: absolute;
left:10px;
top: 10px;
padding: 5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position: relative;
margin:0px 0px;
height:200px;
width:680px;
float: left;
display: inline;
line-height: 20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext a:visited {
color: # fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight: normal;
width:350px;
height:24px;
overflow: hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color: # fff;
}
.slnav{
padding:3px 0px;
background: # 000;

}
.prev{
float: left;
width:24px;
height:24px;
z-index:200;
margin-left: 5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CSKK_KL6-xkm2EP1WcK06pFxcTgnwI7cCKcGLh__-Hn3MMiijoSIT3a3xz4OsmfFWqS9GZ6xToI1cOphbIPkDgeRJqAPM37sFoOhtGmq9i0N1rnmaH6Qm7wnjMRQKl8IcNrKDBuEmeS0/);
}

.next{
float: right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1lAwJ6nNfKMruwup_BgVbKvD2LCJnOE9UNhrY5jjipmbc4uCgI8lOSq4VK3zqUVITkAbY7XMghiL6rp-P-YQlDDJhUnOqkeNhSMzYxJYmPXR1FHzFK9ZOQ9DVAat9YZjeD-0l5WYrSx2/);
display: block;
}

</ Style>


<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 1,
easing: "backout",
speed: 1000
});

});
</ Script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="#" target="_blank">Title-of-Post-1</a></h2>
<p> Slide 1 Description [...] </p>

<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="170"/>
</ Div>
</ Li>


<li>
<div class="mytext">
<h2><a href="#" target="_blank">Title-of-Post-2</a></h2>

<p> Slide 2 Description [...] </p>

<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="170"/>
</ Div>
</ Li>


<li>
<div class="mytext">
<h2><a href="#" target="_blank">Title-of-Post-3</a></h2>

<p> Slide 3 Description [...] </p>

<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="170"/>
</ Div>
</ Li>


<li>
<div class="mytext">
<h2><a href="#" target="_blank">Title-of-Post-4</a></h2>
<p> Slide 4 Description [...] </p>

<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="170"/>
</ Div>
</ Li>


<li>
<div class="mytext">
<h2><a href="#" target="_blank">Title-of-Post-5</a></h2>
<p> Slide 5 Description [...] </p>

<img alt="" width="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="170"/>
</ Div>
</ Li>

</ Ul>

<div class="clear"> </ div>

</ Div>
</ Div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"> </ div>
</ Div>

</ Div>

<div class="clear"> </ div>

How To Add Mootools Recent Post Slider to blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script type="text/javascript"> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180;
</ Script>
<script src="http://dl.dropboxusercontent.com/s/7e8m9w234ax6bp1/n17-content-slider-011.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/mz00mvgt4fyp081/n17-content-slider-012.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/xj4ox1f3yajxv65/n17-content-slider-013.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
div#featabout { width: 635px; border-bottom: 1px solid; }
div#featabout-wrapper { margin: 0 auto; padding: 22px 0; width: 635px; height: 235px; }

div#featabout div.featured { float: left; width: 640px; }
div#featabout div.featured div.top { height: 15px; }
div#featabout div.featured div.mid { padding: 0 15px; }
div#featabout div.featured div.mid div#featured { border: 1px solid; }
div#featabout div.featured div.bot { height: 15px; }

div#featabout div.about { float: right; width: 328px; }
div#featabout div.about div.top { height: 15px; }
div#featabout div.about div.mid { padding: 0 15px; height: 224px; }
div#featabout div.about div.bot { height: 15px; }

div#featabout div.ab-box h2 { display: block; margin: 0; padding: 0 0 8px 0; font-size: 12px;
font-family: Georgia, 'Times New Roman', serif;
text-transform: uppercase;
}
div#featabout div.ab-box div.interior { padding: 8px 0; }
div#featabout div.ab-box div.interior p { display: block; margin: 0; padding: 0; }
div#featabout div.ab-box-author div.interior { padding: 8px 0 16px 0; min-height: 60px; }
div#featabout div.ab-box-author div.interior img { padding: 3px; border: 1px solid; float: left; margin: 0 5px 0 0; }
div#featabout div.ab-box-burner div.interior { padding: 8px 0 8px 65px; }
div#featabout div.ab-box-burner div.interior p { display: block; margin: 0; padding: 0; line-height: 28px; }
div#featabout div.ab-box-burner div.interior span { display: block; height: 21px; margin: 0 0 0 0; padding: 6px 0 0 0; }
div#featabout div.ab-box-burner div.interior span input { width: 191px; padding: 0 5px; border: 0; }
div#featabout {
background: #ffffff url('') repeat-x scroll left top;
border-bottom: none;
}
div#featabout div.featured { background: transparent url('') repeat-y scroll left top; }
div#featabout div.featured div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.featured div.mid div#featured { border-color: #000; }
div#featabout div.featured div.bot { background: transparent url('') no-repeat scroll left bottom; }
div#featured h2 {
font-family: Georgia, 'Times New Roman', sans-serif; font-size: 24px;
line-height: 30px; font-weight: normal;
}
div#featured p {
font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}

div#featabout div.about { color: #999; background: transparent url('') repeat-y scroll left top; }
div#featabout div.about div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.about div.bot { background: transparent url('') no-repeat scroll left bottom; }

div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url('') repeat-x scroll left bottom; }
div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url('') no-repeat scroll 0px 8px; }
div#featabout div.ab-box-burner div.interior span { background: transparent url('') left top no-repeat; }
div#featabout div.ab-box-burner div.interior span input { background: transparent none; color: #666; }

#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: # 000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
kiri: 0;
top: 0;
background-color: # 000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 14px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: # FFFFFF;
bacground: transparent;
}
.jdGallery .slideInfoZone ul {
list-style: none;
margin: 0 0 0;
padding: 0 0 0;
color: # FFFFFF;
}
.jdGallery .slideInfoZone li {
list-style: none;
margin: 0 0 0;
padding: 0 0 0;
color: # FFFFFF;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 11px;
margin: 2px 5px;
color: # FFFFFF;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
kiri: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
kanan: 30px;
height: 20px;
/ * Width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 10px 0;
font-size: 13px;
background: # 000;
color: # fff;
kursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
kiri: 0;
top: 0;
height: 115px;
background: # 000;
color: # fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
kiri: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
kursor: pointer;
background: # 000;
background-position: center center;
float: left;
border: solid 1px # fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
kiri: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
kanan: 10px;
padding: 1px 2px;
margin: 0;
background: # 222;
border: 1px solid #888;
kursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
.jdGallery a, .jdGallery a:hover
{
font-size: 100%;
text-decoration: none;
color: # fff;
}
.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
kursor: pointer;
z-index:10;
filter: alpha (opacity = 20);
-Moz-opacity: 0.2;
-KHTML-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right, * html .jdGallery a.left
{
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter: alpha (opacity = 80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left
{
kiri: 0;
top: 0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_sRHH6uvr6po-jZqipZJGjWgrCLbVDXpGdtIwLTorn7yffNKGMGTmXNdxnwRiY_NN9_-3pq41wrgk3FhXb-3xHbGTDsd5oH-cCrfs3BwWjpbzXhnChFz0gw6-QpN_v_lB6UAGECJKPgd/s1600/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left { background: url('') no-repeat center left; }
.jdGallery a.right
{
kanan: 0;
top: 0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvz-GK8KmHsvx8RWjLdydmX81euHKERas1o1E0hH6aRX-Wfp5Wbs3ou9jS3DVyrMTM2knSOZePOzdQU4oaiNoOMbluNBNfirB9FvXSvlCkG7rXDRyRgBE6ToW2B2dBfTcJEEXvc-Qh_8E/s1600/fleche2.png') no-repeat center right;
}
* html .jdGallery a.right { background: url('') no-repeat center right; }
.jdGallery a.open
{
kiri: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
kursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover { background: url('') no-repeat center center; }
* html .withArrows a.open:hover { background: url('') no-repeat center center;
filter: alpha (opacity = 80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/ * Width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 10px 0;
font-size: 13px;
background: # 000;
color: # fff;
kursor: pointer;
opacity: .4;
-Moz-opacity: 0,4;
-KHTML-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
kiri: 0;
background: # 000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: # fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: # fff;
kursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: # 000;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: # 000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
. JdGallery. GallerySelector gallerySelectorInner div.galleryButton p.info.
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
.extra div.box { width: 310px; padding: 0px; margin:0;}
.extra div.box-popular { float: left; }
.extra div.box-recent { float: right; }

</ Style>



<div id="featabout">
<div id="featabout-wrapper">
<div class="featured">
<div class="top"></div>
<div class="mid">
<div id="featured">
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 606px;
height: 220px;
z-index: 5;
border: 1px solid #000;
overflow: hidden;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
kiri: 0;
bottom: 0;
height: 80px;
background: # 000;
color: # fff;
text-indent: 0;
overflow: hidden;
}
</ Style>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</ Script>
<div id="myGallery">

<div class="imageElement">
<h2><a href="#" target="_blank"> Title-of-Post-1 </a></h2>
<p>Slide 1 Description [...]</p>
<a class="open" href="TITLE-OF-THE-SLIDE 1" target="_blank" title="How to change mouse cursor in blogger blog to animated cursors"></a>
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BLHDFnoF-dxh8R2mlvbXuuJ2rcVCRqMsOerVwdLcWRnVFn1jKTzYcZuDURkYZg3Pj1KRmAEIVbsIIphK4hAuDaJ5H3dmg5ZB5ui1e7SZuASqnLF0XP6kSb0_lHgZ_m4EJdDzi43PWXSG/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/>
<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qDt0ZrrVDqUrqtMS7Z_VVgKVC43JFYlvS7dyxHXsF4F9UNewoa7X78z3XNW_yrN5VChCYqCnDNvQxNZ7psdaHPjsXMuqB55BiPyeaXdZ3kUd3jC6krN_P6Y2qlPDBaEkfxeuGMRKLlzb/s1600/Change+Mouse+Cursor+Generator.png"/>
</ Div>
<div class="imageElement">
<h2><a href="#" target="_blank"> Title-of-Post-2 </a></h2>
<p>Slide 2 Description [...]</p>
<a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 2"></a>
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrHVqhozcngmU2iAIUszB9zr8csQVpvmmoTVwLjDO6CeuHuElnNc4J-KIu5HdVOIL4FtRw5ehfvNrW9x34NaZzuviqq01ksnKdGVqjoaY9T-Suab6PI3PsEhZFMSRg40mOmRndw3etDBb/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/>
<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNPV3PZtvwtyuMGFzZbFWgE7LmQZCy-6Cc9Fw5tfczYYdkTy4W43g665F6fAmwD-sI9ElXyoRCjkf2ghZok1vphRC-KzWMwEIUopYoXpOatoba7NW4kjr977xEBrxsrfsLIUE3dOQGIzg/s1600/Numbered+Page+Navigation.png"/>
</ Div>
<div class="imageElement">
<h2><a href="#" target="_blank"> Title-of-Post-3 </a></h2>
<p>Slide 3 Description [...]</p>
<a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 3"></a>
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTEEz7QpN7nfZouLAZ5Ts_QBHB_Rm50FvoSFy5ruuz8d6H8Mwyx06u46MBN9Zpi2YyoeKEjaMDifZ5IvJE3md0gpoKM9dZ1iMMnS7JVTjw1lpnM8qxMMq-DZFVWzd4uNZhaNo9SGQQxPPD/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/>
<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZI1R02jn6gWaEQwxcn0pb_tAQbcemjk7InjCOetB294L8MinHJUwncw4faVBo9loN_Ysot6ccRbVW2grLkzTIWLnarBwRyn5FKB6IPe8IztENqP8qEbLsu6LQF_w3CMKpXUrMF5eOn41b/s1600/Snow+Cursor+Code+Generatort.png"/>
</ Div>
<div class="imageElement">
<h2><a href="#" target="_blank"> Title-of-Post-4 </a></h2>
<p>Slide 4 Description [...]</p>
<a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 4"></a>
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kleGDEwmJqNBvnQ70x10R43daxbwQWt3H2o3lNtfpMJNIRoFOUBlfVbV0JJ6DwAgIVeLIBr1nLW3QC3puBPvr5rn_QgXdFCYuxxT5b6A4e_bhz5Zq3tl1sA0BK47c2DH0tpGnQ00ESHY/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/>
<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VUJmXe8bIn4SsgT5KGpfZOX19QK8U_rg0ob67Lme8ESpv82P_ioWbt1_AYry-4OTt-pAmfK7kbJuAjfOHBwuFrpFvCr1Lyq7eMxdx0VQzX5MpUHO7zXme0CZbyeKTcDob5BP3nolF0mG/s1600/Blogger+Falling+Object+Generator.png"/>
</ Div>
<div class="imageElement">
<h2><a href="#" target="_blank"> Title-of-Post-5 </a></h2>
<p>Slide 5 Description [...]</p>
<a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 5"></a>
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQMUiN8vidI_lFtpjFdw9IOQ0ItAh2FPe_cO-Ml5PD5QJzGqk2yg5u9N_o1bLp8F0MMJNzthESIwdAY2-orqHbOlTV6sGRy5hpoO-keZutStcaWj9069nZ0BdAZ7sMiTYVsvFQNh-1eHL/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png"/>
<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC2KkaHHJv31Ejdb5J5Q2vbk-2uIMpCnAYOo2UwtBig-8jeNLdoGHmSCsai751gNZoaEBQ4bJ_fQMmNWVfE9d4-eboLgVgPpMbAhHL6xju65C1ojsOFMMp8dbJgH7Lm30cvys9iM2L2HAH/s1600/Animated+Flash+Clock.png"/>
</ Div>
</ Div>

</ Div>
</div></div></div></div>

How To Add jQuery Featured Content Slideshow to Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/yf0z0w6wgq2swkx/n17-content-slider-015.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});

$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});

$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});

$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '150px'
});

});
</ Script>


<ul id="portfolio" style="list-style-type:none;">

<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="307" /></a></li>


</ Ul>

<div class="clear"> </ div>

How To Add jQuery Featured Content Slider to Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8vttveslreot4pb/n17-content-slider-016.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/u332yvzx9h8jk1v/n17-content-slider-017.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8fnl5o988r1wyni/n17-content-slider-018.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/vgpm9xyrommo21r/n17-content-slider-019.js" type="text/javascript"></script>
<script type="text/javascript">
/ / <! [CDATA [

$(document).ready(function(){
$(".glidecontent").hover(function() {
$(this).children(".glidemeta").animate({opacity: "show"}, "slow");
}, Function () {
$(this).children(".glidemeta").animate({opacity: "hide"}, "fast");
});
});

//]]>
</ Script>
<script type="text/javascript">
/ / <! [CDATA [

$ (Document). Ready (function () {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</ Script>
<script type="text/javascript">
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</ Script>
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 1,
persiststate: true,
speed: 300,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</ Script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#glidercontent{
margin:0px 0 5px 0px;
font-family:Georgia,Century gothic, Arial,Tahoma,sans-serif;
}
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 670px;
height: 300px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
margin: 0px 0px 0px 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNkf1cdCCVHsOIqDmPbu2wsX2Avx1rd3-RzO1jIdus5Y6ui8MBXcMiNQbpGYHPR8TRfYLmsIY8yvtpslBtG6EMcYfUW5dpMbuv2NFGRhYa6jTmPYb-nAE15gFYftRv-cYqyozyenwHIZm/) repeat-y;
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width: 640px;
color: # fff;
margin:0px 0px;
height: 230px;
background:#ec03d9 url() no -repeat;
overflow: hidden;
float: left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size: 18px;
font-weight: bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color: # fff;
}
.glidemeta{
height: 80px;
width: 650px;
padding:0px 5px 5px 5px;
position: absolute;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXESkFBzaO5ux-YM2WpBMv1RTPaDglYD7OoT3Q7mOGYYherJ7_LRFhJvF0A3vMzLck5vASWQUrdIkivLgttlNxklLjPV7rY48g0X3T-KZgqM7V2NNZoqDfHUhmlfs5771U4eY8LFCCnSsC/);
top:164px;
line-height: 14px;
color: # fff;
font-size: 12px;
overflow: hidden;
display: none;
border-top:1px solid #000;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height: 50px;
z-index:150;
float: right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height: 38px;
z-index:150;
width: 670px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NmWqzzQ9xRu0Borem-s-Hg6-1Rerz14RqK4384Ob77tDqwp__YZJSaMc5WzuNcbRSOM54QMy3konoBEEeIZbsKwGrjVhMktL38bD1FFbPeXcXTRCRIRTAE8Nly2sJ0_US_n6Yha5iSIt/);
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #E4EFFA;
warna: hitam;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
warna: hitam;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
top:6px;
right:35px;
position: absolute;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKeMrkqH3My3ALNTBbXgjlY4HYt1XLMcyl1sAeY1r5NPeVRrd-rAI3tCojonYXI1ZeIEC9Zqtf3wG-FJd2wA4v11NtXLKxF1AW738YiYtShEsiiItNJSLEpnh1YILsCK4I3-ukCCb6ObKg/) bottom;
width:36px;
height: 25px;
}
.glidecontenttoggler a.next {
float: right;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4MuL-Ga3s0EBD0Pox4dPJpljLMNovO4Cf60wnKPu99P0iS-DHwD26kyJFfT4seEd_TZBOWJU5xmOdo619T7gD7hIxFq4xCmDh8oYpgVG6kvBEze9-Sm0-repq9q7z_w58aOdKMZ1yRBj/) bottom;
width:36px;
height: 25px;
position: absolute;
top:6px;
right:5px;
}
</ Style>



<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</ Div>


<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2BLHDFnoF-dxh8R2mlvbXuuJ2rcVCRqMsOerVwdLcWRnVFn1jKTzYcZuDURkYZg3Pj1KRmAEIVbsIIphK4hAuDaJ5H3dmg5ZB5ui1e7SZuASqnLF0XP6kSb0_lHgZ_m4EJdDzi43PWXSG/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="250"/></a>
</ Div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrHVqhozcngmU2iAIUszB9zr8csQVpvmmoTVwLjDO6CeuHuElnNc4J-KIu5HdVOIL4FtRw5ehfvNrW9x34NaZzuviqq01ksnKdGVqjoaY9T-Suab6PI3PsEhZFMSRg40mOmRndw3etDBb/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="250"/></a>
</ Div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTEEz7QpN7nfZouLAZ5Ts_QBHB_Rm50FvoSFy5ruuz8d6H8Mwyx06u46MBN9Zpi2YyoeKEjaMDifZ5IvJE3md0gpoKM9dZ1iMMnS7JVTjw1lpnM8qxMMq-DZFVWzd4uNZhaNo9SGQQxPPD/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="250"/></a>
</ Div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kleGDEwmJqNBvnQ70x10R43daxbwQWt3H2o3lNtfpMJNIRoFOUBlfVbV0JJ6DwAgIVeLIBr1nLW3QC3puBPvr5rn_QgXdFCYuxxT5b6A4e_bhz5Zq3tl1sA0BK47c2DH0tpGnQ00ESHY/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="250"/></a>
</ Div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQMUiN8vidI_lFtpjFdw9IOQ0ItAh2FPe_cO-Ml5PD5QJzGqk2yg5u9N_o1bLp8F0MMJNzthESIwdAY2-orqHbOlTV6sGRy5hpoO-keZutStcaWj9069nZ0BdAZ7sMiTYVsvFQNh-1eHL/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="250"/></a>
</ Div>

</ Div>

<div class="clear"> </ div>

How To Add Featured Auto Content Slider to Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/a6hwm4xaov65ihr/n17-content-slider-020.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/6bd0dn4xy4iluzw/n17-content-slider-021.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/bwcgg4juf8uioe0/n17-content-slider-022.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/w12rfpd79e1elkt/n17-content-slider-023.js" type="text/javascript"></script>
<script type="text/javascript">
/ / <! [CDATA [

jQuery (document) ready (function. () {
Cufon.replace('#blog-title,.postleft h2,.title h2', { fontFamily: 'Liberation Serif' });

});

//]]>
</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:670px;
margin-bottom: 10px;
background:#373737;
border-radius: 5px;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
float: left;
display: inline;
}

#gallerycover{
overflow: hidden;
margin:15px ;
height: 220px;
}

.mygallery{
overflow: hidden;
position: relative;

}

.mytext img{
position: absolute;
kiri: 0px;
top: 0px;
width:635px;
height:220px;

}

.mytext a img {
border: none;
}

.mytext{
position: relative;
width:635px;
height: 220px;
float: left;
display: inline;
float: left;
color:#c4c4c4;
background:#4F4B40;
border:1px solid #CFC4A8;
}

.inpost{
position: absolute;
bottom:10px;
left:10px;
width: 620px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlrlbkTG8CHWXqOJArIBPzRLGdvWX8uje7eOGUFW9N1wYTu5IwP_KTtKHrZ3ajFyE3ReQyWVY1n4ifv1WG5Ah9lvUhPaq3qhQdqtpK0PJ5obumI0zysHVwkRBrC057XR-03QcefYv0UIb/);
}

.inpost p{
margin:5px;
font-size: 12px;
font-family:"Segoe UI";,Calibri,"Myriad Pro",Myriad,"Trebuchet MS";,Helvetica,Arial,sans-serif;
}

.mytext h2 {
padding: 5px 10px;
color: # fff;
font-size: 16px ;

}

.mytext h2 a:link,.mytext h2 a:visited{
color:#e9dbd5;
}
</ Style>





<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 1,
speed: 1500,
auto:5000,
mouseWheel: true,
easing: "backout"

});

});
</ Script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">

<ul>

<!-- Slide-1 Code Start -->
<li>
<div class="mytext">
<a href="#" target="_blank"><img alt="" width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3b0bLEnd8Rzvv7H3ITYlJC_yiTLJeJxY4lgImWEJ0sbzAtY_niqL4Jq-GS9tW2tkwXzru7MVkawXf6tRU_zor6hDkSS3XZ3vfvOsdkqxTAQLj0wVtL37AtEPSJGgh0NDPEILqJQ7tgfLA/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="176"/></a>
<div class="inpost">
<p> POST-DESCRIPTION-HERE [...] </p>
</ Div>
</ Div>
</ Li>
<!-- Slide-1 Code End -->


<!-- Slide-2 Code Start -->
<li>
<div class="mytext">
<a href="#" target="_blank"><img alt="" width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHbmpmvF_ofoUDc9Th6FLHf1hvhrT6upzu2zN3qUOWVEHslTQS_WnVqgRJNuU3UZCI7EU8GUNc4T_1_3rMJp4vnEVKT5cmSdhzVnZc3FNWSNXfq9cEsj95YHvppH3oy_RylF26n1X8aqm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="176"/></a>
<div class="inpost">
<p> POST-DESCRIPTION-HERE [...] </p>
</ Div>
</ Div>
</ Li>
<!-- Slide-2 Code End -->


<!-- Slide-3 Code Start -->
<li>
<div class="mytext">
<a href="#" target="_blank"><img alt="" width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBby6VTgEpWIGm7dPpul2ktNe4aDvJW5by-u_9WwbJN0asvBR1aca3J3WDlSTuH45GIJ5_-syWh7iJk0_t4YbsGvKIpd2JB_WFfGXoPeWuSYItHQAZhjmf_wc-mTz6ni8vLnMuC9x0ZMb/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="176"/></a>
<div class="inpost">
<p> POST-DESCRIPTION-HERE [...] </p>
</ Div>
</ Div>
</ Li>
<!-- Slide-3 Code End -->


<!-- Slide-4 Code Start -->
<li>
<div class="mytext">
<a href="#" target="_blank"><img alt="" width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0ZeRin-PAFBWX8WjqKtaDH3wgCyYVNl-M008xwvlCDfmgjWzb5r44NOrvN6XOicWtnr5Q0lst3I3BVefPEKDUVLjqiJhBkoOSGhRJaGkrcj2f3TMAmLoU2alVlKx0zFLr52iHOZhNL-_/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="176"/></a>
<div class="inpost">
<p> POST-DESCRIPTION-HERE [...] </p>
</ Div>
</ Div>
</ Li>
<!-- Slide-4 Code End -->


<!-- Slide-5 Code Start -->
<li>
<div class="mytext">
<a href="#" target="_blank"><img alt="" width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkm0ryXFJlDzU-Wh1rgq3t8hG8h3xYEsJYP1GIf1W_q4E50LgeFsFD-Mx2eTobvFArYRUjJJAl3natwpKqbUIpU2QWWgBFfhfCAGUKCYCj-TBcNeBNeC7LB84EBcAllJGMp9h2XVcZu6s/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="176"/></a>
<div class="inpost">
<p> POST-DESCRIPTION-HERE [...] </p>
</ Div>
</ Div>
</ Li>
<!-- Slide-5 Code End -->



</ Ul>

<div class="clear"> </ div>

</ Div>
</ Div>
</ Div>
<div class="clear"> </ div>

Add Beautiful jQuery Auto Playing Featured Content Image Slider to Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/6hmtv143bo6vhnq/yourjavascript-56841175202.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">


* {

margin: 0;

padding: 0;

}

html{

height: 100%;

}





a img{

border: 0;

}

div.wrap{

width:540px;

margin: 0 auto;

text-align: left;

}

div#top div#nav{

float: left;

clear: both;

width:540px;

height:52px;

margin:22px 0 0;

background:url url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW52Rkdt9pbdKBuP3igX7IURYvmFezrHkyoxAIeehBx6yZpAUu6eojHYjv57evpGLUagHzgcNjGJahCNbTygA3DA0yBcknvIXPtnDBgASxDya_FnUR55EWjK93fq-nypOQ1P522cgd_f8W/s1600/navbgq.png) 0 0 no-repeat;

}

div#top div#nav ul{

float: left;

width:700px;

height:52px;

list-style-type:none;

}

div#nav ul li{

float: left;

height:52px;

}

div#nav ul li a{

border: 0;

height:52px;

display: block;

line-height:52px;

text-indent:-9999px;

}

div#header{

margin:-1px 0 0;

}

div#video-header{

height:683px;

margin:-1px 0 0;

}



div#header div#slide-holder{

z-index:40;

width:540px;

height:299px;

position: absolute;

}

div#header div#slide-holder div#slide-runner{

top:9px;

left:9px;

width:540px;

height:278px;

overflow: hidden;

position: absolute;

}

div#header div#slide-holder img{

margin: 0;

display: none;

position: absolute;

}

div#header div#slide-holder div#slide-controls{

kiri: 0;

bottom:228px;

width:540px;

height:46px;

display: none;

position: absolute;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbUrl89aqFbWoP6JhCF2La_xcgt55svKAwFWz7SdVroh1PaCvSGwauOys4-oZJX5iT_fNAWPLuZi8dd4Avj0iduKMiukyKxYqaZScFCT5SyUY4kkzwmFxYoohDo5Ee2J7ZtqbU-50AHcnR/s1600/slidebg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text{

float: left;

color: # fff;

display: inline;

font-size: 10px;

line-height:16px;

margin:15px 0 0 20px;

text-transform: uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav{

float: right;

height: 24px;

display: inline;

margin:11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{

float: left;

width:24px;

height: 24px;

display: inline;

font-size: 11px;

margin:0 5px 0 0;

line-height: 24px;

font-weight: bold;

text-align: center;

text-decoration: none;

background-position:0 0;

background-repeat: no-repeat;

color: # fff;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on{

background-position:0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgvdx9zBXyhcUirW5AOaMPr6kZ0-NcSMc2ydtJnr66kwKd4G_F5NW8MMlO5aWEc1ClMEFt9UaikQcs08Q6RTrjQvb4G6o_md8ho0L_xDquq-cw6_Id74ubx9-Az9l4o_9dqwRgwZQLHBOl/s1600/sildenav.png);}

div#nav ul li a{background:url(images/nav.png) no-repeat;}


</ Style>



<div style="float:left;">

<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">

<a href="#"><img id="slide-img-1" src="http://img338.imageshack.us/img338/9756/naturephotoc.png" class="slide" alt="" /></a>

<a href="#"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="" /></a>

<a href="#"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="Your image title here" /></a>

<a href="Your Post Link Here"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="" /></a>

<a href="#"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="" /></a>

<a href="#"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="" /></a>




<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</ Div>
</ Div>

<!--content featured gallery here -->
</ Div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script></div></div></div>

Adding jQuery Posts Slider To Blogger Blog

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/qa826blg13gd3ei/zinmag-primus-slider-01.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">

# Slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8IWtKF7AmqaH4vFY52sp8GeIRP02DKyomEVDTjOg01hpaRCJrbH0iWHQpH911FyVVQ-5APXayuoa4VUnKoJZf2SrhsDIm4qCacicxyKCOdJt8X6DHxTlyWmoKtli9NeiapTVP8T5-sP-/s1600/Adding+A+jQuery+Posts+Slider+To+Blogger+Blog.png);
height: 254px;
width: 983px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position: absolute;
overflow: hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height: 200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
position: absolute;
top: 20px;
kiri: 1px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width: 500px;
overflow: hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color: # fff;
background-color: transparent;
}
.slide h2 a:hover {
color: # ddd;
background-color: transparent;
}
.slide p {
color: # 999;
position: absolute;
top: 100px;
kiri: 1px;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background: # fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 55px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
</ Style>


<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>

<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="160"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="160"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...] </p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="160"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...]</p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="160"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">LINK-TITLE-HERE</a></h2>
<p>POST-DESCRIPTION-HERE [...]</p>
<img alt="" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="160"/>
</ Div>
</ Div>
<!-- /Mover -->
</ Div>
<!-- /Slider -->

Simplest jQuery Featured Content Slider in Blogger / Blogspot Blog

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/w17addojuvj5unl/freebloggerhelp-jquery.flow.1.2.auto.js" type="text/javascript"></script>
<script type="text/javascript">
$ (Document). Ready (function () {
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . tanda
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . tanda
next: ".jFlowNext" // must be class, use . tanda
});
});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width: 610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float: left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float: right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight: normal; line-height: 1; margin: 0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; kursor: pointer; padding-left: 5px; padding-right:5px; padding-top: 2px; Padding-bottom: 2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
</ Style>



<div class="jflow-content-slider">
<div id="slides">
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" alt=""/>
</ Div>
<div class="slide-details">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>

<div class="description">
TEXT-OF-THE-SLIDE 1
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" alt=""/>
</ Div>
<div class="slide-details">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2>
<div class="description">
TEXT-OF-THE-SLIDE 2
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" alt=""/>
</ Div>
<div class="slide-details">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2>
<div class="description">
TEXT-OF-THE-SLIDE 3
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" alt=""/>
</ Div>
<div class="slide-details">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2>
<div class="description">
TEXT-OF-THE-SLIDE 4
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
<div class="slide-wrapper">
<div class="slide-thumbnail">
<Img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" alt=""/>
</ Div>
<div class="slide-details">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 5</a></h2>
<div class="description">
TEXT-OF-THE-SLIDE 5
</ Div>
</ Div>
<div class="clear"> </ div>
</ Div>
</ Div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<span class="jFlowControl">4</span>
<span class="jFlowControl">5</span>
<span class="jFlowNext">Next</span>
</ Div>
<div class="clear"> </ div>
</ Div>

Moving jquery image slider for featured content in Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ak67ortxscb0acw/30111191622-slider.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwNO4YPvQrZNwvp5sB8kKtjmI0jTi_Sc-hLmeUwTaFJb-v4ralhwCS3jSY82WZGUqOwW3llL6LqZeN8QAGUHidVbsSkkhzxt9ti-1JWi2ud3EIqpARTHdGzjDr6ZiTDmepGNzfw807ao/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL0Z88FNjrQG_q1GT0TP_64AOD7H4SWrrgfQJy4E4DuIr5np4MGuitX644u_kqQlq7HgGRmKgUKvTF_oQBTeqpen-cSjidI0wp2EKJ8DRdGWnS_52S1CQWwlO6aa79oIeAS2gPjutToQ/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIV6JdNsm7fWQgt2Ddnxti9rU6iPCqhNGIk3yRx60iQ-sYsbS-aba7iDwtGZkvGBM3ka32Xs4DfFXoRXS1jED7CKSV1uNvv7T0cQly0MpFQcJe7p5kXa_6TqLTwuHmVUxROxgmkY0Hw/s1600/mslid.jpg) repeat-x;
width: 650px;
height: 165px;
margin-bottom: 5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
kiri: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width: 170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height: 120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size: 16px;
font-weight: bold;
text-align: center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding: 0px 0px;
}
</ Style>



<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="110"/> </a>
</ Div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="110"/> </a>
</ Div>
<!-- end code of 2nd -->

<!-- 3rd Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="110"/> </a>
</ Div>
<!-- end code of 3rd -->

<!-- 4th Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="110"/> </a>
</ Div>
<!-- end code of 4th -->


<!-- 5th Template -->
<div class="panel">
<a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="110"/> </a>
</ Div>
<!-- end code of 6th -->



</div></div></div>

Make A Simple Featured Content SlideShow Using JQuery

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/9bkep27aasu82dq/n17-content-slider-024.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIV6JdNsm7fWQgt2Ddnxti9rU6iPCqhNGIk3yRx60iQ-sYsbS-aba7iDwtGZkvGBM3ka32Xs4DfFXoRXS1jED7CKSV1uNvv7T0cQly0MpFQcJe7p5kXa_6TqLTwuHmVUxROxgmkY0Hw/s1600/mslid.jpg) repeat-x;
width: 650px;
height: 165px;
margin-bottom: 5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
kiri: 0;
top: 0;
}#contentSlide {
background : #ddd; -moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-Moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
height : 228px; margin-bottom: 10px;
padding : 10px 0px 10px;
}
#slideshow {
margin : 0 auto;
width : 953px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.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;
}
</ Style>



<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>

<p>TEXT-OF-THE-SLIDE 1</p>
<img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="115"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2>
<p>TEXT-OF-THE-SLIDE 2</p>
<img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="115"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2>
<p>TEXT-OF-THE-SLIDE 3</p>
<img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="115"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2>
<p>TEXT-OF-THE-SLIDE 4</p>
<img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="115"/>
</ Div>
<div class="slide">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 5</a></h2>
<p>TEXT-OF-THE-SLIDE 5</p>
<img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="115"/>
</ Div>
</ Div>

</ Div> </ div>
<!-- Slideshow HTML -->
<div class="clear"/></div>

Awesome Automatic Content Slider for Blogger using jQuery

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/kvfw9tl6t4u49ob/jquery-easing-1.3.pack.js"></script>
<Script type = "text / javascript" src="http://dl.dropboxusercontent.com/s/ib76y297q4chisa/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/houjhkyrn266zkp/coda-slider.1.1.1.pack.js"></script>
<script src="http://dl.dropboxusercontent.com/s/b4epvwng3u79j8a/n17-content-slider-025.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.floatLeft { float: left; margin-right: 10px;}
.floatRight { float: right; }
.clear { clear: both; }
a { outline: none; }
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUYspej0GbcjI6leJ3nnZxay9VMxdcAE-veqCyHSdC7lUkWYyBdR3q_dekhx17SmXHGEIH_vzxWkQxG1UEkSVQf67zg35CwzQrfRBf5iFYHe_mrnHdqZ1MfJOnkTjSzoT7B1QzSz28ohx/s1600/bg.png) top center; }
ul { list-style: square inside; }
a, a:visited { color: #729dff; text-decoration: none; }
a:hover, a:active { color: white; }
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; kiri: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1ow9EoorD5g924zp1lQXzm_O62vUwvKt15lmZPX7YFJrljAVa3Vv5mJhNbF1T1unedTitV9WMGrtjocFqjcUuOym44Yp12OufVbsPQuRXO1LKhMf3Z6w2wjxZYNv_yIAgRyiiHoBKcu0/s1600/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 100; warna: putih; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 100; }
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQwsnp-YmigNC7fFly2rL2A-KsFj71p5Ey2Rh-ybdN8WNWo8vsx8JpnaAYwWpAr6_S0jkWDfC939niEtnvdN9iD9BIctq69rLY75WogjADGqDg_dcAfgpAIociWRB7C1L-dtjr72NBnpH/s1600/icon-uparrowsmallwhite.png) top center no-repeat; }
-------------------------------------------------- ------------------
Awesome Automatic Content Sliders for Blogger using jQuery

-------------------------------------------------- ------------------
Featured Content Slider
*/

</ Style>



<div id="page-wrap">

<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</ Div>
</ Div>
</ Div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</ Div>
</ Div>
</ Div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="282"/>
<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</ Div>
</ Div>
</ Div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="282"/>
<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</ Div>
</ Div>
</ Div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img alt="" width="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="282"/>

<div class="photo-meta-data">
<a href="#" target="_blank">TITLE-OF-THE-SLIDE</a><br />

<span>TEXT-OF-THE-SLIDE</span>
</ Div>
</ Div>
</ Div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<h1> Tentang </ h1>
<blockquote>24work is a blog about Professional Blogger Tutorials, Free Backlinks, Free templates, Resources, Tools, CSS, HTML Tutorials, Tips, Tricks, and General tutorials. Visit Us <a href="http://24work.blogspot.com/" target="_blank">http://24work.blogspot.com/</a></blockquote>
<p><em>Contact Info <a href="https://www.facebook.com/24work" target="_blank">https://www.facebook.com/24work</a><br /></em></p>
</ Div>
</ Div>

</ Div>
</ Div>

<a href="#1" class="cross-link active-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuU_T14jL1nZU3Xs58hq0Ilj_AXhz3-3ZkCbLdiiKKpc8HxG81ub8f-u5sku1NLa_FljyctxCuJIC0ev6gH4pd-VbtxtiQqcb2PbxufuVu0VidIJxauJKDPWn1Yptfu6BhhzxwT1s2VVEJ/s1600/Change+Mouse+Cursor+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-5fP3tnmlWzxz0T4BgCjTiAeumdh_vHlN7uHKyEQkg5esEneBc-x_O7nrob9oC41mzv-xydnzlATO1O8SFg88UX35lWyYrPw9GNQXWrbUhMW7i9opSlX8bvi7lf9W3sR0UAc-omRcPnQ/s1600/Numbered+Page+Navigation.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXkbHmyfnFsI2GWErtvBcaI3oJ2AAmAsB0ZfO6FZZSt2gyUyVIWjUjake2Uvkd3EX0Z_Ldy4P3NVrF2vHB6HOJrUabchuBkfik7GO8HhckuA10bTkdejQe7ajD0U98Mtr-FxIZ6RH1iDry/s1600/Snow+Cursor+Code+Generatort.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-lh-czDY81LcsyzCuwh9zXFaVwGZ0C2Ig6VsbGsBtEwNKyjHvxxRW7TnR5wJ3a0XvV6g0LEs6MBwkbtdgCIb8rDYItUFdZ-qfd9bAFHCjL9E5EuI1zWMz03NUGRqjYs85N3OnyVFS1KR/s1600/Blogger+Falling+Object+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfX8A-pHWROoCbPy9T2lTvO3btsQUvBDV9cxTXN8jqbrEXCWpXEc7taKU6J8Yh9OpcM1MDbrep7WmMCdGoZ1gATgz1-Iyu2XWgZRJ_nCyUc4CP_yH0JeTgULDG4rrrdof17sVJ4xvmpl_c/s1600/Animated+Flash+Clock.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapiDRwNLzEQGYd4BQlMQf8ifrvvjK2yXdXyzg8A-sVyVEvzv2swN9INtDAGXd4FhYs_auzjYMkjVAIvWKn-gUiAtdzGbdNBNCVcdEfEmYIzxpjLiDRygsmT2J4_1JWJ4WKrClHMg1ZyTV/s1600/no+pic.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
</ Div>

</ Div>

</ Div>

Using jQuery Slider Featured Posts (glory)

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/g94iwem1wjsvbax/jquery.cycle.all-000-.js" type="text/javascript"></script>
<script type="text/javascript">
/ / <! [CDATA [
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
/ /]]>
</ Script>
<script type="text/javascript">
$ (Document). Ready (function () {
$('#myslides').cycle({
fx: 'fade',
speed: 700,
timeout: 3000,
next: '#next',
prev: '#prev'
});
});
</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_0AXMYqaqyEZ6q_OsM9UffhZYLVaVvXfcfEMtEMMhbQdBuN9VDwsdaFPZjxW3PF_sNvJ6eQBlJG4jr731jTjIM0fsi7E06c6I42OvQWjODOxz2MxqQzj5oEI8p7EaZdj74L6Uf4BbvaeJ/s1600/bg_featured.jpg) no-repeat;
position: relative;
}
#wrapper-myslides {
width:550px;
height:210px;
padding: 0 0 ;
margin: 3px 0 0 10px;
position: relative;
float: left;
}
#myslides {
width:550px;
height:210px;
padding: 0 0 50px;
margin: 0 18px ;
overflow: hidden;
}
.panel{
width:550px;
height:210px;
}
#myslides img.crop-foto {
margin:8px 10px 10px 9px;
border: 1px solid # fff;
display: block;
position: absolute;
right:3px;
top: 0;
}
.featured-entry {
text-align: left;
line-height:1.5em;
font-style: italic;
font-size: 12px;
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
padding: 20px 10px 0;
width:280px;
color: # fff;
position: absolute;
top: 0;
kiri: 0;
}
h3.featured-title {
font-size:22px;
text-align: left;
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
margin:10px 0 5px;
padding:0 0 5px;
font-weight: normal;
line-height: 1em;
font-style: normal;
}
h3.featured-title a:link, h3.featured-title a:visited{
color: # fff;
}
h3.featured-title a:hover {
color:#b1e1ff;
}
#nav-slides a#prev {
position: absolute;
bottom:105px;
left:135px;
z-index: 1;
color:#800;
width:14px;
height: 15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu30WBLP2FS85Jm_Zt8lTMJHVbRZRc9Vi6wms87aBF9WpwvkbYqtOI-oZx-8q3Ovou6vmZKjo3t8PbSVVbWLSWouxUmwXgz-hxS30SCj_0oCYGPb18jtSk4LXzgLvRVsBH9qPybu5h24qf/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBAy2zRjTijT5yp0rlyduVAN_p_a0fc-rHR9k03usQCvGZTcwgFaMZPMVEtLajKNjMYi8jJdigpoLsSLlWuTmSE3rJ9jrmazXb7g_lRxz81UooiJC8jbGyM__nan-x-HyP0SAB3N4Ytq3/s400/prev_hover.jpg) no-repeat;
}
#nav-slides a#next {
position: absolute;
bottom:105px;
left:160px;
z-index: 1;
color:#800;
width:14px;
height: 15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cY6rFtUD3fg1ZR6ZJmofl8wrhBUuT3jyxr9zn-MvBTVQ4pzg555qnj-wFmfzSQ-qeuVACLaSRdZyyT_Em5mSDUkogV1dcjht_rIFiWBEkmVfZNg0s87PQHrM8fuIxx0CI7KAAZGCV0Ea/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAegQJSdpgAOAzdjGmT9qwsassrzZD-54lEavVRUn8kzc2f_uv_CIXmSMxnwpDqbCXV7QbfqwyKaq_zmuvOrTvM1AZ693lxURTJO5lQpCUUcGw2ueX2rzbLs4-BX1pO33ttnP9HuBuily2/s400/next_hover.jpg) no-repeat;
}
</ Style>


<div id="wrapper-featured">
<div id="wrapper-myslides">
<div id="myslides">
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="205"/></a>
</ Div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 1 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="205"/></a>
</ Div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 2 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="205"/></a>
</ Div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 3 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="205"/></a>
</ Div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 4 Description [...]</p>

</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="205"/></a>
</ Div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 5 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id="nav-slides">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
</ Div>
</div><!-- wrapper featured-->

How To Add Auto Featured Posts Using JQuery Slider To Blogger

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ommdlyi36up4cib/stepcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'board_carusel', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'board_item', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
/*board*/
#board{
width:977px;
height:276px;
overflow: hidden;
margin:0 0 0 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy3A0aBfT0K8CqKspyOtBPsliil80Up37D9llyKo3q72F_ooHGB-aQ1DFwDOL5teZwBkM_z5hzCvWdU08b6He44x5lOz25mFCRrS6Jf46wyfOD_Y2ahMjrK0w0DAlqtaAnh81jsMXPAKc/s1600/bgr_board.png) no-repeat;
}
#board_left{
float: left;
padding:22px 0 0 27px;
}
#header_rss{
float: right;
padding:78px 80px 0 0;
}
#board_items{
width:679px;
padding:5px 0 0 0;
}
#board_body{
width:647px;
margin:0 0 0 15px;
}
#board_carusel{
width:647px;
height:131px;
position: relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
kiri: 0;
top: 0;
}
.board_item{
width:647px;
height:173px;
overflow: hidden;
}
#board_body h2{
color: # 000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight: normal;
margin:0 0 28px 0;
}
#board_body strong{
font-size: 12px;
color: # 000;
line-height: 18px;
display: block;
}
#board_body p{
font-size: 12px;
color: # 000;
line-height: 18px;
padding:0 0 10px 0;
}
#board_body p img{
float: left;
border:1px solid #83b2c4;
margin: 10px 0 0 0;
width:161px;
height: 107px;
}
#board_body pa{
color: # 000;
}
#board_body p.more a{
text-decoration: underline;
}
#board_body p.more a:hover{
text-decoration: none;
}
#board_carusel_nav{
width: 100%;
overflow: hidden;
}
#board_carusel_nav li{
font-size: 12px;
font-family:Verdana, Geneva, sans-serif;
float: left;
}
#board_carusel_nav a{
display: block;
float: left;
background:#7ac2df;
border-right:1px solid #85d7f7;
width:33px;
text-align: center;
padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
text-decoration: underline;
font-weight: bold;
background:#a7e2f9;
border-right:1px solid #a7e2f9;
}</style>


<div id="board">
<div id="board_left">
<div id="board_items">
<div id="board_body">
<h2>Featured Posts</h2>
<div id="board_carusel">
<div class="belt">
<div class="board_item">
<!-- board_item -->
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="125"/>
<strong><a href="#" target="_blank"> Title-of-Post </a></strong>
Slide Description [...]</p>
<!-- /board_item -->
</div><div class="board_item">
<!-- board_item -->
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="125"/>
<strong><a href="#" target="_blank"> Title-of-Post </a></strong>
Slide Description [...]</p>
<!-- /board_item -->
</div><div class="board_item">
<!-- board_item -->
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="125"/>
<strong><a href="#" target="_blank"> Title-of-Pos t</a></strong>
Slide Description [...]</p>
<!-- /board_item -->
</div><div class="board_item">
<!-- board_item -->
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="125"/>
<strong><a href="#" target="_blank"> Title-of-Post </a></strong>
Slide Description [...]</p>
<!-- /board_item -->
</div><div class="board_item">
<!-- board_item -->
<p><img alt="" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="125"/>
<strong><a href="#" target="_blank"> Title-of-Post </a></strong>
Slide Description [...]</p>
<!-- /board_item -->
</ Div>
</ Div>
</ Div>
</ Div>
<ul id="board_carusel_nav">
<li id="board_carusel_nav_1"><a class="selected" href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 1)">1</a></li>
<li id="board_carusel_nav_2"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 2)">2</a></li>
<li id="board_carusel_nav_3"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 3)">3</a></li>
<li id="board_carusel_nav_4"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 4)">4</a></li>
<li id="board_carusel_nav_5"><a href="javascript:stepcarousel.stepTo(&#39;board_carusel&#39;, 5)">5</a></li>
</ Ul>
</ Div>
</ Div>
<div id="header_rss">
<a href="http://24work.blogspot.com/feeds/posts/default" title="Rss"><img alt="Rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ61hKiqbYvl1LpsPki5awVaDhQl6zfqzMYVAvAQRPBiWg7U9Qg_oVYkdHc0QxdoQhpbTspAO-xRLJKuZlwJB5kccFQe1wgnTo948XgaVb3vFt50I47v7nfdzo-UPzJfl2Rx8ywKmSCIKe/s1600/button_rss.png"/></a>
</ Div>
</ Div>

Shoutmeloud Featured Content Slider for Blogger Using jQuery

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://dl.dropboxusercontent.com/s/d8yagy0po185cll/contentslider-nbltr.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/hge1mqatia1bydw/n17-content-slider-026.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left: 15px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
kiri: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-Moz-opacity: 1;
opacity: 1;
margin-top: 0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left: 15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: # 000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: # 000;
background-color: #FFF;
}

</ Style>



<div class="sliderwrapper" id="slider1">
<div class="contentdiv">
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVCglwcfHg5aJg4uJRCbG98MpOtzy_KJ2-1XfdoQ1aHuQWn8ajrnDBw53tXZYs_D4k8OB0CFbR4CRZag16Y9JCUBopF_buIyhN09vp1vsx7Z7iiX1Hdf72eaH0x9Hd_6DVGRysKnJj3nM/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="#" target="_blank">Title-of-Post</a></h2> Slide Description [...]
</ Div>
<div class="contentdiv">
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy2Eb8ijYq4XnIqOHryiJAgw-x2Uik8FaNQ1oQ6bHFkzB2fmK0k300rLmmv_30_9-zUqYZ_A3efb7dNO_ASm-GXVX46UXFoY8-NQnqZ4fXUStQuRu1bGZ_CjyOinFM3RoqsOm934Js8z0/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="#" target="_blank">Title-of-Post</a></h2> Slide Description [...]
</ Div>
<div class="contentdiv">
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1GfZcuMqQKmjXGOJBwjQBgLIKEzuP0feYHOcLf1B3UZxxxVXTQNfVCmamgchIDdBAYg1AaEnjrNdIK1wsK2hUpa22P-apNOp3BlQ1msmucURkjsC3L_l8wzpMZNcmmxl1lE360HQM-Ws/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="#" target="_blank">Title-of-Post</a></h2> Slide Description [...]
</ Div>
<div class="contentdiv">
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWByLbQ1_YvW-_E9xmZQaK44DnP6YY5oAMmUQeicrVggI2jIvBgQN3zA7lJO8-SbfSfBqcAYjNsbXIKPhzcJfuq7qIquicQptvuCw6wlEdrEUJ3nPniDn55pTpgFRKN5xOgxJ9lAWyDoGf/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="#" target="_blank">Title-of-Post</a></h2> Slide Description [...]
</ Div>
<div class="contentdiv">
<img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV67POJG63yhRTAF6ElTFpRR9zY3F6q7QfJyxBkvM6jjHFksYXY1bTB8AaGclePoJauCIG2NBWU7vudxsH8uFzKzfJxMIKjrG-vzxejyRjV_aUV8VBiqoZX76L_WUExhD_6UMkU3eDdq1T/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="#" target="_blank">Title-of-Post</a></h2> Slide Description [...]
</ Div>
</ Div>
<div class="pagination" id="paginate-slider1">
</ Div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</ Script>

jQuery Image Slider For Blogger / Blogspot

Hidup Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/2tuqn164c49bv4l/mbt-slider-0-01-jis.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/t2e14sks1ufhcwp/mbt-slider-0-02-jis.js" type="text/javascript"/></script>
<script src="http://dl.dropboxusercontent.com/s/q81tdxkefnkwyxj/mbt-slider-0-03-jis.js" type="text/javascript"/></script>
<script type="text/javascript">
/ * <! [CDATA [* /
jQuery.noConflict ();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery (document) ready (function. () {
jQuery('.fp-slides').cycle({
fx: 'fade',
timeout: 4000,
delay: 0,
speed: 1000,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});

/ *]]> * /

</ Script>
<a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tips dan Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Blogger Tips dan Trik" border = "0" style = "position: fixed; bottom: 10%; kanan: 0%; top: 0px;" /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips Untuk Bloggers"> <img src = "https:// bitly.com/24workpng1 "alt =" Tips Terbaru Untuk Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kanan: 0%; " /> </ A> <a href="http://24work.blogspot.com/" rel="dofollow" target title="Blogger Tricks"> <img src = "https://bitly. com/24workpng1 "alt =" Trik Blogger "border =" 0 "style =" position: fixed; bottom: 10%; kiri: 0%; " /> </ A>
<style type="text/css">
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNybxhLbyLeed_0rK2Y2NgtQsJcVSHv8UmZx_BgsSKnoaqrMe2ywlEoIS7iywEl1blutB1J_7x4FzV_B3M5g-SoGZkcEUbKx-sbHxGsESbIk45kDIRntj3AcMfu8o6xfbFWtG4JVI2D3I/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJv-04djt-p2xl-nnGgPpmRKE60LHXUI6u8R6AoH1w5TIDpaa781way8h_ooUHk_4jd4w2hoUq-OO7VzrKvFI7YhnwLU4v7M1iVmmV0gqE2cGulapZlw3GDSbn-1OQYfTeWsijlhEVoFY/s1600/featured-prev-24work-1.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlQqk1lSFrQRglTe8oB-C8VwyCbR0bIOgdJRz4lhmYm67zzfYExlUnRK18q4QFU2-ISHmV-0P0uakWiz2lfjmGNMFz9ml_7J13EakC8G6BLokGMrMzHWjkplY_EU6QwlbWlh4W8vCdhI/s1600/featured-next-24work-1.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}
</ Style>



<div class="featuredposts clearfix">
<div class="fp-slides">
<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3b0bLEnd8Rzvv7H3ITYlJC_yiTLJeJxY4lgImWEJ0sbzAtY_niqL4Jq-GS9tW2tkwXzru7MVkawXf6tRU_zor6hDkSS3XZ3vfvOsdkqxTAQLj0wVtL37AtEPSJGgh0NDPEILqJQ7tgfLA/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'> Title-of-Post </a></h3> <p> Slide Description [...] </p>
</ Div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHbmpmvF_ofoUDc9Th6FLHf1hvhrT6upzu2zN3qUOWVEHslTQS_WnVqgRJNuU3UZCI7EU8GUNc4T_1_3rMJp4vnEVKT5cmSdhzVnZc3FNWSNXfq9cEsj95YHvppH3oy_RylF26n1X8aqm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'> Title-of-Post </a></h3> <p> Slide Description [...] </p>
</ Div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBby6VTgEpWIGm7dPpul2ktNe4aDvJW5by-u_9WwbJN0asvBR1aca3J3WDlSTuH45GIJ5_-syWh7iJk0_t4YbsGvKIpd2JB_WFfGXoPeWuSYItHQAZhjmf_wc-mTz6ni8vLnMuC9x0ZMb/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'> Title-of-Post </a></h3> <p> Slide Description [...] </p>
</ Div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0ZeRin-PAFBWX8WjqKtaDH3wgCyYVNl-M008xwvlCDfmgjWzb5r44NOrvN6XOicWtnr5Q0lst3I3BVefPEKDUVLjqiJhBkoOSGhRJaGkrcj2f3TMAmLoU2alVlKx0zFLr52iHOZhNL-_/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'> Title-of-Post </a></h3> <p> Slide Description [...] </p>
</ Div>

<div class="fp-post">
<div class="fp-thumbnail"><a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank"><img alt="How To Add Animated Flash Clock To Your Blogger Blog" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkm0ryXFJlDzU-Wh1rgq3t8hG8h3xYEsJYP1GIf1W_q4E50LgeFsFD-Mx2eTobvFArYRUjJJAl3natwpKqbUIpU2QWWgBFfhfCAGUKCYCj-TBcNeBNeC7LB84EBcAllJGMp9h2XVcZu6s/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'> Title-of-Post </a></h3> <p> Slide Description [...] </p>
</ Div>

</ Div>
<div class="fp-nav clearfix">
<span class="fp-pager"></span>
<a class="fp-next" href="#fp-next"></a>
<a class="fp-prev" href="#fp-prev"></a>

</ Div>
</ Div>

Many thanks to Lasantha Bandara or 24works for making this code and I just tested and modified to work on blogger