Membuat Widget Media Sosial Share Melayang Di Sebelah Kiri

Widget Sosial Media

Temukan Informasi Mengenai Dunia Blogging Dan Lain-Lain Disini ! Berikut ini membuat widget media sosial share melayang

1. Buka dashboard blogger

2. Masuk menu template, pilih EDIT HTML

3. Cari kode </body>, paste kode dibawah ini diatas kode </body>


<!-- start sidebar melayang-->

<script>
/*<![CDATA[*/
// Sticky Plugin

(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>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mblfloater&quot;).sticky({topSpacing:0});
});
</script>
<!-- end sidebar melayang-->
4. Edit widget yang akan dibuat melayang (sticky)

Bagaimana cara mengedit kode widgetnya?

Setiap widget yang ada di blog kalian, pasti ada kodingannya, cara melihat kodinganya adalah :

Klik Lompat ke widget / expand widget pada bagian atas kode template, lihat Gambar 2 dibawah ini.


Gambar 2
Penjelasan sesuai dengan penomoran pada Gambar 2 :

Klik tombot lompati widget / expand widget
Daftar widget yang ada pada blog, tinggal pilih saja mana yang mau dibut melayang. Pada kasus ini, saya membuat widget iklan yang akan melayang.
Klik widget yang mau dibuat melayang, maka Anda akan dibawa ke kodingannya. Lihat Gambar 3 dibawah ini


Gambar 3
Penjelasan sesuai dengan penomoran pada Gambar 3 :

Untuk memastikan apakah benar atau tidaknya widget tersebut, kita bisa lihat titlenya, tapi pasti benar sih.
Klik tanda … (artinya expand)
Setelah klik tanda … maka kalian akan dibawah ke tampilan pada Gambar 4 dibawah. Ada yang harus kalian tambahka pada kode ini, perhatikan kotak-kotak hitam Pada Gambar 4


Gambar 4
Penjelasan sesuai dengan penomoran pada Gambar 4 :

Tambahkan dibawah kode <b:includable id=’main’>
Tambahkan diatas kode <b:include name=’quickedit’/>
Jika bingung karna kode-kode nya beda, intinya begini pemasangannya :

<b:includable id=’main’>
<div id=’mblfloater’>
…….
</div>
</b:includable>

Ingin membuat lebih dari satu Sticky Widget?

Ketika saya ingin memasang lebih dari satu sticky widget, ternyata kode diatas tidak cukup, harus pake kode tambahan. Kode tambahannya adalah seperti dibawah ini :

Temukann kode </body>. Paste kode dibawah ini diatas kode </body>


<!-- sticky lebih dari satu -->
<script>
//<![CDATA[
bs_makeSticky("HTML3");
function bs_makeSticky(elem) {
var leony_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
leony_sticky.parentNode.insertBefore(scrollee, leony_sticky);
var width = leony_sticky.offsetWidth;
var iniClass = leony_sticky.className + 'leony_sticky';
window.addEventListener('scroll',leony_sticking, false);
function leony_sticking() {
var rect = scrollee.getBoundingClientRect();if (rect.top < 290) {
leony_sticky.className = iniClass + ' leony_sticking';
leony_sticky.style.width = width + "px";} else {
leony_sticky.className = iniClass;}}
}
//]]>
</script>
<style>
.leony_sticking {background:none !important; position:fixed; top:290px;}
</style>
<!-- end sticky lebih dari satu -->
Ganti HTML3 dengan ID widget yang ingin kalian buat sticky.

Semoga bermanfaat. Terimakasih.
Membuat Widget Media Sosial Share Melayang Di Sebelah Kiri Membuat Widget Media Sosial Share Melayang Di Sebelah Kiri Reviewed by Erna Queen on September 06, 2016 Rating: 5

Tidak ada komentar