Cara Membuat Tombol Demo dan Download pada Blog

Untuk kali ini kami akan menuliskan Cara Membuat Tombol Demo dan Download pada Blog.
To the Point langsung ke pembahasan judul postingan blog sekarang ini.

Apabila Template saudara belum menggunakan font awesome, silahkan kopas kode berikut di atas kode </head>
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Melangkah ke tutorial dan Silahkan kopas CSS berikut di atas kode ]]></b:skin>

/* CSS Button Style 1 by www.arlinadzgn.com */
.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}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Kemudian sobat menggunakan kode di bawah ini, tatkala menulis postingan blog yang akan di beri tombol demo dan download. Supaya Lebih Jelasnya, perhatikan gambar di bawah.
Cara Membuat Tombol Demo dan Download
Perhatikan Tulisan Compose dan HTML di atas. Ketika saudara sedang tahap menulis, lakukan seperti biasanya dan lebih baiknya dalam mode compose. Namun ketika tahap penulisan sudah pada kalimat atau link yang akan di beri tombol demo dan download, baru beralih pada mode HTML. Sudah paham yang pastinya kan ?.
Kami kira saudara sudah paham, dan sekali lagi letakkan kode di bawah dalam mode HTML.

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://caradailku.blogspot.com/2017/01/baca-cara-simpel-membuat-tombol-demo-dan-download-pada-blog.html" target="_blank">Demo</a></li>
    <li><a class="download" href="http://caradailku.blogspot.com/2017/01/baca-cara-simpel-membuat-tombol-demo-dan-download-pada-blog.html" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>
INGAT INGAT INGAAAAATTTTT : GANTI   http://caradailku.blogspot.com/2017/01/baca-cara-simpel-membuat-tombol-demo-dan-download-pada-blog.html , dengan link atau url tujuan saudara.

Salah Satu Kegunaan Tombol Demo dan Download di atas.

Kita atau saudara mungkin sering menjumpai blog yang menyediakan tombol demo dan download yang begitu keren seperti blognya mba ar lina. Mungkin sebab itu, saudara mencari tutorial yang sedang saudara baca saat ini. Jujur aja yea saudaraku, dalam lubuk hati terdalam kami, sebenarnya merasa kagum dengan mereka yang sangat pandai berkreasi dalam blognya. 

Ada yang kedudukannya mengedit template kemudian di bagikan sesama blogger baru seperti kami, bahkan ada juga yang pekerjaan membuat template blog. Mereka berkarya, dan apakah kita termasuk orang yang mempunyai karya apabila mencari tutorial di google kemudian dipraktekkan pengetahuan yang telah kita timba dari google itu, ?
Kalau menurut kami pribadi, itu juga termasuk berkarya tapi lebih dekat yaitu kreatif. Kenapa seorang yang mencari tips dan trik dimanapun semisal di google, kok kami katakan kreatif, ?
Sebelum kami menjawabnya, mari kita pelajari ataupun mengetahui arti kreatif. Pengertian kreatif dalam KBBI adalah memilki kemampuan untuk menciptakan.

Sekarang kami mulai menjawab kenapa seorang yang mencari tips adalah orang yang kreatif, itu karena orang tersebut bisa merasakan hasil pencariannya, dan secara otomatis tatkala kita mampu merasakan sesuatu, bisa diartikan sesuatu itu adalah perkara yang ada. Kemudian perkara yang ada, arti lainnya adalah sesuatu yang diciptakan, dan tidak mungkin perkara yang diciptakan tanpa adanya yang menciptakan. Jadi bisa ditarik kesimpulan "Orang Kreatif adalah menciptakan sesuatu meskipun perkara yang diciptakan bukan murni karya sendiri". Bagaimana , ? Jadi perbedaan antara kreatif dan berkarya itu sangat tipis. Karya adalah mengarang, dan kreatif adalah mencari karangan.

APAKAH SAUDARA PERNAH PINGIN MENCIPTAKAN SESUATU, NAMUN ADA KENDALA ?
Kalau kami pernah ada kendala saat ingin menciptakan sesuatu yang berupa edit dan mengedit template blog. Kendala tersebut adalah kekurangan fasilitas komputer.
Memang tidak perlu dipungkiri lagi, terkadang, bahkan sangat sering terlaku apabila seseorang sudah berhasil atau merasakan sesuatu yang diharapkan, kemudian kurang dan cari yang lainnya. Sama dengan kami yang dahulu kala sempat mencari cara mengedit template blog dengan android, dan alhamdulillah berhasil.

Kang Mursid crewet banget sih ? Langsung aja kang, Apa Kegunaannya tombol demo dan download seperti di tutorial ini ?
Untuk kegunaannya adalah sebagai alat mempermudah pengunjung blog untuk melihat contoh terlebih dahulu, kemudian kalau merasa cocok baru di download deh. Ada kegunaannya lagi dengan tombol demo dan download di atas adalah tampilannya begitu gagah, cantik, keren, dan masih banyak lagi.

Tombol Demo dan Download di atas harus menggunakan font awesome.

Sekarang membahas apa sih font awesome dan apa manfaatnya, ?
Font awesome adalah sebagian dari beberapa icon yang begitu sangat keren namun yang membedakan dari icon font awesome adalah, biasanya menggunakan kode atau script semisal fa fa-user, fa fa-author, fa fa-home dan masih banyak lagi. Namun icon seperti yang kami contohkan di atas, tidak akan berfungsi apabila tanpa adanya script atau html seperti yang telah diungkapkan paling atas. Contoh html font awesome juga sudah ada di paling awal pembahasan membuat demo dan download.

Sekiranya kami cukupkan kaitan pemasangan atau Cara Membuat Tombol Demo dan Download ,dan semoga sangat berkah. Cara pada blog ini, kami ambil dari kode mb arlina.
0 Komentar untuk "bagaimana Cara Membuat Tombol Demo dan Download pada Blog"

Terima Kritik dan Saran..tapi ingat, jangan spam yeah ?
Terimakasih