Membuat posting di homepage warna warni

salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasikan sesuai keinginan masing - masing. dalam share kali ini saya hanya akan memberi trik simplenya menggunakan javascript nanti hasilnya agar lebih bagus bisa sobat sesuaikan sendiri.

pertama, silahkan buka editor template blogger sobat jangan lupa untuk mencegah dan jaga jaga dari adanya kesalahan backup terlebih dahulu template sobat agar nanti lebih mudah untuk mengembalikan seperti semula bila terjadi hal hal yang tidak sesuai langkah.

sekarang mari kita mulai bagaimana caranya, cari kode di bawah ini

<b:includable id='post' var='post'> /* kode tag pembuka */

       .......................
       ......bla bla bla......
       .......................

</b:includable>  /* kode tag penutup */

setelah di temukan silahkan ganti seluruh kode yang terdapat di antara kode di atas dengan kode di bawah ini

<article class='post hentry'>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>       
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>          
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>      
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>         
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>    
<div class='post-header'>    
<div class='post-header-line-1'/>    
</div>    
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>      
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div class='gambar-depan'>   
<b:if cond='data:post.firstImageUrl'>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>   
<b:else/>    
<b:if cond='data:post.thumbnailUrl'>     
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>    
<b:else/>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4vN2-ZVKBg-pX6VAHmkyl8wMqjZmWjQIV14LxAyPdLU2SZp6cD1rZHLs6U5Zl34tLT1YI0ZBxCNX4PCL_2lANzeNUrJIXmdYygCVI5Pq2V3dwUPaQEabbxM8b1fELub5pCUccXOOyBs/s1600/mac.jpg'/></a>    
</b:if>   
</b:if>      
<b:if cond='data:post.labels'>   
<div class='post-label'>                                    
<b:loop values='data:post.labels' var='label'>                           
<a expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag nofollow'><data:label.name/></a>              
<b:if cond='data:label.isLast != &quot;true&quot;'/>            
</b:loop>                 
</div>   
</b:if>  
</div>
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>       
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
 <a expr:href='data:post.url'><data:post.title/></a>          
  <b:else/>            
 <data:post.title/>          
</b:if>        
 <b:else/>          
  <data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if>
<div class='post-info'>     
  <div class='post-info-icon admin'>        
    <b:if cond='data:top.showAuthor'>        
      <span class='vcard'>     
        <span class='fn'>           
          <a href='http://www.blogger.com/profile/09882050325461413449' target='_blank'><data:post.author/></a>     
        </span>     
      </span>     
    </b:if>     
</div>     
<div class='post-info-icon jam'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.timestamp/>     
</abbr>     
</div>
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
<b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> 
<b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> 
<data:post.numComments/> Komentar </b:if>      
</a>      
</b:if>     
</div>  
</div>  
<data:post.snippet/> 
<b:else/>  
<data:post.body/> </b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>       
<div class='post-info' style='padding:0 0 0 0 !important;margin:-10px 0 20px 0 !important;border-top:none !important;border-bottom:none !important;'>     
<div class='post-info-icon admin'>        
<b:if cond='data:top.showAuthor'>        
<span class='vcard'>     
<span class='fn'>     
<a href='http://www.blogger.com/profile/09882050325461413449' rel='publisher' title='dafin defandaky'>           
<data:post.author/>     
</a>     
</span>     
</span>     
</b:if>     
</div>          
<b:if cond='data:post.labels'>     
<div class='post-info-icon label'>                                        
<b:loop values='data:post.labels' var='label'>                
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>                
</b:loop>                   
</div>     
</b:if>     
<b:if cond='data:post.dateHeader'>     
<div class='post-info-icon tanggal'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.dateHeader/>     
</abbr>     
</div>     
</b:if>     
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:onclick='data:post.addCommentOnclick' href='#comment-form'> <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if> 
</a> 
</b:if>
</div>
</div>
</b:if>
 <data:post.body/>
</b:if>
 <div style='clear: both;'/> 
  <!-- clear for photos floats -->
   </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'></div>
     <div class='post-footer-line post-footer-line-2'></div>
      <div class='post-footer-line post-footer-line-3'>        
        <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>   
  </b:if>
</article>

tambahkan css berikut di template sobat bersama css yang lain

/* post homepage warna warni */
.gambar-depan{
  border:none;
  box-shadow:none;
  width:250px;
  height:175px;
  text-align:center;
  float:left;
  margin:-32px 15px -30px -22px;
  position:relative;
  background:#993333;
}

.gambar-depan img{
  padding:0;
  width:80px;
  height:80px;
  border:8px solid #000;
  border-radius:100px 100px;
  margin-top:33px;
}

