Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger. Penampakannya seperti gambar di bawah ini. Cek demonya yang jadi sumber kode.

Featured Post Slider di Halaman Depan Blogger

Cara Membuat atau Memasangnya

1. LINK
Simpan di bawah kode <head>

<link href='http://s3.envato.com/files/376136/css/siteFeature.style_screen.css' rel='stylesheet' type='text/css'/>
<link href='http://s3.envato.com/files/376136/css/demo.css' rel='stylesheet' type='text/css'/>

2. CSS
Simpan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#slider {width:99%;padding:15px 0 5px;float:left;}
#siteFeature {width:100%!important;}
#siteFeature #imgBgContainer div {}
#siteFeature.left #imgBgContainer {}
#siteFeature.left #tabContainer {width:200px !important;}
#siteFeature #tabContainer a:link, #siteFeature #tabContainer a:visited {width:200px !important;}
#siteFeature.left #tabContainer a.selected span {width:200px !important;}
#siteFeature-nav #SF-n-prev {top:210px !important;}
#siteFeature-nav #SF-n-next {top:496px;}
</style>
</b:if>

3. JavaScript
Simpan di atas kode </head>

<script src='http://s3.envato.com/files/376136/js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='http://s3.envato.com/files/376136/js/jquery.siteFeature.pack.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#preFeature').siteFeature({
autoPlay: true,
autoPlayInterval: 5000,
tabBgImg: "http://s3.envato.com/files/376136/images/arrow-left.png" });
}); // end $(document).ready

//]]>
</script>
<script src='http://s3.envato.com/files/376136/js/demo.js' type='text/javascript'/>

4. HTML
Simpan di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti tulisan warna merah

CARA KEDUA
Cara kedua ini dengan menyimpan kode HTML di Layout agar memuahkan edit link gambar dan deskripsnya.

Langkah 1 s.d. 3 sama dengan langkah di atas. Yang beda cuma langkah ke 4 dan ditambah langkah 5 dan 6.

4. Membuat Widget Baru

Simpan kode berikut ini di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider'>
<b:section class='slider' id='slider' showaddelement='yes'>
</b:section>
</div>
</b:if>


5. Save Template!
6. Klik Layout/Tata Letak.

Akan muncul area widget baru seperti ini. Jika belum muncul, refresh halaman (Tekan F5)

widget baru slider

7. Klik Add a Gadget > Pilih HTML/JavaScript
8. Masukkan kode berikut ini:

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti kode warna merah

9. Save!

Demikian Cara Membuat Featured Post Slider di Halaman Depan Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

6 Komentar untuk "Cara Membuat Featured Post Slider di Halaman Depan Blogger"

risikonya trafik turun sementara, lalu jika ada link http di widget atau di template tdk akan berfungsi. CB belum aja, nanti aja :)

oh ya cb, apakah ada resikonya?
trus mau tanya jg cb belum ganti ke https kenapa ya?
terima kasih ya

https lebih seo, pastikan semua link di template dan konten https juga agar berfungsi

min cb, mau tanya sekarang blogger custom domain sudah bisa https
mau tanya menurut cb apakah harus ganti jadi https? apakah pengaruh ke SEO dan apakah ada positifnya ya?
mohon pencerahannya ya
terima kasih min cb

punten kang saya mau pasang di dalam footer gimana ya.....

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *