Membuat posting di homepage warna warni

CSS HTML Javascript jQuery sitemap

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

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-7<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

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-5354code-line:2-5455code-line:2-5556code-line:2-5657code-line:2-5758code-line:2-5859code-line:2-5960code-line:2-6061code-line:2-6162code-line:2-6263code-line:2-6364code-line:2-6465code-line:2-6566code-line:2-6667code-line:2-6768code-line:2-6869code-line:2-6970code-line:2-7071code-line:2-7172code-line:2-7273code-line:2-7374code-line:2-7475code-line:2-7576code-line:2-7677code-line:2-7778code-line:2-7879code-line:2-7980code-line:2-8081code-line:2-8182code-line:2-8283code-line:2-8384code-line:2-8485code-line:2-8586code-line:2-8687code-line:2-8788code-line:2-8889code-line:2-8990code-line:2-9091code-line:2-9192code-line:2-9293code-line:2-9394code-line:2-9495code-line:2-9596code-line:2-9697code-line:2-9798code-line:2-9899code-line:2-99100code-line:2-100101code-line:2-101102code-line:2-102103code-line:2-103104code-line:2-104105code-line:2-105106code-line:2-106107code-line:2-107108code-line:2-108109code-line:2-109110code-line:2-110111code-line:2-111112code-line:2-112113code-line:2-113114code-line:2-114115code-line:2-115116code-line:2-116117code-line:2-117118code-line:2-118119code-line:2-119120code-line:2-120121code-line:2-121122code-line:2-122123code-line:2-123124code-line:2-124125code-line:2-125126code-line:2-126127code-line:2-127128code-line:2-128129code-line:2-129130code-line:2-130131code-line:2-131132code-line:2-132133code-line:2-133134code-line:2-134135code-line:2-135136code-line:2-136137code-line:2-137138code-line:2-138139code-line:2-139140code-line:2-140141code-line:2-141142code-line:2-142143code-line:2-143144code-line:2-144145code-line:2-145146code-line:2-146147code-line:2-147148code-line:2-148149code-line:2-149150code-line:2-150151code-line:2-151152code-line:2-152153code-line:2-153154code-line:2-154155code-line:2-155156code-line:2-156157code-line:2-157158code-line:2-158159code-line:2-159160code-line:2-160161code-line:2-161162code-line:2-162163code-line:2-163164code-line:2-164165code-line:2-165166code-line:2-166167code-line:2-167<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/AVvXsEhhyphenhyphennxeamX6dO2vnzek10NgW3SoMLILeei16QpvX1RMyBGkug1164Zb8gWNxCJAQqA6eO-dRWY7T7HB5icjIPSJPIl2fFyCP7RBPkWM36Ep2diYOKsXhsmvasN40g6esdCr_RSAfn1PmTc/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

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-1920code-line:3-2021code-line:3-2122code-line:3-2223code-line:3-2324code-line:3-2425code-line:3-2526code-line:3-2627code-line:3-2728code-line:3-2829code-line:3-2930code-line:3-3031code-line:3-3132code-line:3-3233code-line:3-3334code-line:3-3435code-line:3-3536code-line:3-3637code-line:3-3738code-line:3-3839code-line:3-3940code-line:3-4041code-line:3-4142code-line:3-4243code-line:3-4344code-line:3-4445code-line:3-4546code-line:3-4647code-line:3-4748code-line:3-4849code-line:3-4950code-line:3-5051code-line:3-5152code-line:3-5253code-line:3-5354code-line:3-5455code-line:3-5556code-line:3-5657code-line:3-5758code-line:3-5859code-line:3-5960code-line:3-6061code-line:3-61/* 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/AVvXsEjjKvWivGyrLB5RDPLnAqIBCu4zBtxfH0yXcyzLyqkJ-2BPFFatqw7Xc11HEX7S7nl95cAyk2_FQOJTdzTCajMlm6qevu4RxbI1U7OJ1S5ImicK9-nD1PFwED-b7xaCnobrI-nTTuTsCjg/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>

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-67code-line:4-78code-line:4-89code-line:4-910code-line:4-1011code-line:4-1112code-line:4-1213code-line:4-1314code-line:4-1415code-line:4-1516code-line:4-1617code-line:4-1718code-line:4-1819code-line:4-1920code-line:4-2021code-line:4-21<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>

1code-line:5-12code-line:5-23code-line:5-34code-line:5-45code-line:5-56code-line:5-67code-line:5-78code-line:5-89code-line:5-910code-line:5-1011code-line:5-1112code-line:5-1213code-line:5-1314code-line:5-1415code-line:5-1516code-line:5-1617code-line:5-1718code-line:5-1819code-line:5-1920code-line:5-2021code-line:5-21<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...

Artikel Terkait

  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…

26 komentar

  1. saya simpan dulu kodenya mas |o|

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

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

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

    BalasHapus
  4. Jadi warna warni hehe thx sob :]

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

    BalasHapus
  6. 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

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

    BalasHapus
  8. kalo gambarnya hendak di buat kotak bukan bulat caranya gimana ?

    BalasHapus
  9. kalo gambarnya mau dibuat kotak caranya gimana ?

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

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.

Back to Top
Loading...