Random post

Sunday, November 12, 2017

√ Cara Menciptakan Tombol Download Keren Menyerupai Jalantikus

komputerdia.com - Saat ini situs yang mengangkat tema d0wnl0ad seakan sudah menjadi daya tarik bagi sebgaian orang, tidak terkcuali kemungkinan besar kalian sedang membangun situs dengan tema menyerupai itu. Jika menyidik situs d0wnl0ad terbesar di indonesia ketika ini, kita sanggup melihat kepopuleran yang diperoleh situs bagas31, Gigapurbalingga, kuyhaandroid, dan juga situs jalan tikus.

Pengertian Download yaitu suatu proses transmisi atau pengambilan sebuah file dan data dari internet baik melalui web server, FTP server, mail server, server ataupun sistem lain yang identik ke penyimpnana perangkat komputer.

Dari internet, user/pengguna yang melaksanakan proses d0wnl0ad (unduh) yaitu proses dimana seorang user meminta atau menrequest sebuah file dari sebuah komputer lain (seperti: website,server atau yang sebagainya) kemudian akan menerimanya.

Dengan kata lain, d0wnl0ad yaitu transmisi file dari internet ke komputer client/pengguna sanggup dikatakan juga proses penerimaan atau pengambilan file dari internet/server ke komputer pribadi.

Membicarakan persoalan situs d0wnl0ad, di artikel kali ini saya akan mencoba menjelaskan bagaimana cara menciptakan tampilan dan tombol d0wnl0ad menyerupai pada situs Jalan Tikus. Bagi kalian yang ingin menciptakan nuansa tampilan menyerupai itu, kalian sanggup mengikuti langkah - langkah dibawah ini.

Baca Juga Artikel Menarik Lainnya:

 Saat ini situs yang mengangkat tema d0wnl0ad seakan sudah menjadi daya tarik bagi sebgaia √ Cara Membuat Tombol Download Keren Seperti JalanTikus

Membuat Tombol Download Seperti Jalan Tikus

 Saat ini situs yang mengangkat tema d0wnl0ad seakan sudah menjadi daya tarik bagi sebgaia √ Cara Membuat Tombol Download Keren Seperti JalanTikus
  • Langkah pertama silahkan kalian masuk ke akun blogger
  • Pilih sajian template atau theme kemudian klik tombol Edit Hml .
  • Setelah berada di halaman edit html, silahkan kalian cari isyarat </head> dengna menekan tombol Ctrl + F dikeyboard kalian dan ketikkan perintah </head> dan tekan enter.
  • Seteleh menemukan isyarat tersebut, letakkan isyarat dibawah ini sempurna diatas isyarat </head> 
