Post Game

Cara Membuat Widget Top Komentator Di Blog

Cara Memasang Widget Top Komentator Di Blog. Ada banyak widget widget yang bisa di pasang di side bar blog. Ada yang bersifat menguntungkan, ada juga yang hanya dipasang untuk hiasan. Pada postingan ini, saya akan memberikan informasi tentang cara memasang widget top komentator di blog yang di pasang untuk hiasan. Selain sebagai hiasan, widget komentar teman ini berfungsi untuk menarik minat pembaca blog untuk berkomentar pada setiap postingan agar namanya dapat dipajang di widget ini.

Seperti gambar diatas, adalah gambar widget di blog ini. Tampilannya saya poloskan agar tidak membuat berat blog. Ketika ada pengunjung dengan komentar terbanyak, langsung akan masuk ke list tanpa harus diedit lagi. Atau bisa dibilang otomatis.

Cara Membuat Widget Top Komentator Di Blog

1. Login ke akun blogger anda 
2. Pada dashboard, cari menu Tata Letak, setelah itu klik tambah gadget
3. Cari widget yang bernama HTML/Javascript
4. Paste kode dibawah ini di kolom konten, secara berurutan

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>

<script type="text/javascript">
var maxTopCommenters = 30;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Nama Yang Tidak Ingin Di Cantum"];
var maxUserNameLength = 42;
//
var txtTopLine = <b>[#].</b> [image] [user] ([count]);
var txtNoTopCommenters = No top commentators at this time.;
var txtAnonymous = ;
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhANt_MzlXTIYYmGo-35WfojKbEUw-L1dHdJUckxPA3ebHUvmRNYQuuGHpQo9k2QItWdRZr57mjOvNMPsWqb0XLsY4CxZ5l0hIulLokiExa2T6NVtrSyPl8y2rxCPhSFTJfQcYPXt_bgE/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s= + sizeAvatar;
var urlMyProfile = http://jonarendra.blogspot.com/p/tentang-saya.html;
var urlMyAvatar = ;
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;

var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement(a);
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = http://www.google.com/s2/favicons?domain= + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(//sdd+-c//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(//sdd+(-c){0,1}//, "/"+newsize+"/");

var authorName = author.name.$t;
if(authorName == Anonymous && txtAnonymous != && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = <img class="top-commenter-avatar" height="+sizeAvatar+" width="+sizeAvatar+" title="+authorName+" src="+avaimg+" />;
if(authorUri!="") imgcode = <a href="+authorUri+">+imgcode+</a>;

if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = <a class="profile-name-link" href="+authorUri+">+authorcode+</a>;

text = text.replace([user], authorcode);
text = text.replace([image], imgcode);
text = text.replace([#], position);
text = text.replace([count], item.count);
return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();

if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}

for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;

var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write(<script type="text/javascript" src="http://+window.location.hostname+/feeds/comments/default?redirect=false&max-results=200&start-index=+ndxbase+&alt=json-in-script&callback=showTopCommenters"></+script>);
return;
}

// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write(<di+v class="top-commenter-line">);
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write(</d+iv>);
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write(<script type="text/javascript" src="http://+window.location.hostname+/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></+script>);
</script>

Keterangan:
Silahkan kustomisasikan kode CSS dan javascript seperti:

• var maxTopCommenters = jumlah maximal komentar
• var minComments = jumlah minimal komentar
• var excludeMe = true untuk menampilkan komentar author, false untuk tidak
• var excludeUsers = nama orang yang tidak ingin dipasang
• var maxUserNameLength = jumlah maximal karakter pada nama
• var txtNoTopCommenters = teks yang tampil apabila tidak ada orang yang berkomentar
• var sizeAvatar = ukuran gambar foto
• var cropAvatar = true untuk mengizinkan memotong foto, false untuk tidak
• var urlNoAvatar = URL Gambar jika tidak ada foto

5. Jika sudah di edit seperti pada keterangan diatas, klik simpan/save

Bagaimana? apakah anda sudah berhasil memasang widget kotak komentar teman sesuai keinginan anda? Sekian dulu postingan Blogger saya yang berjudul Cara Memasang Widget Top Komentator Di Blog, semoga bermanfaat untuk anda.

Jika ada masalah saat penerapan tutorial diatas, berikan pertanyaan mengenai masalah dengan cara membuat komentar pada kolom dibawah.

Go to link Download

Cara Membuat Header Bar Top Menu Mirip Facebook

Ini kode warna biru background header bar Facebook: #3a5795

Go to link Download

Cara Membuat Tombol Back To Top Part2

Pada Posting sebelumnya saya pernah membahas tentang cara Cara Membuat Tombol Back To Top Menggunakan Javascript, tapi di postingan tersebut banyak yang tidak berhasil menggunakan cara tersebut jadi kali ini saya akan Cara Membuat Tombol Back To Top Part2, mudah-mudahan dengan cara yang kedua ini banyak yang berhasil :D

#toTop {
display:none;
text-decoration:none;
position:fixed;
top:420px;
left:5px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

 <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
$(function(){
$(a[href*=#top]).click(function() {
if (location.pathname.replace(/^//,) == this.pathname.replace(/^//,)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $([name= + this.hash.slice(1) +]);
if ($target.length) {
var targetOffset = $target.offset().top;
$(html,body).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>

-Semoga Bermanfaat  ting-

Go to link Download

Cara Membuat Tombol Back To Top Keren Di Blog

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

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

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: <img src="URL Gambar Back To Top" />, //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: #top, //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery(#+dest).length==1) //check element set by string exists
            dest=jQuery(#+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+px, top:controly+px})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
  
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $(html) : $(body)) : $(html,body)
            mainobj.$control=$(<div id="topcontrol">+mainobj.controlHTML+</div>)
                .css({position:mainobj.cssfixedsupport? fixed : absolute, bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:pointer})
                .attr({title:Scroll Back to Top})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo(body)
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!=) //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $(a[href=" + mainobj.anchorkeyword +"]).click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind(scroll resize, function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

• Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Animasi :

Standar

Go to link Download

Cara Membuat Tombol Back To Top di Blog

Selamat malam sobat !!! Kali ini aq akan berbagi cara untuk membuat tombol Back to Top. Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Membuat Tombol Back To Top di Blog.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.

Berikut langkah-langkah dalam Membuat Tombol Back To Top di Blog.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<!--Back to top script-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_b8ITnDhovsysmKd_jDt7eJY1SxS7AdY9PPcRHIZ1yTKWH57aTpusVZjwQYuA4M1d002xRpfiVCxKKv5i3JIaC-LdFFR1WWsUkdH7tJj8Bjz9-uUVGgHxvEpWE57jzTBC7rsgUo5ikBk/s1600/back+to+top13.png" />,
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: #top,
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery(#+dest).length==1)
            dest=jQuery(#+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+px, top:controly+px})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $(html) : $(body)) : $(html,body)
            mainobj.$control=$(<div id="topcontrol">+mainobj.controlHTML+</div>)
                .css({position:mainobj.cssfixedsupport? fixed : absolute, bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:pointer})
                .attr({title:Scroll Back to Top})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo(body)
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!=) //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $(a[href=" + mainobj.anchorkeyword +"]).click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind(scroll resize, function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

<!--Back to top script end--></script>

Catatan:

• Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
• Kode-kode berwarna hijau bisa sobat ubah:

- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.

- Scroll Back To Top: title pada tombol

• Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.

 

Ada beberapa pilihan gambar untuk tampilan tombol Back To Top, sobat bisa cari sendiri pilihan-pilihan nya di Google.

Go to link Download

Cara Membuat Tombol Back To Top pada Blog dengan Mudah

Go to link Download

Cara Membuat Tombol Back to Top dengan Efek Bounce

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

<script type=text/javascript>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $(#BounceToTop).fadeIn(); } else { $(#BounceToTop).fadeOut(); } });
$(#BounceToTop).click(function() { $(body,html).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

<style type=text/css scoped=scoped>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id=BounceToTop><img alt=Back to top src=http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png/></div> 

<script type=text/javascript>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $(#BounceToTop).slideDown(200); } else { $(#BounceToTop).slideUp(300); } });
$(#BounceToTop).click(function() { $(body,html).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Go to link Download

Cara membuat Tombol Back to Top dengan mudah

•  Login ke Blogger, Klik Design/Rancangan > Edit HTML .
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Copy kode berikut dan pastekan di atas ]]></b:skin>
  #floating-up {
  position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
  _bottom:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  #floating-up a
  {
  filter:alpha(opacity=65);
  -moz-opacity:0.65;
  opacity:0.65;
  border:0;
  }
  #floating-up img
  {
  border:0;
  }
  #floating-up a:hover
  {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
  }
• Lalu tambahkan kode <a name=to-bottom></a> tepat diatas kode </body>.
• Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
  <div id=floating-up>
  <div><a href=# title=back to top><img alt=back to top src=http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png/></a></div>
  <div><a href=#to-bottom title=back to bottom><img alt=back to bottom src=http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png/></a></div>
  </div>
• Terakhir klik Save / Simpan Template.
  

Go to link Download

Cara Membuat Tombol Back To Top

1. Login ke akun blogger sobat
2. Pilih Template>>Edit HTML>>Lanjutkan.Jangan lupa centang Expand Template Widget
3. Copas kode dibawah ini tepat diatas kode </body>(tekan Ctrl+F untuk mencari kode </body>)

   

Go to link Download