Cara Membuat Floating Widget Content di Blogger

Cara Membuat Floating Widget Content di Blogger

Blogger memiliki fitur penambahan widget seperti postingan populer, label, dan widget kustom buatan sendiri. Widget itu biasanya di letakan di sidebar, header, footer, dan main-wrapper. Dan pada kali ini saya akan berbagi tutorial cara memasang widget yang melayang atau sobat biasa dengar dengan istilah floating content

Banyak sekali situs yang menggunakan floating content seperti situs Idntheme itu yang memakainya untuk menampilkan email subscriber. Dan saya juga banyak mendapati situs lain yang menggunakannya untuk gambar promosi produk dan juga pengiklanan seperti Adsense.


Lalu bagaimana dengan konten melayang yang dibuatkan untuk widget blogger? Caranya sangat mudah. Karena tutorialnya hampir sama seperti pada tutorial yang sebelumnya saya post dengan judul "Membuat Modal Download Box" pada hari sebelumnya. Yup.. dengan memanfaatkan fungsi javascript pemanggil modal box namun kita menambahkan sebuah section widget yang terdapat pada blogger sehingga widget apapun bisa disimpan pada floating konten ini.


Baik tanpa berlama-lama intermezonya mari kita mulai masuk ke bagian cara memasangnya


Membuat Konten Widget Melayang / Floating Widget Content di Blogger

Seperti biasa pertama sobat harus paham setidaknya sudah mengenal beberapa kode web begitupun dengan strukturnya. Yang masih PEMULA jangan khawatir akan tidak mengerti karena kali ini tutorialnya cukup mudah.

Langkah awal sobat perlu menyalin kode berikut dan tempel tepat di atas tag </body> dan jangan lupa untuk menyimpannya.

<!-- CODEPELAJAR.COM | HTML -->
<div id='floatingWidget'>
<div class='floating-inner'>
  <span class='x' onclick='closeModal()'/> <!-- tombol close -->
  <b:section id='konten-floating-disini' /> <!-- section untuk penampil widget -->
</div>
</div>

<style>/*<![CDATA[*/
/*=== CODEPELAJAR.COM | CSS ===*/
div#floatingWidget {
    position: fixed; /*<<== Position fixed ==*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -10; /*<<== z-index agar layer elemen di bawah elemen lainnya ==*/
    opacity:0; /*== opacity 0 agar floating content tersembunyikan ==*/
    transition:.5s; /*== transisi 0.5 detik (bisa diubah sesuai keinginan) ==*/
    overflow-y :auto; /*== agar konten yang melebihi kebawah bisa di scroll ==*/
    background: rgba(0,0,0,0.5);
}
div#floatingWidget.active {
    /*=== saat aktif floating widget akan muncul kepermukaan ==*/
    z-index:9999;
    opacity:1;
}
.floating-inner {
    /*=== ini adalah bagian kontennya ==*/
    position: absolute;
    max-width: 640px;  /*== max-width bisa di atur sesuai keinginan ==*/
    min-height: 200px; /*== minimal tinggi konten ==*/
    top: 50%;
    left: 50%;
    background: #fff; /*== warna backround konten ==*/
    padding: 10px;
    border-radius: 3px;
    transform: translate(-50%,-50%); /*== rahasia supaya posisinya ditengah ==*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
span.x {
    /*== css close button ==*/
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background: red; /*== warna bisa disesuaikan ==*/ 
}
span.x::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    width: 50%;
    background: #fff;
    transform: translate(-50%,-50%);
}

/*]]>*/
</style>
<script>/*<![CDATA[*/
/*=== CODEPELAJAR.COM | JAVASCRIPT ==*/
function openModal() {
 /*== id floating widget ditambahkan attibute class dengan nama active ==*/
 document.getElementById('floatingWidget').classList.add('active')
}
function closeModal() {
 /*== Saat di close class active pun di hapus ==*/
 document.getElementById('floatingWidget').classList.remove('active')
}
/*== fungsi di eksekusi disini ==*/
setTimeout(function(){
 openModal()
},2000) /*== time out setelah 2 detik floating widget akan tampil ==*/
/*]]>*/
</script>


Pastikan semua kode itu di letakan dengan benar sesuai petunjuk dari tutorialnya

Jika sudah di save maka langkah selanjutnya sobat simpan dan beralih ke menu Tata Letak/Layout dan tambahkan widget baru bebas sesuai keinginan sobat seperti di gambar di bawah ini:


Cara Membuat Floating Widget Content di Blogger

Cukup mudah bukan ? Itulah tata cara membuat widget melayang atau floating widget bisa dikatakan widget popup yang bisa sobat terapkan di blog sobat terutama Platform Blogger. Bagi sobat yang menggunakan wordpress pun tidak perlu khawatir karena metode ini bisa diterap kan di website wordpress sekalipun tinggal mengganti kode <b:section> dengan kode yang ada pada Wordpress untuk menambahkan widget. Nantikan tutorial anti mainstream Codepelajar selanjutnya dan jangan sungkan untuk berkomentar jika ada kesulitan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel