Tombol Demo Dan Download Blog

• Live Demo

Cara membuat tombol Demo dan Download blogspot
Tutorial  membuat tombol Demo Download

Step 1: Css
Kode css berikut harus di letakan di atas </style> template blog, ingat di atas </style> bukan di atas ]]></b:skin>.
atau bisa juga dengan style baru di atas </head> seperti ini <style type='text/css'> Kode Disini </style>

/* CSS Shortcodes */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo {padding:10px 14px!important;background-color:#4791d2;color:#fff!important;font-weight:700;font-size:15px;font-family:&#39;Ruda&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:double #fff;transition:background-color 0.4s ease-out;}
.download {padding:10px 14px!important;background-color:#eea956;color:#fff!important;font-weight:700;font-size:15px;font-family:&#39;Ruda&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:double #fff;transition:background-color 0.4s ease-out;}
.demo:hover,.download:hover {background:#444;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;vertical-align:top;margin-right:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.first-letter{float:left;color:#4791d2;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}

Step 2: Css Font
Link kode css berikut di letakan di atas </head> template, jika sudah ada tidak perlu dilakukan, jika kode ini tidak di terapkan di dalam template maka icon tombol demo dan download tidak akan muncul.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 3: Penerapan
Terakhir penerapan di dalam posting blog seperti ini.
Penerapan tombol Demo dan Download

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://kampung-bodoh.blogspot.com" target="_blank">Live Demo</a></li>
</ul>
</div>
<div class="clear">
<br/>
<div style="text-align: center;">
<ul class="button">
<li><a class="download" href="http://kampung-bodoh.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">

Selesei dan simpan template blog sobat.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Tombol Demo Dan Download Blog. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.https://blogtuz.blogspot.com/2015/01/tombol-demo-dan-download-blog.html

• Share
• Share
• Share
• Share
• Share

✚

Related Post