.gambar-depan img:hover{
  border:5px solid #333;
  border-radius:100px 100px;
}

.gambar-depan:before{
  content:&quot;&quot;;
  width:0;
  height:0;
  position:absolute;
  top:45%;
  right:0;
  border:7px solid transparent;
  border-color:transparent #fff transparent transparent;
}

.db-merah .gambar-depan {background:#ff0000;}
.db-biru .gambar-depan {background:#0000cc;}
.db-orange .gambar-depan {background:#ff3300;}
.db-kuning .gambar-depan {background:#ffcc00;}
.db-ungu .gambar-depan {background:#660099;}
.db-hijau .gambar-depan {background:#006600;}
.db-coklat .gambar-depan {background:#663300;}
.db-pink .gambar-depan {background:#ff0033;}

.post-label{position:absolute;top:15px;right:0;z-index:99;}
.post-label a{font-family: &#39;Oswald&#39;, Verdana,Sans-serif;text-transform:uppercase;background-color:#0099ff;color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}
.post-label:first-child a {border-radius:5px 0 0 0}
.post-label a:hover{background:#996600;}
.post-info-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ISYqSJAgBkxbtDyzi-K1MXDKmeSoUB_vgddUxeEFGNdXRLrjLoUWFC7IzAn_Tv6yGIuRi2cIjJL1mR7A7aGeNFw3C4E52mW9g0pQ8rtjMvpBW2lD-p2E3OrXMO3qAt3xlTGGosywlBU/s1600/icnall.png);background-repeat:no-repeat;}
.post-info{display:block;margin:5px 0 5px 0px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}
.post-info a{color:#999;}
.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}
.post-info a:hover{color:#000;}
.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}
.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}
.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}
.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}
.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}

kemudian letakkan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
      .post h2{
         font-size:19px;
         margin:0px; !important;
         margin-bottom:5px !important;
         font-weight:400;
         line-height:1.4em;
         color:#4a4a4a
      }
      .post{
         font-weight:400;
         font-size:13px;
         border:1px solid #ddd;
         padding-bottom:5px;
         box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);
      }
    </style>
  </b:if>
</b:if>

Silahkan anda sesuaikan sendiri css di atas agar sesuai dengan tampilan homepage blog sobat atau keinginan agar terlihat lebih menarik.

langkah terakhir letakkan kode javascript dibaah ini di atas kode </head>

<script type='text/javascript'>
$(window).ready(function(){
  $('.post').each(function(){
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-merah')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-biru')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-orange')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-kuning')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-ungu')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-hijau')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-coklat')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-pink')}
  })
});
</script>

silahkan ubah label-anda dengan label posting blog yang anda inginkan, pastikan label sesuai agar berjalan dengan baik

setelah semua langkah di atas telah di terapkan silahkan simpan perbuhan template yang sudah anda buat dan lihat hasilnya.

Sekian saja share dan trik membuat posting di homepage warna warni, semoga berguna dan bermanfaat...

Jadi Agen Iklan Hasilkan Jutaan Selamanya

01. Backlink Indonesia	26. Iklan Maluku Utara
02. Backlink Termurah	27. Iklan Nusa Tenggara Barat
03. Cara Membeli Backlink	28. Iklan Nusa Tenggara Timur
04. Iklan Aceh	29. Iklan Online Indonesia
05. Iklan Bali	30. Iklan Papua
06. Iklan Bangka Belitung	31. Iklan Papua Barat
07. Iklan Banten	32. Iklan Riau
08. Iklan Bengkulu	33. Iklan Semesta
09. Iklan Dunia	34. Iklan Sulawesi Barat
10. Iklan Gorontalo	35. Iklan Sulawesi Selatan
11. Iklan Internet	36. Iklan Sulawesi Tengah
12. Iklan Jakarta	37. Iklan Sulawesi Tenggara
13. Iklan Jambi	38. Iklan Sulawesi Utara
14. Iklan Jawa Barat	39. Iklan Sumatra Barat
15. Iklan Jawa Tengah	40. Iklan Sumatra Selatan
16. Iklan Jawa Timur	41. Iklan Sumatra Utara
17. Iklan Kalimantan Barat	42. Iklan Terbaru
18. Iklan Kalimantan Selatan	43. Iklan Yogyakarta
19. Iklan Kalimantan Tengah	44. Jaringan Backlink
20. Iklan Kalimantan Timur	45. Jasa Backlink
21. Iklan Kalimantan Utara	46. Jasa Backlink Murah
22. Iklan Kepulauan Riau	47. Jasa Backlink Terbaik
23. Iklan Lampung	48. Jasa Backlink Termurah
24. Iklan Link	49. Media Backlink
25. Iklan Maluku	50. Raja Backlink