Membuat posting di homepage warna warni

CSS HTML Javascript jQuery

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='http://4.bp.blogspot.com/-43pLOM4hPwo/UjE_bsf5b5I/AAAAAAAAFYw/oFZY-XasRo8/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(http://3.bp.blogspot.com/-Ejs4kT7A1cc/UkcGpzyrRzI/AAAAAAAAFpM/-BEQDsEw7kk/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...

25 komentar

lumayan ribet kodenya,hehe :D

yang pernah pakek triknya komentar :)

iya lumayan buat kepala panas :D

hijrah ke cinditional tag sob :-bd

iya mas, nanti saya coba cara ini :D buat pembaharuan berikutnya :)

saya simpan dulu kodenya mas |o|

mantap blognya, ane request langsung dibuatin. bookmark dulu aja, mau sekolah.

berhasil gan, dengan sedikit editan. soalnya di blog ane sudah ada tag pembungkusnya. :-d

Panjang sekali mas, hehe
Bener yang dikatakan mas Mawan, lumayan ribet :D

berhasil , gak terlalu sulit :)

nah itu, kalo mau hasil yang bagus juga harus susah dulu :)

Jadi warna warni hehe thx sob :]

keren tu sama sam sudah mampir :)

label-anda itu di ubah menjadi apa gan? link atau gimana ?

ganti dengan label di blog :W .manis, ayu, html, dsb.

Gan itu supaya postnya bejarak antara satu post ke post lainnya gimana ya?
diatur dimananya apakah pada bagian css main-wrapper atau pakai kode javascript lagi??
=p* :-d

kalau ingin menambahkan warna lain harus ganti javascriptnya aja apa harus cssnya juga yaa gan, mohon bantuannya.

kalo gambarnya hendak di buat kotak bukan bulat caranya gimana ?

kalo gambarnya mau dibuat kotak caranya gimana ?


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT:)
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.
Terima kasih telah berkomentar
Back to Top
Loading...