Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.

Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan disini, coba klik DISINI

Bagaimana, menarik bukan...???

Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :
  • Login ke blogger
  • Tata Letak » Add Gadget » Pilih HTLM/Javascript
  • Copy kode di bawah ini dan pastekan kedalam box HTML/Javascript tersebut
<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="http://2.bp.blogspot.com/-Gq3OE4WWUds/T8PO89DB8lI/AAAAAAAAA-w/cGQ--xpcI9c/s320/back_to_top.png" />', //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>

sumber : copazz.blogspot.com

Cara Pasang Tombol Back to Top Auto Hide

Baca Selengkapnya →

Pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membuat widget artikel yang paling banyak dikomentari oleh pengunjung blog kita. Javascript dari widget ini dibuat oleh salah seorang blogger yaitu Nitin Maheta dan jika ingin mengunjungi blognya silahkan buka makingdifferent.com.

Kenapa Harus Memasang Widget Artikel Yang Paling Banyak Dikomentari Ini?

Tentunya sorang pengunjung di blog anda akan lebih tertarik untuk membaca artikel kita yang banyak mendapatkan respon dari pengunjung kita yang lainnya. Umumnya widget ini dipasang pada blog yang menggunakan wordpress.org, namun anda bisa saja memasangnya di blogspot anda.

Cara Membuat Widget Postingan Paling Banyak Dikomentari


Jika anda ingin memasang widget ini di blog anda, anda cukup mengikuti beberapa langkah mudah yang ada di bawah ini :

Langkah 1 : Login Ke Blogger >> Dashboard

Langkah 2 : Silahkan pilih menu Tata Letak >> Tampahkan Gadget (Add Gadget)

Langkah 3 : Pilih HTML / Javascript

Langkah 4 : Masukkan kode javascript di bawah ini di kotak yang keluar

<script language='JavaScript'>
aBold = false;
MDnumbposts=200;
MDmaxsshowresult=10;
home_page = "http://www.alamatbloganda.com/";
</script>
<script src='http://makingdifferent.github.com/blogger-widgets/Most-commented-posts.js' type='text/javascript'></script>
Langkah 5 : Simpan

Untuk customisasinya :

  • Silahkan ganti www.alamatbloganda.com dengan URL blog anda, misalkan cofeemix.blogspot.com (Wajib diganti dengan alamat blog anda). 
  • 200 merupakan jumlah postingan yang ada di blog anda, anda bisa menggantinya sesuai dengan jumlah postingan blog anda
  • 10 merupakan jumlah postingan yang di tampilkan di widget tersebut dan kita bisa menggantinya sesuai dengan keinginan kita sendiri.
Nah, selamat mencoba dan jangan lupa tinggalkan komentar jika anda sudah bisa memasangnya di blog anda. Semoga bermanfaat.


sumber : http://www.cofeemix.com/2013/02/cara-membuat-widget-postingan-paling.html

Membuat Widget Postingan Paling Banyak Dikomentari

Baca Selengkapnya →

Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Berikut adalah hasilnya :


Berikut adalah langkah langkahnya :

Langkah 1 : Pergi ke blogger >> Dashboard >> Template

Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Centang Expand Template Widget

Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :

]]></b:skin>

Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin>


.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}


Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :

</head>

Kemudian copy dan paste kode di bawah ini tepat di atas kode </head> yang anda temukan :


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh berikut https://www.facebook.com/bayu.adipati. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID adalah bayu.adipati.

Langkah 8 : Kemudian cari kode seperti ini <div class='comments' id='comments'> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!


<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/><data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Catatan : Perhatikan kode diatas yang saya beri warna. Untuk yang angka merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.

Untuk kode yang saya beri warna merah <div class='comments comments-page' id='blogger-comments-page'>  , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.

Langkah 9 : Simpan dan lihat hasilnya.

Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.

Update : 7 Februari 2013
Mungkin anda tidak akan mendapatkan notifikasi jika ada yang mengomentari blog anda. Nah untuk mengatasinya, anda perlu untuk membuat APP FB terlebih dahulu. Untuk tutorialnya silahkan baca :Cara untuk membuat APP FB.

Setelah anda membuatnya, sekarang kita akan memasukkan APP ID dari Aplikasi yang telah kita buat sebelumnya. Caranya adalah :

  • Cari </head> di template anda (Masuk Blogger >> template >> Edit HTML)
  • Setelah ketemu masukkan kode di bawah ini di atasnya

<meta content='APP ID' property='fb:app_id'/>

  • Ganti APP ID dengan APP ID yang baru anda buat. Kemudian klik simpan.



sumber : http://www.cofeemix.com/2012/12/cara-membuat-komentar-facebook-di-blog.html

Cara Membuat Komentar Facebook di Blog

Baca Selengkapnya →

Artist : D'Sanbob
Tittle  : Menjauhi Ku

Download D'sanbob - Menjauhi Ku

untuk Download D'sanbob - Menjauhi Ku klik link di bawah ini >>>

Download Disini

Download D'sanbob - Menjauhi Ku

Baca Selengkapnya →

Copyright © F For Fauzie | Designed With By Blogger Templates
Scroll To Top