11 Modifikasi Tampilan Widget Label Cloud Style 6

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

Label Syle 5Bismillah, postingan ini adalah tutorial request dari  admin blog Warna Warni Wawasan. Sebenarnya banyak request tutorial pengunjung blog yang baru sempat terbaca beberapa waktu belakangan semenjak aktif kembali blogging dikolom-kolom komentar blog ini. Ini disebabkan karena sebelumnya sempat fakum setahun kurang lebih dari dunia blogging pasca pulangnya saya dari negeri rantau Madinah Arab Saudi. Jadi sedikit bingung mau mendahulukan request dari siapa, akhirnya saya putuskan untuk menanggapi yang terbaru dulu karena mungkin yang dahulu pernah request tutorial tertentu sudah menemukan apa yang dicarinya pada blog lain.

Baiklah kita lanjut, yang menjadi pertanyaannya adalah cara memodifikasi tampilan label cloud blogger seperti diblog ini yang menggunakan efek hover animasi bergerak. Sebelumnya sudah saya jawab komentar pertanyaannya pada postingan dimana ia meninggalkan jejak pertanyaan tersebut. Yang menjadi magic modifikasi dari tampilan widget default label cloud blogger ini adalah bagaimana kita bermain CSS. Jadi untuk styles widget label cloud tidak akan terbatas jumlahnya sampai pada style ke 6 postingan ini misalnya. Banyaknya style yang bisa kita hasilkan tergantung seberapa besar kreatifitas kita.

Saya kira cukup untuk penjelasan, sekarang kita melangkah pada tahapan modifikasi tampilan label cloud blogger.

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

1. Setelah sign ini ke akun blogger anda,

2. pada dasbor, masuk menu Template >> Edit HTML >> Proceed

3. Tambahkan kode CSS berikut sebelum kode ]]></b:skin>

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #6BB5FF; background:transparent; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666;}

.label-size:hover { border:1px solid #6BB5FF; background:transparent; text-decoration: none;-moz-transition: all 0.5s ease-out;  -o-transition: all 0.5s ease-out;  -webkit-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;  transition: all 0.5s ease-out; -moz-transform: rotate(7deg);  -o-transform: rotate(7deg);  -webkit-transform: rotate(7deg);  -ms-transform: rotate(7deg);  transform: rotate(7deg);  filter: progid:DXImageTransform.Microsoft.Matrix(  M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1;  }

.label-size a  { text-transform: uppercase; float:left; text-decoration: none; }

.label-size a:hover  { text-decoration: none; }

CATATAN: Pada tulisan yang berwarna biru adalah kode dimana anda bisa mengganti warna border (garis yang mengelilingi label) dan background (latar warna label) agar sesuai dengan tema atau desain blog anda.

Hasil dari tutorial diatas tampilan label cloud dengan border biru dan background transparent. Misalnya anda ganti kode label diatas dengan: border: solid 1px #CCC; background:#888888; dan hover (bidang saat tersentuh mouse pointer) dengan border:1px solid #CCC; background#d4d4d4; Maka hasil widget label clound anda akan seperti screen shoot berikut:

Label Cloud.

Untuk tool kode warna anda bisa lihat disini, setiap anda mengganti kode warna anda bisa klik preview atau pratinjau untuk melihat hasil editan sementara sebelum kemudian anda menyimpannya.

4. Kalau menurut anda tampilan widget label cloud diblog anda sudah pas dengan desain blog anda, Jangan lupa simpan template dan lihat hasilnya diblog anda.

Efek hover animasi dari kode diatas bertenaga CSS3 transisi dan trasform, jika ingin membuat efek hover link nudging pada tabel dengan tenaga JQuery silahkan lihat tutorialnya disini, ada juga efek hover link nudging dengan CSS3 silahkan cek disini.

Semoga bermanfaat dan terimakasih atas apresiasi 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

11 komentar :

  1. Hallo kk, coba lihat blog ku ya, semua fitur dari kakak kok, serius nih

    BalasHapus
    Balasan
    1. Terimaksh tuk kunjungan dan apresiasinya.

      Hapus
  2. halo kk ada cara untuk membuat daftar isi blog gk ya??
    thanks

    BalasHapus
    Balasan
    1. Belum smpat posting tp bisa di search aja dl digoogle, pasti sdh bnyk yg mmbhs. Ada ksmpatan insyaAllah anaa jg akn mmbuat tutorialx. Terimaksh tuk apresiasinya.

      Hapus
  3. Assalamualaikum. Terima kasih karena sudah memenuhi request saya. Sungguh sangat berharga kode ini, karena sulit mencarinya di google. Saya tidak akan berfikir 2 kali untuk menggunakannya. Thanks for your visit. Salam sehat dan sukses selalu. Makin kreatif dan produktif. :-)

    BalasHapus
    Balasan
    1. Wa'alaikumusslm warahmatullah. Sama-sama, trimaksh jg tuk apresiasinya.

      Hapus
  4. gan maU nanya nih...!!say sudah coba, tidak ada perubahan...

    BalasHapus
    Balasan
    1. Jangan terburu2 gan, follow step by step tutorial diats, pastikan sdh ada widget label default blogger dengan tampilan cloud diblog anda. Penambahan CSS diats hanya untuk modifikasi tampilan.

      Terimakasih.

      Hapus
  5. Thanks sob, akhirnya ketemu jg yang aku cari

    BalasHapus
  6. makasih yah mba :) suka banget sama tampilannya ^^ (k)

    BalasHapus
  7. mantap gan kunjungi juga blog saya ya http://prediksibola888.blogspot.com/

    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!