Home  ›  Desain Blog

February 13, 2018

Cara Membuat Featured Post Slider di Halaman Depan Blogger

February 13, 2018

Baca Juga

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).*

Tags :
Previous
« Prev Post
Next
Next Post »
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

6 comments on Cara Membuat Featured Post Slider di Halaman Depan Blogger

  1. Seni bina diri2/20/2018 2:03 PM

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

    ReplyDelete
  2. zeropromosi2/23/2018 9:00 AM

    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

    ReplyDelete
    Replies
    1. CB Blogger2/23/2018 9:54 AM

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

      Delete
    2. zeropromosi2/23/2018 12:22 PM

      makasi min infonya

      Delete
    3. zeropromosi2/23/2018 1:23 PM

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

      Delete
    4. CB Blogger2/23/2018 1:34 PM

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

      Delete

Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *

Copyright © Contoh Blog. All rights reserved.