CARA MEMBUAT ELEMEN STICKY WIDGET PADA SIDEBAR BLOGGER

Widget yang sticky alias lengket dapat diterapkan pada template lama adalah bukan hal baru samasekali, namun pada kesempatan ini saya ingin melakukan sedikit modifikasi ringan agar widget tersebut dapat muncul dengan baik pada layar tablet ukuran 9,7 inch dengan mode landscape (bukan portrait). Adalah hal penting untuk memastikan semua elemen bekerja responsif pada semua layar perangkat PC dan mobile.

Panduan ini hanya dapat di terapkan pada template lama seperti tema sederhana, awesome dst.

Silahkan masuk kepengaturan Blogger, masuk ke halaman editor HTML dan cari kode </head>, perhatikan kode CSS berikut:

<style> #PopularPosts1{width:inherit;
max-width:380px
}
@media only screen and (min-width:400px) and (max-width:970px){
#PopularPosts1{display: none!important;}
}</style>

Kode pengaturan CSS tersebut di letakan sebelum atau di atas kode tag penutup </head>. Saya menandai dua kata dengan warna. Satu warna biru yang lainnya merah. Warna biru adalah widget yang ingin kita buat jadi sticky, Anda bisa menggantinya dengan #Profile1, #Label1, dst. Sedangkan kata yang berwarna merah sebenarnya saya merombaknya dari kode aslinya yang saya dapatkan di internet: 

<style> #PopularPosts1{width:100%;
max-width:380px
}........dst

100% ternyata membuat sidebar melebar melewati batas pada saat konten di scroll ke atas. Contoh di atas saya buat untuk widget PopularPost, bukan PopularPost2 dst.

Langkah selanjutnya cari kode </body> dan letakan kode Javascript berikut tepat diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#FollowByEmail1').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff
});
}
});
}
});
//]]>
</script>

Save template. Seharusnya saya memberi judul tulisan ini dengan 'Cara membuat sticky PopularPosts1 pada sidebar Blogger' Tapi karena  sebenarnya Anda dapat menggantinya widget lain yang tersedia sesuai dengan selera Anda. Judul urung kami terapkan. he he he..

Lihat DEMO

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

SHARE YA:

Cara menambahkan sticky widget pada sidebar template blog lama

Kali ini kita akan membahas cara membuat sticky widget pada sidebar template blog lama. Mengapa saya tekankan template lama? Karena pada varian template template terbaru secara default sidebarnya beda, kecuali emporio, tiga varian template terbaru lain seperti contempo, soho dan notable sidebar 'dilipat' disamping pada tampilan ukuran lebar layar tertentu.

Masih banyak lho yang menggunakan basis template lama dengan layout versi 2, varian varian template lama ini adalah:

1. Simple
2. Dinamic
3. Picture window
4. Awesome inc.
5. Watermark
6. Ethereal
7. Travel 

Dan Jangan remehkan template template lama ini karena ia masih 'worth' untuk di jadikan template buat blogging, tidak percaya? Template viomagz buatan Mas Sugeng yang terkenal itu di buat masih berbasis template lama ini. Yang penting terlebih dahulu harus di rombak menjadi Responsive, mobile friendly dan lebih SEO friendly. Kami sedang mengerjakannya untuk di bagikan gratis.

CARA MEMBUAT STICKY WIDGET PADA SIDEBAR TEMPLATE BLOGGER LAYOUT 2

Apa sih gunanya sticky widget? Tentu berguna, namun gunanya versi kami adalah:

1. Template tampak lebih cantik
2. Sidebar akan tampak tidak kosong karena paling tidak satu widget tetap disana
3. Untuk menjadikan suatu widget sebagai highlight (pusat perhatian) bagi pembaca, misalnya jika yang di jadikan sticky adalah widget iklan

Disini kami akan memberikan contoh pembuatan sticky widget yang bisa diterapkan ke template template lama yang memiliki sidebar kanan, kalau 4 varian template terbaru (contempo, soho, emporio dan notable) sidebarnya di sembunyikan dengan cara jquerry pada ukuran layar tertentu.

Namun jujur saja sticky sidebar ini harus mengikuti syarat atau kondisi berikut karena memiliki kelemahan:

1. Jika sticky widgetnya adalah PopularPosts yang di setting untuk lebih tujuh item maka PopularPosts tersebut tidak bisa di scroll sampai habis hingga ke atas, hanya terbatas 3 list PopularPosts saja.
2. Widget yang paling cocok adalah: Follower, Text, dan widget widget dengan tampilan ramping lainnya.
3. Widget harus di letakan paling bawah sidebar.

CARANYA:

1. Masuk kepengaturan Blogger
2. Klik tema atau theme
3. Pada bagian kanan menu klik tombol titik tiga bersusun maka akan keluar 5 urutan menu.
4. Pilih Edit HTML.

