EditblogTema

Desain Panduan Perihal Kami
×
template design by: Anissa Auliasari

Inspire to clever

CARA MENAMBAHKAN ELEMEN STICKY WIDGET PADA SIDEBAR TEMPLATE BLOGGER EMPORIO

AvatarOleh:
Template yang sedang kami pakai sekarang adalah emporio yang telah kami re-desain. Dan fitur fitur berikut terkait fitur yang akan kita tambahkan:
cara menambahkan fitur sticky sidebar ke template emporio
  1. Homepage grid + sidebar
  2. Halaman Konten dengan navbar fixed+sidebar
Saya rasa template ini keren, cepat, aman dan cukup SEO friendly. untuk menambahkan fitur sticky sidebar pada sidebar bagian konten (bukan homepage) kalian cukup masuk kepengaturan blog seperti biasa:
  • Masuk dasbor atau penaturan blogger.
  • Pilih tema
  • Pilih Edit HTML
Di dalam pengaturan halaman editor HTML blogger cari kode tag penutup body berikut </body> dan letakan kode script berikut tepat di atasnya: 

  <script>
//<![CDATA[
HG_makeSticky("Profile1"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

Keterangan: Letakan setiap widget yang ingin di 'sticky' pada posisi paling bawah sidebar template emporio kalian. Pada kode di atas kalian bisa mengganti nama Widget sesuai keinginan, misal: '#PopularPost1' perhatikan juga cara penulisan harus benar huruf besar dan kecil pada penamaan widget adalah sensitif.

Dan Kalian dapat menerapkannya untuk membuat widget iklan Adsense pada blog kalian memiliki fitur ini dengan cara yang sama: Yakni dengan menerapkannya melalui widget ads.

Sidebar pada template emporio secara default hanya dapat tampil pada ukuran layar laptop dan PC Dekstop. Sedangkan pada tablet  (walau dengan posisi landscape) dan hape tidak dapat tampil karena pengaturan @mediascreenya telah ditetapkan sedemikian rupa. Widget widget yang tampil pada sidebar pada PC laptop dan desktop akan ditampilkan di bagian bawah postingan pada ukuran layar yang lebih kecil.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

1 comment:

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

2018 - © The EditblogTema