Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template

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 berbeda2

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/AVvXsEiXqebu262TBZYRpypNfwAU9gZWGFqPw9LcVSPtbWZDnVIikPQ7cIPblmzXedY-VVjFEoaE6_a4HSZZ2maSaZLgOn9lI7PbXvxMQOiqAy1ZDdxYjNubLYv400h9H1hkEH0DnFBOkSJ6OzLl/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/AVvXsEjRLghukA4bJZ05NRAYgTDQ3Bv3PCuoy-Acg-aBjOnxXkDEtwyfrnBrTa49qgxmGGdXcOgk7u1ZtZ5v_OwQCqJkD8R74dZoqUGL6BKZAdpaz9gYA_dK8UOt9pHC33ZNulGJjmooaETiyloR/s1600/New_red.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinnOMOG-OIemxTY69cLRr_6_LJDlfhfN3iJyR_KO9_K-HqPCONZKf_iXFZyGPNtmL68ACNp8EDGuLbk68dvr2f-4lNLsyu34GfN_knABzolG_Ued_S7uzmru3Oz4MXZjBjvEU7tNuC_0eT/s1600/New_yellow.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxRWg6FKgzgpfyYV1BWLnSP13p3kXeyvgDFNq0HyFJazQs1EQUIrknYAVYr4syFLyS2XWn9DUnyBiRZXTn8zlsthXYHdklF2FQodzaP0JjGnVXuShE4YPIdzvhnbyt1FhnXSRCXAwVJAN/s1600/New_green.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqebu262TBZYRpypNfwAU9gZWGFqPw9LcVSPtbWZDnVIikPQ7cIPblmzXedY-VVjFEoaE6_a4HSZZ2maSaZLgOn9lI7PbXvxMQOiqAy1ZDdxYjNubLYv400h9H1hkEH0DnFBOkSJ6OzLl/s1600/New_blue.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvjcWoo9M6ik6K_sgv9vv8L2jqMTo1F2-fHmbfD9Vjxr_yS85UIQ8Btk2lmKg3BGzatB3QTYhM9ooZjhCTWUvRIYIV_bNVHIrG7vW962SIueSu2HDHY8ksXhHkf2Dz8OGxryBfSBeED7N/s1600/New_pink.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rL_hwkFQ7F_HDQ2EAgYlIaYObmaqutjw3Apr5GpEY-CCTINdfmyymGmubZH060l3xWgSw8lOtX1GmY0xEmBC4epTiAQAq0ErgrE_YNcNk5A-Uy7_vmBVgEvVjm021nBbJ9MEqV9xW2O9/s1600/New_cyan.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBVBJh3znuA0VH30SdjLpH10HS7ysMYpvkUzVSAjrbDEisBPoD-f5vxHQNyqnID3uKyZQvrPGJvXF_3F1Bm7gUu1KIGiywPGLcdut3fvlcjdATPYvBajcS9sTX5H-FjwamxBTXuhRDuelD/s1600/New_orange.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__BNUHRmAhP8Rh84b5-IQP_tEk0orxwUxun_paY8Bw-RUD-CNc_N0-j342SmHCaZrX0YFNYKp2g_kXh2JrJrwbhfm161z2qpYsFmsopRz-OrrPUlQxWj570jqc77czLskCHabamQwR3lz/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
Terima kasih telah membaca artikel tentang Membuat logo new otomatis pada artikel terbaru di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template