Membuat logo new otomatis pada artikel terbaru

Selamat pagi menjelang siang sobat,.. kembali lagi dengan saya hari ini saya akan membagikan tutorial mengenai "Membuat logo new otomatis pada artikel terbaru" atau menampilkan post terbaru dengan sebuah tanda seperti ribbon, Untuk DEMO nya sobat bisa lihat gambar diatas atau DISINI
Tutorial ini saya dapat inspirasi dari blog Dian AnaRchyta, Master blog yang udah dikenal dikalangan blogger...
Menurut saya sih kalo menurut orang lain saya tidak tau soalnya setiap pendapat orang berbeda²

Simak langkah² dibawah ini:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRttcO7zyuJQ3LOtSQsX6RvUGNWJpTQ6xbp3QPDM8CRVUeOjTLc-Qgsi_uV5_npwD3Zgp4IwPYGvaA05tK9fVl4qXNaUl-6aNczRxzxs9icWP1lRcLy6cpNBIq-z7Jd1mTDe33qbFsOWK/s1600/New_blue.png) no-repeat;
background-size: 70px 70px; }
i[rel="note"]{ display : block; font-style : normal; color : #555; 
padding:15px 18px 15px 48px; 
position : relative; 
background-color : #f8e38d; 
border-radius : 4px; 
border-bottom : 1px solid rgba(0,0,0,.1); } 
i[rel="note"]:before{ 
content:"\f05a"; font-family:'fontAwesome'; display:block; 
position:absolute; top : 15px;left : 16px; color : rgba(0,0,0,.18); 
font-size : 24px; line-height:1em; } 

Note: Tulisan yang berwarna merah adalah Url Logo nya bisa sobat ganti sesuai selera sobat,..
Saya sudah menyediakan berbagai warna jika masih ada yang kurang warna kesukaan sobat bisa request di kolom komentar nanti saya buat kan.

Untuk sementara Silahkan sobat pilih yang sudah tersedia:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOoDUEjHfQOhvxHXeF4E0ih-evw5AirJTyX62ReqfLVXEdxQDWZUdzSv6p_AQLwthj-DDQAslGBnB-76fklPatumyWHmLyP4uDd6de4QLRl3H6FKWsogy9rUwTX1P5R7ec5bV2tpuOm1D/s1600/New_red.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFwfgPRGWfmpBRyL2TqTyIwqkqRNd1aHXGaH9-j8SoVaSvp6xJEci4A8qarhZQPa3IlsF_BsbMhHu0MhFkqA_06RzDB4TITRQBYqmCpMuanKSgbBmmU58nBcQYavDSqUscIlCYBHY9if_/s1600/New_yellow.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnkH7khfWSN7j0dB7PZQZvN60BW8ZFi0KlmiY9fnuZTzH8evWcKM3CTW0WItg7hM0BUs1n04iTX-VPgYmHKAmHuWrPD3YW-AJ7q7UQ3DzTVwt2shjCjU2uzTRHtUwOQG5eTU0nChV9n6H/s1600/New_green.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRttcO7zyuJQ3LOtSQsX6RvUGNWJpTQ6xbp3QPDM8CRVUeOjTLc-Qgsi_uV5_npwD3Zgp4IwPYGvaA05tK9fVl4qXNaUl-6aNczRxzxs9icWP1lRcLy6cpNBIq-z7Jd1mTDe33qbFsOWK/s1600/New_blue.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsJnVaYJSOIEGW1WK4n9esFLa5Tbz7TOJo71qRWQsQOx_qLdW1Z5QBDXUMu5RnYgpGF7K07DfQkX3PP2rvKlYwDWKIhyphenhyphenkuRuUMMxi45uni6f5MdX_HZ_wQt6tJkkCO24y1tqmYw8ynsyL/s1600/New_pink.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFUhQIBC-P7VmwFTvF8dlLbiQzD5Yre4jTQrdhWyDVOw4AVows6QMryKtnqG2wsXkrgEzgmIDM_DsB_tR-2hVMQK_6SND_3NcU3ojWSq13zn5rdwFVcx6d_kCNjWHfDJgmoCM2LxZSzrDE/s1600/New_cyan.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEN0S1ikanOw2T6c5C5bOQFfAvUPOwttyjGBsI9lZO_yW3nCDrtlKefTtaQ0f8aX_EIzA5p3NPyGn60mPzO7brncnzS5VywiEzPx91wgPDSKd4XvlDVvn3syYS3W5BFzaGB8fyCPw63_oA/s1600/New_orange.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-Q9-4UeM9Eq8v14eynAEoI7ZOXNAeOUvILIOe7pkH6bNI2gpGWuZGaKkzU_whEJ145XrLbWQkvY7xqzWwbFjeczTUNRzJHcLmj6p-nv7Hvd3HHsxZXVCN2tb05VMe3KfQ2VF8vncNoOo/s1600/New_black.png

5. Kalau sudah silahkan sobat cari kode ini <b:include data='post' name='post'/> gunakan CTRL + F untuk mempermudah pencarian...
Kalau sudah ketemu silahkan sobat 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> 

5. Klik simpan template dan lihat hasilnya...
Ok,.. sekian dulu tutorial hari ini Semoga bermanfaat...
Follow blog Irvan Efendy kalau ingin mengetahui tutorial TerUpdate