Cara Membuat Box Download Ala Sudar Blogger

Blogger
Cara Membuat Box Download Ala Sudar Blogger - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Box Download Ala Sudar Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Box Download Ala Sudar Blogger
link : Cara Membuat Box Download Ala Sudar Blogger

Baca juga


Cara Membuat Box Download Ala Sudar Blogger

Cara Membuat Box Downloud Ala Sudar Blogger

Pada waktu lalu ada Request Cara Membuat Box Download Ala Sudar Blogger gimana ya? Nah pada kesempatan kali ini saya akan share bagaimana cara membuat Box Downloud tersebut.

Box Downloud ini sebenarnya milik idnxmus dan saya coba pakai di blog saya ini, Box Downloud ini sendiri menggunakan SVG untuk icon nya jadi tidak akan memberatkan loading blog walaupun saat dipasang.

Ditambah lagi Box Downloud ini sendiri juga sudah responsive pada semua perangkat jadi lebih enak juga kalau diterapkan pada blog itu sendiri seperti halnya blog saya ini.

Jika belum tau Box Downloud ini seperti apa bisa lihat aja contohnya dibawah ini


DANA - Dompet Digital Indonesia
DANA - Dompet Digital Indonesia Last Update PT Espay Debit Indonesia Koe
Download by Sudar Blogger

Apabila ingin membuat seperti itu bisa langsung aja tutorial dibawah ini dan tentu jangan lupa simak sampai selesai biar kalian paham

Cara Membuat Box Downloud Ala Sudar Blogger


  1. Silahkan login ke akun Blogger.com sobat.
  2. Pada menu dashboard, pilih Template ￫ Edit HTML
  3. Salin kode CSS berikut ini dan letakkan diatas kode ]]></b:skin> template.
    /* Box Download Sudar Blogger*/
    #box-download{font-family: 'Google Sans', serif;padding:15px;box-sizing:border-box;margin:25px 0;min-height:125px;border:1px solid #EBECED;font-size:13px;max-width:100%;background:#FFFFFF;border-radius: 4px;position: relative;overflow: hidden;}
    .box-kiri{width:70%;float:left}
    .icon-app{width:65px;height:65px;float:left;}
    .post-body .icon-app img {margin: 0;}
    .Blog article.post .icon-app img, .dark-mode .Blog article.post .icon-app img {background-color: unset;}
    span.judul-app{font-size:20px;line-height: 1.2em;font-weight:600}
    span.versi-app, .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}
    .box-kanan{position: absolute;right: 15px;width: 25%;}
    .box-kanan a:nth-child(1){background:#008efa;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}
    .dark-mode #box-download{border:1px solid #303031;background:#242526;}
    .dark-mode .copyright-button{background:#242526;border-top: 1px solid #303031;border-left: 1px solid #303031;}
    @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:18px}
    span.versi-app, span.ico-android{font-size:12px}
    }
    @media screen and (max-width:340px){
    #box-download{min-height: 145px;}
    }
    .Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
    .Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:PT Sans, sans-serif}
    .Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px}
    .Blog .download-info .file-link .m-icon{width:15px;height:15px}

    Keterangan:
    Kalian bisa memodifikasi sendiri sesuai dengan kreatif kalian

  4. Jikalau sudah, lanjutkan klik tombol Simpan untuk menerapkan perubahan.

Cara Menerapkan di Di Postingan

Selanjutnya kita untuk membuatnya Box Downloud ini di dalam artikel, Buat Artikel > pilih HTML masukkan kode di bawah ini :

<div id='box-download'>
    <div class="box-kiri">

    <div class='icon-app'>
    <img alt="DANA - Dompet Digital Indonesia" height="65" src="https://lh3.googleusercontent.com/6-aNex2PmpS0_gfHlF4QQacf_oZXVMWJJD2cbRn7Nki6QwmeB6vQnCyn0Tn-xaohHpg=s65" title="DANA - Dompet Digital Indonesia" width="65"/>
    </div>

    <div class='box-judul'>
    <span class='judul-app'>DANA - Dompet Digital Indonesia</span>
    <span class='versi-app'>Last Update</span>
    <span class="ico-android">PT Espay Debit Indonesia Koe</span>
    </div>
    </div>

    <div class="box-kanan">
     <a href="https://danareferral.onelink.me/MofA/8f49532e" title="Direct Download" rel="nofollow noopener"
    target="_blank"></a>
     <a href="https://play.google.com/store/apps/details?id=id.dana" title="Playstore Download" rel="nofollow noopener" target="_blank"></a>
    </div>
    
    <div class="copyright-button"><span>Download by</span><a href="https://www.sudarblogger.web.id /" title="Sudar" rel="noopener" target="_blank"> <b>Sudar Blogger</b></a></div>
</div>

Keterangan:
Kode yang ditandai adalah ubah sesuaidengan Gamabr Aplikasi, link Downloud dan nama blog kalian

Demo

Nah Itulah Sedikit Tutorial Membuat Box Download Ala Sudar Blogger, jika ada yang Request tutorial bisa langsung di komentar di bawah ya



Demikianlah Artikel Cara Membuat Box Download Ala Sudar Blogger

Sekianlah artikel Cara Membuat Box Download Ala Sudar Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Box Download Ala Sudar Blogger dengan alamat link https://jekancil.blogspot.com/2020/12/cara-membuat-box-download-ala-sudar.html