Cara Pasang Download Box Counter Super Keren

---

Download Box With Timer merupakan kotak untuk menaruh tombol link download dengan desain tampilan elegan nan eksklusif dan tak lupa mendukung fitur responsif. Salam Blogger, Sayang kumbang mencari makan, Terbang seiring di tepi kali, Selamat datang admin ucapkan, Akhirnya kita berjumpa lagi. Apa kabar semua? semoga kabar yang baik selalu.

Artikel kali ini yang admin bagikan yaitu tentang kotak download yang super keren dan istimewa. Kotak download ini cocok digunakan bagi sobat blogger yang memiliki konten blog dengan niche download ataupun sharing file aplikasi. Dengan kotak download ini link download akan tersusun rapih dan juga menambah daya tarik dari konten artikel tersebut.

Kotak download ini juga dimaksimalkan untuk blogger yang sudah menggunakan sponsor iklan di blognya. Sponsor iklan diletakan serasi di dalam kotak download sehingga iklan yang ditampilkan tersebut berpeluang terlihat oleh pengunjung blog. Space iklan yang ada didalam kotak download berukuran maksimal 468x60 piksel, pastikan juga iklan yang akan dipasang sudah mendukung fitur responsif. Penempatan kotak iklan sudah sesuai dengan semua TOS situs penyedia jasa layanan iklan jadi penggunaan iklan pada kotak download tidak melanggar ketentuan dalam menampilkan layanan iklan.

Informasi Singkat

---

Kebijakan Google Adsense

Sub Kategori : Pengalaman yang menyesatkan pengguna

Pengalaman yang menyesatkan pengguna dirancang untuk menyesatkan pengguna. Pengalaman bersifat menyesatkan jika memenuhi salah satu kondisi yang dicantumkan di bawah. Contoh tidak lengkap atau menyeluruh.

Kami meninjau iklan dan konten, terlepas dari apakah konten dan iklan tersebut ditayangkan dari domain Anda. Misalnya, konten yang dimuat ke iframe atau pemutar video di situs Anda dianggap sebagai bagian dari situs Anda.

Pesan Palsu
Iklan atau elemen lainnya yang menyerupai aplikasi chat, peringatan, dialog sistem, atau notifikasi lainnya yang mengarah ke iklan atau halaman landing saat diklik.

Area Klik yang Tidak Terduga
Background transparan, elemen halaman yang tidak terlihat, atau area yang biasanya tidak dapat diklik lainnya yang mengarah ke iklan atau halaman landing saat diklik.

Perilaku Situs yang Menyesatkan
Fitur halaman seperti scroll bar, tombol putar, panah “berikutnya”, tombol tutup, atau link navigasi yang mengarah ke iklan atau halaman landing saat diklik.

Manipulasi Histori Browser
Mencegah fungsi normal tombol "Kembali" dengan menghalangi pengguna untuk kembali ke halaman tujuan sebelumnya. Misalnya, situs menambahkan halaman ke histori browser.

Manipulasi Psikologis (Phishing dan Situs yang Menipu)
Elemen konten atau iklan yang berupaya mencuri informasi pribadi atau mengelabui pengguna agar membagikan informasi pribadi.

Pengalihan Otomatis
Elemen konten atau iklan yang mengalihkan halaman secara otomatis tanpa tindakan pengguna.

Pointer Mouse
Elemen konten atau iklan yang menyerupai pergerakan atau klik pointer mouse yang berupaya mengelabui pengguna agar berinteraksi dengannya.

Malware atau Software yang Tidak Diinginkan
Elemen konten atau iklan yang mempromosikan, menjadi host, atau menautkan ke malware atau software yang tidak diinginkan, yang mungkin diinstal di perangkat pengguna.

---

Sumber : Kebijakan Adsense

Selain itu kotak download ini menggunakan link redirector & replace page yaitu link download akan diarahkan dengan mengganti halaman utama sehingga akan mengurangi resiko tingkat bounce rate pada halaman artikel tersebut. Wah super premium kan kotak download ini.. Berikut contoh Kotak Download yang dilengkapi dengan redirector page.



Gimana brother ??? super mantabkan kotak download ini. Selain yang sudah disebutkan diatas Beberapa fitur lainnya yang ada pada kotak download ini, antara lain:

• Full CSS3 & HTML5 Compatible
• Menggunakan animasi CSS3
• Optimasi adsense atau sponsor iklan lainnya
• Eye catching dengan desain simple yang menarik
• Penggunaan Super Mudah
• Fleksible dan Reliable
• Full Responsif dengan berbagai macam perangkat
• Tidak mengganggu kode utama yang ada di blog Anda
• Menggunakan Timer sebelum di arahkan ke link download

