Cara Membuat Postingan Warna-Warni Seperti Blog Kang Ismet

Cara Mudah Membuat Postingan Warna-Warni Seperti Blog Kang Ismet di Home Page- Banyak yang suka auto readmore warna - warni berdasarkan label yang dimiliki kang ismet, termasuk saya, dan kini postingan berwarna sesuai label sudah saya pasang di blog saya.

Bagi anda yang suka dengan Postingan Pada Homepage berwarna Ala Kang Ismet, saya akan memberikan tutorialnya, cara mudah kok gak begitu ribet, kita tinggal menambahkan css gambar pada pembungkus Thumbnail auto readmore dan menandai postingan berdasarkan label. untuk demonya bisa lihat home page blog saya ( bila masih dipakai ) atau gambar dibawah ini.

Cara Mudah Membuat Postingan Berwarna Ala Kang Ismet

1. Pertama pastikan blog sobat sudah memasang auto readmore tanpa java script ,
   Bila belom ada bisa baca postingan saya , cara membuat auto readmore fast loading tanpa javascript
2. Jika sudah memasang auto readmore tanpa java script diatas , kemudian temukan kode .thumbnail-post  di editor template anda
3. Ganti kode  .thumbnail-post   dengan kode dibawah ini ( bila anda tidak menggunakan auto readmore dengan cara diatas tadi , mungkin kode pembungkus gambarnya berbeda , silahkan sesuaikan dengan id pembungkus gambar auto readmore )

   .thumbnail-post{background:#2c3e50;position:absolute;top:0;left:0;transition:all 0.15s 0s ease-in-out;float:left;margin:0;padding:0;width:230px;height:160px;display:block;overflow:hidden;border-radius:4px}
   .thumbnail-post:before{content:'';position:absolute;top:75px;right:0;border-width:10px 10px 10px 0;border-style:solid solid solid none;border-color:transparent #fff transparent}
   .thumbnail-post img{width:125px;height:125px;padding:0;margin:10px 50px;border-radius:100px;border:rgba(255,255,255,0.2) solid 5px;border-radius:100px}
   .thumbnail-post img:hover{border:rgba(255,255,255,0.6) solid 5px}
   

4. Supaya Auto readmorenya berwarna warni , silahkan pasang java script ini diatas kode </body>

   <script type='text/javascript'>
   //<[![CDATA[
   function get_random_color() {
       var letters = '0123456789ABCDEF'.split('');
       var color = '#';
       for (var i = 0; i < 6; i++) {
           color += letters[Math.round(Math.random() * 14)];
       }
       return color;
   }
   $(function () {
       $(".thumbnail-post").each(function () {
           $(this).css("background", get_random_color());
       });
   });
   //]]>
   </script>
   

5. Kemudian yang terkahir Klik Save Template

Gimana brow udah berhasil belom menerapkan postingan home page warna - warni seperti di blognya kang ismet? hehhehe, juka auto readmore anda udah berwana-warni bearti anda sudah bisa menerapkanya, bila masih bingung silahkan komen aja dibawah.

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Cara Membuat Postingan Warna-Warni Seperti Blog Kang Ismet. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, Facabook LingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini.