Tutorial Blog Unik: JQuery

Cara Membuat Slide Like Fanspage Di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Slide Like Fanspage Di Blog</b> - Selamat hari freeday sobat. Selamat hari sabtu. Hari ini, <b><a href="http://fahmifanirius.gq/">Fahmi Fanirius Blog</a></b> akan membahas tentang yang bisa dibilang salah satu trik SEO untuk menaikkan trafik. Tutorial tersebut adalah <b><a href="http://www.fahmifanirius.gq/2015/02/cara-membuat-slide-like-fanspage-di-blog.html">Cara Membuat Kotak Like Fanspage Melayang Di Blog</a></b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFTdnRr_m5_sf1BNQ5Urynb0PdE68iH1p53FGQnmPQTLrGcNw6Kys1ZP5eTVssXq7zhj13Fh1XEzroEJQYZzNr_E6dJ4tl53H1gpR_sBwBGhPVxyguaPXwOeVzPaGi3tbpWj2oUyMLmiJ/s1600/fb+float.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Slide Like Fanspage Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFTdnRr_m5_sf1BNQ5Urynb0PdE68iH1p53FGQnmPQTLrGcNw6Kys1ZP5eTVssXq7zhj13Fh1XEzroEJQYZzNr_E6dJ4tl53H1gpR_sBwBGhPVxyguaPXwOeVzPaGi3tbpWj2oUyMLmiJ/s1600/fb+float.png" title="Cara Membuat Slide Like Fanspage Di Blog" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">
Pastinya sudah ngerti dan tau semua apa sih, fungsi seorang blogger membuat fanspage yang sering disebut FP di facebook untuk setiap blog yang mereka buat? Tujuan utama nya adalah untuk menaikkan dan memperkenalkan artikel blog mereka.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Tak hanya tombol follow saja agar pengunjung setia melihat update dari blog sobat yang mereka baca. Bisa saja dengan fanspage yang sobat buat khusus untuk blog sobat. Apalagi, pengunjung sobat pastinya lebih candu dan online di facebook daripada di google+ atau blogger yang dapat melihat setiap update artikel dari blog sobat melalui beranda facebook mereka. (<span style="color: red;">Baca juga</span>: <b><a href="http://www.fahmifanirius.gq/2014/04/cara-pasang-tombol-follow-blog-pada-blog.html">Cara Memasang Tombol Follow Blog Dan Dashboard Di Blog</a></b>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Nah, tujuan untuk <b>cara membuat like box fanspage di blog</b>, untuk memperbanyak jumlah like dari fanspage sobat. Kalau blog sobat dibanjiri oleh pengunjung karena artikel atau post yang unik dan menarik untuk dibaca pengunjung, tentunya pengunjung tersebut akan tidak sabar untuk melihat artikel yang lebih menarik lagi untuk dibaca oleh mereka. Tentunya, pengunjung sobat me-like fanspage sobat melalui <b>kotak slide like fanspage melayang</b> yang sudah disediakan oleh sobat di blog sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<br />
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"></head> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode jQery dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: kode diatas merupakan kode jQuery. Jika kode jQuery sudah terpasang di blog sobat, maka tidak perlu dipasang lagi. Tanpa kode jQuery, widget ini tidak akan bisa tampil.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Tambahkan gadget/add gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. Copy kode dibawah ini kemudian paste pada kotak HTML/JavaScript:</span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=<span style="color: cyan;"><b>URL Fanspage Sobat</b></span>&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: ganti tulisan <b><span style="color: blue;">URL Fanspage Sobat</span></b><b style="color: cyan;"> </b>dengan url dari fanspage sobat sendiri</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
 Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.gq/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Slide Like Fanspage Di Blog</span></div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat slide like fanspage di blog yang dapat memperkenalkan fansage facbook Anda kepada pengunjung Anda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2457 votes</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br />
</span></div>
</div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Cara Membuat Slide Like Fanspage Di Blog - Selamat hari freeday sobat. Selamat hari sabtu. Hari ini, Fahmi Fanirius Blog akan membahas t...

Cara Membuat Notifikasi Komentar Google Plus Di Blog

2:36 AM Unknown 4

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Notifikasi Komentar Google Plus Di Blog</b> - Selamat sore... Saat ini, saya akan bagi<b> tutorial blogger</b> lagi yang sering bahkan banyak digunakan oleh para blogger atau pembangun blog untuk blog mereka. Tutorial yang saya maksud adalah <b><a href="http://cara%20membuat%20recent%20comment%20dengan%20avatar%20di%20blog/">Cara Membuat Notifikasi Komentar Seperti Google Plus Di Blogger</a></b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCVyfdfOQqXpqdF06d8zmgKOTSJIDx64lYlIOj8FxdvMyXc9Y3Jezwo_c56VrYVNtwnijiTgK3WYHgTgcWqTKC-cdzI8hWLdPv64U3b5uZ0Nbj0jqEocY7kVg0a86fcksF_xHd9_LCTnD/s1600/Screenshot_24.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Notifikasi Komentar Google Plus Di Blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCVyfdfOQqXpqdF06d8zmgKOTSJIDx64lYlIOj8FxdvMyXc9Y3Jezwo_c56VrYVNtwnijiTgK3WYHgTgcWqTKC-cdzI8hWLdPv64U3b5uZ0Nbj0jqEocY7kVg0a86fcksF_xHd9_LCTnD/s1600/Screenshot_24.jpg" title="Cara Membuat Notifikasi Komentar Google Plus Di Blog" width="211" /></span></a></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
<br />
Nah, buat para blogger khusus nya seperti sobat mungkin, yang kemungkinan banyak sekali pengunjung sehingga blog sobat dibanjiri komentar. Pasti nya sobat senang dengan hal seperti itu. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Kalau blog sobat sudah banyak komentar nya, pasti nya sobat senang dan bisa pamer kepada pengunjung sobat karena sukses nya sobat dalam mengelola blog dengan cara mengikuti tutorial ini. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<b>Cara membuat notifikasi komentar ala google plus di blog</b> akan muncul recent comment, tapi seperti <b>google plus</b> dalam hal tampilan. (<span style="color: red;">Baca juga</span>: <b><a href="http://www.fahmifanirius.gq/2014/12/cara-membuat-recent-comment-dengan.html">Cara Membuat Recent Comment Dengan Avatar Di Blog</a></b>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Entah apa tujuan para blogger <b>memasang notifikasi komentar ala google plus di blog</b> ini. Mungkin, para blogger yang dibanjiri komentar bisa pamer kepada pengunjung yang lain. Tapi, saya sarankan untuk blog sobat yang mungkin sedikit komentar atau hampir tidak ada yang berkomentar di blog sobat, saya sarankan untuk tidak memasang tutorial ini. :v tapi jangan tersinggung. Mungkin blog sobat tidak ada pengomentar mungkin karena kotak komentar nya di hilangkan. (Baca juga: <b><a href="http://www.fahmifanirius.gq/2015/02/cara-menghilangkan-kotak-komentar-bawaan-di-blog.html">Cara Menghilangkan Kotak Komentar Bawaan Di Blog</a></b>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Kebanyakan, para blogger memasang notifikasi komentar ala google plus di blog bersebelahan dengan tombol follow dan dashboard. Jadi, sobat saya sarankan untuk baca dan ikuti tutorial <b><a href="http://www.fahmifanirius.gq/2014/04/cara-pasang-tombol-follow-blog-pada-blog.html">Cara Memasang Tombol Follow Blog Dan Dashboard Di Blog</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"></head> </span></span></pre><span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode jQery dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: kode diatas merupakan kode jQuery. Jika kode jQuery sudah terpasang di blog sobat, maka tidak perlu dipasang lagi. Tanpa kode jQuery, widget ini tidak akan bisa tampil. </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Cari lagi kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span></pre><span style="font-family: Arial, Helvetica, sans-serif;">atau kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></style></span></pre><span style="font-family: Arial, Helvetica, sans-serif;">7. Paste kode dibawah ini tepat DIATAS salah satu kode tersebut.</span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;"><pre><code><span style="font-family: Arial, Helvetica, sans-serif;">/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiI0236NNLV7d3BKW37UsPXCrbsbuxn03QxxIW0F6adWuV00dJSFhyZ0w5BJ9INBVNmdNVqf4jen9AjjrO72Vkyk28LUkG3JU3cNiL40AivpxuSI8qKDvDPZRH1XoZ81QwQv3QWqSh1o/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihowg2YZE4prRkJWuKX1C2v_WMbsgRxQsjrYwguaPuO8Ddq1JPXGANO9MkKKaU-XXtIkkBOVmtCy950-eHdb7LbFtx2LRSzcegU3CdAPUPwBRlESxlx3XWKt6myMApKSMhaAKrHZX6F9w/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFYuJxYuFlUV7NUspBe0SuSImYL1C2JgdVxYsAZkfFbIesye8iSZPT_WuolgLCWb28M0kSQztayx4yX58TYAa2jDjClEX3kiEAUuiLZzJ6srKZPocdWxY9Qtc63cVw5ToYHTUz6YRxLw/s80-c/gravatar.png);
}</span></code></pre></div><span style="font-family: Arial, Helvetica, sans-serif;">8. Masih ada lagi. Cari kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></body></span></pre><span style="font-family: Arial, Helvetica, sans-serif;">9. Copy kemudian paste kode dibawah ini kemudian letakkan kode berikut tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></body></span></span></div><pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvxY5OR6P8OCk9yD894Cd3IkK1dGHhboLlppN3xh_OGfrRH_BA1-5XEozpTLhpNyxnFlpIIebj3g9_SMrpAkFcwDD7PyKbZ4_QNeTFFZXjJCVmqrDw7kG5pnbATOkc2Z49ttoOw47Xds/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqW6PdzNmMn-RMWNASeRWR7uP7R_EUZBuaw5hxJnB4LqyxoLOQtb6CuaNDMgrJNawT8AMqZSDOYB4omHsOEZs46ZRVBGXI3ipNJmBuhCtIPFA2WGfgv5G6_sDSc_Qr3agSxUToab8jGWU/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://masyadi.com",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;">10. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;"><b><a href="http://www.fahmifanirius.gq/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong"><div itemscope="" itemtype="http://schema.org/Review"><div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"></div><table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Notifikasi Komentar Google Plus Di Blog</span></div></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat notifikasi komentar seperti google plus di blog dapat menunjukkan bahwa blog Anda dibanjiri oleh komentar pengunjung Anda.</span></div></div></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating"><div style="text-align: left;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2457 votes</span><br />
<div class="separator" style="clear: both; text-align: center;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br />
</span></div></div></div></td></tr>
</tbody></table></div></div></div>

CSS JavaScript JQuery Komentar Tutorial Blogger Widget Cara Membuat Notifikasi Komentar Google Plus Di Blog

Cara Membuat Notifikasi Komentar Google Plus Di Blog - Selamat sore... Saat ini, saya akan bagi tutorial blogger lagi yang sering bahkan ...

Cara Membuat Kelopak Bunga Berjatuhan Di Blog

4:52 AM Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Kelopak Bunga Berjatuhan Di Blog - </b>Kembali lagi dengan saya, <b><a href="http://fahmifanirius.gq/" title="Fahmi Fanirius Blog">Fahmi Fanirius Blog</a></b> akan berbagi tentang tutorial blogger pemula. Untuk hari ini, saya akan bagikan salah satu tutorial untuk memperindah blog. Dan tutorial saat ini sama dengan tutorial sebelumnya. Yaitu tutorial <b><a href="http://www.fahmifanirius.gq/2014/03/cara-memberi-salju-berjatuhan-pada-blog.html" title="Cara Membuat Efek Salju Berjatuhan Di Blog">Cara Membuat Efek Salju Berjatuhan Di Blog</a></b> dan <b><a href="http://www.fahmifanirius.gq/2014/03/cara-memberi-daun-berguguran-pada-blog.html" title="Cara Membuat Efek Daun Berguguran Di Blog">Cara Membuat Efek Daun Berguguran Di Blog</a></b></span></div></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
Kedua tutorial tersebut dan tutorial saat ini merupakan tutorial efek di blog. Dan saat ini saya akan jelaskan tutorial tentang <b><a href="http://www.fahmifanirius.gq/2014/04/cara-memberi-kelopak-bunga-berjatuhan-pada-blog.html" title="Cara Membuat Kelopak Bunga Berjatuhan Di Blog">Cara Membuat Kelopak Bunga Berjatuhan Di Blog</a></b>. Seperti yang saya jelaskan tutorial sebelumnya, tutorial <b>cara memasang bunga berguguran di blog</b> akan mengeluarkan <b>kelopak bunga</b> dari atas blog (header blog).</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Tujuan utama dari tutorial ini sudah sangat jelas. Untuk memperindah dan mempercantik blog sobat. Agar blog sobat terlihat menarik dan enak untuk dilihat. Jelas sekali, pengunjung mungkin akan lebih nyaman untuk pergi ke web/blog sobat. Untuk demo kelopak bunga nya lihat animasi berikut:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXnYuzEtQTE3G4grldh1G6Q_qx7lxlCnWzxvu86YPPEpDWeh0cpL7pC8UUA9HrLMAHRTtA92nvu3QeYh2d5uozW5Jbq6lw2vhkpNTR_JpDB83HmR9vuZaIVUA1SXHP6yNm8ZLw_SEeoIh/s1600/a1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Kelopak Bunga Berjatuhan Di Blog" border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXnYuzEtQTE3G4grldh1G6Q_qx7lxlCnWzxvu86YPPEpDWeh0cpL7pC8UUA9HrLMAHRTtA92nvu3QeYh2d5uozW5Jbq6lw2vhkpNTR_JpDB83HmR9vuZaIVUA1SXHP6yNm8ZLw_SEeoIh/s1600/a1.gif" title="Cara Membuat Kelopak Bunga Berjatuhan Di Blog" width="200" /></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><span style="font-family: Arial, Helvetica, sans-serif;">Untuk tutorial nya, sobat bisa ikuti. Sangat mudah sekali.</span><br />
<div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Ini dia langkahnya: </span></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">1. Login in Blogger </span></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout </span></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget/tambahkan gadget</span></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">4. HTML/JavaScript </span></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">5. Copy paste kode di bawah ini pada kolom HTML/JavaScript:</span></div></div><pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: right;"><b><a href="http://www.fahmifanirius.gq/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div><div class="content-box-infoindong"><div itemscope="" itemtype="http://schema.org/Review"><div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"></div><table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Kelopak Bunga Berjatuhan Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat kelopak bunga di blog membuat blog Anda terlihat lebih cantik dan indah.</span></div></div></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating"><div style="text-align: left;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">83%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 1561 votes</span></div></div></td></tr>
</tbody></table></div></div></div>

Efek JavaScript JQuery Tutorial Blogger Cara Membuat Kelopak Bunga Berjatuhan Di Blog

Cara Membuat Kelopak Bunga Berjatuhan Di Blog - Kembali lagi dengan saya, Fahmi Fanirius Blog akan berbagi tentang tutorial blogger pemula....

Cara Membuat Back To Top Berbagai Efek Keren Di Blog

3:14 AM Unknown 5

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Back To Top Berbagai Efek Keren Di Blog </b>-<b> </b>Nambah tutorial. Tutorial yang akan saya bahas ini pastinya tiap <b>template blog</b> termasuk blog sobat terdapat yang nama nya <b>tombol back to top</b>. Nah, sekarang, saya akan bahas tutorial tersebut yaitu <a href="http://www.fahmifanirius.gq/2014/04/cara-menambahkan-back-to-top.html" title="Cara Membuat Tombol Back To Top Di Blog"><b>Cara Membuat Tombol Back To Top Di Blog</b></a>.</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3p7UUk5-SmEG0FLVP91Rz1NtqWiVR0Xt2y1kPs5KlKGwTQh7XQfAX6b1dWOWUUq1TjaP_ojs0PRqzPYpNJsPDsjOOJVhtjXtAsnRhUE4pAtGBtLbj-Rl2BF7Z2bFL1WoXjl7l9nDpjmE3/s1600/arrow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3p7UUk5-SmEG0FLVP91Rz1NtqWiVR0Xt2y1kPs5KlKGwTQh7XQfAX6b1dWOWUUq1TjaP_ojs0PRqzPYpNJsPDsjOOJVhtjXtAsnRhUE4pAtGBtLbj-Rl2BF7Z2bFL1WoXjl7l9nDpjmE3/s1600/arrow.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></a></span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Buat sobat yang kemungkinan tidak ada <b>tombol back to top di blog</b>, dan tidak paham dengan tutorial ini, saya akan jelaskan. Tutorial ini, pasti di pakai oleh semua kalangan blogger dari yang pemula hingga master. Kecuali, blog yang memiliki ukuran yang tidak panjang atau yang tidak dapat di scroll/gulung. Dari penjelesan tersebut dapat disimpulkan bahwa yang dimaksud <b>tombol back to top di blog adalah</b> untuk membantu dan mempermudah pengunjung kembali ke atas ketika pengunjung melihat blog kita di bawah.</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Jadi,<b> tombol back to top di blog</b> pastinya sangat dibutuhkan untuk setiap blog. Apalagi jika blog sobat panjang. Dengan <b>memasang tombol back to top</b> akan memudahkan pengunjung sobat merasa terbantu jika tampilan ada di bawah blog(footer).</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Sobat dapat mengikuti tutorial ini. <b>Tutorial cara menambahkan back to top keren di blog</b> ini sangat berbeda dengan tutorial yang lain yang banyak sekali di pencarian google. Mungkin, tutorial yang lain hanya menampilkan satu efek saja. Tetapi, disini saya akan berbaik hati untuk memberikan<b> tutorial cara membuat back to top dengan bebagai efek keren di blog</b>.</span></div></div><div id="denzuaz" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Dari berbagai efek tombol back to top di blog di bawah ini, sobat dapat memilih satu saja.</span></div><h2 style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-large;"><b>Cara Membuat Back To Top Di Blog Dengan Gambar</b></span></h2></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">1. Login Blogger</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"> 2. Tata letak/layout</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"> 3. Add gadget/tambahkan gadget</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"> 4. Pilih HTML/JavaScript</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"> 5. Copast kode dibawah ini pada kolom HTML/JavaScript:</span></div><pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'  type='text/javascript'></script><script  type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return   false})});</script><a href="http://satu-delapan.blogspot.com"></a><a  id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%;  cursor:pointer;font:12px arial;'><img src='</span><span lang=""><span lang="">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IA7pYU9ljvGrsmZASTu7yadHancw4rym2DcKzjYY0ONspWzyF5AhLDMPiPJBdkTM2xKO0n_MpYRTJgezESFayiHTE6cWdGJ9nrglEjwNpr1aOgGGAjjWhluhcPwVymYl_0lFwSKHJKc/s1600/blue-satu-delapan-blogspot.png</span>' width="50px"  height="50px"/></a></span></code></pre><div style="text-align: left;"><span lang="" style="font-family: Arial, Helvetica, sans-serif;">6. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </span><br />
<h2 style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><span lang=""><b style="font-size: x-large;">Cara Membuat Back To Top Di Blog Dengan Efek Memantul Atau Bounce</b></span></span></h2><span style="font-family: Arial, Helvetica, sans-serif;"> <span lang="">1. Login Blogger</span></span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">2. Template/rancangan</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode <span style="color: cyan;"></span></span><br />
<pre><span lang="" style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span></pre><span lang="" style="font-family: Arial, Helvetica, sans-serif;"> (agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">5. Setelah ketemu kode <span style="background-color: #0b5394; color: cyan;"></head></span> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></head></span></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script <span class="atn" style="margin: 0px; padding: 0px;">type</span><span class="pun" style="margin: 0px; padding: 0px;">=</span><span class="atv" style="margin: 0px; padding: 0px;">'text/javascript'</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="atn" style="margin: 0px; padding: 0px;">src</span><span class="pun" style="margin: 0px; padding: 0px;">=</span><span class="atv" style="margin: 0px; padding: 0px;">'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
<script type ='text/javascript'</span><span class="tag" style="margin: 0px; padding: 0px;">> </span><span class="pln" style="margin: 0px; padding: 0px;">$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="pln" style="margin: 0px; padding: 0px;">window</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">scroll</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="kwd" style="margin: 0px; padding: 0px;">if</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="pln" style="margin: 0px; padding: 0px;">$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">this</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">()></span><span class="lit" style="margin: 0px; padding: 0px;">100</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">slideDown</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="lit" style="margin: 0px; padding: 0px;">200</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="kwd" style="margin: 0px; padding: 0px;">else</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">slideUp</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="lit" style="margin: 0px; padding: 0px;">300</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}); </span><span class="pln" style="margin: 0px; padding: 0px;">$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">click</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'body,html'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">800</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">25</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">200</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">150</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">10</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">100</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">50</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">});</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}); </span></script></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"> 6.   Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7.   Pilih Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8.   Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9.   HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript</span></div><pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><div dir="ltr" style="white-space: normal;" trbidi="on"><script <span class="atn" style="margin: 0px; padding: 0px;">type</span><span class="pun" style="margin: 0px; padding: 0px;">=</span><span class="atv" style="margin: 0px; padding: 0px;">'text/javascript'</span><span class="tag" style="margin: 0px; padding: 0px;">></span></div><div style="white-space: normal;"><span class="pln" style="margin: 0px; padding: 0px;">$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="pln" style="margin: 0px; padding: 0px;">window</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">scroll</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="kwd" style="margin: 0px; padding: 0px;">if</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="pln" style="margin: 0px; padding: 0px;">$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">this</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">()></span><span class="lit" style="margin: 0px; padding: 0px;">100</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">slideDown</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="lit" style="margin: 0px; padding: 0px;">200</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="kwd" style="margin: 0px; padding: 0px;">else</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">slideUp</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="lit" style="margin: 0px; padding: 0px;">300</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">}</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">});</span><span class="pln" style="margin: 0px; padding: 0px;">
$</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'#BounceToTop'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">click</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="kwd" style="margin: 0px; padding: 0px;">function</span><span class="pun" style="margin: 0px; padding: 0px;">()</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">{</span><span class="pln" style="margin: 0px; padding: 0px;"> $</span><span class="pun" style="margin: 0px; padding: 0px;">(</span><span class="str" style="margin: 0px; padding: 0px;">'body,html'</span><span class="pun" style="margin: 0px; padding: 0px;">).</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">800</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">25</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">200</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">150</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">10</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">100</span><span class="pun" style="margin: 0px; padding: 0px;">)</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">.</span><span class="pln" style="margin: 0px; padding: 0px;">animate</span><span class="pun" style="margin: 0px; padding: 0px;">({</span><span class="pln" style="margin: 0px; padding: 0px;">scrollTop</span><span class="pun" style="margin: 0px; padding: 0px;">:</span><span class="lit" style="margin: 0px; padding: 0px;">0</span><span class="pun" style="margin: 0px; padding: 0px;">},</span><span class="lit" style="margin: 0px; padding: 0px;">50</span><span class="pun" style="margin: 0px; padding: 0px;">);</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">});</span><span class="pln" style="margin: 0px; padding: 0px;"> </span><span class="pun" style="margin: 0px; padding: 0px;">});</span><span class="pln" style="margin: 0px; padding: 0px;">
</span><span class="tag" style="margin: 0px; padding: 0px;"></script></span></div></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"> 11. Simpan</span><br />
<br />
<h2 style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b style="font-size: x-large;">Cara Membuat Back To Top Di Blog Dengan Efek Geser Yang Halus</b></span></h2><span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">2. Template/rancangan</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode <span style="color: cyan;"></span></span><br />
<pre><span lang="" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: cyan;"></head></span></span></pre><span lang="" style="font-family: Arial, Helvetica, sans-serif;"> (agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">5. Setelah ketemu kode <span style="background-color: #0b5394; color: cyan;"></head></span> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></head></span></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script <span class="atn" style="margin: 0px; padding: 0px; white-space: normal;">type</span><span class="pun" style="margin: 0px; padding: 0px; white-space: normal;">=</span><span class="atv" style="margin: 0px; padding: 0px; white-space: normal;">'text/javascript'</span><span class="pln" style="margin: 0px; padding: 0px; white-space: normal;"> </span><span class="atn" style="margin: 0px; padding: 0px; white-space: normal;">src</span><span class="pun" style="margin: 0px; padding: 0px; white-space: normal;">=</span><span class="atv" style="margin: 0px; padding: 0px; white-space: normal;">'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'</span><span class="tag" style="margin: 0px; padding: 0px; white-space: normal;">/></span>
<span style="white-space: normal;"><script type='text/javascript'> 
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}</span>
<span style="white-space: normal;">else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);</span><span style="white-space: normal;">return false})});</span>
<span style="white-space: normal;"></script></span></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"> 6.   Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7.   Pilih Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8.   Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9.   HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript</span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImJYEBexKlG3FAjK4wtUCYTAmaR4WjIspGsA9v40iTxEr5nExxzsOLydmhcY80zI4V0gFaJPv3lml_pzz6yiClDvTV6eXjHBRLitHDtMNOL8byWxjUaYIUqfIFtZjJHYPwPgpGn4FveJo/s1600/arrow-up_basic_blue.png'/></div></span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"> 11. Simpan</span><br />
<br />
<h2 style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b style="font-size: x-large;">Cara Membuat Back To Top Di Blog Dengan Efek Fading & Smooth</b></span></h2><span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">2. Template/rancangan</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode <span style="color: cyan;"></span></span><br />
<pre><span lang="" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: cyan;"></head></span></span></pre><span lang="" style="font-family: Arial, Helvetica, sans-serif;"> (agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span lang="" style="font-family: Arial, Helvetica, sans-serif;">5. Setelah ketemu kode <span style="background-color: #0b5394; color: cyan;"></head></span> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></head></span></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> </span></code></pre><span style="font-family: Arial, Helvetica, sans-serif;"> 6.   Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7.   Pilih Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8.   Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9.   HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript</span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;"><pre><code><span style="font-family: Arial, Helvetica, sans-serif;">var scrolltotop={  
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, 
    controlHTML: '<img src="URL Gambar Back To Top" />', 
    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()
</script></span></code></pre></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Disini, saya menggunakan gambar dibawah ini untuk semua <b>berbagai efek tombol back to top</b>. Sobat bisa menggantinya sendiri. Di google banyak. Cari sendiri ya..</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sOaIhAnuwbxLgo8HaNLZAHYojqLHIuzTSdp9B9zE-TuopMsTsVOe0ut6-yRwtpN8KEl8kGMyj2BDEZrqa371YNj1MzSXcYdBuhzew_qx8VL_lbODDfZ1u5BArtWOQmmMNIloFT7f0DcN/s1600/arrow.png</b></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sOaIhAnuwbxLgo8HaNLZAHYojqLHIuzTSdp9B9zE-TuopMsTsVOe0ut6-yRwtpN8KEl8kGMyj2BDEZrqa371YNj1MzSXcYdBuhzew_qx8VL_lbODDfZ1u5BArtWOQmmMNIloFT7f0DcN/s1600/arrow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sOaIhAnuwbxLgo8HaNLZAHYojqLHIuzTSdp9B9zE-TuopMsTsVOe0ut6-yRwtpN8KEl8kGMyj2BDEZrqa371YNj1MzSXcYdBuhzew_qx8VL_lbODDfZ1u5BArtWOQmmMNIloFT7f0DcN/s1600/arrow.png" /></a></span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Tapi tenang, saya berbaik hati untuk memberi sedikit gambar dan URL nya untuk tombol back to top di blog.</span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IA7pYU9ljvGrsmZASTu7yadHancw4rym2DcKzjYY0ONspWzyF5AhLDMPiPJBdkTM2xKO0n_MpYRTJgezESFayiHTE6cWdGJ9nrglEjwNpr1aOgGGAjjWhluhcPwVymYl_0lFwSKHJKc/s1600/blue-satu-delapan-blogspot.png</b></span></div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IA7pYU9ljvGrsmZASTu7yadHancw4rym2DcKzjYY0ONspWzyF5AhLDMPiPJBdkTM2xKO0n_MpYRTJgezESFayiHTE6cWdGJ9nrglEjwNpr1aOgGGAjjWhluhcPwVymYl_0lFwSKHJKc/s1600/blue-satu-delapan-blogspot.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></span></div><div style="text-align: center;"><div style="text-align: left;"><b><span style="font-family: Arial, Helvetica, sans-serif;">http://www.zimedcode.com/blog/wp-content/uploads/2014/11/back-to-top-button.png</span></b></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
<img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" id="irc_mi" src="http://www.zimedcode.com/blog/wp-content/uploads/2014/11/back-to-top-button.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></span><br />
<div style="text-align: left;"><b><span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQQuDojTNMu2Zf9yWqTPNZ2x2W5-UUfZCkesL8dFKrx36h10SiHovryZyBHmGFNX_dNnTovd-O8Y6OmSyEQF6fhBMwfZkBpwE1YvcNhO3N6_W_WpDfFh1VtnepmGQtRxviKbP2b_0zzHY/s1600/rb+back+to+top+4.png</span></b></div><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" height="75" id="irc_mi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQQuDojTNMu2Zf9yWqTPNZ2x2W5-UUfZCkesL8dFKrx36h10SiHovryZyBHmGFNX_dNnTovd-O8Y6OmSyEQF6fhBMwfZkBpwE1YvcNhO3N6_W_WpDfFh1VtnepmGQtRxviKbP2b_0zzHY/s1600/rb+back+to+top+4.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></span><br />
<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>http://muslimbright.files.wordpress.com/2013/01/back-to-top-2.png</b></span></div><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" height="57" id="irc_mi" src="http://muslimbright.files.wordpress.com/2013/01/back-to-top-2.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></span><br />
<div style="text-align: left;"><b><span style="font-family: Arial, Helvetica, sans-serif;">http://blog.amcpros.com/wp-content/back-to-top-button.png</span></b></div><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" height="72" id="irc_mi" src="http://blog.amcpros.com/wp-content/back-to-top-button.png" title="Cara Membuat Back To Top Berbagai Efek Keren Di Blog" /></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆˆ</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: right;"><b><a href="http://www.fahmifanirius.gq/p/tutorial-blogger.html" target="_blank"><strike><span style="font-family: Arial, Helvetica, sans-serif;">Tutorial Blogger</span></strike></a></b></div></div><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="content-box-infoindong"><div itemscope="" itemtype="http://schema.org/Review"><div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"></div><table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Back To Top Berbagai Efek Keren Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat  tombol back to top di blog berbagai efek keren di blog yang dapat memudahkan pengunjung Anda untuk kembali ke atas</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating"><div style="text-align: left;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">95%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2890 votes</span></div></div></td></tr>
</tbody></table></div></div></div>

Efek JavaScript JQuery Tutorial Blogger Cara Membuat Back To Top Berbagai Efek Keren Di Blog

Cara Membuat Back To Top Berbagai Efek Keren Di Blog - Nambah tutorial. Tutorial yang akan saya bahas ini pastinya tiap template blog ter...

Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog

11:07 PM Unknown 1

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog</b> - Nambah tutorial lagi sobat saya... Makin hari makin tambah postingan. Artikel sebelumnya, saya pernah posting tutorial yang sejenis dan sama dengan tutorial ini, <a href="http://www.fahmifanirius.gq/2014/03/cara-memberi-efek-link-membesar-jika-disentuh-kursor.html" target="_blank" title="Cara Membuat Efek Link Membesar Saat Disentuh Kursor"><b>Cara Membuat Efek Link Membesar Saat Disentuh Kursor</b></a> tapi, sedikit perbedaan dengan tutorial yang tadi saya sebut. Perbedaannya sangat kecil. <a href="http://www.fahmifanirius.gq/2014/03/cara-memberi-efek-link-bergerak-saat-disentuh-kursor.html" target="_blank" title="Cara Membuat Efek Link Bergoyang Saat Disentuh Cursor Blog"><b>Cara Membuat Efek Link Bergoyang Saat Disentuh Cursor Blog</b></a>, link nya bisa bergerak <b>jika disentuh cursor blog</b>. Jika tutorial sebelumnya <b>efek link membesar atau zoom saat disentuh cursor blog</b>, link nya bisa <b>membesar jika disentuh cursor blog</b> sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Nah, tutorial ini banyak sekali digunkan oleh para Blogger daripada <b>tutorial link membesar saat disentuh cursor blog</b>. Mungkin, sobat sendiri yang pernah berkunjung dan mampir ke blog orang. <b>Ketika cursor blog diarahkan ke link, maka link tersebut akan bergerak</b>. Nah, itu adalah salah satu <b>efek link di blog</b>. Dan, saya akan jelaskan salah satu <b>efek link di blog</b> dari banyaknya <b>efek link di blog</b>.  Mungkin, lain kali saya akan posting tentang <b>efek link di blog</b> yang lain.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Buat sobat yang ingin link nya <b>bergerak saat disentuh cursor blog</b>, bisa di coba... Tidak rumit, tidak juga memberatkan blog sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lQ-_lZmTAMLlty1fB3iI8V91z3rfy_5U1FuUQKZQIXnhwSi-WC4dw-NjdkXKWKdQGHECCKsruzg_PieYEvHU-iwgJ_vv-_GEqoKWTU87A3ukpj4D7Pdy_f7zcLZqm2WQv_PwIulWzXdm/s1600/link.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog" border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lQ-_lZmTAMLlty1fB3iI8V91z3rfy_5U1FuUQKZQIXnhwSi-WC4dw-NjdkXKWKdQGHECCKsruzg_PieYEvHU-iwgJ_vv-_GEqoKWTU87A3ukpj4D7Pdy_f7zcLZqm2WQv_PwIulWzXdm/s1600/link.jpeg" title="Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog" width="200" /></span></a></div><div id="wrap"><a class="bie-slide" href="http://demo.fahmifanirius.gq/2015/02/demo-cara-membuat-efek-link-bergerak-saat-disentuh-cursor-blog.html" rel="dofollow" target="_blank" title="Demo Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog"><br />
<span class="circle"><i class="fa fa-rocket"></i></span><br />
<span class="title">Demo</span><br />
<span class="title-hover">Klik disini</span><br />
</a></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Seperti biasa, 1. Sign in Blogger </span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout </span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget </span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">4. HTML/javascript </span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">5. Copast kode dibawah: </span></div><pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'  type='text/javascript'></script><script  type='text/javascript'> $(document).ready(function()  {  $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, <b>400</b>); }, function() { $(this).animate({ marginLeft: 0 }, <b>400</b>); }); });</script>  </span></code></pre><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan perubahan</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">7. Coba dekatkan kursor dilink yg ada</span></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="text-align: left;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span></div></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br />
</span></div><div style="text-align: right;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b><a href="http://www.fahmifanirius.gq/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike><span class="Apple-style-span" style="font-size: x-small;">Tutorial Blogger</span></strike></span></a></b></div></div><br />
<div class="content-box-infoindong"><div itemscope="" itemtype="http://schema.org/Review"><div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"></div><table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog</span></div></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat efek link bergerak saat disentuh cursor blog merupakan salah satu efek link di blog yang membuat link bergerak saat disentuh cursor blog.</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">71%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 1432 votes</span></div></td></tr>
</tbody></table></div></div></div>

Efek JavaScript JQuery Tutorial Blogger Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog

Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog - Nambah tutorial lagi sobat saya... Makin hari makin tambah postingan. Artikel s...

Cara Membuat Slide Like Fanspage Di Blog

Cara Membuat Notifikasi Komentar Google Plus Di Blog

Cara Membuat Kelopak Bunga Berjatuhan Di Blog

Cara Membuat Back To Top Berbagai Efek Keren Di Blog

Cara Membuat Efek Link Bergerak Saat Disentuh Cursor Blog

Terpopuler

Kategori

Arsip Blog