Fungsi timer untuk kotak download ini adalah untuk mengurangi tingkat bounce rate pada halaman blog, terbukti dengan menggunakan timer dan redirect page ampuh mencegah resiko bounce rate.

Bounce rate adalah persentase pengunjung yang meninggalkan web/blog Anda setelah hanya membuka satu halaman saja. Misal, pengunjung tersebut membuka halaman utama web/blog atau halaman tertentu web Anda, namun tidak membuka halaman lainnya.

Nah, semakin banyak pengunjung yang hanya membuka satu halaman dan tidak berlanjut ke halaman lainnya, berarti semakin tinggi persentase bounce rate-nya. Artinya, semakin kecil persentase bounce rate berarti semakin bagus web anda. Mengapa demikian?

Sebab, diduga pengunjung tak menemukan apa yang dicarinya. Atau bisa juga karena web anda lambat untuk bisa dibuka. Atau bisa juga karena web anda hanya terdiri dari satu halaman. Karena itu, pengunjung lalu mungkin menutup browser, atau menekan tombol "back" pada browser, bisa juga mungkin pengunjung tertarik pada iklan yang ada di blog Anda, atau link yang mengarah ke web lain.

DAFTAR ISI

1. Cara Pemasangan Kode Kotak Download
2. Cara Penggunaan Kotak Download
3. Modifikasi Kode CSS Kotak Download
4. Modifikasi Kode Iklan Menjadi Responsif
5. Menambahkan Fitur Pop-Up Window
6. [Bonus Artikel] Source Code Kotak Download

#1 Cara Pemasangan Kode Kotak Download

Langkah awal sebelum bisa menggunakan kotak download super keren ini adalah dengan memasang kode CSS dan kode Javascript ke dalam kode HTML Template Blog. Kode-kode tersebut merupakan dasar untuk pengaturan style dan aturan untuk penggunaan syntax. Silakan disalin terlebih dahulu kode CSS dan Javascript yang ada dibawah ini. Berikut saya bagikan juga informasi mengenai cara pemasangan dari kode tersebut pada kode HTML tema (template) blog.

Cara Pemasangan Kode Pada HTML Template Blogspot :

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <link href='https://codeflareblogspot.github.io/code/DownloadBoxCounter.css' rel='stylesheet'/>
  
  
  <script>var reportLinkURL="";var useAdsRedirect="false";</script>
  <script src='https://codeflareblogspot.github.io/code/DownloadBoxCounter.js'></script>
  
  KETERANGAN
  Pada kode var reportLinkURL="" merupakan variabel untuk lokasi link halaman kontak blog Anda, pada kondisi default (kosong) laman kontak akan diarahkan ke lokasi blogAnda/p/contact.html. Silakan dirubah apabila lokasi URL berbeda dari kondisi default dengan menaruh link URL pada variabel tersebut.
  
  Contoh :
  var reportLinkURL="https://namabloganda.blogspot.com/laman-kontak-anda.html";
  
  Pada kode var useAdsRedirect="false" merupakan variabel untuk menambahkan kode iklan pengalihan berbayar yang akan anda gunakan secara otomatis, seperti adf.ly, Shorte.st, Ouo.io dan lain sebagainya. Pastikan pengalihan tersebut berupa kode pengalihan sederhana yang bisa digabungkan dengan URL asli tujuan.
  
  Contoh :
  var useAdsRedirect="http://adf.ly/822497";
  
  Pada contoh kode tersebut merupakan pengalihan yang digunakan oleh blog codeflare untuk penggunaan iklan dari adf.ly, untuk angka 822497 adalah angka untuk kode pengguna (user) di adf.ly, jika kamu menggunakan adf.ly silakan anda ganti angka tersebut dengan kode user milik anda sendiri. Jadi nanti kode script akan mengolah URL tujuan secara otomatis menjadi :
  
  http://adf.ly/822497/URL-tujuan-download
  
  Apabila tidak ingin menggunakan pengalihan silakan diisi variabel tersebut dengan teks "false", maka file download akan langsung menuju URL tujuan tanpa pengalihan.
  
  Contoh :
  var useAdsRedirect="false";


• Klik tombol Simpan untuk menyimpan hasil peletakan kode.

Langkah berikutnya adalah kode syntax penggunaan kotak download super keren versi codeflare blogspot, silakan Anda baca bab selanjutnya.

#2 Cara Penggunaan Kotak Download

