Monday, January 22, 2018

Cara Membuat Popular Post Seperti Template Simplify Premium

Cara Membuat Popular Post Seperti Template Simplify Premium

Tags

Popular Post Seperti Template Simplify Premium
Popular Post

Hallo sobat blogger apakah kamu pernah melihat template simplify premium 4 buatan mbak arlina. Jika pernah coba perhatikan pada winget popular artikel menarik bukan. Popular artikelnya tampil dengan satu tumbnail gambar. Plus di padukan baground warna oranye yang menarik. Pasti membuat kalian ngiler dengan template tersebut.

Arlina design memang jago dalam mendesign template. Template buatanya selalu tampil kekinian dengan warna material design yang enak di pandang mata. Bagi kalian yang ingin memiliki template karya arlina design silahkan kunjungi blognya.

Disana ada yang versi premium dan ada juga yang versi free nya. Tentu kalo di bandingkan keduanya lebih bagus yang versi premium karna komplit plus remove link footer. Harganyapun tidak terlalu mahal bekisar antara 50 ribu keatas.

Bagi kalian para pelajar yang tidak punya uang untuk membeli template premiumnya arlina design. Ada baiknya redesign saja template yang kamu miliki sambil belajar. Kali ini saya punya tutorial bagaimana membuat popular post seperti template Simplify premium 4. Bagi kamu yang ingin mencoba tutorial ini silahkan ikuti langkah-langkah berikut.

Sebelumnya tutorial ini saya ambil dari template simplify premium 4 milik saya. CSS nya saya compare supaya bisa di terapkan di berbagai jenis template. Hasilnya sudah saya uji dan 100% bisa di paka pada template lain. Ok tanpa panjang lebar lagi silahkan simak langkah-langkah berikut ini. Dalam mengedit template usahakan backup terlebih dahulu untuk mengatasi hal yang tidak di inginkan. Satulagi ketelitian dalam menempatkan kode juga harus di perhatikan ya sobat.

Langkah pertama yang harus sobat lakukan adalah login dengan akun blogger sobat. Kemudian buka dashboard dan pilih thema. Setelah itu pilih edit HTML. Kemudian untuk template yang belum punya font awesome silahkan copy kode berikut dan letakan diatas kode head penutup.
</head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah selanjutnya yaitu kita harus menempatkan kode CSS dari popular post nya kedalam CSS template. Atau bisa juga mengganti CSS popular post template sobat. Dengan kata lain kode popular post yang lama di hapus dulu lalu ganti dengan kode berikut.

#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#fff}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:100%;height:200px;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:&#39;&#39;;text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Langkah selanjutnya simpan template sobat dan lihat hasinya. Jika ukuran tumbnail gambar kekecilan atau kurang pas sobat bisa atur pada bagian ini. Sesuaikan width dan height dari tumnailnya.

#PopularPosts1 ul li img{width:100%;height:200px;}

Cocokan saja lebar dan tinggi gambar sesuai dengan ukuran sidebar blog sobat. Sampai di sini seharusnya sudah berhasil ya sobat blogger. Jika masih ragu silahkan tanya pada kolom komentar. Sebisa saya akan saya jawab karena saya juga masih belajar tentang kode kode xml, html, dan javascrip. Salam smoga bermanfaat sampai ketemu pada posting selanjutnya.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon