Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Box Download Apps di Blogger

Mungkin diantara Anda seringkali mengunjungi situs web Jalan Tikus yang mengulas berbagai informasi seperti aplikasi, tips dan trik, gadget, dan lain sebagainya. Pada halaman website Jalan Tikus tentunya kebanyakan berisikan artikel terkait dengan aplikasi sehingga menyediakan tombol download yang sangat keren layaknya pada tombol Google Play Store maupun menggunakan plugin WP Appbox. Seperti yang sudah diketahui, website Jalan Tikus sendiri memang bukan menggunakan platform blogger, melainkan menggunakan CMS lain.

Ketika Anda menggunakan WordPress tentunya Anda bisa menggunakan sebuah plugin tambahan yang bernama WP Appbox yang sudah sangat populer. Namun berbeda halnya kepada pengguna blogger yang mengharuskan untuk membuat HTML dan juga CSS nya agar terlihat mirip. Dengan menggunakan widget Box Download Apps di Blogger ini juga tentunya tidak akan memberatkan loading blog Anda lantaran script yang akan saya berikan hanya menggunakan CSS dan panggilan HTML saja.

Selain itu, widget ini juga sangat responsive apabila dibuka dengan perangkat apapun. Baik itu menggunakan PC, Laptop, Tablet, iOS, hingga Android juga akan terlihat responsive. Mungkin Anda juga pernah melihat artikel saya seputar aplikasi dan lain sebagainya pastinya ada saja link download aplikasi yang saya berikan. Nah, widget tersebut lah yang akan saya bagikan kali ini namun sudah saya rombak sedemikian rupa agar sangat mirip dengan website Jalan Tikus.

Cara Membuat Box Download Apps di Blogger

