SOTAZONE.NET
Info Seputar Blogging

Cara Menciptakan Tombol Download Seperti Jalantikus.Com + Alternatif Link

0 24
www.sotazone.com – Hai teman sotazer, kalian niscaya pernah berkunjung dan mendownload salah satu aplikasi/game dari JalanTikus kan? Tentunya akan menjumpai box download yang penampakannya mirip dibawah ini :

Nah, untuk para blogger yang ingin mempunyai style tombol download seperti diatas, yuks simak arahan instruksi oprekan dibawah ini.

Langkah-Langkah Pembuatan Tombol Download Seperti JalanTikus.com

1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Cari isyarat ]]>, copy kode CSS dibawah ini lalu paste tepat diatas kode ]]>
.sal-boxmargin: 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 .isu-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 .informasi-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 .berita-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 arahan CSS Tombol Download.
4. Masuk ke Menu Postingan >> Buat artikel baru >> selanjutnya untuk memanggil aba-aba HTML nya, kalian bisa memasukkan instruksi dibawah ini dikala keadaaan mode HTML.

https://sites.google.com/site/sotazone/logogamedisini.png" alt=" kalian pasti pernah berkunjung dan mendownload salah satu aplikasi Cara Membuat Tombol Download Seperti JalanTikus.com + Alternatif Link"background-color: yellow;">#"/>
Distributor oleh www.domainmu.com

Hasilnya akan nampak mirip dibawah ini :

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

Contoh yang sudah jadi :

Gimana? Cukup gampang bukan?! Darisini kalian sudah berhasil menciptakan Tombol Download Seperti JalanTikus.com, namun jika kalian ingin menambahkan tombol alternatif lainnya, kalian mampu mencoba ulasan dibawah ini.

Tombol Download Alternatif

Tombol alternatif ini bukan berasal dari tombol download pada JalanTikus.com, melainkan inisiatif dari kami apabila sobat sotazer menginginkan jumlah tombol download lebih dari 2. Tombol Download Alternatif ini bisa digabungkan dengan Tombol Download dari JalanTikus (ingin dipakai atau tidak itu terserah kalian). Cara menggunakannya yakni sebagai berikut :
1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Cari instruksi ]]>, copy arahan CSS dibawah ini kemudian paste tepat diatas arahan ]]>

.button,input.buttonposition: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:hoverborder-bottom:none;background-color:rgba(84,87,102,0.9) .button:active,input.button:activebox-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 imargin-right:0.667em;vertical-align:middle;line-height:1em!important .button.red,input.button.redbackground-color:rgba(253,104,91,1) .button.red:hover,input.button.red:hoverbackground-color:rgba(253,104,91,0.9) .button.blue,input.button.bluebackground-color:rgba(96,158,234,1) .button.blue:hover,input.button.blue:hoverbackground-color:rgba(96,158,234,0.9) .button.mint,input.button.mintbackground-color:rgba(79,206,173,1) .button.mint:hover,input.button.mint:hoverbackground-color:rgba(79,206,173,0.9) .button.purple,input.button.purplebackground-color:rgba(171,148,233,1) .button.purple:hover,input.button.purple:hoverbackground-color:rgba(171,148,233,0.9) .linktambahanpadding-bottom:20px;padding-top:20px; .alternatiftext-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 arahan HTML nya, kalian mampu memasukkan kode dibawah ini dalam keadaaan mode HTML.

Posisi Tombol Download Alternatif ini bisa diletakkan sempurna dibawah Tombol Download dari JalanTikus
Contoh Peletakan Tombol Download Alternatif:

KODE TOMBOL JALANTIKUSNYA DISINI 
KODE TOMBOL DOWNLOAD ALTERNATIFNYA DISINI

Hasilnya akan nampak mirip dibawah ini :

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

STYLE DARK EDITION

Bagi sahabat sotazer, yang ingin memakai tombol download mirip JalanTikus.com dengan tema dark edition, maka gunakan instruksi aba-aba dibawah ini :
(Peletakan instruksi CSS dan HTML nya sama persis mirip diatas)

.sal-box1margin: 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 .isu-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 .informasi-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 .gosip-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;

Kode Tombol Download Alternatif

.button,input.buttonposition: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:hoverborder-bottom:none;background-color:rgba(84,87,102,0.9) .button:active,input.button:activebox-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 imargin-right:0.667em;vertical-align:middle;line-height:1em!important .button.dark1,input.button.redbackground-color:#333 .button.dark1:hover,input.button.red:hoverbackground-color:#222 .button.dark2,input.button.bluebackground-color:#555555 .button.dark2:hover,input.button.blue:hoverbackground-color:#222 .linktambahanpadding-bottom:20px;padding-top:20px; .alternatif1text-transform:uppercase;color:white;padding:3px;background:#222;width:100%;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;text-align:center

Hasilnya akan nampak seperti dibawah ini :

Jangan lupa untuk menyimpan Kode HTML nya (save di notepad) agar kelak bisa dipakai kembali setiap akan menciptakan artikel gres.

Itulah berita mengenai “Cara Membuat Tombol Download Seperti JalanTikus.com + Alternatif Link”, Sisanya bisa kalian kembangkan sendiri. Selamat mencoba dan semoga bermanfaat.

Dukung Blog Sota Zone biar selalu update mengenai gosip unik lainnya, terutama dalam dunia Blogger dan Games dengan cara meninggalkan komentar dan membagikan artikel yang telah kalian baca, 1x share dari anda sangat berarti bagi kami. Terimakasih!!

Leave A Reply

Your email address will not be published.