<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.BBM {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9IbJH1uKd1Br-a1kPcgwv9RGmp3PW0SjHeaYea3XD6AzLnVj-LGHMfzj8DILXLl06y0QQT4wo5IkSD9Yb3fIzIczJ_inpBtvcNSBZBlTTrM4Ljl7wf8fH1tbCWaIIIf8Jabw2Beg0do77/s1600/01.png'); } .icon-app span.WA {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp-RjZGxePG6aqnQyDj52udI3BZTU8GG3T53-qTNpU3I3yP8kDeRS89FTnOcqocwU5kwpqrGEkxgYHt4Aj-eA9znNUyzCUqqO1GovMl4wz1v9iXBpCnohw_GvxEhYZrW-7EjK9vqbu5uGh/s1600/02.png') } .icon-app span.FB {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cT7G_vQaLFJnx1g4RjJhdYuIe0lV3XSR2LBW1opVE90OkL2z8837PhvfVa0yjdLyNIE4rBorTnvs82qbDh6IgyGr0mMYvkojcAuUW5cyDDMv-_eTxFOLue8r03q7Sct6XbNQypIjKG0Y/s1600/03.png') } .icon-app span.IDM {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1WEETYr9qU-Rg9uHLuJMYo_eJyJjghSfdR1eL2nCMMl94si5ijQRQxPPzKdXgkBCS75R51Xj0m5lzJKekTBAByQNEEM7RqZ1IT70-p1vtkdqr15gyYrxeSRAloV7NDJGDqr-g8b67rhwA/s1600/04.png') } .icon-app span.WIN7 {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQzdScIPR8c1WSO_ggWY4YnQimdu35_kYgvL_2bBTlgauLuoppiOsnkwFc-L9lP8fMCqmbELgZ9iyYg6Ac8y9ySfZ-lQYELHJ9kEB7ho6vKMIJWeZC8frW-gK1ijGQUfHnZjBFV4bMFrgD/s1600/05.png') } .icon-app span.WIN10 {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh442CfS3ad_0LN4Nr9VVrby9BIFEzSQJ7GmNxBAEFRLwJ4CcsrndNlbwPGH9RtUyQysfYZ_Qeek59bxxQyYmi8EgSQW1yFuvkcUByTnIC9QvTv9pFmx7An3KSThWDOY-OjTO09jx7UMAjj/s1600/06.png') } .icon-app span.WIN8 {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3VFvLO6fU7ROUaBmIRseKTZkjiZfgv7qNy8kCTQUBCK1bt2b19ITt9rRXiUONM6_vPOcZES1Tuh9i8RDTso9F88q8x12RjDbms47k9VU6Bycb6fSe-HGbOxeotvpQgwW74BaQMOgvf6S/s1600/07.png') } .icon-app span.IG {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54JR4MfNQR5FIoWrIaloPepEG4k5nLAGeC2ixkPyYLuz0gTUCNdesUG-SkJPqZzCE6mq33K-yTgzGOLGfVDqd5_keQzw1QOKisluM9y2U7uvb7rzG7wa5IJOkWV3nW7F2e9hWwaCwpE-f/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png') } </style>
  • Kode warna Biru adalah nama icon yang nantinya akan kalian gunakan pada pembuatan postingan d0wnl0ad
  • Kode warna Merah adalah alamat url gambar icon yang nantinya akan tampil dan sanggup kalian gunakan didalam postingan kalian
  • Jika kalian akan menambahkan icon maka kalian tinggal tambahkan saja isyarat dibawah ini, dan letakkan sebelum isyarat </style> diatas.
.icon-app span.IG {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54JR4MfNQR5FIoWrIaloPepEG4k5nLAGeC2ixkPyYLuz0gTUCNdesUG-SkJPqZzCE6mq33K-yTgzGOLGfVDqd5_keQzw1QOKisluM9y2U7uvb7rzG7wa5IJOkWV3nW7F2e9hWwaCwpE-f/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png') }
  • Untuk ukuran icon, kalian buat dengan ukuran 96 X 96 
  • Setelah gambar dibuat, kemudian kalian upload dan ambil alamat urlnya, kemudian tempatkan pada isyarat yang berwarna merah .
  • Setelah semua kalian setting, silahkan kalian tekan tombol simpan .
  • Selanjutnya silahkan kalian coba menciptakan postingan d0wnl0ad kalian, dengan cara masuk ke sajian entri baru .
  • Setelah berada dihalaman posting, kalian pindahkan mode compose ke mode html, dan tempelkan isyarat dibawah ini
<div id='box-d0wnl0ad'> <div class='box-cover'>   <div class='icon-app'>     <span class='WA'/>   </div>   <div class='box-title'>    <span class='app-title'>WhatsApp</span>    <span class='app-version'>9.24.1</span><br/>    <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>
  • Warna biru adalah isyarat atau nama icon yang kalian buat di bab CSS tadi
  • Warna merah adalah warta dari aplikasi yang kalian posting
  • Warna hijau adalah nama yang akan muncul di tombol d0wnl0ad
  • Warna coklat adalah link alternatif yang sanggup kalian gunakan, jikalau kalian memiliki banyak server yang kalian gunakan untuk mengupload aplikasi yang akan kalian posting
  • Setelah semuanya telah kalian buat, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya
  • Semoga bermanfaat untuk kalian semuanya


Sumber http://www.komputerdia.com