Merubah Label di Blog Menjadi Lebih Menarik

Merubah Label di Blog Menjadi Lebih Menarik

Merubah Label di Blog Menjadi Lebih Menarik

Merubah Label di Blog Menjadi Lebih Menarik

Label / kategori adalah salah satu navigasi untuk mempermudah pengunjung blog untuk mencari tulisan yang diinginkannya, dengan label / kategori default dari blogspot rasanya kurang menarik, terus bagaimana cara merubahnya ? Simak dibawah ini ya...

Setelah mendarat di dashboard klik tata letak kemudian tambahkan label, untuk pengaturannya lihat gambar dibawah ini !

Label


selanjutnya klik save kemudian masuk ke template >> edit HTML lalu temukan kode ]]></b:skin> atau </style> dan pastekan kode dibawah ini diatas kode ]]></b:skin> atau </style>

.Label a {
  border-radius:5px;
  float:left;
  padding:5px 8px;
  margin:3px 3px 0 0;
  background:rgb(0,100,180);
  background:-moz-linear-gradient(top,rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,100,180,1)),color-stop(100%,rgba(20,60,100,1)));
  background:-webkit-linear-gradient(top,rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
  background:-o-linear-gradient(top,rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
  background:-ms-linear-gradient(top,rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
  background:linear-gradient(top,rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4',endColorstr='#123d60',GradientType=0 );
  display:inline-block;
  border:1px solid #005ca6;
  padding:0 8px;
  color:#fff !important;
  height:28px;
  line-height:28px;
  text-transform:capitalize;
  text-decoration:none;
  float:left;
  margin-top:5px;
  font-size:14px;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -o-transition:all .4s ease-in-out;
  -ms-transition:all .4s ease-in-out;
  transition:all .4s ease-in-out;
  text-shadow:0 -1px -1px rgba(0,0,0,0.2);
}

.Label a:hover {
  color:#0afafa !important;
  background:#123d60;
}


Simpan template jika selesai



Untuk warna silahkan berkreasi sendiri

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×