Salam
Blogger, Artikel kali ini bloggingpasuruan tentang tutorial Cara Modifikasi
Widget Popular Post Menjadi SLIDE. Dalam modifikasi ini bloggingpasuruan
merubah tampilan widget popular post bawaan ( default ) blogger menjadi slide (
gambar berubah ubah ), dalam modifikasi ini widget juga disertai cuplikan teks
dari artikel Sobat.
Lihat Demo
Pada
umumnya demo slide bisa Sobat temui pada Template karya lasanta, namun pada
slide karya lasanta Sobat harus memasukkan gambar dan teks secara manual. Kelebiahan Modifikasi Widget Popular Post Menjadi
SLIDE yang akan saya sajikan ini memiliki kemiripan dengan SLIDE karya
lasanta NAMUN Sobat tidak akan melakukan perubahan apapun secara manual.
Langkah
Membuat Modifkasi Widget Popular Post SLIDER
1. Masuk ke
Akun Blogger Sobat
2. Pilih TEMPLATE >>
EDIT HTML
3. Sebelum
melakukan perubahan backup template Sobat terlebih dahulu.
4. Cari kode
<head> , Untuk mempercepat pencarian gunakan Ctrl + F untuk mencari kode
<head>
5. Letakkan
kode di bawah ini sebelum kode tag <head>
Kode Modifikasi Widget Popular Post Bawaan ( default ) Blogger
<script src='https://www.google.com/jsapi'
type='text/javascript'/>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
script ini ditulis oleh konfluen Bentuk LLC http://bloggingpasuruan.blogspot.com
setiap pembaruan untuk script ini akan diposting ke Tutorial SEO dan Blogger
Tips silakan tinggalkan pesan ini dan sebagai kredit di mana kredit ini
disebabkan!
**/
var slideshow_interval =
4500; //dalam
mili detik
var slideshow_fade_duration = 1000; // dalam mili detik
var slideshow_width =
235; //dalam
ukuran pixels
var image_redimension =
(slideshow_width * 1.5).toFixed();
$(document).ready(function() {
$('#PopularPosts1
ul').each(function(){
$('<button>').attr('id','prev').css('float','left').text('<<').insertAfter('#PopularPosts1
ul');
$('<button>').attr('id','next').css('float','right').text('>>').insertAfter('#PopularPosts1
ul');
function
slideshow_jump(index){
var
slide_current = slideshow['slide_current'];
$(slides[slide_current]).fadeOut(slideshow_fade_duration,function(){
slide_current = index;
if(
(slide_current < 0) || (slide_current >= slides_count) ) slide_current =
0;
$(slides[slide_current]).fadeIn(slideshow_fade_duration);
slideshow['slide_current'] = slide_current;
if(jumps){
var identifier_current =
$(slides[slide_current]).attr('id');
jumps.children().removeClass('current');
jumps.children('[data-target="' + identifier_current +
'"]').addClass('current');
}
});
}
var slideshow =
$(this);
var identifier =
$(this).attr('id');
var slides =
$(this).children('li');
var slides_count =
slides.size();
var jumps = $('#'
+ identifier + '-jumps');
/* memproses daftar dan mengulang isi menggunakan thumbnail
sebagai latar belakang */
$('#PopularPosts1
ul').find('li').each(function(n, entry){
var entry
= $(entry);
var image
= entry.find('img').first();
var
imageURL = image.attr('src');
if
(imageURL){
if
(imageURL.indexOf("/vi/") > 0){
imageURL
= imageURL.replace("default","0");
}
else imageURL = imageURL.replace(/s\B\d{2,4}-c/,'s'+ image_redimension);
entry.css({backgroundImage
: "url(" + imageURL + ")"});
entry.find('.item-thumbnail').remove();
}
});
/* sembunyikan slide
kecuali slide pertama, dan mengatur Indeks */
slides.each(function(index){ if(index) $(this).hide();
$(this).attr('data-index',index); });
slideshow['slide_current'] = 0;
var timer = window.setInterval(function()
{
slideshow_jump(slideshow['slide_current'] + 1);
},
slideshow_interval);
$('#prev').click(function(){
if
(slideshow['slide_current'] == 0){
slideshow_jump(slides_count
- 1);
} else
slideshow_jump(slideshow['slide_current'] - 1);
window.clearInterval(timer);
});
$('#next').click(function(){
slideshow_jump(slideshow['slide_current'] + 1);
window.clearInterval(timer);
});
});
});
//]]></script>
<style>
// mengubah dimensi dari elemen
lebar dan tinggi agar sesuai kebutuhan situs Anda
// pada dasarnya menyesuaikan ukuran
apapun "235" menjadi ukuran yang tepat untuk blog Anda
#PopularPosts1 ul {
list-style-type:
none;
position: relative;
}
#PopularPosts1 ul li, #PopularPosts1 .item-content {
width: 235px;
}
#PopularPosts1 ul li {
height: 235px;
display: none;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
margin: 0;
padding: 0;
} #PopularPosts1 ul li:first-child{
display: block;
}
#PopularPosts1 ul {
width: 235px;
height: 235px;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 0;
}
#PopularPosts1 .item-content {
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
background: rgba(54,
54, 54, 0.5);
-pie-background: rgba(54, 54, 54, 0.5);
color: #ffffff;
} #PopularPosts1 .item-content a {
color: #ffffff;
font-weight: bold;
}
#PopularPosts1 .item-title, #PopularPosts1 .item-snippet {
padding: 2px;
}
</style>
Catatan :
Jika Sobat
ingin merubah ukuran panjang dan tingginya, silahkan rubah nilai width dan hight
6. Save
template >> lihat hasilnya
Saya akan
sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran
atau tambahan informasi serta pertanyaan seputar artikel Cara Modifikasi Widget Popular Post Bawaan Blogger Menjadi SLIDER . Semoga bermanfaat
dan terima kasih...
Izin share ka, terimakasih :)
ReplyDeletehttp://goo.gl/21T1Mx
http://goo.gl/mgBCnM
http://goo.gl/zxbefd
keren gan... izin tempel
ReplyDeletehttp://koetoe-id.blogspot.com
terima kasih, Bro....berhasil
ReplyDeleteMantep-mantep nih konten tips di Blog Pasuruan.. Banyak artikel bermanfaat buat blogger pemula kayak http://www.anwariz.com punya saya.. Jangan lupa tetap berbagi!
ReplyDelete