Cara Membuat Sticky Widget Sidebar di Blog

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda?

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2.

Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara membuat Widget Sidebar selalu menempel atau selalu mengikuti kemana scroll naik atau turun, kali ini Berilah ingin memberikan tutorial tersebut

Perhatian: Dulu blog Berlian adalah LintasWeblog, jadi maklumi jika setiap postingan selalu ada kata LintasWeblog

Kelebihan Sticky Widget

Kelebihannya tentu membuat pengunjung menjadi lebih mudah untuk melihat Sidebar Widget yang sobat-sobat gunakan pada blog sobat, dan Sticky Widget ini tidak memberatkan atau tidak memberi efek berat pada blog sobat, jadi jangan sungkan untuk menggunakan Sticky Widget ini.

Cara Membuat Sticky Widget Pada Blog

Masuk ke Dashboard Blogger
Klik Template » Edit HTML
Cari kode ]]></b:skin> ( untuk mempercepat pencarian tekan Ctrl+F )
Masukkan kode dibawah ini diatas/sebelum kode ]]></b:skin>

#mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px;
color:#474747;}

Lalu cari kode </head> dan masukan kode dibawah ini diatas/sebelum kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Lintas Weblog
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// For Blogger by : http://lintasweblog.blogspot.com/
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>

Kode yang saya beri warna berbeda, itu adalah jQuery, jika sudah ada jQuery tersebut diblog sobat, lebih baik hapus satu, karena jika jQuery tersebut ada dua di Blog sobat, Sticky Widget ini tidak akan bisa/berhasil.

Selanjutnya cari </body>
Masukkan kode dibawah ini diatas/sebelum kode </body>

<script type='text/javascript'>
$(document).ready(function(){
$("#mdstickybar").sticky({topSpacing:0});
});
</script>

Simpan Template

Setelah itu kita harus mencari ID Widget yang akan kita pasang Sticky Widgetnya, Untuk mencari ID Widget Cukup Sobat masuk pada Tata Letak » Lalu cari widget yang akan sobat pasang Sticky » lalu Klik Edit pada Widget tersebut, nah ID Widget sobat akan tertera pada Url Widget, contoh Url Widget:

http://www.blogger.com/rearrange?blogID=1787216510986734973&action=editWidget&sectionId=sidebar-bawah&widgetType=null&widgetId=HTML2

Yang saya beri warna Hijau tadi, itu adalah ID Widget

Lalu sobat kembali lagi ke Template » Edit HTML
Lalu cari ID Widget sobat yang tadi ingin diberi Sticky Widget
Contoh ID Widget yang ada pada Template

<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Diatas adalah kode Widget asli pada Template sobat, mungkin biasanya berbeda sedikit, tapi cara membuat Sticky Widget ini akan selalu berhasil :P

Lalu Sobat hanya tinggal menambah beberapa kode pada kode Widget diatas tadi, berikut kodenya...

<div id='mdstickybar'>
</div>

Masukan kode tadi, di Widget seperti ini:

<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>
<div id='mdstickybar'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Terakhir, Simpan Template.

Itulah Cara Membuat Sticky Widget Sidebar Pada Blog. Jika ada kekurangan atau terjadi masalah pada Template Sobat bisa berkomentar dibawah ini.

Sebenarnya Siraja Blogger "Kang Ismet" sudah pernah memberikan tutorial Membuat Sticky Widget pada postingannya, tapi banyak para Blogger yang tidak berhasil/gagal pada tutorialnya tersebut, dengan alasan yang berbeda-beda, dan tutorial ini saya pastikan akan berhasil pada Blog sobat, So Funny and Always Blogging :D
http://fajriandaviar.blogspot.com/

Pengelola Blog : ABDUL WAHAB

Judul : Cara Membuat Sticky Widget Sidebar di Blog
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Cara Membuat Sticky Widget Sidebar di Blog
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2015/04/cara-membuat-sticky-widget-sidebar-di.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.

Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.