Membuat Post Tag Dengan CSS3 [Pure CSS3 Post Tag]
Hem.. setelah barusan saya ngajak anda untuk membuat Gambar Calendar [kalender] dengan CSS3, kali ini saya mau ngajak anda untuk membuat Post Tag hhe... Dan lagi-lagi saya gak pengen pake apapun selain CSS3 hhe... Oiya ada yang masih belum tau apa itu Post tag? klo untuk Blogger dengan Platform WP, Joomla, Drupal atau lainnya kayanya sih udah lumayan paham sama Tag apalagi WP hhe... cuma untuk Blogger dengan Platform Blogspot kita emank gak terlalu dikenalkan dengan penggunaan Tag, karena kita justru lebih dikenalkan dengan penggunaan Label yang lagi-lagi di WP ataupun Joomla Label dan tag dibuat terpisah haha... ya mungkin itu salah satu hal yang membuat saya cinta setengah mati sama Platform Blogspot hhe, soalnya mau ngapain aja mesti ngoding dulu wkwkwkwk....
Lantas gimana bentuk dan penampakan dari Post tag yang akan saya buat sore ini? bentuknya kaya gambar paling atas atau anda juga bisa langsung liat demonya dilink berikut:
Lantas gimana bentuk dan penampakan dari Post tag yang akan saya buat sore ini? bentuknya kaya gambar paling atas atau anda juga bisa langsung liat demonya dilink berikut:
Gimana? Udah paham donk sekarang yang namanya tag itu kaya gimana hhe... terus gimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
6. Save template anda.
7. Karena lagi-lagi saya ng'buat Tutorialnya mendadak, jadi saya gak mikirin jangka panjangnya untuk penempatan tag ini di postingan Blog kita yang berplatform Blogspot ini hhe... Tapi klo InsyaAllah sempet lain waktu pasti saya buat tutorial lanjutannya untuk pemasangan tag ini menjadi bagian dari postingan kita hhe....
Oiya hampir lupa, Ini dia Kode HTML untuk pemanggilannya:
Dan kode diatas kebetulan saya taro setelah kode <body> karena tujuannya emank lagi-lagi cuma pengen nunjukkin klo CSS3 bisa dipake buat ng'gambar *jiah dasar Graphic designer maenan begian masih aja intinya gambar haha...
8. Publish Postigan anda dan lihat hasilnya...
Selamat Mencoba...
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
.tags{
margin:0;
padding:0;
position:absolute;
right:24px;
bottom:-12px;
list-style:none;
}
.tags li, .tags a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:11px;
}
.tags a{
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.tags a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.tags a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.tags a:hover{background:#555;}
.tags a:hover:before{border-color:transparent #555 transparent transparent;}
6. Save template anda.
7. Karena lagi-lagi saya ng'buat Tutorialnya mendadak, jadi saya gak mikirin jangka panjangnya untuk penempatan tag ini di postingan Blog kita yang berplatform Blogspot ini hhe... Tapi klo InsyaAllah sempet lain waktu pasti saya buat tutorial lanjutannya untuk pemasangan tag ini menjadi bagian dari postingan kita hhe....
Oiya hampir lupa, Ini dia Kode HTML untuk pemanggilannya:
<ul class="tags">
<li><a href="#">tag</a></li>
<li><a href="#">tag name</a></li>
</ul>
Dan kode diatas kebetulan saya taro setelah kode <body> karena tujuannya emank lagi-lagi cuma pengen nunjukkin klo CSS3 bisa dipake buat ng'gambar *jiah dasar Graphic designer maenan begian masih aja intinya gambar haha...
8. Publish Postigan anda dan lihat hasilnya...
Selamat Mencoba...
Posting Komentar
Posting Komentar