✔ Cara Menciptakan Tombol Download Keren Menyerupai Jalantikus

Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini aku akan menyebarkan tutorial menciptakan tombol d0wnl0ad keren yang akan menampilkan icon aplikasi / game menyerupai di website jalantikus.

Nah pada tombol d0wnl0ad yang satu ini tampilannya cukup berbeda sebab akan dipasang Icon / Logo dari aplikasi / game tersebut biar tampilannya lebih menarik, dilengkapi dengan 2 tombol d0wnl0ad default dan kalian juga sanggup menambahkan beberapa link alternatif didalamnya.
Untuk tutorialnya sangat mudah, kalian tinggal ikuti langkah demi langkah dibawah ini

Cara Membuat Tombol Download Keren di Blog

• login dulu ke blogger.com
• Pilih Tab Template, Edit HTML
• Selanjutnya Sobat Cari Kode </head> atau </style>
• kalau sudah ketemu, masukan arahan berikut di atasnya...

<style type="text/css"> #box-d0wnl0ad,#box-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .box-title{position:relative}#box-d0wnl0ad .box-cover .icon-app,#box-d0wnl0ad .link-d0wnl0ad{position:absolute}#box-d0wnl0ad,#box-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .icon-app span,#box-d0wnl0ad .box-cover .box-title,#box-d0wnl0ad .label-grup,#box-d0wnl0ad .link-d0wnl0ad a{display:block}#box-d0wnl0ad,#box-d0wnl0ad .box-cover .icon-app span,#box-d0wnl0ad .link-d0wnl0ad a{width:100%}#box-d0wnl0ad,#box-d0wnl0ad .link-d0wnl0ad a{border-radius:0.230769230769231em}#box-d0wnl0ad{padding:1.15384615384615em;box-sizing:border-box;margin:0.384615384615385em 0;overflow:hidden;min-height:116px;border:1px solid #ddd;font-size:13px!important;max-width:50.0769230769231em;background:#FFF}#box-d0wnl0ad a{text-decoration:none}#box-d0wnl0ad .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}#box-d0wnl0ad .box-cover .icon-app{width:75px;height:75px;top:0;left:0}#box-d0wnl0ad .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}#box-d0wnl0ad .box-cover .box-title{margin-left:6.15384615384615em}#box-d0wnl0ad .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}#box-d0wnl0ad .box-cover .box-title .app-version{font-size:90%;color:#727171}#box-d0wnl0ad .label-grup a{color:#666;font-size:12px}#box-d0wnl0ad .box-cover .box-title .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:20px;height:20px;background-image:url(https://rawgit.com/mastamvan/image/master/device.png);background-repeat:no-repeat;background-size:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}#box-d0wnl0ad .box-cover .box-title .tag-os.android{background-color:#6ab344}#box-d0wnl0ad .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}#box-d0wnl0ad .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}#box-d0wnl0ad .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}#box-d0wnl0ad .link-d0wnl0ad{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}#box-d0wnl0ad .link-d0wnl0ad a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}#box-d0wnl0ad .link-d0wnl0ad a:nth-child(1){background:#008efa}#box-d0wnl0ad .link-d0wnl0ad a:nth-child(2){background:#6ab344;margin:0}.link-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}.link-alternative:before{content:'Alternative:'}.link-alternative a{padding:0 0.384615384615385em 0;border-right:1px solid #bbb;color:#008efa}.link-alternative a:last-child{border:none}@media screen and (max-width:400px){#box-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .icon-app,#box-d0wnl0ad .box-cover .box-title,#box-d0wnl0ad .link-d0wnl0ad{margin:0 auto}#box-d0wnl0ad .box-cover .icon-app{position:relative}#box-d0wnl0ad .link-d0wnl0ad{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}}  /*ICON APP*/ .icon-app span{   background-image:url('https://rawgit.com/mastamvan/image/master/d0wnl0ad.png')   } .icon-app span.coc {   background-image:url('https://rawgit.com/mastamvan/image/master/coc.png'); } .icon-app span.clash-royale {   background-image:url('https://rawgit.com/mastamvan/image/master/clash-royale-icon.png') } .icon-app span.get-rich {   background-image:url('https://rawgit.com/mastamvan/image/master/get-rich-icon.png') } .icon-app span.adobe-cc {   background-image:url('https://assets.jalantikus.com/assets/cache/300/300/apps/2015/02/18/cc-icon.jpeg') } </script> 

