6/06/2017

Cara membuat Recent Post secara Grid berdasarkan Label




Ok Gan.. kali ini kita akan membahas bagaimana sih cara membuat sebuah recent post berupa Grid dengan Berdasarkan pada label.. Jadi ini nantinya akan tampil kotak secara mendatar / horisontal. Ok langsung saja ya ndak perlu panjang lebar..


Langkah Pertama silahkan anda buka Blogger > Tata Letak
Tambahkan atau Edit Widget HTML/Javascript dan silahkan kalian masukkan script dibawah ini










Perlu diketahui bahwa script diatas adalah script pemanggil label mana yang akan kalian tammpilkan dalam bentuk Grid.
Silahkan kalian ganti Desain Menjadi Label yang mau kalian tampilkan pda recent post.



Langkah Kedua silahkan anda Buka Template > Edit HTML
Lalu masukkan kode javascript dibawah ini tepat diatas kode












Jika kalian ingin mengganti Teks "Enter", silahkan ganti Teks Enter dengan teks Tombol yang kalian inginkan.



Langkah ketiga adalah memilih Style... disini kita sertakan ada 2 style yang bisa anda pakai dan bandingkan sendiri mana yang kalian suka.. ingat.. pilih salah satu aja ya..

Silahkan Copy dan Letakkan diatas Kode  ]]>
atau

Style 1



/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}
.recent-by-tag .btndown{display:none}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}






Style 2





/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}
.recent-by-tag .btndown:hover{color:#fff;background:#88c425}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}




Nah seperti itu Gan, Semoga ilmu ini dapat bermanfaat untuk memperindah Blog Sobat.


Salam.





Advertisement
Sobat, ditempat ini kita belajar bareng ya, saling berbagi ilmu di http://rahmancyber.net Apabila ada yang perlu di tambahkan atau ada kesalahan mohon di koreksi
Bagi yang menginginkan konten berupa video, bisa langsung kunjungi link Channel Youtube RahmanCyber NET
Matur Nuwun...

Sponsor Rahmancyber Network



Baca Juga

Post a Comment

Berilah Komentar di sini, Harap Jangan Nyepam ya...

RahmanCyber merupakan media referensi yang membahas berbagai topik seperti Info, Tutorial, Tips, Trik, Belajar Bersama... mengapa tidak satu Niche saja yang dibahas di RahmanCyber?
karena disini kita mengutamakan artikel yang kaya dalam satu tempat, sehingga pengetahuan yang di share ke pengguna dapat bervariasi, dan pengguna hanya perlu menuju kategori yang dia senangi atau butuhkan sahaja.
artikel di Rahman Cyber dibuat secara manual dengan bahasa yang kita usahakan ringan agar mudah dipahami pembaca. Salam RahmanCyber Network

Rahmancyber Network

...
Berikut ini merupakan Bagian dari Rahmancyber Network

Whatsapp Button works on Mobile Device only