Semakin unik semakin menarik. Desain yang menarik pada sebuah blog dapat membuat pembaca nyaman dalam menikmati bacaan postingan artikel blog. Banyak blogger menambahkan fitur-fitur widget di blog mereka. Salah satu fitur yang biasanya ada dan yang sedang trend yaitu fitur featured post. Featured post merupakan widget Recent Post dengan tampilan slide gambar yang menarik. Nah di postingan artikel ini saya akan berikan featured post yang memiliki tampilan yang berbeda dari biasanya. Tampilan dari featured ini menggunakan CSS pseudo nth-child untuk mengatur lebar dari tiap tampilannya. Featured post ini sangat menarik sehingga saya terapkan pada template MonozCore, untuk contoh tampilan seperti yang bisa sobat lihat yang terletak di atas... Konsep dari featured post ini seperti gambar barikut:
Featured Post ini bisa digunakan sebagai widget sidebar dan topbar. Apabila digunakan sebagai sidebar cukup dengan merubah sedikit kode CSS Featured Post ini. Bagi anda yang tertarik untuk memasang diblog anda bisa ikuti cara berikut ini :
Menampilkan Add a Gadget diatas Blog Post
Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:
- Pada dashbord pilih Template kemudian klik tombol Edit HTML.
- Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>.
- Klik Simpan
NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
Menambahkan gadget HTML dan Script Featured Post
- Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan.
- Kemudian Masukkan Kode berikut:
<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9doTwXtZzq0SZNkAHpcic6ZtgBvaz5FdMXVHiDN8LQI_IWekkuYWzjq0d3EqxplkrQNo1KY3GLrWnoYckc122flDF0HeY749ELTgwaOS2DSnRSj6LYP1oIYE7zjQaroKO0zgos_WrDlE/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<div id="featuredpost"></div>
<script src="http://monozcore-project.googlecode.com/files/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://monozcore.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
Kode di atas jalan ketika tampilan layar kurang dari 600px. jika tidak ingin menyertakan fungsi responsive silahkan hapus kode tersebut.
Pada link script jQuery library (kode script berwarna biru), jika di template ada sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery Library dapat membuat error.
Membungkus Gadget HTML dengan Tag Kondisional
Jika tahap diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisional untuk mengatur dimana saja slideshow ini mau ditampilkan. Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/beranda cara sebagai berikut :
- Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagian Expand Widget Templates, kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML). Misalnya widget HTML dengan id HTML1 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda.
- Maka akan menjadi seperti ini :
<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>Kode yang diberi warna hijau merupakan kode tag kondisional yang akan menampilkan widget pada halaman depan / beranda saja.
- blogURL >> Isikan dengan link blog anda misal:http://blog-anda.blogspot.com.
- MaxPost >> Maksimal jumlah post/artikel yang ingin ditampilkan.
- idcontaint >> ID tempat slideshow akan ditampilkan.
- ImageSize >> Ukuran gambar yang ingin ditampilkan.
- interval >> Waktu pergantian slide, satuan dalam milidetik.
- autoplay >> Jika ingin menampilkan slide yang bergerak secara otomatis : pilihan true atau false.
- pBlank >> Backup gambar jika artikel tidak memiliki gambar.
- MonthNames >>Tulisan pada nama bulan. Defaultnya seperti ini: MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].
- tagName >> Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"widget".
NB: Jika ingin merubah warna birunya dengan warna yang lain silahkan
ganti kode warna #0097BD dengan kode warna Heksa yang anda inginkan. Untuk mengetahui kode warna dalam hex anda bisa menggunakan tool ini Generator Kode Warna Heksa. Kode warna #0097BD ada 2 jadi harus diganti semua.
.: Semoga Bermanfaat :.
0 Comments