Membuat Tulisan 'New' Pada Artikel Terbaru Blog

Baiklah sobat pada kesempatan ini seocips.com akan membagikan tutorial tentang cara membuat rulisan "new" atau logo "new" pada setiap postingan artikel terbaru yang ada di homepage Blog. Kebetulan tutorial ini ditanyakan oleh salah seorang sahabat blog dan maaf baru sempat dibagikan sekarang.

Biasanya membuat seperti ini adalah untuk memberi tahu pengunjung tentang artikel terbaru yang baru saja di buat. Dengan melihat tulisan ini pengunjung pasti akan tahu jika itu artikel terbaru ( Jika dia bukan seorang Bloggers karna jika seorang Bloggers pasti tahu bahwa artikel yang ada di homepage pada page pertama adalah tulisan terbaru atau artikel yang baru saja di update) dan siapa tahu mungkin saja dia tertarik untuk membacanya.

Tutorial membuat logo atau tulisan NEW ini memang sudah banyak dibagikan tapi jika sobat tidak tahu cara membuatnya dan ingin memasangnya di Blog maka berikut ini adalah cara membuatnya.

Membuat Logo/ Tulisan 'New' Pada Postingan Terbaru

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.first-post
.post.hentry:before {
content:"";
width: 65px;
height: 65px;
position: absolute; right: -2px; top: -2px;
background: url(http://4.bp.blogspot.com/-jb__k9KgBnw/U3O0IRFtykI/AAAAAAAABcI/VU43LPukJYw/s1600/New_green.png) no-repeat;
background-size: 70px 70px; }

5. Kode berwarna merah diatas adalah Url Logo nya bisa sobat ganti sesuai selera sobat, atau pilih dan ganti berbagai pilihan warna yang tersedia di bawah ini:

http://1.bp.blogspot.com/-HcBBhEOAoO8/U3O0OvXs5zI/AAAAAAAABcg/Hz5xfoqQ9Q4/s1600/New_red.png
http://3.bp.blogspot.com/-MQLn5S7GFYA/U3O0QYZHq_I/AAAAAAAABco/QROhTQRJi-E/s1600/New_yellow.png
http://4.bp.blogspot.com/-jb__k9KgBnw/U3O0IRFtykI/AAAAAAAABcI/VU43LPukJYw/s1600/New_green.png
http://2.bp.blogspot.com/-HTqNQz_cnGo/U3O0Dfs9PBI/AAAAAAAABb4/9CLs39D511I/s1600/New_blue.png
http://3.bp.blogspot.com/-TkLIcm_PQo0/U3O0LjfLLrI/AAAAAAAABcY/BmuxEMhd4Z4/s1600/New_pink.png
http://4.bp.blogspot.com/-ElYQ5iWy8VQ/U3O0CWdxEBI/AAAAAAAABbw/d1KBMixKJxk/s1600/New_cyan.png
http://3.bp.blogspot.com/-jtkfkrj6wIo/U3O0KE6aeWI/AAAAAAAABcQ/D9sqeQ2jS-I/s1600/New_orange.png
http://1.bp.blogspot.com/-Kb_0fbq15EU/U3O0FDMLjkI/AAAAAAAABcA/-9sf0mmkbI8/s1600/New_black.png

6. Selanjutnya cari kode ini <b:include data='post' name='post'/> ( gunakan CTRL + F ) untuk mempermudah pencarian dan ganti dengan kode di bawah ini

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

7. Klik simpan template dan lihat hasilnya.

Ok sekian cara membuat tulisan atau logo NEW pada Blog Blogspot Blogger semoga tutorial ini bermanfaat dan selamat mencoba.