Button Demo Download Style Sederhana

Button Demo Download Style Sederhana

Assalamualaikum warahmatullahi wabarakatuh.

Apa kabar semua sahabat bloggingku yang tercinta semoga anda baik dan sehat semua. tidak ada yang bisa saya hadirkan hanyalah ucapan doa agar anda mastah-mastah blogging dan teman online lainya selalu sukses dalam segala aktivitas dan rutinitas nya. Setelah kemarin saya bagikan sebuah info : Blogger Bisa di Buka HP Java Symbian.  Pada post berikut ini saya penuhi salah satu reques sahabat blogging saya yang identitas nya tidak mau disebutkan. Bagi saya tak masalh kiranya saya bisa membantu dan berbagi akan saya penuhi namun jika di luar kemampuan saya mungkin tidak akan saya penuhi. Seperti yang saya tulis pada judul artikel ini, Saya binggung awalnya mau kasih judul apa artikel ini. Namun lebih relevant nya saya kasih title saja "Button Demo Download Style Sederhana" Biar sesuai dengan tampilanya nanti style yang sederhana asalkan ringan untuk blog juga responsive past lebih friendly. Dan pastinya sudah lolos dari validasi HTML 5 dan CSS 3. Bagi sahabat lain yang berminat dengan senang hati di persilahkan mencoba tutorial ini dengan seksama.

Baca juga artikel lainya :   Acessories Blog

Button Download h3 :

Biasanya buton Demo atau Download pada artikel yang di khusus kan dalam kontenya dengan tayangan Demo untuk melihat hasil tutorial sebelumnya. Dan button Download untuk menawarkan pengunjung untuk mengambil konten yang di share nya. Banyak sekali sebetulnya sobat blogging yang lain yang memposting artikel seperti ini. Namun pada post ini saya akan berbagi button demo atau download dengan kemasan dan tulisan sendiri dan bisa di sebut ala saya. Tampilanya yang sederhana ini sengaja saya desain agar lebih ramah di pada semua browser, lebihnya lagi pada perangkat handphone. Karena sejatinya tempalte yang seo dan responsive tidak terlalu menuntut dengan desain yang meah dan berlebihan.

Button Untuk Demo dan Download :

Biasanya button ini hanya di gunakan untuk berbagi template atau berbagi konten yang di download saja. Selebihnya mungkin anda lebih paham untuk apa button ini di gunakan. Walaupun tanpa menggunakan button ini sebenarnya untuk demo dan download pada suatu artikel bisa saja dengan memasang link demo juga downloadnya. namun kesanya sangat biasa karena dibeberapa blog dan situ terkemuka hampir menggunakan link download dengan berbagai varian, Maka jika anda berminat menggunakan link demo atau download anda di hiasi dengan desain button ini silahkan untuk di coba atau di pasang pada blog anda.

Cara memasang Button Demo dan Download :

Pertama buka dashboard blog anda dan masuk account google nya. Selanjutnya pilih template, pilih edite template temukan kode : ]]></b:skin> atau kode : </style> Tekan pada keyboard anda Ctr + F untuk memudahkan pencarianya. Setelah ketemu copy kode di bawah ini, Dan paste kan tepat di atas kode : ]]></b:skin> atau kode : </style> save/simpan template anda pada tahap 1 ini.

/* Button Blog Karrysta
----------------------------------------------- */
.buttonx{display:inline-flex;cursor:pointer;font-size:17px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#fff!important;border:2px solid #ff1941!important;background-color:#8a2be2!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}

Cara menggunakan Button Demo atau Download :
Setelah anda menyimpan kode CSS diatas pada bagian Html template anda. Selanjutnya cara menggunakan button demo atau Download nya pada halaman posting anda. Copy Kode HTML dibawah ini dan paste kan di artikel baru anda. Ingat memasukan kodenya pada mode HTML jangan pada mode compose. Silahkan di bawah ini kode Html yang harus anda copy :

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://karristaent.blogspot.com" target="_blank">Demo</a>
<a class="buttonx" href="http://karristaent.blogspot.com" target="_blank">Download</a>
</div>

Keterangan :
Silahkan ganti link untuk DEMO dan DOWNLOAD nya dengan link yang anda kehendaki dan tulisan DEMO juga DOWNLOAD nya bisa anda ganti apa saja sesuai keinginan yang anda tuliskan. Untuk tampilan Demo dari tutorial ini silahkan anda klik demonya berikut di bawah ini :

DEMO BUTTON

Rupanya sampai disini tutorial tentang membuat "Button Demo Download Style Sederhana" ini semoga di pahami. Jika ada kesulitan silahkan diskusikan/tanyakan melalui kotak komentar di bawah ini. Terima kasih atas kunjungan juga komentar sebelumnya. Tetap semangat dalam berkarya, Salam hangat juga ceria selalu buat seluruh Sahabat blogging tercinta... dan Salam Blogging.....