Cara Membuat Tombol Demo dan Download ala Blog Krizeer

Cara Membuat Button Demo dan Download ala Blog Krizeer Keren 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:

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://yoga-tc.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li>
<!-- Download -->
<li><a class="download" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Untuk lebih lengkapnya/lebih jelasnya tentang font awsome silahkan masuk ke: http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Cara Membuat Tombol Demo dan Download ala Blog Krizeer Keren di Blog

35 komentar untuk "Cara Membuat Tombol Demo dan Download ala Blog Krizeer"

  1. Mau nanya nih sob...bagaimana caranya agar bacground homepage berbeda dengan halaman postingan seperti di blog ini sob???

    BalasHapus
    Balasan
    1. Maksud sobat warna background diluar wrapper, atau didalam wrappper?
      1. Tambahkan kode dibawah ini dibawah ]]></b:skin>
      <style>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      body, .body-fauxcolumn-outer {
      background: #273e4c;
      }
      </b:if></b:if></style>

      Hapus
    2. maksudnya yang diluar wrapper sob....pusing nih. gag tau caranya.

      Hapus
    3. cara di atas itu yg diluar wrapper, nah sobat ingin berbeda warna backgroundnya pada bagian homepage apa di dalam postingan ?, coba sobat jelaskan satu persatu pada bagian mana yg ingin beda warna backgroundnya, dan pada halaman apa ingin berbeda warna backgroundnya

      Hapus
  2. Balasan
    1. silahkan sob, tapi harus dikasih sumber yg menuji ke blog ini !!

      Hapus
    2. Link sumbernya sudah saya pasang sob silahkan dicheck sendiri.

      Hapus
  3. Balasan
    1. sama-sama gan, blog sobat seperti PULSK wow

      Hapus
  4. gan, kode biar bikin post komentar kayak punya agan ini gimana?

    BalasHapus
    Balasan
    1. nanti saya buat postingaanya, ditunggu aja ya xV

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. Apasih Maksudnya nih Nabilah Ratna Ayu ?

      Hapus
    2. itu akun saya yg satunya, akun Nabilah Ratna Ayu hanya untuk blog demo template blogger saja, jadi saya salah akun, hehe xV

      Hapus
  6. Banner 468x60 telah terpasang di header...
    Mohon kerjasamanya :D

    http://gilang-cyber4rt.blogspot.com

    BalasHapus
    Balasan
    1. Banner sobat ukuran 468x60 sukses terpasang di header, trimakasih atas kerjasamanya, semoga blog sobat makin sukses :-d

      Hapus
    2. Maaf mas Yoga...Saya cuman baru belajar mas nanti saya rubah kok design blognya...tapi blog ini sya ambil dari webnya.

      Template Info
      - Name : Faster Clean White
      - Author : Riyono
      - URL : http://art-preview.blogspot.com/
      - G+ : https://plus.google.com/102378255170044980225
      - License : http://creativecommons.org/licenses/by/3.0/

      mohon Maaf kalau ada sedikit kesamaan yah mas. saya hanya masih tahap belajar. Makasih sob Kalau bisa Mengerti.

      Hapus
    3. template original blog ini Faster Clean White tapi template tersebut sudah saya design ulang, jadi 100% berbeda dengan yang aslinya, sebagai blogger yang baik mohon cantumkan credit pembuat templatenya :W

      Hapus
    4. Iya Mas saya tau kok tapi ini juga saya sudah ubah-ubah kok agar terlihat berbeda dari aslinya. jadi mohon kerja samanya yah sob. sama-sama belajar sob :-d

      Hapus
    5. kalo yang sama nya cuman 1-2 gpp, tapi kalo yang ini 100% sama x@

      Hapus
  7. iya sob saya sudah Rubah kok sob Backgroundnya. dan menu navigasinya sob....terus menusharingnya juga masih sesuai asalnya sob. :(

    BalasHapus
  8. Maaf Sob tidak 100% sama. Coba diperhatikan Menu navigasi, Footer saya tidak hilangkan kotak widgetnya, menu searchnya juga beda kok. cuman yang sam itu menu komentar sama bacground postingannya sob..

    BalasHapus
  9. sekali lagi mohon maaf sob...saya cuman ingin berteman dan saling berbagi sob..maaf atas gangguannya yah sob

    BalasHapus
    Balasan
    1. oke saya maafkan, saya hargai sobat sudah berani mengungkapkan dan meminta izin kepada saya atas kesamaan template yang sobat pakai, saya juga minta maaf sob jika saya punya salah sama sobat :D

      Hapus
  10. ikonnya kok nggak muncul kang, aku juga udah baca di tutornya kang ismet tapi juga belum muncul :(

    BalasHapus
  11. Min.Kok Icon Awesome Nya Gk Muncul Ya??

    BalasHapus
  12. kunjungi blogku gan. http://www.sharereyhan.blogspot.com

    BalasHapus
  13. alhamdulillah sukses. Makasih ya gan :)

    BalasHapus
  14. sanagt cocok buat blog ane nih tombol downloadnya

    BalasHapus
  15. hi admin yang ganteng <3 aQ mau bikin blog yang bagus di Blog Tips

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

    BalasHapus
  17. I am terribly happy to scan this. this is often the sort of manual that must be and not the random info that is at the opposite blogs. Appreciate your sharing this best posting. bolatangkasgratis.com

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top