Download
  1. Silahkan masuk ke akun Blogger Anda masing-masing.
  2. Kemudian silahkan pilih menu Tema > Edit HTML.
  3. Jika sudah silahkan cari kode ]]></b:skin> agar memudahkan pencarian, silahkan gunakan bantuan shortcut keyboard CTRL + F.
  4. /* Box Download - MahesWeb */
    #box-download{padding:15px;box-sizing:border-box;margin:25px 0;min-height:125px;border:1px solid #EBECED;font-size:13px;background:#FFFFFF;border-radius: 4px;position: relative;overflow: hidden;box-shadow: 0 2px 6px 0 rgba(136,148,171,.2)}
    .step-content #box-download{background:#fdfdfd}
    .downloadInfo #box-download{background:#fdfdfd}
    .darkMode .downloadInfo #box-download{background:#353746;box-shadow: 0 2px 6px 0 rgba(53,55,70,.2)}
    .box-kiri{width:70%;float:left}
    .icon-app{width:65px;height:65px;float:left;}
    .postBody .icon-app img {margin: 0;}
    .Blog .post .postEntry .icon-app img.lazyloaded{box-shadow:unset}
    .Blog .post .postEntry .icon-app img, .darkMode .Blog .post .postEntry .post .icon-app img {background-color: unset;}
    span.judul-app{font-size:20px;line-height: 1.2em;font-weight:600}
    span.versi-app{font-size:15px} .box-judul .ico-android {color:#727171;font-size:12px;position:relative}
    .box-judul .ico-android {padding-left:22px}
    .box-judul a {position:absolute}
    .box-judul{position:relative;line-height: 1.5em;text-align: left;height:65px;margin-left:80px}
    span.ico-android{display:block;margin-top: 8px;line-height:1.5em}
    span.ico-android:before{content:'';width:18px;height:18px;position:absolute;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,9A1,1 0 0,1 14,8A1,1 0 0,1 15,7A1,1 0 0,1 16,8A1,1 0 0,1 15,9M9,9A1,1 0 0,1 8,8A1,1 0 0,1 9,7A1,1 0 0,1 10,8A1,1 0 0,1 9,9M16.12,4.37L18.22,2.27L17.4,1.44L15.09,3.75C14.16,3.28 13.11,3 12,3C10.88,3 9.84,3.28 8.91,3.75L6.6,1.44L5.78,2.27L7.88,4.37C6.14,5.64 5,7.68 5,10V11H19V10C19,7.68 17.86,5.64 16.12,4.37M5,16C5,19.86 8.13,23 12,23A7,7 0 0,0 19,16V12H5V16Z' fill='%23fff'/%3E%3C/svg%3E");background-color:#6AB344;border-radius:50px;background-repeat:no-repeat;background-position:center center;background-size:12px 12px}
    .text-dev {color: #999;font-size: 14px;}
    .box-kanan{position: absolute;right: 15px;width: 25%;}
    .box-kanan a:nth-child(1){background:#5245DE;border-radius:3px;display:block;width:100%;height:28px;margin-bottom:8px;letter-spacing:.08em;text-align:center}
    .box-kanan a:nth-child(2){background:#6ab344;border-radius:3px;display:block;width:100%;height:28px;letter-spacing:.08em;text-align:center;}
    .box-kanan a:nth-child(1):before{content:"DOWNLOAD";color:#fff;font-weight:600}
    .box-kanan a.apel:nth-child(1):before{content:"APP STORE";}
    .box-kanan a:nth-child(2):before{content:"PLAY STORE";color:#fff;font-weight:600}
    .copyright-button{position:absolute;bottom:0;right:0;background:#FAFAFA;border-top: 1px solid #EBECED;border-left: 1px solid #EBECED;border-top-left-radius:5px;padding:0 5px;font-size:11px;line-height:2em}
    .darkMode #box-download{border:0px solid #fff;background:#1f2029;box-shadow: 0 2px 6px 0 rgba(55, 59, 68)}
    .darkMode .copyright-button{background:#373b44;border-top: 0px solid #fff;border-left: 0px solid #fff;}
    .darkMode .text-dev {color: #fff;font-size: 14px;}
    @media screen and (max-width:480px){
    .box-kanan{width:45px}
    .box-kanan a.apel:nth-child(1):before{display:none}
    .box-kanan a.apel:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z' fill='%23fff'/%3E%3C/svg%3E");background-size:21px;background-position:center center;background-repeat:no-repeat;}
    .box-kanan a:nth-child(1):before{display:none}
    .box-kanan a:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17,13L12,18L7,13H10V9H14V13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z' fill='%23fff'/%3E%3C/svg%3E");background-size:21px;background-position:center center;background-repeat:no-repeat;}
    .box-kanan a:nth-child(2):before{display:none}
    .box-kanan a:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z' fill='%23fff'/%3E%3C/svg%3E");background-size:21px;background-position:center center;background-repeat:no-repeat;}
    .box-kiri {width: 80%;}
    span.ico-android{line-height: 1.2em;margin-top: 5px;}
    span.ico-android:before{top:-3px;}
    }
    @media screen and (max-width:400px){
    span.judul-app{font-size:15px}
    span.versi-app, span.ico-android{font-size:15px}
    }
    @media screen and (max-width:340px){
    #box-download{min-height: 145px;}
    }
    
  5. Setelah CSS tersebut ditemukan, silahkan letakkan kode yang saya bagikan di bawah ini tepat di atas kode tersebut.
  6. Kemudian silahkan Save Template.
  7. Untuk melakukan penerapannya, Anda buat saja artikel tentang aplikasi dan masukan kode di bawah ini pada Mode HTML.
  8. <div id="box-download">
    <div class="box-kiri">
    <div class="icon-app">
    <div class="zoomclick"><img alt="PicsArt Mod Premium Apk" height="65" src="Link-Image-PlayStore" title="PicsArt Mod Premium Apk" width="65"></div>
    </div>
    
    <div class="box-judul">
    <span class="judul-app">PicsArt Mod Premium Apk</span>
    <span class="versi-app">18.0.2</span>
    <span class="ico-android"><a href="Link-Developer-Apps" rel="noopener noreferrer" target="_blank" title="PicsArt, Inc.">PicsArt, Inc.</a></span>
    </div>
    </div>
    
    <div class="box-kanan">
    <a href="Link-Apps" rel="noopener noreferrer" target="_blank" title="Direct Download"></a>
    <a href="Link-Apps" rel="noopener noreferrer" target="_blank" title="Playstore Download"></a>
    </div>
        
    <div class="copyright-button"><span>Upload by</span><a href="https://www.mahes.web.id/" rel="noopener" target="_blank" title="MahesWeb"> <b>MahesWeb</b></a></div>
    </div>
    
  9. Selesai.

Mungkin itu saja tutorial kali ini mengenai cara membuat box download apps di blogger yang dapat saya sampaikan. Jika ada pertanyaan terkait dengan persoalan di atas, silahkan ajukan pertanyaan melalui kolom komentar yang sudah disediakan di bawah ini. Semoga bermanfaat!

Posting Komentar untuk "Cara Membuat Box Download Apps di Blogger"

X