Akan muncul halaman editor HTML Blogger, klik satu kali mouse ke tengah lautan kode kode tersebut hingga kursur berkedit kedip, dan lalu pada keyboard komputer , tablet atau laptop kalian tekan CTRL+F secara bersamaan, maka pada pojok atas bagian kiri akan muncul kotak dialog pencarian, ketikan </body> dan enter. Pada intinya kalian harus mencari kode tersebut di dalam template blogger.

Atau perhatikan gambar keyboard berikut, yang harus di tekan:

Pada halaman editor HTML akan muncul berbundel bundel kode kode HTML, yang tentu saja sulit dicari secara manual, atau pakai scroll mouse dari atas hingga kebawah bukan, namun jika Kalian lakukan cara di atas akan muncul kotak dialog pencarian pada pojok kiri atas halaman editor HTML seperti pada gambar berikut (lihat tanda merah):

Setelah kode </body> tersebut di temukan letakan kode berikut tepat di atasnya:

<script>
//<![CDATA[
HG_makeSticky("Followers1"); // 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:1; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); min-margin-top: 45; padding-top: 45px; position:relative9 !important;}
</style>

Ganti kode widget yang kami merahkan dengan kode widget Kalian sendiri, misalnya: 'Label1' atau 'Text1' dst

Jangan lupa SAVE template.

Lihat DEMO:

Kami menerapkannya pada desain template buatan Anissa berbasis template Simple atau Sederhana layout ke 2, kalau kalian berminat terhadap template tersebut akan kami bagikan gratis. Dijamin bersih, no credit sama sekali.

kuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!  Share:

SHARE YA:

Cara menambahkan elelemen sticky widget pad sidebar template blog emporio

Template yang sedang kami pakai sekarang adalah emporio yang telah kami re-desain. Dan fitur fitur berikut terkait fitur yang akan kita tambahkan:

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:1; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 45; 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!

SHARE YA:

3 cara sederhana menambahkan Sticky widget pada sidebar pada template blog

Banyak cara untuk membuat halaman web menjadi lebih impressif. Diantaranya dengan cara menambahkan widget sticky sidebar. Namun...

Tidak semua template sama struktur elemennya jadi setiap widget yang dibuat oleh pihak ketiga tentu akan berbeda efeknya terhadap jenis atau varian template yang satu dengan yang lain.

Apalagi template sekarang umumnya terbagi dua versi:

1. Versi layout 2: Tema sederhana, awsome, PT. keren sekali, perjalanan dst
2. Versi layout 3 (terbaru - 4 varian): Contempo, Soho, Notable dan Emporio.

Selama ini alasan blogger menambahkan sidebar sticky adalah karena tema tema versi layou 2 yang lebih lama itu. Secara default (bawaan) Template template tersebut memang memiliki tampilan sidebar. 

Sedangkan 4 varian template blogger terbaru tidak memiliki sidebar model template template lama tersebut, kecuali jika opsi sidebarnya di tampilkan dengan jalan merombak total template template tersebut tersebut. Contohnya template contempo buatan editblogtema (Lihat dan klik GALLERY TEMPLATE pada navigasi blog ini).

Baiklah kita langsung masuk ke caranya:

1. Cara pertama:

Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:

&lt;b:if cond=&#039;data:blog.isMobileRequest
== &amp;quot;false&amp;quot;&#039;&gt; &lt;
script type=&#039;text/javascript&#039;&gt; //&lt;!
[CDATA[ // Sticky widget $(function(){if($(&quot;#HTML1&quot;)
.length){var o=$(&quot;#HTML1&quot;),
t=$(&quot;#HTML1&quot;)
.offset().top,i=$(&quot;#HTML1&quot;)
.height();$(window).scroll(function(){var s=$(&quot;#comments&quot;).offset()
.top-i-20,f=$(window).scrollTop();if(f&gt;t?
o.css({position:&quot;fixed&quot;,top:15}):o
.css(&quot;position&quot;,&quot;static&quot;),
f&gt;s)
{var n=s-f;o.css({top:n})}})}});
//]]&gt; &lt;/script&gt; &lt;/b:if&gt;

Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1" maka cara menulisnya adalah: #PopularPosts1. Save template. 

2. Cara kedua:

Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:

<script>$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });</script>

Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1" maka cara menulisnya adalah: #PopularPosts1. Save template.

3. Cara ketiga:

Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode
</body> dan letakan kode JavaScript berikut tepat diatasnya:

<script>
//<![CDATA[
HG_makeSticky("PopularPosts1"); // 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>

Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1"  maka cara menulisnya adalah: PopularPosts1. Save template.

Cara ini bisa diterapkan pada template template yang dibuat berdasarkan layout ke-3 misalnya template textrim buatan Igniel.

Mungkin masih ada cara keempat dan kelima yang lebih sederhana, silahkan berkreasi sendiri.

www.editblogtema.com

SHARE YA: