Cara Membuat Sliding Feature Post

Browse » #

Cara Membuat Sliding Feature Post

13 Comments

Sebenarnya ini sama cara kerjanya slide show, namun hanya dari segi tampilannya saja yang berbeda. Hasilnya lumayan menarik dan dengan slide ini anda mempublikasikan posting produk atau artikel andalan anda. Ok langsung saja kita kupas bagaimana cara membuatnya. Ikuti langkah berikut.

sliding feature post

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di bawah kode ]]></b:skin>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr{width:560px; height:180px; background-color:#fff; border:0px solid #999}
#smooth_sldr_items{padding:10px 18px 0px 26px}
#smooth_sliderc{width:516px; height:140px}
.smooth_slideri{width:506px; height:140px}
.sldr_title{font-family:Georgia,Arial,Helvetica,sans-serif; font-size:20px; font-weight:bold; font-style:normal; color:#000}
#smooth_sldr_body h2{line-height:17px; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; font-style:normal; color:#000; margin:0px 0 5px 0}
#smooth_sldr_body h2 a{color:#000}
#smooth_sldr_body span{font-family:Arial,Arial,Helvetica,sans-serif; font-size:12px; font-weight:normal; font-style:normal; color:#333}
.smooth_slider_thumbnail{float:left; margin:0px 5px 0 0px; width:165px; height:120px; border:1px solid #000}
#smooth_sldr_body p.more a{color:#000; font-family:Arial,Arial,Helvetica,sans-serif; font-size:12px}
#smooth_sliderc_nav li{border:1px solid #333; font-size:12px; font-family:Arial,Arial,Helvetica,sans-serif}
#smooth_sliderc_nav li a{color:#000}
.sldrlink{padding-right:40px}
.sldrlink a{color:#333}
#slider{background:#333; height:205px; display:block; margin:22px 0 10px 10px; width:565px}
</style>

Klik Save Template
Selanjutnya klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<div id="slider">
  <script type="text/javascript">
stepcarousel.setup({
galleryid: 'smooth_sliderc', //id of carousel DIV
beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'smooth_slideri', //class of panel DIVs each holding content
autostep: {enable: true, moveby:1, pause:7000},
panelbehavior: {speed:500, wraparound: false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
statusvars: ['imageA', 'imageB', 'imageC'], //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']
onslide:function(){
 jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
 jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
 var curr_slide = imageA;
   jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
 jQuery("#sldr"+curr_slide).css("fontSize", "17px");

  }
})
</script>
  <noscript>
  </noscript>
  <div id="smooth_sldr">
    <div id="smooth_sldr_items">
      <div id="smooth_sldr_body">
        <div id="smooth_sliderc">
          <div class="smooth_sliderb">
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR ANDA 1" alt="MASUKKAN JUDUL 1 DI SINI" /></a>
              <h2><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">MASUKKAN JUDULNYA DI SINI 1</a></h2>
              <span>MASUKKAN KETERANGAN TENTANG LINK ARTIKEL ANDA 1 DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="MASUKKAN ALAMAT LINK ARTIKEL 2 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR 2 ANDA" alt="MASUKKAN JUDUL 2 DI SINI" /></a>
              <h2>
                <a href="MASUKKAN ALAMAT LINK ARTIKEL 2 ANDA">MASUKKAN JUDUL 2 DI SINI</a>
              </h2>
              <span>MASUKKAN KETERANGAN TENTANG LINK ARTIKEL 2 ANDA DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 2 DI SINI">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri -->
<a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA"><img class="smooth_slider_thumbnail" src="MASUKKAN ALAMAT GAMBAR 3 ANDA" alt="MASUKKAN JUDUL 3 DI SINI" /></a>
              <h2><a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA">MASUKKAN JUDUL 3 DI SINI</a></h2>
              <span>MASUKKAN KETERANGAN TENTANG ARTIKEL 3 ANDA DI SINI</span>
              <p class="more"><a href="MASUKKAN ALAMAT LINK ARTIKEL 3 ANDA">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <!-- /smooth_slideri -->
          </div>
        </div>
      </div>
    </div>
    <ul id="smooth_sliderc_nav">
      <li><a id="sldr1" href="#" >1</a></li>
      <li><a id="sldr2" href="#" >2</a></li>
      <li><a id="sldr3" href="#" >3</a></li>
    </ul>
    <br class="sldrbr" />
    <div class="sldrlink"><a href="http://blogonol.blogspot.com/" rel="follow" target="_blank">blogonol</a></div>
  </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#smooth_sliderc_nav a').click(function() {
var id = jQuery(this).attr('id');
        var step_to_slide = id.replace(/sldr/, "");
        document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
    });
});
</script>

Silahkan ganti tulisan yang berwarna merah sesuai petunjuk
Catatan:
Yang dimaksud dengan MASUKKAN ALAMAT LINK ARTIKEL 1 ANDA adalah alamat link pertama anda. Misalnya http://blogonol.blogspot.com/2011/04/cara-memvalidasi-css.html alamat tersebut anda masukkan lagi sesuai perintah. Contohnya seperti di bawah ini.
Petunjuknya seperti ini
<!-- smooth_slideri --><a href="http://blogonol.blogspot.com/2011/04/cara-memvalidasi-css.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1c9KjLGlBa96-1n3CO5U9_yIYs_ySlr65Mvwc0qstpMN2kQRiLlVFlpxDS5Tj7MYHE21wcaptlYWBYKoPimJ0132W8HwRUPD2hU5PySXmjAZM957Mx2IU_1-pzhCM7cfDPMc8lJ9KTo/s1600/blogonol-cssvalidationlogo.gif" alt="Cara Memvalidasi CSS" /></a>
              <h2><a href="http://blogonol.blogspot.com/2011/04/cara-memvalidasi-css.html">Cara Memvalidasi CSS</a></h2>
              <span>artikel ini berkaitan dengan peningkatan SEO blog anda dalam usaha anda mengatasi CSS yang rusak, yang dapat mengganggu optimasi blog anda dalam persaingan di dunia blogging</span>
              <p class="more"><a href="http://blogonol.blogspot.com/2011/04/cara-memvalidasi-css.html">Read More</a></p>
              <!-- /smooth_slideri -->
Begitu juga dengan petunjuk link 2 dan 3
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

author
Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.