1 Juli 2013

Cara membuat badge baru pada postingan terbaru di blog

Posted at  12.46  |  in  widget


Hari ini kita akan belajar bagaimana cara membuat badge baru pada postingan terbaru di homepage blog. Fitur yang satu ini cukup indah dan menarik. Diantara Anda mungkin pernah melihat di blog-blog tetangga menggunakan pita baru pada postingan terbaru blog mereka. Dan pada kesempatan kali ini saya akan share ke anda bagaimana menambahkan badge (lencana) baru pada setiap postingan terbaru. Trik yang satu ini benar-benar bagus dan menakjubkan, berharap anda menyukainya dan menerapkannya di homepage blog anda. Jangan lupa backup terlebih dahulu template...

Langkah dan penerapannya di blog

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih-> Template -> Edit HTML
  • Kemudian cari tag/kode ]]></b:skin>  
  • Setelah ketemu letakan kode berikut tepat diatas kode ]]></b:skin> 
.wrapperwha12
{
margin: 50px auto;
width: auto;
height: auto;
background: transparent;
position: relative;
}
.ribbonwha123
{
font: bold 20px Sans-Serif;
text-align: center;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -25px;
top: 7px;
width: 160px;
background-image: linear-gradient(top, #129, #12f);
background-image: -o-linear-gradient(top, #129, #12f);
background-image: -ms-linear-gradient(top, #129, #12f);
background-image: -moz-linear-gradient(top, #129, #12f);
background-image: -webkit-linear-gradient(top, #129, #12f);
color: #fff;
-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbonwha-wrapper12
{
width: 86px;
height: 88px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

  • Sekarang cari lagi kode <b:include data='post' name='post'/> dan ganti kode tersebut dengan kode berikut:  


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrapperwha12'>
<div class='ribbonwha-wrapper12'><div class='ribbonwha123'>NEW</div></div>
<div id='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>
 
  • Simpan template...selesai.

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 12.46
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

10 komentar:

  1. infonya selalu keren gan
    follback gan di http://yaditrick.blogspot.com/

    BalasHapus
    Balasan
    1. Terima kasih banyak mas, segera ke TKP... :)

      Hapus
  2. infonya keren gan ,, makasih udah di share ,, :-)
    folback ya gan ,,
    http://blogharun26.blogspot.com/

    BalasHapus
    Balasan
    1. sama-sama mas Taretan Mania...Segera ke TKP.

      Hapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. Keren banged mas tips2nya sangat bermanfaat terima kasih udh share...

    pak aku udh pasang seperti ini, tapi belum maksimal karena postinganku hanya gambar saja di dalam box shadow, jadi tulisan new.a ketutup.

    mohon pencerahannya Pak

    ini blog urlnya pak : http://stok-batik.blogspot.com/

    Terima kasih sebelumnya

    BalasHapus
  5. Ok, Bagus banget infonya. (h)
    Nambah++ (c) (c)
    Agar setiap postingan berbeda Ribbonnya gimana ya Kakak. x-)
    Contohnya kayak gini, Post 1 diberi Ribbon New, Post 2 diberi ribbon Sale, Post 3 Diberi ribbon 10%sale kayak di toko online gitu Kakak. :>)
    Mohon pencerahhannya, :-?Terima kasih.
    Ane tunggu Update tutornya, Mohon dikirim " L_goo@asia.com"
    Tau Inbox ane di " https://www.facebook.com/IDTEAMPOCONG404 "
    Terima kasih 2 X Kali lagi. cheer cheer

    BalasHapus
    Balasan
    1. Makasih atas kunjungannya, PR buat saya mbak.. insya Allah kita cari lagi dr sumber yg lain atau mbak bisa googling dgn kata kunci yg dimaksud.

      Hapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top