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
2
Simak langkah2 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/AVvXsEixFYcekp_kPxhOkjaUstjcdBP125HWo44yRdIBqzvhdMvOW0kMkLvw3iKQWTJdGWGMUM4-tUHWYgmoF87xq105QLYE3Rax8r-Ug9wFgQtmmovIBGSZnwWeW4l3kl8f5TwnFhs0ZBRSCOLw/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/AVvXsEinW4jB4GqYHkskvWglvtTsNRyyUj563OomkQTJ0fAZydmM-zIpzksY7ipIj45DndJo2cNVRVizFEVvbeFBqDlYEQ1csJDpSzTjMzbMewF2JgmPGbwQqB2ZO8hl_tKyzO8Xa7tEHrgHpPn_/s1600/New_red.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4uRYdVNZD_ia9U2ZQ3XLw53tEZrt6h3rFjQt_1yCwKheg5iNvsuEy6kLJVnqNnHkSbEeiYqMH1TU-8phImthrHEFZEDQ4iqsSqdHQwrWJVK9kDnBZplJlVAi34DWJsD5GI5Wfxier1WS6/s1600/New_yellow.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2ETeXJXHaCQ6D9ITBYvQPQ0GAopZ0Aa2fMoeFMeUxRT7dPnURWp8ud7VYIhTvrEA8cJmJc5XvxealTZ4UzMXMiNj8MZnAwifntZklX8ydjZhxrzigPIakQD6tRL8tsvoNPp8ssdfDSqZ/s1600/New_green.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFYcekp_kPxhOkjaUstjcdBP125HWo44yRdIBqzvhdMvOW0kMkLvw3iKQWTJdGWGMUM4-tUHWYgmoF87xq105QLYE3Rax8r-Ug9wFgQtmmovIBGSZnwWeW4l3kl8f5TwnFhs0ZBRSCOLw/s1600/New_blue.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwRl8TiJnT8qWdheB3T6vIAmL6z-PYEeK6hHqk9BJTlqCG4AwDstG-GDohtKuWAZXr3rrVc2KYYqvY5CPgsfoTdPyYj6xXshvn4X-2bUSerwiTc4cLkE4_mLHCwsvPA7pOle4I5vKxHKe/s1600/New_pink.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwbHhJpxey363wJxW-JzIme7SBZmjpHgb8TsSoLUKq0Fnr6tzExFSuyNcRmvCRphX1YaJWxFhvMT5UVSjeS5wXLogEkduYvhqqEu6PdXfEq2v421Q3AoLS3-UPzHL2lW95Rn9RgzL4dlc9/s1600/New_cyan.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNKJGpfNIwtvY5xD8qYmEjrRfTpPGIQwzdonKZH5K4IhA9mnXwwz0TrMYt2gNkwfvm7qLBSyvOzSAc2mA9kySOke-q8u7zMGo4R-p-cnI4OqDRpjbkMFfLaJbvk4K95D-4kLAykpyCbn5/s1600/New_orange.png
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXfiw95e6WIYvoQ3VOnj9DWnph1ZSCTmpjDZmZGdHYRMsyq-1RQSF3JJy955O0pj3H-fxo9nYWCbM9swbhCz_XENvWO7bECannETIPt-6_z5VWeSPb1DFrxy6LnCup2HOtBdbUDybvloX8/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 == "true"'>
<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