Cara Membuat Tampilan Gambar Dan Judul Saja Pada Sidebar | Blog Kang Hamzah - Selamat siang shobat, semoga sehat selalu, salam sejahtera buat kita semua. Bagi seorang blogger atau seorang publisher tampilan template memang sangat begitu penting. Karena yang pertama kali di lihat oleh pengunjung adalah tampilan blog / web yang begitu bagus, rapih, dan bersih.
Bagus disini artinya antara tema dengan tampilan blog atau website serasi dan enak di pandang, sedangkan rapih yaitu tidak terdapat iklan atau tampilan widget lain yang mengganggu pengunjung untuk membaca artikel shobat, dan terakhir adalah bersih artinya adalah tampilan blog atau website tidak acak-acakan dan harus tertata.
 |
| Tampilan Gambar Dan Judul |
Cara membuat tampilan gambar dan judulnya saja
Salah satu agar tampilan blog / website terlihat profesional yaitu salah satunya tampilan gambar dengan judulnya saja. Ane sudah mencari kesana kemari namun tetap belum nemu juga tampilan yang seperti gambar di bawah ini.
Tampilan gambar dan judul postingan ini bisa shobat pasang di sidebar atau sebelah kanan atau sebelah kiri postingan. Bukan untuk di postingan. Baik, berikut kode script CSS atau HTML dari tampilan gambar dan judulnya saja.
<div class="article-right-box">
<ul class="list-article-default list-article-250 list-unstyled"><li>
<a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Masak Ayam Bumbu Kecap Yang Super Cepat Dan Simpel');" href="http://www.resepbuntik.com/2016/01/resep-masak-ayam-bumbu-kecap-super-cepat.html" class="img-block"><img width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtD3AnpkAHRgUlLUdrd7nLD4rqyawr_UbI3i9ocMNaZqxNsHmnfIPOZRsDzPmWjl_aTPH7cGtkXhVzKsU5UX5MJJASCZ_082FDesTbs8uSNi2zO3szRUeOc87iM4wXtZlL9U1ygb4_6QY7/s1600/Resep+Masak+Ayam+Bumbu+Kecap+Super+Cepat.jpg" /></a>
<div class="deskrip-article"><p><a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Masak Ayam Bumbu Kecap Yang Super Cepat Dan Simpel');" href="http://www.resepbuntik.com/2016/01/resep-masak-ayam-bumbu-kecap-super-cepat.html">Resep Masak Ayam Bumbu Kecap Yang Super Cepat Dan Simpel</a></p></div>
</li><li>
<a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Cara Membuat Karedok Kacang Panjang Enak');" href="http://www.resepbuntik.com/2015/07/resep-cara-membuat-karedok-kacang.html" class="img-block"><img width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUwqmARtyl7FjVUuDWFfksYpLeDV6vmTt8ku6RW_72X4DWgPd7ungtr62JF-hmP9F2iQFfu4ytwNHS3EWApIygr_zm7Qr_CQaLkP1gEj_l51P_ZrQyA6rufNl6u9Yw_u1cNv_S8QpUQqW/s1600/Resep+Cara+Membuat+Karedok+Kacang+Panjang+Enak.jpg" /></a>
<div class="deskrip-article"><p><a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Cara Membuat Karedok Kacang Panjang Enak');" href="http://www.resepbuntik.com/2015/07/resep-cara-membuat-karedok-kacang.html">Resep Cara Membuat Karedok Kacang Panjang Enak</a></p></div>
</li><li>
<a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Cara Membuat Es Krim Goriorio Enak Mudah Dibuat');" href="http://www.resepbuntik.com/2014/08/resep-cara-membuat-es-krim-goriorio.html" class="img-block"><img width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTBNJhAfPTyLmOB1yPwU4L2d40tu4XNhXufHIlCUiyTiXaY090hCQU3-HcNWXtBoAFy_tHTcQc0ZOpxw44e-H4CF-_hrbRa2MTFltug7So13H67HkgBKFiR94Q6PZ-7o303Vc8cFbhT1g7/s1600/Resep+Cara+Membuat+Es+Krim+Goriorio+Enak+Mudah+Dibuat.jpg" /></a>
<div class="deskrip-article"><p><a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Cara Membuat Es Krim Goriorio Enak Mudah Dibuat');" href="http://www.resepbuntik.com/2014/08/resep-cara-membuat-es-krim-goriorio.html">Resep Cara Membuat Es Krim Goriorio Enak Mudah Dibuat</a></p></div>
</li><li>
<a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Kue Nastar Bentuk Buah Enak Lucu Sederhana');" href="http://www.resepbuntik.com/2014/07/resep-kue-nastar-bentuk-buah-enak-lucu.html" class="img-block"><img width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPtprnkLMxlqrmuLCN0SLt5g0W-H1glFB3uL79TDfiAgsub5X35rU7sGfuYwGVSUTYeo-yYfN34dvgwUrvOAGLvO2VGi45Bh2hH3moAECGcskLI0TuC037CaBYKcXtZr8S6w7zW6gsCmaQ/s1600/Resep+Kue+Nastar+Bentuk+Buah+Enak+Lucu+Sederhana.jpg" /></a>
<div class="deskrip-article">
<p><a onclick="ga('send', 'event', 'Detail - Recommendation Click', 'Click', 'Resep Kue Nastar Bentuk Buah Enak Lucu Sederhana');" href="http://www.resepbuntik.com/2014/07/resep-kue-nastar-bentuk-buah-enak-lucu.html">Resep Kue Nastar Bentuk Buah Enak Lucu Sederhana</a></p></div>
</li></ul>
</div>
Lalu bagaimana cara membuat tampilan gambar dan judulnya saja seperti gambar di atas. Berikut keterangannya shobt.
Keterangan :
- Warna Biru : Ganti dengan judul artikel / postingan
- Warna Merah : Alamat URL artikel / postingan yang akan ditampilkan
- Warna Orange : Alamat URL gambar artikel / postingan
Nah, shobat Blog Kang Hamzah kini tampilan blog / website shobat sudah terlihat profesional dengan tampilan yang begitu bagus, bersih, dan juga rapih. Baik, itulah sedikit berbagi bagaimana cara membuat tampilan sidebar yang hanya gambar dan judulnya saja. Apabila ada pertanyaan atau kritik dan saran bisa langsung ditulis di komentar. Terima kasih, semoga bermanfaat.
No comments:
Post a Comment