Cara memasang Recent post slider Responsive bawah navigasi Terbaru

Pada kesempatan ini kang cymot akan membagikan cara memasang widget recent post yang tentunya sudah responsive, dengan memasang widget ini pastinya blog sobat dapat kelihatan jadi lebih keren dipandang. Widget recent post ini buatan Teteh arlina tapi sedikit sudah saya modifikasi, sobat - sobat juga dapat merubah widget recent post ini sesuai warna template sobat yang digunakan.

Baiklah tidak perlu berpanjang lebar lagi kita langsung saja ke caranya, yuk simak caranya berikut dibawah ini.

Cara memasang Recent post slider Responsive dibawah menu navigasi

Silahkan login ke blog sobat dan pilih > Template > Edit HTML
Kemudian salin kode css dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>

/* CSS Responsive Slider Recent Post */
#featuredpost {margin:10px 30px}
#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:350px}
#slides li{width:50%;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), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:#357AE8(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#357AE8;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:rgba(0, 0, 0, 0.4);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(192,192,192,0.3);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(70, 171, 255, 0.4);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Selanjutnya Copy lagi kode script dibawah ini dan pastekan tepat diatas kode </body>

Note : Ganti tulisan yang berwana merah dengan URL blog sobat.

Keterangan :

MaxPost : Jumlah semua postingan yang akan tampil dalam list

ImageSize : Ukuran maksimal pada gambar (Semakin besar ukurannya maka akan semakin jelas kerapatan pixel gambar yang akan tampil, namun akan semakin banyak waktu yang dibutuhkan dalam proses memuat halaman)

Interval : Waktu yang dibutuhkan ketika post berpindah (Contoh : 10000 yang berarti 10 detik)

Autoplay : (True) Post akan berpindah secara otomatis, (False) Post tidak akan berpindah secara otomatis.

Kemudian copy lagi kode dibawah ini dan pastekan diatas kode content-wrapper atau dibawah kode menu-wrapper

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>

Note : Kode diatas yang saya beri warna biru tersebut adalah agar widget recent post tersebut hanya muncul pada halaman utama saja, jika sobat menginginkan widget recent post tersebut muncul di halaman utama dan muncul juga dihalaman postingan, sobat tinggal hapus kode warna biru.

Jika sudah, Simpan Template dan lihat hasilnya.

Sebagai tambahan jika sobat kesulitan dengan memasang kode recent post diatas tersebut, jangan galau gelisah merana karena saya sudah menyediakan cara praktisnya.

Sobat tinggal copy kode dibawah ini lalu pergi Tata Letak > Tambahkan Gadget > HTML/JavaScript dan pastekan kodenya disana.

Note : Ganti tulisan yang berwarna merah dengan URL blog sobat.

Klik Simpan.

Jika sobat ingin memunculkan widget recent post tersebut hanya dihalaman utama saja, silahkan bungkus widgetnya dengan tag kondisional khusus halaman utama. Sebagai contohnya :

Klik Template > Buka edit HTML > Misal kode widget Recent post slider sobat adalah #HTML4
Tambahkan kode dibawah ini dan letakkan diantara kode widget contoh #HTML4

<b:if cond='data:blog.url == data:blog.homepageUrl'>
.................................................................................
</b:if>

Sehingga jika sudah ditambahkan maka akan seperti dibawah ini.

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

Simpan Template dan lihat hasilnya.

Source : www.arlinadzgn.com/

Demikian ulasan Cara memasang Recent post slider Responsive bawah navigasi Terbaru, Semoga artikel ini bermanfaat buat sobat dan selamat mencoba. Jika ada yang mau ditanyakan silahkan beri komentar dibawah.