Tips 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 . heheehe

    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

Taraa .. !!! 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 brow

Ditulis oleh Salsabila Q.A pada tanggal

Tweet