• Cleano Studios

    Cleano Studios

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem dolor, in euismod mauris. In...
  • Coffee Junkie

    Coffee Junkie

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem dolor, in euismod mauris. In...
  • MetroFusion

    MetroFusion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem dolor, in euismod mauris. In...
1

Cara Membuat Tombol Back to Top dan Back to Down

Posted 22 Jun 2010 in by Alif Winda Hardika

Kali ini saya akan menjelaskan satu tips yang sangat mudah dan penting, yaitu cara membuat tombol Back to Top dan Back to Down.Kenapa sangat mudah? Karena anda akan saya kasih tau tips nya..
Kenapa Penting? Karena bisa mempercepat pengunjung untuk kembali ke bagian paling atas halaman blog kita tanpa harus "scrolling". Dengan begitu mereka bisa dengan mudah mencari navigasi lain blog untuk berlama-lama disana. Hal ini merupakan salah satu cara membuat pengunjung merasa betah dan nyaman di blog.

Berikut Cara Membuat Tombol Back to Top dan Back to Down:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Paste kode berikut sebelum kode ]]></b:skin> :

.gototop {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsrSNb-aMUpCrgmXXR9NWy0lLNnOls2LuiJgLp1HL3xpbFxLcRpM9nOg7IBxnKSUNxhtubvt8Kq7xdDuiZyei9ajakE4L0Le1HN0gCeMuMqU5wqzpBg7VcdJFELFWQUVwBcWG5wbfuJJ4/s400/arrowtopdt6.gif)no-repeat;
display:block;
_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
right:8px;
bottom:35px
}
.gotobottom {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1G5UhTUbZbR5qIszUI1XXWJGnax0GJSD3e9bJbiEVaa1UZtSHMGz-Y4NWzd-bMQ6Lz8H2BkSp0JZpWyX5gmNdIzfPu59BSBKw-xaCPuGvh7rLBI_9iOS3ntgk5Y7bOheJI9H0mgI31Y/s400/arrowdownqe1.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
right:8px;
bottom:15px
}
4. Selanjutnya, cari kode </body> . Paste kode berikut di atasnya:

<a class='gototop' href='javascript:scroll(0,0)' title='Go to Top'>Top</a>
<a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>
5. Terakhir, klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Jangan lupa kasih komentar ya...
BACA SELENGKAPNYA - Cara Membuat Tombol Back to Top dan Back to Down

1

Cara Memasang Social Bookmarks dengan jQuery di Blogger

Posted 17 Jun 2010 in by Alif Winda Hardika

Cara Memasang Social Bookmarks dengan jQuery di Blogger, Cara Memasang Social Bookmarks dengan jQuery dibawah postingan
Tutorial ini akan menunjukkan cara untuk mengubah daftar unordered (UL) ke dalam kotak social bookmarking sharing box, dan bagaimana membuat plugin jQuery yang akan mengubah UL apapun ke dalam sharing box. Menurut saya Social Bookmarks dengan jQuery ini tampilannya sangat esotic apalagi ditambah dengan efek jQuery semakin menambah kesan sexy.

DEMO

Cara Memasang Social Bookmarks dengan jQuery di Blogger

1. Masukan script jQuery berikut sebelum </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
:: Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan javascript berikut dibawah script jQuery tadi:
<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>
3. Masukan kode HTML berikut sesudah <data:post.body/> :

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>
: Icon tersebut bisa anda download disini.

4. Masukan kode CSS berikut diatas code ]]></b:skin> :
#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

5. Simpan template, dan selesai.

BACA SELENGKAPNYA - Cara Memasang Social Bookmarks dengan jQuery di Blogger

1

Cara Membuat Tombol Google Buzz Share

Posted 15 Jun 2010 in by Alif Winda Hardika

Google Buzz adalah alat sosial yang besar yang sangat mirip dengan Twitter dan Facebook. Ini adalah cara yang indah untuk terlibat dan berinteraksi dengan pembaca Anda! Pastikan untuk mengimplementasikan tombol Google Buzz ke posting blogger anda, sehingga pengguna dapat dengan mudah berbagi konten Anda di Google Buzz.


Tambahkan Tombol ke Blogger Google Buzz





1. Pergi ke Layout> Edit HTML pada Dashboard Blogger Anda.
2. Back up Template Anda yang ada sebelum membuat perubahan apapun!
3. Pastikan untuk memeriksa "Expand Template Widget" kotak.
4. Berikut adalah Buzz Google it Kode

<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>
5.Cari baris kode ini pada template:

<div class='post-header-line-1'/>
dan tempat Buzz Google it Kode tepat setelah kode Anda mencari di atas.
Jika ini tidak berhasil, kemudian cari kode di bawah ini dan tempat itu Kode Buzz Google secara langsung sebelumnya.

<data:post.body/>
6.Sekarang menyimpan template dan selesai!
BACA SELENGKAPNYA - Cara Membuat Tombol Google Buzz Share

Site Info