logo blog
Selamat Datang Di Ngeblog-Bareng
Terima kasih atas kunjungan Anda di Ngeblog-Bareng,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

Cara Membuat Atau Memodifikasi Label Blog Dengan Css3

Cara Membuat Atau Memodifikasi Label Blog Dengan Css3
Cara Membuat Atau Memodifikasi Label Blog Dengan Css3 - Assalamu'alaikum sahabat blogger semua.. apakabar mu hari ini.. semoga dalam keadaan baik-baik saja ya..??
Di kesempatan kali ini saya akan berbagi __Cara membuat atau memodifikasi label blog dengan css3__.
Dengan menggunakan **Cara Membuat atau memodifikasi label blog dengan css3** ini agar tampilan label pada blog kita kelihatan lebih bagus. Baiklah langsung saja kita simak __cara membuat atau memodifikasi label blog dengan css3__ berikut ini :
Silahkan masuk ke BLOGGER
Klik pada TEMPLATE dan EDIT HTML
Selanjutnya sobat cari kode ]]></b:skin> kalau sudah ketemu, lalu copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>


.label-size{
display: inline-block ;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight: bold ;
font-size:12px;
text-decoration:none;
}
.label-size{
  border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #
c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient
(bottom, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(bottom, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size:hover{
  background-color: #b7fa66;
background-image: linear-gradient
(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -moz-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -webkit-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
  background-image: -ms-linear-
gradient(top, #b7fa66 0%, #7ec940
100%);
}
.label-size:active{
  background-image: linear-gradient
(top, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(top, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}
.label-size:after{
  content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #
c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient
(135deg, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(135deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg);  /
* Saf3.1+, Chrome */
-moz-transform: rotate(45deg)
; /* FF3.5+ */
-ms-transform: rotate(45deg); /
* IE9 */
-o-transform: rotate(45deg);  /
* Opera 10.5 */
transform: rotate(45deg);
filter:
progid:DXImageTransform.Microsoft.Matrix
(/* IE6–IE9 */
M11=0.7071067811865476,
M12=-0.7071067811865475,
M21=0.7071067811865475,
M22=0.7071067811865476,
sizingMethod='auto expand');
zoom: 1;
}
.label-size:hover:after{
  background-color: #b7fa66;
background-image: linear-gradient
(-45deg, #b7fa66 0%, #7ec940 100%)
;
  background-image: -o-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -moz-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -webkit-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
background-image: -ms-linear-
gradient(-45deg, #b7fa66 0%, #
7ec940 100%);
}
.label-size:active:after{
  background-image: linear-gradient
(-45deg, rgb(125,196,64) 0%, rgb
(157,210,88) 100%);
background-image: -o-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -moz-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -webkit-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
background-image: -ms-linear-
gradient(-45deg, rgb(125,196,64) 0%,
rgb(157,210,88) 100%);
}
.label-size:before{
  content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient
(bottom, rgb(211,95,32) 0%, rgb
(223,131,45) 100%);
background-image: -o-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -moz-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -webkit-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
background-image: -ms-linear-
gradient(bottom, rgb(211,95,32) 0%,
rgb(223,131,45) 100%);
}
#Label1 {height:210px !important;}




Setelah itu simpan... dan lihatlah label pada blog sobat. Taraaaaa sudah berubah menjadi lebih bagus... hehehe Untuk demonya silahkan lihat label di homepage blog ini.
**NB** : saya mohon maaf jika penampilan scrip di atas kurang rapi. Tidak menggunakan kotak scrip, sepoiler dan lain-lain. Dikarenakan peralatan yang saya gunakan untuk posting agak susah bila di gunakan untuk post scrip..
Nah itulah  Cara Membuat Atau Memodifikasi Label Blog Dengan Css3 yang bisa saya bagika untuk sahabat blogger semua.. setelah beberapa hari bingung cara postingnya. Karena tidak bisa posting script. Hehehehe semoga bermanfaat untuk sahabat blogger semua..

Posted via Blogaway
Enter your email address to get update from Ngeblog-Bareng.
Print PDF
Next
« Prev Post
Previous
Next Post »

73 komentar

Kunjungan perdana sob... nyimak aja dulu. post yang bermanfaat..

Balas

Sob apa label ini juga bisa pake untuk SEO gak...??? soalnya ada beberapa blog yang sudah lama saya lihat tidak pasang widget label tapi Alexa Ranknya tetap ramping, makasih sebelumnya sob...

Balas

wah keren ini mas, saya paling seneng sama modif memodif ini,makasih mas

Balas

Oke mas, terimakasih kunjungannya ya..?

Balas

Label tidak ada hubungannya dengan seo mas.. label hanya untuk membantu pembaca dalam mencari categori yang mereka cari saja.. menurut artikel yang pernah saya baca, justru label jangan sampai terindex oleh google. Katanya sih kurang baik untuk seo..

Balas

keren ini mas.. Saya juga senen mas modifikasi tampilan blog.. Walau kadang melihat kode yang bikin kepala puyeng.. Hehe.. Nanti saya coba praktekin mas.. Trimakasih share mas nady.. :-)

kenapa tidak pake text area mas..

Balas

Sama sama mas muro'i. Sayang nya saya belum bebas posting script mas.. jadi belum bisa berbagi banyak tentang modifikasi blog.. hehehe

Balas

Waduh mas.. ini saja baru uji coba posting script, setelah kemarin beberapa cara saya terapkan tetep tidak bisa.. hehehe lain kali akan saya coba pake text area deh mas.. hehehe

Balas

Mas kira-kira ada yang lebih simple nggak ya...banyak banget lihat saja sudah mumet...dan masalahnya kalau sudah masuk kode mumet
oya untuk lebar sebuah blog yang bagus ukuran berapa???kemarin blog saya diperkecil kok agak aneh
makasih ya

Balas

Script nya saya bungkus dulu sob!kapan2 bisa di coba.trims!

Balas

Penampilan label jadi lebih keren ya mas,, siiiiiip langsung saja ke TKP...

Balas

Wah makin puyeng sama sama CSS kalau sudah begini mah

Balas

Wah label nya jadi tambah keren ya mas tampilannya. Tertata rapi dan tentunya bisa membuat pengunjung jadi terpesona. Tapi kok kode nya lumayan banyak juga ya mas hehehe :D
Izin praktek mas, soalnya penasaran saya hehee ^^

Balas

css panjang jg ya., cuma sayang sy gk pasang lebel.., makasih ya sob! *smile

Balas

Wah kalau ukuran yang pas saya kurang tau mbak.. mungkin 900 cukup lah mbak..
Oya ini nggak rumit kok mbak.. kodenya tinggal di paste di atas kode yang sudah saya jelaskan di atas dan save.. selesai deh...

Balas

Oke mas. Silahkan di bungkus deh mas.. pake bumbu apa tidak hehehe

Balas

ya wis ora papa mas.. Sabar ajah, smua psti ada jalan nya.. :-) sukses selalu mas, walau cuma menggunakan genggaman tangan tpi kita masih bisa berkarya.. Hehe..

Balas

Iya mas..biar nggak kelihatan asli bawaan blogger hehehe

Balas

Contohnya di hampage blog ini mas pri...?

Balas

Kalau puyeng minum bodrex dulu kang.. biar hilang punyengnya hehehehe

Balas

Hehe iya mbak, lumayan banyak kodenya.. silahkan di coba mbak. Biar nggak penasaran..

Balas

wah makasih nih mas, boleh dicoba triknya..saya juga seneng modif-modif gitu

Balas

Oke mas.. sama sama hehehe

Balas

aduhh mas,,, kalo udah berurusan sama edit HTML saya nyerah deh... T.T

Balas

Bener mas.. biarpun senjata kita hanya dengan hp jadul.. yang penting harus tetap semangat mas... hehehe

Balas

Wah silahkan di coba mas.. semoga berhasil ya modifikasinya..?

Balas

wahhh berarti kalo ininya diedit Label Postingannya Jadi Tambah Keren Yah mas ?? hehe Keren Nih Postingannya

Balas

wah jangan nyerah donk mas.. HTML nya sudah jinak kok hehehehe

Balas

Iya mas.. biar tidak kalah dengan blogger blogger yang blognya keren keren hehehe

Balas

Tapi lebih keren admin nya nih.. :-D

Balas

Sudah mulai nih Mas Nady ... hahaha Merambah menjadi Master ... :D Terimakasih mas tutorialnya :)

Balas

keren banget tapi kalau harus utik-utik menempatkan kode css nya aku ga pinter hehehe

Balas

thanks scripnya sob, tinggal pasang

Balas

waw kodenya panjang juga yah. ^^

Balas

Pastinya hasilnya jadi keren ya mas. haha

Balas

Wah yang saya cari-cari ketemu disini ternyata, scriptnya saya booking dulu ya mas...boleh kan...? boleh dong...boleh lah hehhee :D

Balas

cipok admin ah, biay agak rapi dikit code nya hehehehe

Balas

wah paling seneng kalo otak atik template :D besak saya coba mas kalo onlen di warnet :D

Balas

Hahaha master apa mas.. master amburadul ya..? Hehehe

Balas

Yah mas fevriyan malah ngomongin kangen kangenan... cipok dikit ah... ckckckckck

Balas

Terimakasih mas.. kalau keren berarti kayak admin nya donk mas.. hehehe

Balas

Wah kalau nggak pinter nggak jadi masalah mbak.. yang penting bisa hehehehe

Balas

Sama sama mas.. silahkan di pasang hehehe

Balas

Hehehe iya mas.. lumayan panjang script nya..

Balas

keren mas..kalau merubah warnanya gimana mas ? kan template mas nady hijau sedangkan template saya biru..gimana dooooooong...

Balas

Ya lumayan lah mas hasilnya.. biar kelihatan beda hehehe

Balas

mas nady memang keren dan pinter dalam hal mengoprek blog..
salam hormat kepada guru, angkat saya jadi muridmu guru..
sungkem ndlosor dulu ah.....

Balas

Boleh banget mas.. tapi Depe nya separuh harga ya..? Hehehehe

Balas

Wkwkwkwkwk.... asem. Posting script saja pusingnya minta ampun masbro.. ini saja masih untung bisa di terbitkan.. ckckckckck

Balas

Wah iya mas.. ini yang jadi masalah, karena saya tidak bisa memberi warna pada kode di postingan.. mas agus cari saja Background-color : dan ubahlah kode warnanya sesuai template mas agus..

Balas

Kalau untuk tingkat ini tidak perlu ke warnet mas.. ini saya pake hape bisa kok mas..?

Balas

Wah jangan sungkem ndlosor mas.. kan mas agus lebih tua an dari saya. Jadi seharusnya saya yang sungkem njentit sama mas agus.. ckckckckck

Balas

Tidak apa apa Sob kalau jika penampilan scrip di atas kurang rapi, yang penting bisa berbagi, Itu yang terpenting...

Balas

Saya sudah mencoba dan membuatnya mas, lumayan menarik.

Balas

Bisa lebih menghemat space di blog ya mas kalau tampilan label di buat seperti itu. Space yang tersisa bisa dipasang widget yang lainnya. Jadi blog semakin ringkas dan terlalu banyak widget. Good job mas nady :)

Balas

Syaa Setuju nih mas Warim hihi:D

Balas

Coba CSS nya di buat versi JS. javascript biar agak ringan terasa di blog... dan menempatkanya simple :) .. nice toolnya :D

Balas

Kodenya pajang...tapi sesuai sama hasilnya yg keren ya :)

Balas

Kodenya pajang...tapi sesuai sama hasilnya yg keren ya :)

Balas

Keren memang hasilnya.. tapi koq malah pusing kepala saya?? itu... kode kodean...

Balas

pengen sih ngedit blog tapi tugas kuliah numpuuuuuk

Balas

saya gk bisa liat labelnya sob, kayanya lagi maintenance yah blognya :D

Balas

udah mas.. Langsung Kecup kening nya ajah.. Wkwkwk

Balas

awas nanti kentut #tuuuuttt....

Balas

Nyimak dulu gan belum sempat ke warnet ni :D

Balas

Aku juga terpesona :p label ini fungsi utamanya untuk apa ya mas Nady?

Balas

awas ditunjeb linggis sama mas agus bg

Balas

Ada banyak juga kodenya ya Kang,saya lihat tutorial saja ini Kang :)

Balas

Peraturan Berkomentar :
1. Dilarang melampirkan link aktif
2. Dilarang menampilkan link nonaktif

Copyright © 2013. Ngeblog-Bareng - All Rights Reserved Template Created by Kompi Ajaib Proudly powered by Blogger