Loading...
ucapan

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda




Monday, September 28, 2015

Cara Membuat Sticky Widget Sidebar di Blog

Post Generator PRO
Plugin Wordpress POST GENERATOR PRO sederhana tapi powerful, Membuat ribuan artikel blog hanya dalam sehari saja. Tanpa masalah Duplicate Content.
Rugi jika tidak memilikinya walau belum punya Hosting dan blog wordpress, akibat penjualannya sudah berakhir. Miliki secepatnya... Sangat bagus digunakan untuk mengupgrade BACKLINK ke blog utama demi menghasilkan Duit Or Dollar bagi pemain Adsense, He..

Membuat Widget Sidebar menempel di Blog

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> 


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


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


<!--sticky-->
<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>
<!--sticky-->

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(){
$(&quot;#mdstickybar&quot;).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'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
 <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'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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
Title : Cara Membuat Sticky Widget Sidebar di Blog
Description : Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara membuat Widget Sidebar selalu menempel atau selalu...

10 komentar

masih bvingung kak cara mencari ID widget nya

Sticky widgetnya cuma buat 1 widget atau beberapa widget bisa?

di coba tapi blum bisa

saya sudah coba dan berhasil. terimakasih tutornya sob..

sedap mas..cuman page yang di tengah belom sampai kelar tapi sidebar udah keburu keatas dan berhenti..mungkin cocok untuk template yg 3 kolom

ngikutin sih.. tapi kok di belakang post ya?

kalau biar stickynya ke paling depan post gimana ya?

view:
faisal29boy.blogspot.com

Artikel yang bagus ..
Template di blog agan keren ya.. simple tapi elegan, bagi donk gan template nya ?
saya lagi butuh template yang beginian,
Terima kasih ..

ka aku buat stiky udah ikutin langkahnya tapi blog aku jadi aneh gini ya ? mohon di bantu ka?makasih

bingung gan , gimana dong ini ga jelas maksudnya

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.