Home / Kurikulum 2013 / SEO Friendly / Template Blog / Widget Blog / Fitur Slider Konten untuk Blogger Menggunakan jQuery

Fitur Slider Konten untuk Blogger Menggunakan jQuery

Unknown 8:30 AM Kurikulum 2013 , SEO Friendly , Template Blog , Widget Blog

Anda harus sudah tahu tentang JQuery Feature Konten Slider.Sekarang 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.Anda mungkin telah memperhatikan bahwa banyak situs baru yang sedang bekerja dengan daerah 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. Anda 'kembali tidak yakin apa itu sebenarnya? Anda boleh lihat di bawah ;)

Lihat DEMO

Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.
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>

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

<script type="text/javascript">
$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate",5000,true);});
</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{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzU7fUT89TPJqrSF8najl0cUqJ8qYrySrGKn_gSLFeRzmv0Bm9sJ-5hF5NSNHMA7vIOHObDdaRwynLwenWuDASEJjuyYA3XDiQKVVZFuD0J5UawAgcE3GWqOujtHswrShI3yW_GB-UW5ny/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2_LSodOYAdoDSefllm7_R2vkv8u2zOivh_GTPJdLB_av6rlXJRxxk8gZT3awSNT7wzDEokKtpxgt_Cb3B4c8iuJ82zAkGV-TgoTI9eVPXA9RrvrES57PT9ucF3HToteYtPurV6TTNc9t/s1600/117s1g9.jpg') ;
}
#featured .info h2{
font-size:14px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info 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="featured 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLX0e1dfFf60d0oJN-evBw2kPVMsQnoBghUkrZlfJs2OZr7MpaI9kMOrtneHLdzevHPCmhoHphY3F7ojru3WYT-GnVle6e0rniefLJYEiz5DtcJFbcOAsUb7yLoCpvdxZNAn-H-z_Bu5Fv/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="featured 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZ4Iqwfi5Jflz74aW6iLx8EP2I6RX7OmxBLF8FkS_7NwmO4VHZ7RVC7y_DdgtuKeYlJUVmewxipuQuFSfi4kDS1p0otiWNIKbfppjIwsVSjKpfMEHkfIlGVeUGBAvM6DRK1HY1K3BG8p3/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="featured 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR85_StNQR8cw5jXfBA6ESn1ZJvTDhM72mXqS3kcskH-8Ia_8rFKqU7dKfOJDzLvJkIHPutsuziqE5ehKhhYz8JLdGcC9WFRJ98dLRNceEEOlGRE85SHbYirBtQYpPO9C6Lp8YKd2grAB/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="featured 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUr3kWE6DEWM4-9q-26baKXJw54hyKuS2NQRjiQeRm2qN8GBReBHoC7-QRJLC70gHGWJzS0ZVHkP780slc4ybxSYOrxV_KrWxAqIvenAdladzfNeQdD_4cRkJBqZAAq8DfuF0Icy8_E9mj/s1600/Blogger+Falling+Object+Generator.gif"/><span>TITLE 4</span></a></li>
</ul>


<div id="fragment-1" class="ui-tabs-panel" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSOKzORt3xB1fmYcbP-tUmeXIjXKq9g0k1NJH4iFdLkFsPtLjjzwfcWrqiBdsOBS0y7pZkll1vl-Nezx9UgZ8peqKrrNyMBdRRzkhsqAftwgN5yFPrrk2jXu_zPmF_5Li0rtjWf9z8vWw/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png"/>
<div class="info">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
<p>TEXT-OF-THE-SLIDE 1</p>
</div>
</div>


<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiOZeMXmGrDP2p0IVww9ohLWop5dOqK3YLDRy-AxhpG-5We3232aMgYH5wcyqOcKsgFDiKXIats1bdI0naasW7sWD6lc3rn15gunf5IdYbibrbv7oefvEd1zqlj7UFJ_hXMEWSjARACcZ/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png"/>
<div class="info">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2>
<p>TEXT-OF-THE-SLIDE 2</p>
</div>
</div>


<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTYSjz7I-s9VA0Of7T_bRujhX5SORWc_p6TTFA0NxMkszd8QeTv39f9iHQkTpvjFd6GudivXQqk0KkBUGWoeflWX-F51E5DYmLPv6mGQaPV_82DSO4J4h9Ga3BDb0qBc6jLA2SkuBaovt/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png"/>
<div class="info">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2>
<p>TEXT-OF-THE-SLIDE 3</p>
</div>
</div>


<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJopqra8lZF6rxxVTX3gaaVsdr-kCQP3GEW2VsEXm0Rgf1w7NKbUqt2dqsQCwz-alyPK0uBnybQvzx_oERDbvqQabMGOO2aM_1e_N_LVLX06Q2UhW-_NSThFboSAI-_Nz4ObB_YeHwRigo/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png"/>
<div class="info">
<h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2>
<p>TEXT-OF-THE-SLIDE 4</p>
</div>
</div>

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

Dan sekarang klik untuk SIMPAN

jQuery Fitur Simple Slider Content untuk Blogger Blog

Lihat DEMO

Pergi ke Dashboard Blogger >> Tata Letak >> Tambah gadget >> Tambahkan HTML / Javascript Box.
Paste kode berikut di 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 . sign
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 . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</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:#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; }
.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; cursor: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/AVvXsEjtSOKzORt3xB1fmYcbP-tUmeXIjXKq9g0k1NJH4iFdLkFsPtLjjzwfcWrqiBdsOBS0y7pZkll1vl-Nezx9UgZ8peqKrrNyMBdRRzkhsqAftwgN5yFPrrk2jXu_zPmF_5Li0rtjWf9z8vWw/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/AVvXsEhmiOZeMXmGrDP2p0IVww9ohLWop5dOqK3YLDRy-AxhpG-5We3232aMgYH5wcyqOcKsgFDiKXIats1bdI0naasW7sWD6lc3rn15gunf5IdYbibrbv7oefvEd1zqlj7UFJ_hXMEWSjARACcZ/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/AVvXsEhmTYSjz7I-s9VA0Of7T_bRujhX5SORWc_p6TTFA0NxMkszd8QeTv39f9iHQkTpvjFd6GudivXQqk0KkBUGWoeflWX-F51E5DYmLPv6mGQaPV_82DSO4J4h9Ga3BDb0qBc6jLA2SkuBaovt/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/AVvXsEiJopqra8lZF6rxxVTX3gaaVsdr-kCQP3GEW2VsEXm0Rgf1w7NKbUqt2dqsQCwz-alyPK0uBnybQvzx_oERDbvqQabMGOO2aM_1e_N_LVLX06Q2UhW-_NSThFboSAI-_Nz4ObB_YeHwRigo/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/AVvXsEiW3Cfo4tv2MTxirBQLRUuHPHh4cyihBZIQHB8FVwMImYU74GevJTLbcsk-JK7VtyGop4PP2dtINexsn9zsOh2F2SFg5i0NWp1aNX1rw93iI-OtmrJ0KIYN3ew5_2_6YyzuS9eqp4Wtu-9U/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>

Dan sekarang klik SIMPAN

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 komentar:

Post a Comment

Subscribe to: Post Comments ( Atom )