Breaking News
Loading...

Cara Membuat Button Demo dan Download Minimalis di Blog

4:01 AM
Cara Membuat Button Demo dan Download Minimalis di Blog , cara membuat button demo dan download warna warni di blog.
Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini, tutorialnya sih lumayan sulit bagi pemula seperti saya, hehe.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja. Demonya lihat tombol dibawah ini:
 
 
Cara Membuat Button Demo dan Download Minimalis di Blog
 
 
 
sTep/Langkah-langkah
Langsung saja ketutorial nya:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas ]]></b:skin>
 
/* Tombol Demo & Download ala Blog Krizeer
----------------------------------------------- */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px;
}
.download {
border: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;
}
.demo:hover {
background: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222;
}
.download:hover {
background: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222}

4. Masukan font Oswald di bawah <head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

5. Untuk menambahkan ikon disamping link button, tambahkan kode dibawah ini di atas </head>
<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

6. Simpan template
Untuk menggunakannya, lihat cara dibawah:
HTML:
<div style="text-align: center;"><ul class="kotak-demo-download"> <!-- Demo --> <li><a class="demo" href="http://pendidikanpusat.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li> <!-- Download --> <li><a class="download" href="http://pendidikanpusat.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li> </ul></div><div class="clear"></div>

 

 

 http://pendidikanpusat.blogspot.com/2013/12/cara-buat-recent-comment-dengan-avatar.htmlPesan PENULIS
 
Itu sedikit cara atau tutorial blog yang sempat saya bagikan dari blog Krizer. semoga artikel ini bermanfaat buat kalian semua.
Original Posted : Blog Krizeer

5 komentar:

  1. Balasan
    1. iya sob....saya lupa pasang linknya. nanti saya pasang kok linknya sob. Terima Kasih banyak yah udah berkunjung.

      Hapus
  2. Makasih gan visit back :)

    BalasHapus
    Balasan
    1. Oke gan Maksih kunjungannya...ditunggu kunjungan Baliknya yah !

      Hapus
  3. kog ane mah beda gan jadinya,, jadinya begini http://herul0488.blogspot.com/2015/07/deco-mag-responsive-magazine-blogger.html

    BalasHapus

 
Toggle Footer