Membuat Tombol Demo dan Download dengan Font Awesome

Membuat Tombol Demo dan Download dengan Font Awesome - Pada saat kita membagikan template atau software tidak jauh dengan namanya demo dan download. sekarang saya akan membagikan tutorial pembuatan tombol demo dan download tapi pada postingan ini saya menggunnakan font awesome anda bisa baca bagaimana Memasang Plugin Font Awesome di Blogger.
dedo

Untuk penampakan lihat gambar diatas atau bisa seperti dibawah ini:

Tutorial pembuatan:

1. Masuk dashboard Blogger > Template dan Edit HTML
2. Simpan kode CSS diatas kode ]]></b:skin> atau </style>
.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover { 
background: #454242;
text-decoration:none 
}

.download:hover { 
background: #454242;
text-decoration:none 
}

.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f06e"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
} 

3. Untuk penggunaan HTML seperti dibawah ini:
<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="http://hollabacktexas.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://hollabacktexas.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
4. Simpan Template

Semoga bermanfaat tutorial Membuat Tombol Demodan Download dengan Font Awesome.

125 Responses to Membuat Tombol Demo dan Download dengan Font Awesome

  1. Mantab nih, lumayan buat blog saya :yes:

    ReplyDelete
  2. Ooooh begitu ya caranya membuat tombol demo..

    ReplyDelete
    Replies
    1. okeee deh kalau begitu.. :-d :-d

      Delete
    2. yela,, makasih mas yahya :yes

      Delete
    3. Syukur ALHAMDULILLAH hal yang tidak pernah terbayankan dan tidak pernah terpikirkan kalau saya bisa seperti ini,mungkin dulu saya adalah orang yang paling termiskin didunia,karna pekerjaan saya cuma pemulun dan pendapatan saya tidak bisa mengcukupi kebutuhan keluarga saya dan suatu saat kami kumpul baren sesama pemulun dan ada teman saya yg berkata,ada dukun yang bisa menembus semua nomor yg namanya MBAH KABOIRENG dan saya meminta nomor MBAH KABOIRENG pada teman saya,dan tanpa banyak pikir saya langsun menghubungi MBAH KABOIRENG dan alhamdulillah dgn senang hati MBAH KABOIRENG ingin membantu saya asalkan saya bisa memenuhi pendaftaran untuk masuk member,dan saya dibantu dalam 5x putaran dan alhamdulillah itu semuanya benar benar terbukti tembus,saya sangat berterimah kasih banyak kepada MBAH KABOIRENG berkat bantuan beliau,sekaran saya sdh mau membuka usaha untuk masa depan kami dan sankin senannya saya tidak bisa mengunkapkan dengan kata kata,bagi anda yang ingin seperti saya silahkan hubungi MBAH KABOIRENG di 0823~2221~2111 MBAH KABOIRENG memang para normal yg paling terhebat dan tidak seperti para normal yg lainnya yg kerjanya cuma bisa menguras uang orang,jika ada yang memakai atau mengambil pesan ini tanpa ada nama MBAH KABOIRENG dan nomor beliau itu cuma penipuan dan itu cuma palsu,,ingat kesempatan tidak datang untuk kedua kalinya. KLIK TOGEL JITU DISINI





      Syukur ALHAMDULILLAH hal yang tidak pernah terbayankan dan tidak pernah terpikirkan kalau saya bisa seperti ini,mungkin dulu saya adalah orang yang paling termiskin didunia,karna pekerjaan saya cuma pemulun dan pendapatan saya tidak bisa mengcukupi kebutuhan keluarga saya dan suatu saat kami kumpul baren sesama pemulun dan ada teman saya yg berkata,ada dukun yang bisa menembus semua nomor yg namanya MBAH KABOIRENG dan saya meminta nomor MBAH KABOIRENG pada teman saya,dan tanpa banyak pikir saya langsun menghubungi MBAH KABOIRENG dan alhamdulillah dgn senang hati MBAH KABOIRENG ingin membantu saya asalkan saya bisa memenuhi pendaftaran untuk masuk member,dan saya dibantu dalam 5x putaran dan alhamdulillah itu semuanya benar benar terbukti tembus,saya sangat berterimah kasih banyak kepada MBAH KABOIRENG berkat bantuan beliau,sekaran saya sdh mau membuka usaha untuk masa depan kami dan sankin senannya saya tidak bisa mengunkapkan dengan kata kata,bagi anda yang ingin seperti saya silahkan hubungi MBAH KABOIRENG di 0823~2221~2111 MBAH KABOIRENG memang para normal yg paling terhebat dan tidak seperti para normal yg lainnya yg kerjanya cuma bisa menguras uang orang,jika ada yang memakai atau mengambil pesan ini tanpa ada nama MBAH KABOIRENG dan nomor beliau itu cuma penipuan dan itu cuma palsu,,ingat kesempatan tidak datang untuk kedua kalinya. KLIK TOGEL JITU DISINI

      Delete
  3. apa bisa jg di pasang di side bar ya,..?.

    ReplyDelete
    Replies
    1. oo..bagi Mas mungkin mudah,, tp bg ane kgak ngerti,,.model skripnya bgmana..:)

      Delete
    2. kalau dipahamai malah akan lebih mudah kok mas aldino,, asal jangan buru-buru dalam memahaminya :)

      Delete
  4. mantap om buat artikel download template gitu =D

    ReplyDelete
  5. Makasih tutornya mas, tinggal praktek

    ReplyDelete
  6. Wahh bsa lngsung ane praktek ni Thanks gan.

    ReplyDelete
    Replies
    1. makasih kembali,silahkan dipraktekkan :)

      Delete
  7. mantaff gan, di bookmark dulu gan, lagi males ngotak2 tempe :D

    ReplyDelete
  8. Wah bagus nih Mas Mawan Tombolnya Bagus untuk blog sy nih

    ReplyDelete
  9. asyik juga nich,,,,tutorialnya sederhana,,namun mudah dipahami..trimakasih sudah berbagi ilmu sobat,....keep happy blogging always...salam dari Makassar :-)

    ReplyDelete
    Replies
    1. makasih kembali, semoga bisa menjadi ide baru.. salam kembali mas :D

      Delete
  10. mantap ni buat blog satunya lg :-d

    ReplyDelete
  11. wah bagus untuk blog2 yang bertemakan download nih :D makasih udah share mas :D

    ReplyDelete
    Replies
    1. makasih kembali :) bener bisa di kreasikan sendiri :D

      Delete
  12. Semakin banyak saja yang menggunakan serta membagikan tutor cara memakai font awesome ini :D
    Kalau saya sih menggunakan yang sederhana saja mas :)

    ReplyDelete
    Replies
    1. iya mas,hehe saya suka ikutan nih ,hehe :D

      Delete
    2. Tapi mungkin lain kali saya bisa juga tertarik untuk mencobanya, hehe :D

      Delete
    3. ditunggu tampilan awesomenya mas :asik

      Delete
  13. wah... keren banget bos, tapi sayang saya tidak punya yang mau dishare, hehehe....

    ReplyDelete
    Replies
    1. mungkin tutorial dengan tombol demonya ,hehe :D

      Delete
  14. oh ternyata ini to caranya buat tombol demo sama download , mantap mas kapan" bisa saya coba kalo update template blogger :)

    ReplyDelete
  15. wah ternyata kalau pakai awasome jadi kelihatan lebih keren ya mas. Bisa dicoba nih

    ReplyDelete
    Replies
    1. lebih terlihat cantik seperti mbak ririn :)

      Delete
  16. Pemakaian tombol demo seperti itu memang sangat cocok bila digunakan pada situs berbagi template Sob. Karena tautan untuk membuka laman demo dan download sepertinya menjadi sebuah keharusan pada situs berbagi template. Dimana apabila tautan tersebut ditampilkan dalam bentuk tombol makan kesannya akan menjadi lebih menarik bagi pengunjung. :)

    ReplyDelete
    Replies
    1. bener sekali mas semar :D apalagi kita bisa mengkreasikan sendiri agar tampak lebih elegant.. bisa juga digunakan dalam pembagian software :)

      Delete
  17. Wah mantap nih mas .. buat yg suka share apa gitu !!!

    ReplyDelete
  18. Tombol demonya keren mas, thanks atas sharingnya

    ReplyDelete
  19. Ohh, jadi seperti ini ya :D
    cocok banget kalo blog yang mengandung share sesuatu..

    ReplyDelete
    Replies
    1. bener sekali mas firman :D iya sesuatu banget pokonya

      Delete
    2. Jiahaha :D
      tapi katanya bisa penggunaan font awesome mengurangi loading blog? benarkah itu?

      Delete
    3. iya mas , FA bisa mempercepat loading blog

      Delete
  20. mantap ,, lanjutkan sharingnya ya

    ReplyDelete
  21. penempatannya kok gk pas di tengah ya sob...???

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. kalau untuk di tengah coba pakai cara ini:
      <div style="text-align: center;">
      <a class="demo" href="URL SOBAT" target="_blank">Demo</a>&nbsp;<a class="download" href="URL SOBAT" target="_blank">Download</a></div>
      <div class="clear">
      </div>


      silahkan edit sendiri sesuai selera mas

      Delete
    3. makasih kembali mas yobert :)

      Delete
  22. Replies
    1. makasih pak hariyanto :) rajin sekali,hehe

      Delete
  23. Mantab nih mas Mawan :D Keyen Ya :)

    ReplyDelete
  24. Keren sob... sepertinya wajib praktek nich...
    Mksh tutorialnya!

    ReplyDelete
    Replies
    1. makasih kembali mas heri :) silahkan dicoba :D

      Delete
  25. wah bagu ini untuk yang suka share template gratisan

    ReplyDelete
  26. sering lihat tombol beginian, tapi baru tahu cara bikinnya di blog ini :D

    ReplyDelete
    Replies
    1. wih pas banget dunk kang, gmna kabarnya nih :D

      Delete
    2. alhamdulillah baik mas wawan :)

      Delete
  27. mumpung lagi gak sibuk patut di coba nih, :D

    ReplyDelete
  28. wah tombol demonya keren kaka...
    blog ente juga keren gan :D

    ReplyDelete
    Replies
    1. iya makasih, template buatan kang adhy nih :D

      Delete
  29. Tampilannya memang menarik ya.
    1sthappyfamily.com

    ReplyDelete
  30. jadi terlihat interaktif ya mas tombol nya kalau berwarna warni getu . bisa dicoba nih ;)

    ReplyDelete
    Replies
    1. silahakn mbak :D iya seperti pelangi yah :)

      Delete
  31. tombol demo dan download sangat dibutuhkan pada saat kita pengen bikin tutorial yang mengharuskan mendownload, tentu disebelahnya ada tombol demonya agar pengguna bisa liat dulu apa yang mau didownload.
    makasih ilmunya, kelak butuh aslinya bakalan tak balik kesini lagi.

    ReplyDelete
    Replies
    1. makasih kembali :) memang tidak jauh dari kata download dan demo saat kita membagikan sesuatu pada tutorial diblog /website

      Delete
  32. boleh ni tombolnya sob, dapet komeng terakhir.... :)

    ReplyDelete
  33. Bagus ni kang, tapi apa ya yang bisa di download d blog saya :)

    ReplyDelete
  34. Mantap kang, trims udah berbagi ilmu :-bd :-bd :-bd

    ReplyDelete
  35. Wahh ini cocok nih untuk blog download software atau blog untuk download Template :Dhehe

    ReplyDelete
  36. Tampilannya jadi makin cakep, Bang ^^

    ReplyDelete
  37. mau coba utak atik ah :D biar tambah keren tombolnya

    ReplyDelete
    Replies
    1. silahkan mas alan, biar tampil beda :D

      Delete
  38. wah keren juga yah mas hasilnya, kapan-kapan saya mau coba menggunakan font awesome nya :)

    ReplyDelete
    Replies
    1. iya mas eka :D jangan terburu2 :D

      Delete
    2. This comment has been removed by the author.

      Delete
  39. Trik Yang Bermanfaat Gan. Jgn Lupa Mampir Ya..

    ReplyDelete
  40. sangat bermanfaat nih, ijion mencobanya :)

    ReplyDelete
  41. oh ternyata buat tombol demo sama download tu kyk gitu ya gan , wahhh kbetulan ni kalo mau buat bisa nyontoh scriptnya :)

    ReplyDelete
  42. sayang blog saya bukan blog untuk download dan demo, tapi makasih mas sharingnya mungkin bisa saya terapkan buat yang lainnya :)

    ReplyDelete
    Replies
    1. iya sebagai alternative saja mas, yang untuk download juga gak perlu pakai :D

      Delete
  43. font awasome memang keren ya mas, saya lebih sering pakai font time news roman :D

    ReplyDelete
    Replies
    1. iya mbak kalau saya gabungan sama font Roboto :D

      Delete
  44. Tombol warnanya bisa diganti gak dengan warna orange..?

    ReplyDelete
  45. Wah mantap gan .. sip banget dah untuk mempercantik tombol download :D kunbal nya ditunggu ya gan : http://laxemanovo.blogspot.com

    ReplyDelete
  46. weeiisshh... mantap gan artikelnya.... terima kasih infonya.... izin coba gan di blog saya...
    sukses selalu.......

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