Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link

Pilihan Editor :

Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link
Penulis Bagus Surochman
0
Modus malam




KURAZONE ~ Kalian pasti pernah berkunjung dan mengunduh salah satu aplikasi/game dari JalanTikus kan? Tentunya akan menjumpai box unduh yang penampakannya seperti dibawah ini :



Nah, untuk para blogger yang ingin memiliki style tombol unduh seperti diatas, yuks simak kode kode oprekan dibawah ini.

Langkah-Langkah Pembuatan Tombol Unduh Seperti JalanTikus.com

1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Cari kode ]]></b:skin>, copy kode CSS dibawah ini lalu paste tepat diatas kode ]]></b:skin>
.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;} .addon-apps {margin-bottom: 15px;padding: 5px 0;} .addon-apps .apps-detail a {border-bottom: 1px solid transparent;} .addon-apps .apps-detail a:hover {border-bottom: 1px solid #999999;} .addon-apps .apps-detail.horizontal.xlSz {border: 0;padding: 15px 20px;} .addon-apps .apps-detail.horizontal.xlSz .property {max-height: none;margin: 0;} .addon-apps .apps-detail.horizontal.xlSz .info-container {padding: 0 15px;margin: 0;} .addon-apps .apps-detail .note a, .addon-apps .apps-detail .note span {vertical-align: middle;} .addon-apps .item {overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .addon-discover {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;}
3. Simpan Template. Dari sini kalian sudah berhasil memasang kode CSS Tombol Unduh.
4. Masuk ke Menu Postingan >> Buat artikel baru >> selanjutnya untuk memanggil kode HTML nya, kalian bisa memasukkan kode dibawah ini saat keadaaan mode HTML.
<div class="sal-box cf addon-apps" 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="https://sites.google.com/site/sotazone/logogamedisini.png" 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 Game Disini</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-discover"><span class="title-text xxsSz fwN text-link cl4 bdrB0">Distributor oleh </span><a href="#" class="title-text xxsSz text-link cl4">www.domainmu.com</a></div></div></div>
Hasilnya akan nampak seperti dibawah ini :
#Silahkan kalian ubah beberapa teks yang telah ditandai oleh background berwarna biru.

Contoh yang sudah jadi :

Darisini kalian sudah berhasil membuat Tombol Unduh Seperti JalanTikus.com, namun jika kalian ingin menambahkan tombol alternatif lainnya, kalian bisa mencoba ulasan dibawah ini.


Tombol Unduh Alternatif

Tombol alternatif ini bukan berasal dari tombol unduh pada JalanTikus.com, melainkan inisiatif dari kami apabila sahabat kurazer menginginkan jumlah tombol unduh lebih dari 2 link.
Tombol Unduh Alternatif ini bisa digabungkan dengan Tombol Unduh diatas (ingin digunakan atau tidak itu terserah kalian). 

Cara menggunakannya adalah sebagai berikut :

1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Cari kode ]]></b:skin>, copy kode CSS dibawah ini lalu paste tepat diatas kode ]]></b:skin>
.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer} .button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear} .button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)} .button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)} .button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important} .button.red,input.button.red{background-color:rgba(253,104,91,1)} .button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)} .button.blue,input.button.blue{background-color:rgba(96,158,234,1)} .button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)} .button.mint,input.button.mint{background-color:rgba(79,206,173,1)} .button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)} .button.purple,input.button.purple{background-color:rgba(171,148,233,1)} .button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)} .linktambahan{padding-bottom:20px;padding-top:20px;} .alternatif{text-transform:uppercase;color:white;padding:3px;background:#6ab344;width:100%;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;text-align:center}
3. Simpan Template
4. Masuk ke Menu Postingan >> Buat artikel baru >> selanjutnya untuk memanggil kode HTML nya, kalian bisa memasukkan kode dibawah ini dalam keadaaan mode HTML.
<div class="sal-box cf addon-apps" style="margin: 5px 0;"> <div class="item cf"> <div class='alternatif'><b>Link Alternatif</b></div> <div class='linktambahan'> <center> <a class="button purple" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Google Drive</a> <a class="button mint" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Media Fire</a> <a class="button blue" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Upfile Mobi</a> <a class="button red" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Zippy Share</a> </center> </div> <div class="addon-discover"><span class="title-text xxsSz fwN text-link cl4 bdrB0">Distributor oleh </span><a href="#" class="title-text xxsSz text-link cl4">Kurazone</a></div></div></div><.div>

Posisi Tombol Unduh Alternatif ini bisa diletakkan tepat dibawah Tombol Unduh dari JalanTikus

Contoh Peletakan Tombol Unduh Alternatif:

KODE TOMBOL JALANTIKUSNYA DISINI
<br/>
KODE TOMBOL UNDUH ALTERNATIFNYA DISINI
Hasilnya akan nampak seperti dibawah ini :

#Silahkan kalian ubah beberapa teks yang telah ditandai oleh background berwarna biru.

STYLE DARK EDITION

Bagi sahabat kurazer, yang ingin menggunakan tombol Unduh seperti JalanTikus.com dengan tema dark edition, maka gunakan kode kode dibawah ini :
(Peletakan kode CSS dan HTML nya sama persis seperti diatas)
.sal-box1{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-box1 > .item {display: block;float: left;position: relative;width: 100%;margin-bottom: 10px;background: #000;} .addon-apps {margin-bottom: 15px;padding: 5px 0;} .addon-apps .apps-detail a {border-bottom: 1px solid transparent;} .addon-apps .apps-detail a:hover {border-bottom: 1px solid #999999;} .addon-apps .apps-detail.horizontal.xlSz {border: 0;padding: 15px 20px;} .addon-apps .apps-detail.horizontal.xlSz .property {max-height: none;margin: 0;} .addon-apps .apps-detail.horizontal.xlSz .info-container {padding: 0 15px;margin: 0;} .addon-apps .apps-detail .note a, .addon-apps .apps-detail .note span {vertical-align: middle;} .addon-apps .item {overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .addon-discover1 {position: absolute;bottom: 0;right: 0;padding: 2px 10px;background: #111;line-height: 0;border-top: 1px solid grey;border-left: 1px solid grey;-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.dldark {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.cleargrey {background-color: #333;border: 1px solid rgba(0,0,0,0);color: #ffffff;} .btn.cleardark {background-color: #222;border: 1px solid rgba(0,0,0,0);color: #ffffff;} .btn.dldark {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.cl11 {color: #fff;} .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;}
<div class="sal-box1 cf addon-apps" 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="https://sites.google.com/site/sotazone/coc-icon-icon.png" 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 cl11 trs">Clash of Clans</span> <span class="title-text fs2 lSz fwL text-link cl4 bdrB0"> 9.24.1</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">Strategi</a><span style='color:white' class="hidden-sm hidden-480 hidden-xs"> oleh </span><a href="#" target="_blank" class="text-link cl4 trs" rel="nofollow">Supercell</a></span></div> </div> </div> </div> <div class="action-container"> <div class="action"> <a href="#" target="_blank" class="action-btn download-btn btn dldark cleargrey 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 dldark cleardark bdrs4 title-text trs track-relink"><i class="fa fa-android" aria-hidden="true"></i> Google Play</a> </div> </div> </div> <div class="addon-discover1"><span class="title-text xxsSz fwN text-link cl4 bdrB0">Distributor oleh </span><a href="#" class="title-text xxsSz text-link cl4">Kurazone</a></div></div></div>
Kode Tombol Unduh Alternatif
.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer} .button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear} .button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)} .button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)} .button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important} .button.dark1,input.button.red{background-color:#333} .button.dark1:hover,input.button.red:hover{background-color:#222} .button.dark2,input.button.blue{background-color:#555555} .button.dark2:hover,input.button.blue:hover{background-color:#222} .linktambahan{padding-bottom:20px;padding-top:20px;} .alternatif1{text-transform:uppercase;color:white;padding:3px;background:#222;width:100%;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;text-align:center}
<div class="sal-box1 cf addon-apps" style="margin: 5px 0;"> <div class="item cf"> <div class='alternatif1'><b>Link Alternatif</b></div> <div class='linktambahan'> <center> <a class="button dark1" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Google Drive</a> <a class="button dark2" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Media Fire</a> <a class="button dark1" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Upfile Mobi</a> <a class="button dark2" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Zippy Share</a> </center> </div> <div class="addon-discover1"><span class="title-text xxsSz fwN text-link cl4 bdrB0">Distributor oleh </span><a href="#" class="title-text xxsSz text-link cl4">Kurazone</a></div></div></div>
Hasilnya akan nampak seperti dibawah ini :

Jangan lupa untuk menyimpan Kode HTML nya (save di notepad) agar kelak bisa digunakan kembali setiap akan membuat artikel baru.

Itulah informasi mengenai "Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link", Sisanya bisa kalian kembangkan sendiri. Selamat mencoba dan semoga bermanfaat. Goodluck!!

sumber : surochman.blogspot.com (sotazone)
nanio
Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link
Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link Cara Membuat Widget Tombol Unduh Seperti JalanTikus.com + Alternatif Link Reviewed by Bagus Surochman on 5/18/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.