Sparta praha menang telak atas as monaco dengan skor 5-1 di berlin dalam selesai piala eropa
ICON APP Itu icon yang akan ditampilkan pada tombol d0wnl0adnya, kalian sanggup menambah icon lainnya dengan cara:
Upload gambar yang ingin dijadikan icon
Copy linknya dan bikin css gres seperti

 .icon-app span.NAMA_ICON {   background-image:url('LINK_ICON'); } 

Untuk nama icon jangan kasih spasi dan jangan ada yg sama, nanti bentrok

• Save Template
  

Cara Penerapan Kode HTMLnya kedalam Postingan

• Silahkan masuk ke postingan yang ingin di pasang Tombol Download
• Selanjutnya pilih tab mode HTML, jangan yang COMPOSE
• Kalau sudah masuk ke tab mode HTML di postingan, Sobat copy arahan berikut ke dalamnya

 <div id='box-d0wnl0ad'> <div class='box-cover'>   <div class='icon-app'>     <span class='coc'/>   </div>   <div class='box-title'>    <span class='app-title'>Clash of Clans</span>    <span class='app-version'>9.24.1</span>    <span class="label-grup"><span class="tag-os android"></span> <a href="#">Aplikasi Android</a></span>   </div> </div> <div class="link-d0wnl0ad">  <a href="#">Download</a>  <a href="#">Google Play</a> </div> </div> 

• Silahkan sesuaikan letaknya mau di letakan sesudah kalimat / gambar...

COC : Ganti dengan nama icon yang sudah ada di daftar pada css.
Clash of Clans : Ganti dengan nama aplikasi.
9.24.1 : Ganti dengan versi aplikasi.
android : Sesuaikan dengan sistem operasi, kalian sanggup menggantinya dengan windows, mac dan blackberry.
# (Tanda Pagar) : Ganti dengan link d0wnl0ad kalian.

• Selesai, Sekarang kalian tinggal publikasikan / coba lihat pertinjauan dulu...

Menambahkan Link Download Alternatif

Mungkin di jalantikus tidak ada fitur ini, tapi apa salahnya buat jaga-jaga barang kali link d0wnl0ad utama sudah tidak aktif. Untuk menambahkan link d0wnl0ad alternatif kalian cukup masukan arahan dibawah ini

 <div class="link-alternative">  <a href="#">4shared</a>  <a href="#">Mediafire</a>  <a href="#">Zippyshare</a>  <a href="#">Tusfiles</a> </div> 

Sehingga nanti alhasil menyerupai ini

 <div id='box-d0wnl0ad'> <div class='box-cover'>   <div class='icon-app'>     <span class='coc'/>   </div>   <div class='box-title'>    <span class='app-title'>Clash of Clans</span>    <span class='app-version'>9.24.1</span>    <span class="label-grup"><span class="tag-os android"></span> <a href="#">Aplikasi Android</a></span>   </div> </div> <div class="link-d0wnl0ad">  <a href="#">Download</a>  <a href="#">Google Play</a> </div> <div class="link-alternative">  <a href="#">4shared</a>  <a href="#">Mediafire</a>  <a href="#">Zippyshare</a>  <a href="#">Tusfiles</a> </div> </div> 

• Selesai...
  

Terima kasih dan sekiaan isu sederhana yang sanggup bagikan mengenai

Cara Membuat Tombol Download Keren

, semoga artikel ini sanggup bermanfaat dan juga sedikit memperlihatkan aksesori wawasan buat Sobat.

Jangan Lupa SHARE dan SUBSCRIBE dibawah ini, untuk biar blog ini bertambah rajin dan bersemangat dalam memposting artikel-artikel gres lain yang bermanfaat dan mempunyai kegunaan buat Sobat Semua.

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: