Cara pasang widget kode warna pada template galery blog

Hallo sobat, untuk kali ini saya akan memberikan tutorial cara membuat widget kode warna dan biasanya dipakain untuk blog yang menyajikan galeri template, silahkan disimak caranya

1. Masukkan kode css di bawah ini, di atas  kode </style>  atau di bawah kode   
<![CDATA[

/*color button*/
.tcp {display: inline-block;}
.avia-button.avia-size-small { font-size: 13px; min-width:95px; padding: 10px 10px 10px;}
.avia-button.tulip {display: block; float: left;}
body div .avia-button { border-bottom-style: solid; border-bottom-width: 1px; border-radius: 3px; display: inline-block; font-size: 12px; font-weight: normal; line-height: 1.2em; margin: 3px 0; max-width: 100%; padding: 10px; position: relative; text-align: center;text-decoration: none;}

2. Selanjutnya sobat tinggal pasang kode di bawah ini dalam widget sobat ⇒HTML/javaScript widget

<center>
<div class="tcp tulip"><a style="background-color:#000000; border-color:#000000; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Black?&amp;max-results=12"><span class="avia_iconbox_title">Black</span></a></div>
<div class="tcp tulip"><a style="background-color:#0000ff; border-color:#0000ff; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Blue?&amp;max-results=12"><span class="avia_iconbox_title">Blue</span></a></div>
<div class="tcp tulip"><a style="background-color:#A52A2A; border-color:#A52A2A; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Brown?&amp;max-results=12"><span class="avia_iconbox_title">Brown</span></a></div>
<div class="tcp tulip"><a style="background-color:#008000; border-color:#008000; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Green?&amp;max-results=12"><span class="avia_iconbox_title">Green</span></a></div>
<div class="tcp tulip"><a style="background-color:#FFA500; border-color:#FFA500; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Orange?&amp;max-results=12"><span class="avia_iconbox_title">Orange</span></a></div>
<div class="tcp tulip"><a style="background-color:#FF0000; border-color:#FF0000; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Red?&amp;max-results=12"><span class="avia_iconbox_title">Red</span></a></div>
<div class="tcp tulip"><a style="background-color:#C0C0C0; border-color:#C0C0C0; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Silver?&amp;max-results=12"><span class="avia_iconbox_title">Silver</span></a></div>
<div class="tcp tulip"><a style="background-color:#FFFFFF; border-color:#FFFFFF; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/White?&amp;max-results=12"><span class="avia_iconbox_title"><span style="color: #000000;">White</span></span></a></div>
<div class="tcp tulip"><a style="background-color:#808080; border-color:#808080; color:#ffffff; " class="avia-button avia-icon_select-no avia-color-custom avia-size-small avia-position-left " href="https://rebontheme.blogspot.co.id/search/label/Gray?&amp;max-results=12"><span class="avia_iconbox_title">Gray</span></a></div>
</center>

3. Save...dan lihat hasilnya..! Mudah bukan..Selamat mencoba

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts