14 Modifikasi Tampilan Widget Label Style 5

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Label Style 5Alhamdulillah dapat hadir kembali dengan tutorial dan trik blog sederhana cara memodifikasi tampilan widget label blogger menjadi dua kolom dengan style transparent background. Tentunya masih dengan bantuan CSS3.

Ini adalah style ke lima dari modifikasi tampilan cloud widget label blogger, jadi sebelum anda memastikan untuk menggunakan atau memasang widget label ini ke blog anda, mungkin anda bisa mengecek terlebih dahulu modifikasi tampilan lain dari widget label blogger yang sudah saya posting diblog ini.

Nah jika tertarik untuk menambahkan widget label blog ini silahkan ikuti langkah-langkah berikut:

Sebelumnya, pastikan pada blog anda sudah terpasang widget label dengan tampilan cloud. Lanjut…

1. Login ke blog anda

2. Pada dasbor klik Template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

.label-size {

position: relative;

float:left

}

.label-size::before {

content: ' ';width: 0;

height: 0;top: 2px;

position: absolute;

right: -4px;

border: 14px solid transparent;

border-left-color: #DDD

}

.label-size a{

float: left;

font-size: 14px;

padding: 5px 10px;

background: white;

margin: 3px 24px 15px 1px;

position: relative;

width:108px;

outline: 1px solid #DDD;

color: #222

}

.label-size a::before {

content: ' ';

width: 0;

height: 0;

top: 0;

position: absolute;

right: -26px;

border: 13px solid transparent;

border-left-color: white

}

.label-size a::after {

content: ' ';

position: absolute;

background: #F6F6F6;

border-radius: 10px;

height: 10px;

right: -1px;top: 7px;

width: 10px;

border: 1px solid #DDD

}

.label-size a:hover {

color:#5D73B5; !important

}

Kode atau tulisan berwarna merah sesuaikan dengan lebar sidebar blog anda

4. Simpan template dan  lihat hasilnya diblog anda.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

14 komentar :

  1. Alhamdulillah, sudah ada lagi tutorial yg baru. Saya akan langsung mencobanya, karena modifikasi widgt label yg saya pakai sebelumnya, warnanya kontras dg background blog saya. Bagi pengunjung yg ingin lihat hasilnya, bisa kunjungi. http://www.warnawarniwawasan.net/ :-)
    Oya, bagaimana caranya buat label bisa bergerak seperti label yang ada di blog ini. Terima kasih. Sehat dan Sukses selalu ya Amatullah..

    BalasHapus
    Balasan
    1. Memodifikasi tampilan label cloud blogger agar bisa sesuai dengan tema atau background blog kita atau agar bisa memiliki efek hover seperti pada blog ini sebenarnya tinggal permainan CSS saja. Rubah kode warna pada backgroundx dan untuk efek tinggal nambah kode CSS3 transisinya. Klu blm ngerti nanti ya diposting lagi requestx, pdhl yg kmrn sj blm smpat diposting requestx. InsyaAllah bertahap ya!

      Amiin, smg demikian jg dgn anda dan treimaksh tuk apresiasinya.

      Hapus
  2. wah boleh juga nih tipsnya...
    jangan lupa mampir gan!

    BalasHapus
    Balasan
    1. Iya silahkan dicoba dan terimaksh tuk kunjunganx, insyaAllah nanti anaa akn mampir jg ke blog anda.

      Hapus
  3. Wah OK banget,,, makasih sudah berbagi...

    BalasHapus
    Balasan
    1. Sama-sama, thanks juga apresiasinya adelia.

      Hapus
  4. Balasan
    1. Lebih keren dari modifikasi tampilan label cloud yg lain mksdx? ya trgantung selera masing2lh. Thanks apresiasinya.

      Hapus
  5. Oh iya kenapa setiap salah satu Label di klik , Label activenya langsung berubah/berantakan..
    ada solusi kah ?? @-)

    BalasHapus
  6. kalo sidebarnya tidak lebar apakah masih bisa digunakan, saya pernah nyoba tapi tidak berhasil, jadi tidak saya pakai :-?

    BalasHapus
  7. udah lama nih ga hadir..
    absen dulu ah :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!