Komunikasi Praktis
  • HOME
  • Jurnalistik
  • Media
  • Humas
  • Speaking
  • Blogging
    • Templates
    • Tips SEO
    • AdSense
    • Posting
  • Komunikasi
  • About
  • Kontak
  • Sitemap
  • Disclaimer
  • Iklan
Home Komunikasi Blog Mempercantik Tampilan Cloud Label untuk Blogger

Mempercantik Tampilan Cloud Label untuk Blogger

BATIC Media Komunikasi Praktis BATIC Media
August 21, 2015
BATIC Media Follow @romel_tea
BATIC Media

Baca Juga


Cloud Label untuk Blogger
MEMPERINDAH desan tampilan widget Daftar Label/Kategori Cloud (awan label) blogger berguna untuk membuat blog lebih menarik alias enak dipandang.

Widget Label posting blog sendiri berguna sebagai navigasi menu sekaligus internal link untuk meningkatkan pageviews dan index database konten blog di mesin pencari Google.

Lihat DEMO

Berikut ini kode-kode untuk mempercantik tapilan Cloud Label untuk Blogger.

LANGKAH 1: Pasang Widget Label
1. Layout > Add a Gadget > Label
2. Pilih "Cloud" dan pilih  label yang akan ditampilkan (jika tidak semua ditampilkan)
3. Save!

LANGKAH 2: Masukkan Kode
1. Template > Edit HTML
2. Pilih dan Masukkan (Copy & Paste) salah satu kode berikut ini di atas kode ]]</b:skin> atau di jajaran kode CSS lainnya.

KODE WARNA-WARNI

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }
.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;}
.sidebar .label-size-1 a:hover {background:#BC761A;}
.sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}



KODE HITAM/PUTIH
(Tampilan Seperti di Demo atau Gambar Ilustrasi di Atas)

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

.label-size:hover {
border:1px solid #6BB5FF;
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;
}

Kode Mempercantik Tampilan Cloud Label untuk Blogger ini diambil dari  The Blogger Guide. (http://www.komunikasipraktis.com/).*

Thanks for reading Mempercantik Tampilan Cloud Label untuk Blogger | Tags: Blogging Desain Blog Komunikasi Blog

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

3 komentar on Mempercantik Tampilan Cloud Label untuk Blogger

  1. Rauhun IsnainiJanuary 16, 2017

    Terima kasih saya sudah berhasil menerapkan cara mempercantik tampilan cloud label pada blogger.

    ReplyDelete
    Replies
    1. Komunikasi PraktisJanuary 30, 2017

      Sama-sama, semoga konten dan jumlah pengunjungnya juga jadi cantik ya :)

      Delete
      Replies
        Reply
    2. Reply
  2. sofyan Ya-anOctober 20, 2018

    keren

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Subscribe to: Post Comments (Atom)

Recent Posts

Popular Posts

  • Contoh Naskah Pembukaan oleh Pembawa Acara (MC)
  • Cara Menjadi Pembawa Acara (MC) yang Baik
  • Karya Tulis Ilmiah: Pengertian, Karakteristik, dan Jenis-Jenis
  • Contoh Naskah MC (Pemandu Acara) untuk Acara Agustusan
  • Teknik Debat dan Cara Berdebat yang Baik
  • Daftar Kata Baku – Tidak Baku Bahasa Indonesia
  • Pengertian Literasi Secara Bahasa dan Istilah
  • Jurnalisme Kuning Jadi Trend Situs Berita
  • Contoh Script Opening Siaran Radio
  • Arti dan Asal-Usul Teks Lorem Ipsum Dolor Sit Amet

Info Bola & MotoGP

Domain & Hosting

Hosting Unlimited Indonesia

Categories

Bahasa Blogging Feature Fotografi Google Adsense Humas Internet Jurnalistik Kode Etik Komunikasi Media Media Massa Menulis Pers Podcast Presentasi Press Release Public Speaking Radio Teknik MC Teknik Presentasi Tenik MC Tips SEO Wartawan Website

About

Komunikasi Praktis adalah blog tentang keterampilan komunikasi: jurnalistik, media massa, kepenulisan, public speaking, mc, siaran radio, presentasi, humas, public relations, blogging, podcasting, dll.

Web Partners

  • Romeltea Online
  • Romeltea Media
  • Contoh Blog
  • Katalisnet
  • Median Sport

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Copyright © Komunikasi Praktis. All rights reserved