Setelah memasang kode CSS dan kode Javascript diatas maka langkah selanjutnya adalah cara menggunakan syntax kotak download super keren ini pada halaman artikel blog. Syntax yang saya buat untuk penggunaan kotak download ini super mudah diimplementasikan dan gampang diingat karena pada dasarnya menggunakan syntax dasar hyperlink (pranala) HTML ditambah sedikit parameter tambahan.

Informasi Singkat

---

Dalam linguistik, sintaks adalah seperangkat aturan, prinsip, dan proses yang mengatur struktur kalimat (struktur kalimat) dalam bahasa tertentu, biasanya termasuk urutan kata. Istilah sintaksis juga digunakan untuk merujuk pada studi tentang prinsip dan proses tersebut. Tujuan dari banyak sintaksis adalah untuk menemukan aturan sintaksis yang umum untuk semua bahasa.

---

Sumber : Wikipedia

Related Article

• Animasi CSS3 Tombol Download Super Premium

Elemen utama pada syntax kotak download ini adalah tag <a> kemudian ditambahkan atribut class dan atribut penyesuaian parameter tombol, seperti : nama file, ukuran file, extension file dan proteksi file. Berikut penjelasan lengkap mengenai cara penggunaan syntax kotak download super keren.

Syntax Dasar Tombol Download

iklan test 2

<a href="url lokasi file" class="dlcounterbox" data-type="cf-counter" data-color="linear-gradient(-50deg,#f2c14e,#f78154)" data-name="test2" data-ext="zip" data-size="5 Kb" data-protection="Codeflare" rel="no-follow">iklan test 2</a>

KETERANGAN :

• href="Lokasi link URL Download"
  Link URL untuk lokasi download diletakan di dalam kode href, URL lokasi wajib menggunakan protokol [http] biasa ataupun protokol internet secure berbasis [https].
• class="dlcounterbox"
  aturan class default yang dibuat sebagai penanda dalam menggunakan kotak download super keren versi codeflare blogspot. Penting jangan dirubah apabila ingin menggunakan kotak download ini.
• data-type="cf-counter"
  Tipe kotak download sebagai penanda fitur hitungan mundur ikut disertakan.
• data-color="kode-warna"
  Warna yang digunakan pada animasi wave yang berada di bawah. Silakan disesuaikan apabila ingin menggunakan warna lain. Kode warna dalam format gradasi RGB Linear.
  Contoh : linear-gradient(-50deg,#f2c14e,#f78154)
  
• data-name="nama-file"
  Nama file yang akan ditampilkan di deskripsi pada kotak download, data tersebut boleh diisi atau dikosongkan.
• data-ext="type-file"
  Type file yang akan ditampilkan di deskripsi pada kotak download, data tersebut boleh diisi atau dikosongkan.
• data-size="ukuran-file"
  Ukuran file yang akan ditampilkan di deskripsi pada kotak download, data tersebut boleh diisi atau dikosongkan.
• data-protection="kode-password"
  Apabila file yang dibagikan menggunakan password, seperti file zip/rar yang terproteksi, maka informasi untuk membuka password pada file link download yang dibagikan tersebut dapat ditaruh pada data ini sehingga password tersebut akan ditampilkan di deskripsi pada kotak download, data tersebut boleh diisi atau dikosongkan.
• rel="no-follow"
  Kode non default artinya bisa dipasang bisa juga tidak dipasang hanya opsional saja. Kode data ini bawaan standar google untuk memberitahukan bot mesin pencari untuk tidak memasukan link download tersebut ke dalam database sistem pencarian google.
• iklan test 1
  Lokasi untuk menaruh kode iklan adsense dengan ukuran maksimal 468x60 px atau juga kode iklan dari sponsor blog Anda selain google adsense. Pastikan kode iklan memiliki fitur responsif, apabila kode iklan tidak memiliki fitur responsif silakan baca bab 4 (empat) untuk modifikasi iklan biasa menjadi responsif.

#3 Modifikasi Kode CSS Kotak Download

Secara default tampilan kotak download seperti yang terlihat pada contoh diatas, namun apabila tampilan warna ataupun tampilan warna border ingin dirubah maka perlu sedikit modifikasi dari kode aturan CSS untuk kotak download tersebut. Berikut cara merubah tampilan warna latar dan border untuk kotak download super keren.

Kode CSS Untuk Merubah Warna Latar

<style>
#boxDlWrapper2{
background:#cceeff;
border-color:Orange;
border-width:1px 1px 1px 1px;
border-style:solid;
}
</style>

HASIL :
test 3

KETERANGAN

