Cara Simple Menciptakan Download Box Menyerupai Jalan Tikus
Cara Simple Membuat Download Box Seperti Jalan Tikus - Bagi teman yang mempunyai blog download apk tentunya niscaya beringinan menciptakan tombol download pada blog teman yang responsif Biar pengunjung merasa nyaman berada di blog teman dan menerima kan impian yang pengunjung ingin kan tentunya apk game, sosial media dll.
Tombol Download ini menyerupai Jalan Tikus yang populer akan kontennya yang menarik dan super benerkan??..Nah Tombol Download ini mempunyai 2 tombol download inti yang mempunyai warna yang berdeda, juga mempunyai link alternatif dan gambar icon untuk menambah keunikan semoga pengunjung blog teman tau apa si yang mau didownload.
Baca Juga : Cara Membuat Download Box di Blogger
Kenapa harus menciptakan tombol yang menyerupai ini bang?? kenapa nggak yang biasa aja kan blog download??..Oke aku balik tanya blog teman ingin terlihat biasa-biasa saja atau terlihat menarik??
pastinya menarik ya kan?? tombol ini terlihat responsif juga jikalau teman membuka dalam mode smartphone atau mobile device dengan memakai tombol download ini akan ada nilai tersendiri bagi pengunjung blog teman pastinya.
Oke jikalau teman berkeinginan eksklusif saja ...
Tombol Download ini menyerupai Jalan Tikus yang populer akan kontennya yang menarik dan super benerkan??..Nah Tombol Download ini mempunyai 2 tombol download inti yang mempunyai warna yang berdeda, juga mempunyai link alternatif dan gambar icon untuk menambah keunikan semoga pengunjung blog teman tau apa si yang mau didownload.
Baca Juga : Cara Membuat Download Box di Blogger
Kenapa harus menciptakan tombol yang menyerupai ini bang?? kenapa nggak yang biasa aja kan blog download??..Oke aku balik tanya blog teman ingin terlihat biasa-biasa saja atau terlihat menarik??
pastinya menarik ya kan?? tombol ini terlihat responsif juga jikalau teman membuka dalam mode smartphone atau mobile device dengan memakai tombol download ini akan ada nilai tersendiri bagi pengunjung blog teman pastinya.
Oke jikalau teman berkeinginan eksklusif saja ...
Cara Simple Membuat Download Box Seperti Jalan Tikus
Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML lalu copy isyarat CSS dibawah ini dan pastekan sempurna diatas isyarat </head> atau </head>
<style type="text/css"> #box-download,#box-download .box-cover,#box-download .box-cover .box-title{position:relative}#box-download .box-cover .icon-app,#box-download .link-download{position:absolute}#box-download,#box-download .box-cover,#box-download .box-cover .icon-app span,#box-download .box-cover .box-title,#box-download .label-grup,#box-download .link-download a{display:block}#box-download,#box-download .box-cover .icon-app span,#box-download .link-download a{width:100%}#box-download,#box-download .link-download a{border-radius:0.230769230769231em}#box-download{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-download a{text-decoration:none}#box-download .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}#box-download .box-cover .icon-app{width:75px;height:75px;top:0;left:0}#box-download .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}#box-download .box-cover .box-title{margin-left:6.15384615384615em}#box-download .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}#box-download .box-cover .box-title .app-version{font-size:90%;color:#727171}#box-download .label-grup a{color:#666;font-size:12px}#box-download .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-download .box-cover .box-title .tag-os.android{background-color:#6ab344}#box-download .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}#box-download .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}#box-download .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}#box-download .link-download{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}#box-download .link-download a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}#box-download .link-download a:nth-child(1){background:#008efa}#box-download .link-download 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-download .box-cover,#box-download .box-cover .icon-app,#box-download .box-cover .box-title,#box-download .link-download{margin:0 auto}#box-download .box-cover .icon-app{position:relative}#box-download .link-download{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}} /*ICON APP*/ .icon-app span.buka-lapak { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9rLOs9hAg0bP5NuDvcsM7EKk590UhY756mi-ZtVsc_E-tzP4T_T1xePkqXCekRoY9I46xiE1o1-MVdJosWohbFoojeRL6D0PFdtBdZ6uAnuq6uZEFkXRvqVlSeUuh4bxEcWpaZM-HjlA/s1600/bukalapak.png') } .icon-app span.tamago { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKA7o9T16KxhQImJUbGhzIPVgs5Bb6XOFqq0KTTLoDGGHOuqxKM61cW9vcFqci-foNFXdTxia_kT-KmqdKwC5ajCIZP2Es5EWUTYicbCJRsbKoX1VWnqzR7aR51UHsfn6Dng-eY9F6Vzv/s1600/tamago.png'); } .icon-app span.xx1lite { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2MhcMxRLZ1529WCRJkdwWj77v4K0KWPhWvYQivV7bBtPPMut_h6gWxh1zO5OHC4sElxPiwBgEGPX8Fu1X_41Mc0yJ3Gh2vSTJIQu7RfoRKG863AZfigtTc-Gi3b4aAtNjKTrmlcCd6Cyi/s1600/xx1lite.png') } .icon-app span.googleplay { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNWBQ-Ls40hrjBq-Gxp50HFRsF5BuXxQmytrZNzlnRDumSIWf4jA4F10hcqQhvgy_NgWWzGaiGeAW_rjIeaeoJpoeNh4pOvVST0MHcI5lazuywSuzYc4oEDpMZno-Mgwcz0c105S-wU2R/s1600/googleplay.png') } </style> Pada isyarat yang tercetak warna biru sanggup diganti dengan nama apk yang teman ingin share, dan pada isyarat yang tercetak warna merah sanggup diganti dengan link url gambar icon apk yang teman ingin share.
Jika teman ingin menambahkan nama dan icon pada isyarat CSS.icon-app span.NAMA_ICON { background-image:url('LINK_ICON'); } Jika sudah Klik simpan pada tema.
Masuk dalam postingan teman lalu pilih mode HTML bukan Compose copy isyarat dibawah ini
cara memasang pada postingan blog sobat.
Masuk dalam postingan teman lalu pilih mode HTML bukan Compose copy isyarat dibawah ini
<div id='box-download'> <div class='box-cover'> <div class='icon-app'> <span class='buka-lapak'/> </div> <div class='box-title'> <span class='app-title'>Buka Lapak</span> <span class='app-version'>v3.5.7</span> <span class="label-grup"><span class="tag-os android"></span> <a href="#">Aplikasi Android</a></span> </div> </div> <div class="link-download"> <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> CATATAN GUYS
buka-lapak : nama icon yang sudah teman namai dalam isyarat CSS sebelumnya
Buka Lapak : nama apknya
v3.5.7 : Versi berapa apknya
Android : os aplikasi tersebut misalkan support diandroid atau ios
buka-lapak : nama icon yang sudah teman namai dalam isyarat CSS sebelumnya
Buka Lapak : nama apknya
v3.5.7 : Versi berapa apknya
Android : os aplikasi tersebut misalkan support diandroid atau ios
Jika sudah Klik publikasikan.
Baca Juga : Cara Membuat Note Box Berwarna di Blog
Oke sekian yang sanggup aku jelaskan tentang Cara Simple Membuat Download Box Seperti Jalan Tikus Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
Baca Juga : Cara Membuat Note Box Berwarna di Blog
Oke sekian yang sanggup aku jelaskan tentang Cara Simple Membuat Download Box Seperti Jalan Tikus Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
Sumber https://www.triksimple.com/
