Cara Membuat Featured Slider Post Keren

DEMO

Pada artikel kali ini saya akan memberikan cara membuat featured post slider yang pastinya keren banget buat blog kamu. Lumayan lah bia nambah punjungnya beta dengan slider yang keren satu ini. Slider posr satu ini menurut saya sangat ringan digunakan sudah terbukti keringanannya di blog saya ini.

Slider post yang akan saya berikan ini sedikit sulit dan harus sabar karena akan memasukan link gambar dang link artikelnya ke script yang akan saya kasih nanti. Selain bisa bergerak otomatis, slider ini juga mempunyai tombol slider manual yang bisa kita klik, sehingga keren baget pokonya.

Pertama sobat masuk dashboard blogger, dan masuk ke bagian template terus klik edit HTML. Lalu sobat cari ]]></b:skin> atau </style>. Agar lebih mudah dalam pencarian gunakan (Ctrl+F) Lalu copy script dibawah ini dan letakkan diatas ]]></b:skin> atau </style>.

.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; }.easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; }.image_reel { position: absolute; top: 0; left: 0; }.image_reel img { float: left; width: 20%; height: 350px; }.paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; }.paging a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; }.paging a.active { background: #15E3FF; border: 1px solid #15E3FF; }.paging a:hover { }.easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; }.easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; }.easytitledes a:hover { color:#29FF00 }.easytitledes p { color: #fff; font: 12px Arial; }

Kedua cari kode script </head> masukan kode Jquery tepat diatasnya. Namun, apabila template sobat sudah mempunyai kode Jquery sobat lewatin saja langkah satu ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Ketiga masukan kode Javascript dibawah ini tepat diatas kode </head> lagi.

<script type="text/javascript">$(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active'); $active.addClass('active');
$(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); };
rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ $active = $('.paging a.active').next();
if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 4000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; });});</script>

Langkah terakhir cari kode <div class="main-wrapper" > atau <div id="main-wrapper" > kalau tidak ada cari yang kata katanya hampir sama saja.

Selain meletakkan script kode <div class="main-wrapper" > bisa juga dengaan cara buka dashboard google teruk ke menu tata letak pilih add gadget dan tambah HTML/JavaScript teru tinggal paste deh dibagian content.

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='easyslider'> <div class='image_reel'><a href="#"><img src="...image1.jpg" /></a><a href="#"><img src="...image2.jpg" /></a><a href="#"><img src="...image3.jpg" /></a><a href="#"><img src="...image4.jpg" /></a><a href="#"><img src="...image5.jpg" /></a> </div> <div class='descriptionslider'><div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div><div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div><div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div><div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div><div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div> </div> <div class='paging'><a class='' href='#' rel='1'/><a class='' href='#' rel='2'/><a class='' href='#' rel='3'/><a class='' href='#' rel='4'/><a class='' href='#' rel='5'/> </div></div></b:if>

Note: Tulisan berwarna MERAH untuk link gambar, Tulisan berwarna BIRU adalah untuk link artikelnya, Tulisan berwarna HIJAU untuk judul artikel, Dan tulisan berwarna ORANGE untuk deskripsi artikel kamu.

Cara Membuat Featured Slider Post Keren

Postingan terkait:

4 Tanggapan untuk "Cara Membuat Featured Slider Post Keren"