Cara Memasang Teks New Pada Postingan Terbaru

Rifki Andrean    7/27/2014    Blogging    2 comments   

----YOU ADS---

----YOU ADS---

Pada postingan kali ini Mang Kompi akan berbagi tutorial tentang blogger, tentang bagaimanakah Cara Memasang Teks New Pada Postingan Terbaru. Pertama kali saya melihat tombol new di blog Dian Anarchyta yang berada diatas kanan postingan di halaman homepage. Kurang jelas lihat screen dibawah ini :

Cara Memasang Teks New Pada Postingan Terbaru

Lihat dan pasti anda tertarik untuk mencobanya, kita lihat dulu itu diposisi apa.
Pada posisi post first ini belum dilengkapi kodenya jadi anda harus melengkapinya. Kode normal yang belum dipasang kode post first kurang lebih seperti ini :

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Dan anda harus mengganti kode <b:include data='post' name='post'/> dengan kode :

  <b:if cond='data:post.isFirstPost'>
      <div class='first-post'><b:include data='post' name='post'/></div>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>

Sehingga bisa dilihat menjadi seperti ini :

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>

    <b:if cond='data:post.isFirstPost'>
      <div class='first-post'><b:include data='post' name='post'/></div>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Langkah selanjutnya menerapkan CSS :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

.first-post .post.hentry:before {

content: &quot;&quot;;

width: 65px;

height: 60px;

position: absolute;

right: 450px;

top: 305px;

background: url(&#39;http://2.bp.blogspot.com/-JNhKKdna6C8/U2jyn-4IvnI/AAAAAAAAA9I/s2s9QFCxMjI/s1600/New.png&#39;) no-repeat;

background-size: 70px 70px;

} 

</b:if>

Kode diatas dipasang di atas kode ]]></b:skin>
Setelah dipasang di Save. Tarah lihat hasilnya.

Apabila tidak menghasilkan atau tidak bekerja, coba anda ganti css dan ganti angka satu persatu. Karena setiap blog berbeda ukuran layout.

Update Terbaru 13 Agustus 2014! Dikarenakan ada yang salah dalam css!

1.Login ke Blogger
2.Masuk Dashboard > Pilih Template > Klik Edit HTML
3.Salin CSS dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>

.newer-post {  
margin: 50px auto; 
 width: auto;  
height: auto;  
background-color: none;  
position: relative;} 
.newer-post2 {  
font: bold 20px Sans-Serif;  
text-align: center;  
transform: rotate(45deg); 
position: relative;  
padding: 7px 0;  
left: -25px;  
top: 7px;  
width: 160px;  
background-color: blue;  
color: #fff; 
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
 .newer-post3 {  
width: 86px;  
height: 88px;  
overflow: hidden;  
position: absolute;  
top: -4px;  right: -4px;}

4.Kemudian cari kode <b:include data="post" name="post"> ,jika sudah ketemu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost == &quot;true&quot;'><div class='newer-post'><div class='newer-post2'><div class='newer-post3'>NEW</div></div><div class='first-post'><b:include data='post' name='post'/></div></div><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

----YOU ADS---

----YOU ADS---