Cara Merubah dan Mengedit Featured Post Slideshow Pada Template VioMagz
Featured Post Slideshow dalam blogger dapat diartikan sebagai artikel yang sengaja diunggulkan agar website tetap tampil menarik, tidak pasaran dan secara langsung manfaatnya dapat mempercantik tampilan blog itu sendiri. Pada kesempatan kali ini saya ingin memberikan cara terbaru Merubah Featured Post pada Template VioMagz menjadi Slideshow supaya tidak pasaran, Mengapa saya membuat artikel mengenai ini? Karena pada penjelasan dari Mas Sugeng sebagai pemilik template tersebut belum menjelaskan secara mendetail bagaimana merubah tampilan featured post menjadi slideshow dalam tema nya.
Sebenarnya Featured Post pada VioMagz sudah sangat bagus dan responsive dimata pembaca bahkan Google itu sendiri. Namun bagi para penikmat template buatan Mas Sugeng masih banyak yang mencari cara bagaimana merubah agar tampilan VioMagz menjadi Slideshow atau grid supaya lebih menarik dan sesuai dengan keinginan pribadi si pengguna blogger itu sendiri.
Slideshow tersebut dapat diatur sedemikian rupa tergantung suka anda, terdapat dua pilihan yang sangat elegan yaitu dengan mengatur link featured post secara manual atau juga secara otomatis di blog anda masing-masing. Kembali ke minat diri kalian sendiri namun saran saya gunakanlah yang secara manual agar artikel yang tampil sesuai yang anda mau.
Slideshow yang akan saya bahas kali ini yaitu berisikan gambar dan keterangan artikel yang di unggulkan seperti yang kalian lihat pada website Lulusandiploma.com, Disana terdapat 5 kriteria artikel yang menjadi topik inti agar pembaca betah berlama-lama pada website tersebut. Untuk contoh tampilan slideshow dapat rekan lihat sendiri pada gambar dibawah ini.
Sebelum anda masuk ke kode inti dalam pemasangan slideshow, langkah ini harus anda lakukan terlebih dahulu agar saat memasang kode html pada Tata Letak di blog tidak eror. Langkah dalam pemasangannya antara lain:
1. Masuk pada beranda dashbor blogger anda.
2. Masuk pada menu Tema.
3. Masuk pada menu Edit HTML.
4. Selanjutnya silahkan klik tombol CTRL + F.
5. Cari kode ]]></b:skin> atau </style> dan tempelkan kode dibawah ini, diatas kode tersebut.
6. Bila sudah memasukan kode diatas silahkan kalian cari kode <!--</head>--></head> atau bila tidak ketemu silahkan cari </head>
7. Masukkan kode dibawah ini, diatas kode tersebut.
8. Selanjutnya silahkan kalian cari lagi kode <!--</head>--></head> atau bila tidak ketemu silahkan cari </head>
9. Masukkan lagi kode dibawah ini, diatas kode tersebut.
10. Selanjutnya silahkan pilih dan tempatkan salah satu kode dibawah ini pada template kalian (ingat ya salah satu bukan keseluruhan).
Baca juga: Template VioMagz Membawa Keberuntungan Mendatangkan Visitor
1. Masuk ke Dashbor Blogger kalian
2. Pilih menu Tata Letak
3. Pilih Menu Tambahkan Gedget
4. Pilih menu Add HTML / JavaSript
5. Masukkan kode dibawah ini.
Catatan:
Yang berwarna biru isikan dengan Url Gambar Artikel pada slideshow
Yang berwarna merah isikan dengan Url Artikel pada slideshow
Yang berwarna orange isikan dengan Judul Artikel pada slideshow
Yang berwarna hitam isikan dengan Deskripsi Artikel pada slideshow
Dan apabila semua langkah diatas sudah kalian lakukan dengan benar, maka tampilan Template Featured Post VioMagz akan menarik perhatian dan tidak pasaran seperti ini
Demikian tutorial memasang Featured Post Slideshow pada Template VioMagz, Apabila ada pertanyaan yang ingin ditanyakan karena penjelasan saya kurang dimengerti silahkan ajukan pertanyaan anda melalui kolom komentar yang sudah Lulusandiploma sediakan dibawah ini.
Sebenarnya Featured Post pada VioMagz sudah sangat bagus dan responsive dimata pembaca bahkan Google itu sendiri. Namun bagi para penikmat template buatan Mas Sugeng masih banyak yang mencari cara bagaimana merubah agar tampilan VioMagz menjadi Slideshow atau grid supaya lebih menarik dan sesuai dengan keinginan pribadi si pengguna blogger itu sendiri.
Slideshow tersebut dapat diatur sedemikian rupa tergantung suka anda, terdapat dua pilihan yang sangat elegan yaitu dengan mengatur link featured post secara manual atau juga secara otomatis di blog anda masing-masing. Kembali ke minat diri kalian sendiri namun saran saya gunakanlah yang secara manual agar artikel yang tampil sesuai yang anda mau.
Slideshow yang akan saya bahas kali ini yaitu berisikan gambar dan keterangan artikel yang di unggulkan seperti yang kalian lihat pada website Lulusandiploma.com, Disana terdapat 5 kriteria artikel yang menjadi topik inti agar pembaca betah berlama-lama pada website tersebut. Untuk contoh tampilan slideshow dapat rekan lihat sendiri pada gambar dibawah ini.
Yang harus dilakukan sebelum memasang slideshow
Sebelum anda masuk ke kode inti dalam pemasangan slideshow, langkah ini harus anda lakukan terlebih dahulu agar saat memasang kode html pada Tata Letak di blog tidak eror. Langkah dalam pemasangannya antara lain:
1. Masuk pada beranda dashbor blogger anda.
2. Masuk pada menu Tema.
3. Masuk pada menu Edit HTML.
4. Selanjutnya silahkan klik tombol CTRL + F.
5. Cari kode ]]></b:skin> atau </style> dan tempelkan kode dibawah ini, diatas kode tersebut.
.easyslider-wrapper {
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 98%;
height: 290px;
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;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a.active {
background: #0b84cb;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a:hover { }
.easytitledes {
width: 70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background:rgba(0,0,0,0.7);
padding: 10px 15px;
border-radius: 10px;
}
.easytitledes a {
color: #fff;
font: 20px open sans;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#0b84cb;
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 98%;
height: 290px;
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;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a.active {
background: #0b84cb;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a:hover { }
.easytitledes {
width: 70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background:rgba(0,0,0,0.7);
padding: 10px 15px;
border-radius: 10px;
}
.easytitledes a {
color: #fff;
font: 20px open sans;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#0b84cb;
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}
6. Bila sudah memasukan kode diatas silahkan kalian cari kode <!--</head>--></head> atau bila tidak ketemu silahkan cari </head>
7. Masukkan kode dibawah ini, diatas kode tersebut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
8. Selanjutnya silahkan kalian cari lagi kode <!--</head>--></head> atau bila tidak ketemu silahkan cari </head>
9. Masukkan lagi kode dibawah ini, diatas kode tersebut.
<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>
$(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>
10. Selanjutnya silahkan pilih dan tempatkan salah satu kode dibawah ini pada template kalian (ingat ya salah satu bukan keseluruhan).
Baca juga: Template VioMagz Membawa Keberuntungan Mendatangkan Visitor
Memasang Slideshow di Template VioMagz
Apabila pilihan anda yaitu memasang Featured Post Slideshow secara manual, sebaiknya anda ikuti atau langkah berikut ini.
2. Pilih menu Tata Letak
3. Pilih Menu Tambahkan Gedget
4. Pilih menu Add HTML / JavaSript
5. Masukkan kode dibawah ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<a href="#"><img src="https://2.bp.blogspot.com/-kumUb93OZ90/W2rR-x4iHxI/AAAAAAAAD_E/eq6JZptaC-0vuIP_O7rk2W-soBXlQzFyQCLcBGAs/s640/jurusan%2Bfarmasi.JPG" /></a>
<a href="#"><img src="https://4.bp.blogspot.com/-w4NruiQlDJc/Ww54oYu2sfI/AAAAAAAADR0/5UjPKKmOvEso_CM_imZkShrzM5IUSRP9gCLcBGAs/s640/safety%2Btalk.jpg" /></a>
<a href="#"><img src="https://3.bp.blogspot.com/-Xby7qvhNrb4/W3gnJaibMfI/AAAAAAAAEFw/CdlKr-NddOIDx8r2UeLaqVX-TwL-BtWUQCLcBGAs/s640/membuat%2Bcv%2Byang%2Bbaik%2Bdan%2Bbenar.jpg" /></a>
<a href="#"><img src="https://2.bp.blogspot.com/-R-1mO0beOEg/W3YokOJHVCI/AAAAAAAAAwo/LfE-jfgzOgg6Ez5ER37J17btP_SQzo4hgCLcBGAs/s640/jurusan%2Bk3.jpg" /></a>
<a href="#"><img src="https://3.bp.blogspot.com/-zgA7wMYXu54/W4_ZcOST2tI/AAAAAAAAA0c/i8A7gmjttQ0w9oEO9I0upBa5Q6hFxGC0ACLcBGAs/s640/makanan%2Bkhas%2Bjakarta%2Bsoto%2Bbetawi.jpg" /></a>
</div>
<div class='descriptionslider'>
<div class="easytitledes"><a href='https://www.lulusandiploma.com/2018/08/jurusan-kuliah-yang-paling-menjanjikan.html'>6 Jurusan Paling Menjanjikan Kesuksesan</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/03/materi-safety-talk.html>Kumpulan Bahan Materi Safety Talk</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/08/universitas-keselamatan-kesehatan-kerja.html>Contoh CV [Curriculum Vitae] Terbaru 2018<p></p>Deskripsi Featured Post</a></div>
<div class="easytitledes"><a href=2018/08/universitas-keselamatan-kesehatan-kerja.html>Daftar Universitas Keselamatan dan Kesehatan Kerja di Indonesia</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/09/10-kuliner-khas-betawi-yang-harus-anda.html>10 Kuliner Khas Betawi Yang Wajib Kamu Coba</a><p>Deskripsi Featured Post</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'/>
</a></a></a></a></a></div>
</div>
</b:if>
<div class='easyslider'>
<div class='image_reel'>
<a href="#"><img src="https://2.bp.blogspot.com/-kumUb93OZ90/W2rR-x4iHxI/AAAAAAAAD_E/eq6JZptaC-0vuIP_O7rk2W-soBXlQzFyQCLcBGAs/s640/jurusan%2Bfarmasi.JPG" /></a>
<a href="#"><img src="https://4.bp.blogspot.com/-w4NruiQlDJc/Ww54oYu2sfI/AAAAAAAADR0/5UjPKKmOvEso_CM_imZkShrzM5IUSRP9gCLcBGAs/s640/safety%2Btalk.jpg" /></a>
<a href="#"><img src="https://3.bp.blogspot.com/-Xby7qvhNrb4/W3gnJaibMfI/AAAAAAAAEFw/CdlKr-NddOIDx8r2UeLaqVX-TwL-BtWUQCLcBGAs/s640/membuat%2Bcv%2Byang%2Bbaik%2Bdan%2Bbenar.jpg" /></a>
<a href="#"><img src="https://2.bp.blogspot.com/-R-1mO0beOEg/W3YokOJHVCI/AAAAAAAAAwo/LfE-jfgzOgg6Ez5ER37J17btP_SQzo4hgCLcBGAs/s640/jurusan%2Bk3.jpg" /></a>
<a href="#"><img src="https://3.bp.blogspot.com/-zgA7wMYXu54/W4_ZcOST2tI/AAAAAAAAA0c/i8A7gmjttQ0w9oEO9I0upBa5Q6hFxGC0ACLcBGAs/s640/makanan%2Bkhas%2Bjakarta%2Bsoto%2Bbetawi.jpg" /></a>
</div>
<div class='descriptionslider'>
<div class="easytitledes"><a href='https://www.lulusandiploma.com/2018/08/jurusan-kuliah-yang-paling-menjanjikan.html'>6 Jurusan Paling Menjanjikan Kesuksesan</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/03/materi-safety-talk.html>Kumpulan Bahan Materi Safety Talk</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/08/universitas-keselamatan-kesehatan-kerja.html>Contoh CV [Curriculum Vitae] Terbaru 2018<p></p>Deskripsi Featured Post</a></div>
<div class="easytitledes"><a href=2018/08/universitas-keselamatan-kesehatan-kerja.html>Daftar Universitas Keselamatan dan Kesehatan Kerja di Indonesia</a><p>Deskripsi Featured Post</p></div>
<div class="easytitledes"><a href=2018/09/10-kuliner-khas-betawi-yang-harus-anda.html>10 Kuliner Khas Betawi Yang Wajib Kamu Coba</a><p>Deskripsi Featured Post</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'/>
</a></a></a></a></a></div>
</div>
</b:if>
Catatan:
Yang berwarna biru isikan dengan Url Gambar Artikel pada slideshow
Yang berwarna merah isikan dengan Url Artikel pada slideshow
Yang berwarna orange isikan dengan Judul Artikel pada slideshow
Yang berwarna hitam isikan dengan Deskripsi Artikel pada slideshow
Dan apabila semua langkah diatas sudah kalian lakukan dengan benar, maka tampilan Template Featured Post VioMagz akan menarik perhatian dan tidak pasaran seperti ini
Demikian tutorial memasang Featured Post Slideshow pada Template VioMagz, Apabila ada pertanyaan yang ingin ditanyakan karena penjelasan saya kurang dimengerti silahkan ajukan pertanyaan anda melalui kolom komentar yang sudah Lulusandiploma sediakan dibawah ini.