• Pada aturan CSS #boxDlWrapper2 merupakan identitas untuk aturan kotak download, sedangkan angka 2 adalah nomor kotak download ketiga. Penting! Penomoran dalam elemen HTML selalu dimulai dari angka nol (0) jadi misalkan, apabila hendak merubah kotak download ketiga maka dalam penulisan aturan CSS nomor 3 dikurangi 1 karena posisi hitungan dimulai dari angka nol.
• Pada kode background:#cceeff merupakan aturan CSS untuk warna latar sedangkan kode #cceeff merupakan kode warna HTML dalam format heksadesimal. Info lebih lanjut untuk kode warna HTML dapat dilihat disini. Color Code
• Pada kode border-color:Orange;border-width:1px 1px 1px 1px;border-style:solid; merupakan aturan CSS untuk format pengaturan border. Info lebih lanjut tentang aturan CSS border dapat dipelajari disini. W3School : Border

Kode Data Untuk Merubah Warna Animasi Ombak
Merubah warna animasi ombak bisa langsung diterapkan tanpa perlu modifikasi CSS, sehingga penerapan langsung pada tag html di dalam kode data [data-color], untuk format warna gunakan liniear gradien. Berikut contoh format liniear gradien untuk merubah warna ombak.

<a href="test4" class="dlcounterbox" data-type="cf-counter" data-color="linear-gradient(45deg, #c5deea 0%,#8abbd7 31%,#066dab 100%)" data-name="test4" data-ext="zip" data-size="5 Kb" data-protection="Codeflare" rel="no-follow">test 4</a>

HASIL :
test 4

KETERANGAN :

• Pada kode :
  data-color="linear-gradient(45deg, #c5deea 0%,#8abbd7 31%,#066dab 100%)"
  merupakan penerapan langsung perubahan untuk warna ombak, di sinkronkan langsung dengan warna tombol untuk download dan ikon pada kotak deskripsi. Apabila ingin menggunakan warna default maka data-color dikosongkan saja atau tidak digunakan.

#4 Modifikasi Kode Iklan Menjadi Responsif

Cara membuat iklan kode iklan statis tertentu menjadi responsif cukup mudah, pertama-tama siapkan dua kode iklan yang akan digunakan pada kotak download. Kode iklan pertama dengan ukuran lebar 468 piksel dan tinggi 60 piksel (468x60 px) sedangkan kode iklan yang kedua dengan ukuran lebar minimum antara 250 piksel sampai 300 piksel dan tinggi maksimal 300 piksel. Berikut contoh dua buah iklan yang saya gunakan di dalam kotak download.

IKLAN 468x60 px

Apabila iklan 468x60 px tidak terlihat silakan anda ganti perangkat Anda menggunakan perangkat PC, Laptop atau tablet dan sejenisnya untuk bisa melihat artikel ini secara lengkap.

IKLAN 300x300 px

Fungsi menggunakan 2 kode iklan tersebut adalah supaya kode iklan statis bisa terlihat menjadi responsif. Iklan yang ditampilkan adalah iklan yang sesuai dengan dimensi perangkat layar pengunjung blog. Jadi misalkan pengunjung blog menggunakan perangkat hp/smartphone maka iklan yang ditampilkan adalah iklan kedua yang memiliki ukuran 300x300px sedangkan iklan yang pertama yang memiliki ukuran 468x60 px akan disembunyikan, begitu juga sebaliknya apabila pengunjung blog menggunakan perangkat PC, Laptop atau Tablet dan sejenisnya.

Trik ini meggunakan kode CSS MediaScreen dalam mengatur iklan mana yang akan ditampilkan. Berikut cara dalam membuat iklan statis menjadi responsif.

1. Sesudah mempersiapkan 2 buah iklan, maka langkah selanjutnya adalah memasang semua kode iklan tersebut didalam tag a, seperti contoh dibawah ini.
   
   
   <a href="linkDownload" class="dlcounterbox" data-type="cf-counter" data-color="linear-gradient(45deg, #c5deea 0%,#8abbd7 31%,#066dab 100%)" data-name="test4" data-ext="zip" data-size="5 Kb" data-protection="Codeflare" rel="no-follow">
   <div class="iklan648x60">
   Taruh Kode Iklan 468x60 disini
   </div>
   <div class="iklan300x300">
   Taruh Kode Iklan 300x300 disini
   </div>
   </a>
