Posting Terbaru
recent

Cara Memasang Teks New Pada Postingan Terbaru

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


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>

Rifki Andrean

Rifki Andrean

Posting Komentar
Diberdayakan oleh Blogger.