Nah, Seperti yang kita ketahui sendiri, selain jalntikus menyediakan konten berita dan tekno, Jalantikus juga tersediah software komputer, aplikasi android, Game dan masih banyak lagi yang bisa anda dapatkan disini, kalau kita ambil dari bahasa blogger jalantikus ini bisa dibilang blog gado - gado, Heheheheh, Uniknya lagi pada jalantikus ini sangat dilengkapi dengan fitur - fitur keren, seperti icon komentar, Navigasi yang bagus dan tombol download yang simple tapi bagus dilihat hingga akan membuat pengunjung beta dan makin sayang dengan situs web ini. Mungkin anda sering banget banget kan baca - baca disini ? soalnya saya sendiri, kalau dipikir - pikir bisa dikatan rajin, Karena terkadang saat saat tidak mempunyai ide untuk menulis artikel, Saya selalu jalan - jalan di jalantikus untuk mencari referensi ilmu baru untuk saya terapkan di blog kecil ini.
Dan terkadang saya saking rajinnya jalan - jalan di situs web ini, akhirnya saya menemukan ide yang menurut saya sie bagus, Akhirnya saya berfikir jika saya share cara membuat tombol download akan mantap jika saya terapkan di blog saya, Mungkin Bagi anda yang pernah mendownload di situs ini pasti tau dengan tombol downloadnya seperti apa, Karena pada fitur tombolnya situs web ini sangat keren kawan. waw ,, benarkan ?
Dan terkadang saya saking rajinnya jalan - jalan di situs web ini, akhirnya saya menemukan ide yang menurut saya sie bagus, Akhirnya saya berfikir jika saya share cara membuat tombol download akan mantap jika saya terapkan di blog saya, Mungkin Bagi anda yang pernah mendownload di situs ini pasti tau dengan tombol downloadnya seperti apa, Karena pada fitur tombolnya situs web ini sangat keren kawan. waw ,, benarkan ?
Nah, Sesuai dengan judul yang saya tuliskan diatas tersebut, Pada postingan kali ini saya bakal share ni tentang bagaimana cara membuat tombol download yang bisa dikatan mirip banget dengan jalan tikus. Cocok banget jika ini di terapkan di blog download anda, Karena tombol download memiliki design yang sangat bagus sehingga akan menarik perhatian pengunjung. Mau tau bagaimana cara membuatnya ? Yuk kita simak !
Tahap Pembuatan Tombol Download
- Masuk / Login ke blogger
- Klik Template > Edit Html
- Kemudian cari kode ]]></b:skin>
- Lalu masukkan kode dibawah ini tepat diatasnnya
<-- --="" css="" download="" dsop="" gratis="" tombol="">
.sal-box{margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;-webkit-tap-highlight-color: transparent;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;}
.sal-box > .item {display: block;float: left;position: relative;width: 100%;margin-bottom: 10px;background: #fff;}
.dsopgratis {margin-bottom: 15px;padding: 5px 0;}
.dsopgratis .apps-detail a {border-bottom: 1px solid transparent;}
.dsopgratis .apps-detail a:hover {border-bottom: 1px solid #999999;}
.dsopgratis .apps-detail.horizontal.xlSz {border: 0;padding: 15px 20px;}
.dsopgratis .apps-detail.horizontal.xlSz .property {max-height: none;margin: 0;}
.dsopgratis .apps-detail.horizontal.xlSz .info-container {padding: 0 15px;margin: 0;}
.dsopgratis .apps-detail .note a, .dsopgratis .apps-detail .note span {vertical-align: middle;}
.dsopgratis .item {overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.addon-dsopgratis {position: absolute;bottom: 0;right: 0;padding: 2px 10px;background: #f8f8f8;line-height: 0;border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;-webkit-border-top-left-radius: 4px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;}
.apps-detail.horizontal.xlSz {padding: 1.5%;}
.apps-detail.horizontal .os-icon {margin-right: 6px;}
.apps-detail.horizontal {display: block;align-items: center;}
.apps-detail.horizontal.xlSz .property {margin: 5px 0 10px 0;}
.apps-detail.horizontal.xlSz .action-btn:last-of-type {margin-bottom: 0;}
.apps-detail.horizontal.xlSz .action-btn {width: 100%;margin-bottom: 5px;}
.apps-detail.horizontal {position: relative;width: 100%;}
.apps-detail.horizontal.xlSz .info-container {margin: 2px 0 0 0;padding: 0 1.5%;}
.apps-detail.horizontal.xlSz .action-container {margin-bottom: 15px;padding: 5px 0;float: right;padding-right: 75px;}
.apps-detail {float: left;border: 1px solid rgba(255,255,255,0);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
.apps-detail.horizontal .cover-container, .apps-detail.horizontal .info-container, .apps-detail.horizontal .action-container {position: relative;float: left;vertical-align: top;}
.title-text.dllight {font-size: 16px;}
.title-text.lSz {font-size: 20px;line-height: 28px;}
.title-text {font-size: 14px;line-height: 20px;font-weight: 700;}
.text-link {border-bottom: 1px solid rgba(255,255,255,0);color: grey;}
.cover {position: relative;overflow: hidden;}
.btn.bdrs4 {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.btn.clearBlue {background-color: #008efa;border: 1px solid rgba(0,0,0,0);color: #ffffff;}
.btn.clearGreen {background-color: #6ab344;border: 1px solid rgba(0,0,0,0);color: #ffffff;}
.btn.dllight {height: 40px;line-height: 38px;padding: 0 20px;font-size: 15px;}
.btn {display: inline-block;overflow: hidden;vertical-align: middle;padding: 0 10px;border: 1px solid #eeeeee;background: #ffffff;color: #008efa;text-align: center;cursor: pointer;}
.trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
a {text-decoration: none;}
.text-link.cl1 {color: #252525;}
.fs2 {font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;}
.multi-ellipsis {overflow: hidden;position: relative;}
.text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.content-format a:hover {border-bottom: 1px solid #008efa;}
.content-format .note a:hover {border-bottom: 1px solid grey;}
.content-format a {color: grey;border-bottom: 1px solid rgba(255,255,255,0);}
.content-format a, .content-format a:before, .content-format a:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;}
.os-icon {overflow: hidden;display: inline-block;vertical-align: middle;width: 20px;height: 20px;background-image: url(https://sites.google.com/site/sotazone/device.png);background-repeat: no-repeat;background-size: 100%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.os-style.android {background-color: #6ab344;background-position: 0 0;}
- Tahap selanjutnya, Silakan anda buat postingan seperti biasanya
- Lalu Copy dan Paste kode di bawah ini kedalam postingan, akan tetapi anda pilih html bukan compose
<div class="sal-box cf dsopgratis" style="margin: 5px 0;">
<div class="item cf">
<div class="apps-detail horizontal xlSz cf trs">
<div class="cover-container"><div class="cover-image-container">
<img src="LINK GAMBARMU" alt="#"/>
</div>
</div>
<div class="info-container">
<div class="info">
<a href="#" class="title text-link-container">
<span class="title-text fs2 lSz text-link cl1 trs">Nama Gambar</span>
<span class="title-text fs2 lSz fwL text-link cl4 bdrB0"> Versi Game Disini</span></a>
<div class="property multi-ellipsis ellipsis-fade text-ellipsis">
<div class="content-format">
<span class="note"><a href="#" class="os-style os-icon android trs" title="Android"></a>
<a href="#" class="text-link cl4 trs hidden-sm hidden-480 hidden-xs">Genre game disini</a>
<span class="hidden-sm hidden-480 hidden-xs" style='color:black'> oleh </span>
<a href="#" target="_blank" class="text-link cl4 trs" rel="nofollow">Pengembang game disini</a></span></div>
</div>
</div>
</div>
<div class="action-container">
<div class="action">
<a href="#" target="_blank" class="action-btn download-btn btn dllight clearBlue bdrs4 title-text trs track-download"><i class="fa fa-download" aria-hidden="true"></i> Download</a>
<a href="#" target="_blank" class="action-btn googleplay-btn btn dllight clearGreen bdrs4 title-text trs track-relink"><i class="fa fa-android" aria-hidden="true"></i> Google Play</a>
</div>
</div>
</div>
<div class="addon-dsopgratis"><span class="title-text xxsSz fwN text-link cl4 bdrB0">DI BUAT OLEH </span><a href="#" class="title-text xxsSz text-link cl4">LINK DOMAIN ANDA</a></div></div></div>
- Publikasikan
- Lalu lihat hasilnya
nyimak bos
ReplyDelete