Tunggu Sebentar...

2/21/2017

Cara Membuat Widget Melayang Sidebar Blog

Baca Juga



AA Sciences, Aldi Andreansyah - Sticky, Widget Melayang Samping blog, Widget Melayang Samping kiri kanan blog, Cara Membuat Widget Melayang Sidebar.


Widget melayang sidebar
Adanya Membuat tampil cantik pada sebuah website terutama yang AA Sciences ingin bahas kali ini pada tampilan sebuah blogger adalah salah satu hal dambaan semua para user web/blog tersebut, tetapi hal yang terpenting yakni untuk menyamankan para pengunjung agar lebih antusias terpikat dengan sebuah blog yang tampil cantik tersebut sehingga tak segan para pengunjung mengunjungi website yang tampil cantik tersebut.

Di kali ini AA Sciences akan membuat nya bagaimana tampilan sebuah web/blog agar tampil Cantik,indah dengan adanya bantuan sebuah fitur widget sticky atau widget melayang yang dimana jika terdapat widget yang diinginkan untuk tampil sticky maka otomatis widget tersebut akan melayang dari samping sebuah website atau biasa yang di kenal sticky, baik itu dari tampilan sebuah desktop, tablet, Smartphone dan jenis lainnya yang bisa kalian terapkan sendiri.

Sebetulnya jika pemasangan widget melayang ini dapat ditapkan pada versi apa saja yakni desktop dan seluler, tetapi jika memasang widget melayang ini AA Sciences lebih menyarankan kalian terapkan nya pada versi desktop saja di karenakan hal ini tidak lah mengganggu para pengunjung dengan adanya widget tersebut, dan jika sebuah widget melayang di terapkan pada versi seluler pasti sebagian besar pengunjung akan risih dengan adanya widget melayang tersebut, sehingga berdampak besar web kalian pun di close nya langsung.

Metode pembuatan nya pun cukup mudah yakni kalian hanya menambahkan script Jquery saja sehabis itu kalian masukkan ID widget tertentu nya pada Script Jquery/Widget Melayang tersebut baik itu popular post, label, recent post dan masih banyak lagi widget lainnya yang ingin kalian terapkan pada sidebar/samping sebuah website tersebut.

Yasudah, jika kalian sudah Penasaran mengenai pembuatan Widget Melayang Sidebar Blog kalian, maka langsung saja mengenai TKP tutor nya di bawah ini :

Cara Membuat Widget Melayang Sidebar Blog  :


1 . Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode </body> atau jika bingung kode ini biasanya terletak pada bagian paling bawah sebuah template blog pada umumnya.

3 . Jika sudah ditemukan kode </body> tadi, langsung saja kalian Salin kan Script Jquery/Widget Melayang Sidebar di bawah ini, tepat pada bagian sebelum kode </body> nya, berikut Script Jquery nya :


<script type='text/javascript'>

//<![CDATA[

// Sticky widget

$(function(){if($("#HTML10").length){var o=$("#HTML10"),t=$("#HTML10").offset().top,i=$("#HTML10").height();$(window).scroll(function(){var s=$("#footer-wrapper").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:60}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});

//]]>

</script>

Catatan :

Kalian dapat mengubah ID widget seperti #HTML10 diatas lalu ubah dengan ID Widget tertentu kalian, sebagai contoh popularpost1, label1, recentpost1, dll.

Baca :


4 . Terakhir, pilih menu Simpan Template dan lihat hasilnya dengan cara melihat widget yang sudah kalian terapkan sticky/melayang tadi, dengan cara, melihat bagian samping/sidebar konten widget kalian.

Mungkin hanya cukup sekian mengenai pembahasan Cara Membuat Widget Melayang Sidebar Blog yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan kalian mengenai Pembuatan Widget Melayang Sidebar Blog ini, Amin.

Artikel Terkait

Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

================================================================
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
================================================================
EmoticonEmoticon