2. Langkah berikutnya adalah memasang kode CSS MediaScreen dibawah postingan artikel atau bisa juga di dalam HTML kode template blog. Berikut kode CSS MediaScreen dan penjelasan mengenai penggunaan dari aturan CSS tersebut.
   
   
   <style>
   @media screen and (min-width:550px){
   .iklan468x60{display:block;}
   .iklan300x300{display:none;}
   }
   @media screen and (max-width:550px){
   .iklan468x60{display:none;}
   .iklan300x300{display:block;}
   }
   </style>
   
   @media screen and (min-width:550px) maksudnya adalah pada penggunaan layar PC, Laptop atau Tablet dan sejenisnya (penggunaan perangkat layar diatas 550 piksel) maka iklan yang ditampilkan adalah iklan dengan dimensi 468 x 60 px sedangkan iklan dengan dimensi 300x300 akan disembunyikan. Begitu juga dengan sebaliknya.

Demikian trik sederhana ala codeflare blogspot untuk merubah tampilan iklan statis menjadi tampilan iklan resposif. Apabila Anda memiliki cara lain yang lebih sederhana, silakan dishare pada kotak komentar dibawah.

#5 Menambahkan Fitur Pop-Up Window

POP-UP window adalah Jendela browser baru yang tiba-tiba muncul (terlihat) ketika Anda memilih opsi dengan mouse atau menekan tombol fungsi khusus. Biasanya, jendela baru tersebut muncul berisi iklan, menu perintah, tampilan gambar dan lain sebagainya dalam konteks HTML dan hanya diam di layar sampai Anda memilih salah satu perintah, kemudian menghilang.

Pop-up (popup) window sering digunakan untuk mengarahkan halaman situs atau hanya sekedar menampilkan iklan dari sponsor. Kotak download super keren ini juga bisa dikombinasikan dengan penggunaan pop-up. Mengkombinasikan penggunaan pop-up yaitu dengan menambahkan elemen onclick pada tag a kotak download. Berikut contoh syntax untuk penerapan fitur pop-up.

<a href="test4" class="dlcounterbox" data-type="cf-counter" data-color="linear-gradient(45deg, #c5deea 0%,#8abbd7 31%,#066dab 100%)" data-name="test4" data-ext="zip" data-size="5 Kb" data-protection="Codeflare" rel="no-follow" onclick="fungsiPopup()">KODE IKLAN</a>

Pada kode script fungsiPopup() silakan Anda berkreasi sendiri sesuai dengan fungsi dan kebutuhan dari penggunaan Pop-up window itu sendiri. Saran saya gunakan secara bijak script pop-up window karena apabila terlalu sering dan banyak akan membuat pengunjung blog Anda menjadi terganggu.

#6 [Bonus Artikel] Source Code Kotak Download

Bonus konten artikel kali ini sangat spesial untuk pengunjung codeflare blogspot, seperti biasa untuk membuka konten mohon kesediannya berbagi informasi yang ada di postingan artikel ini ke khalayak luas, terima kasih. Silakan dilanjutkan apabila ingin melihat bonus artikel yang saya bagikan pada postingan artikel kali ini.

Buat Anda yang ingin mempelajari kode script dan css dari tombol download super premium ini, silakan didownload file kode sumber yang saya bagikan. File download menggunakan format ZIP dan File kode sumber berupa format HTML, untuk melihat kode file HTML silakan menggunakan aplikasi Notepad ataupun aplikasi text processor yang Anda miliki.

Anda bisa merubah, menyebarkan dan menggunakan file kode sumber ini pada artikel Anda dengan syarat mencantumkan sumber halaman ini. Harap diingat Admin tidak menjamin untuk segala kerusakan ataupun segala resiko dan akibat yang mungkin akan timbul dari penggunaan kode sumber yang admin berikan. Segala resiko penggunaan ditanggung oleh Anda sendiri.

This work is licensed under a Creative Commons Attribution 4.0 International License.

Keyword

CSS, Animasi, Kotak, Download, Blog, Blogger, Blogspot, Donlot, Tombol, Button, Animate, Javascript, JQuery, CSS3, HTML5, Free, Gratis, Efek, Adsense, Iklan, Sponsor, Tayang, Redirect, Pengalihan, Timer, Counter, Script, Bounce, Rate, Cara, Pasang, Super, Keren, Animasi, Simple, Sederhana, Mudah, Tag, Anchor, Link

Incoming Search Term

Cara Pasang Download Box Counter Super Keren, Cara Buat Kotak Download Optimasi Adsense, Kotak Download Dengan Timer, CSS Kotak Download, Script Kotak Download Redirect, Kotak Download Klik Ke Halaman Baru, Kotak Download Blogspot, Memasang Download Redirect New Page, Tombol Kotak Download, Download Box With Counter, Timer Download Box, Script to redirect download link, Tag a download with counter for blogger, Simple trick to use timer for download link, Download box adsense timer, Elegant Download Box CSS, Awesome Link For Download, Kotak Download Terbaru Menggunakan Animasi CSS