Posted by Aak
Aak-share.com Updated at: 1:18:00 PM

Membuat Posting Homepage Warna Warni

No comments:
Membuat Posting Homepage Warna Warni -  adalah tampilan postingan di halaman depan atau homepage kita berwarna warni. Menjadikan tampilan homepage warna warni agar menjadi lebih menarik dan lebih cantik, Tampilan homepage warna warni ini saya menggunakan javascript, trik simple ini  dapat anda kereasikan sendiri agar hasilnya menjadi lebih maksimal.


Membuat Posting Homepage Warna Warni ada sebuah perubahan didalam code html post, anda perlu mengganti semua code html post. Bagi anda yang ingin mempercantik tampilan homepage berikut ini langkah-langkahnya, namun yang perlu anda perhatikan sebelum proses pengerjaan jangan lupa anda Backup terlebih dahulu template, hal ini dilakukan untuk mengantisipasi andanya kesalahan.

Manfaat Backup template adalah memudahkan anda untuk mengembalikan dalam keadaan seperti semula apabila terjadi hal-hal yang tidak sesuai langkah untuk memulai anda perlu mencari code html post. Code html post seperti berikut:

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

       ...........Code.............

       ......yang perlu.........
       .........diganti............

</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='https://plus.google.com/105248329877134471578' 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='https://plus.google.com/105248329877134471578' rel='publisher' title='yosep yuswana'>           
<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'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='post-footer-line post-footer-line-2'/>
      <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 :

* 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:#364F9E;
}

.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:#8BBCFC;}
.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:9px;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> 


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

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


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

Demikian trik membuat posting homepage warna warni, semoga menambah referensi anda, apabila ada kekurangan saya mohon maaf. Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments