Feature Slider Konten untuk Blogger Menggunakan jQuery
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>
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
