Sunday, July 3, 2011

Cara Membuat Tombol Back To Top Blogger

Kali ini saya akan menjelaskan satu tips yang sangat mudah dan penting, yaitu cara membuat tombol Back to Top.
Kenapa sangat mudah? Karena anda akan saya kasih tau tips nya.. :O
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. Mau tau caranya?

Berikut Cara Membuat Tombol Back to Top:

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/AVvXsEjJ30RFoYBoxj-3HGrZZp1wW3qOnndlVB-5j4ZHu-KmnC2XLxpt8kIPe2VHELy81tNXXjBpislKl0xP-spakBLTFjdJuAGzMk8XyIHNGXlJ6viPwes80qOnlrOu8T5aVW46saKyuSW8w5Q/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/AVvXsEg5vGrjfS_aYCoL3N-3kk-FsZiffBMnkb_MFhHA7hldVOadiGe9JcfWLIAUeoB-FL1A_X3xhDRBlHVBt-5y4VFmiqFXcOD6R7fJxS1FMlHU5uGKWClAhiJFSTVEPShpxeM28b5K3Ga9Bfk/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 yaa,..
:y


Memasang Widget Share On Facebook

Dengan memasang widget ini, kita atau pengunjung bisa membagikan artikel kita ke status profil facebook mereka. Berharap dengan itu bisa membuat artikel kita bisa dibaca oleh banyak orang sehigga dapat meningkatkan traffic blog atau website kita. Mau tau cara memasangnya?
Untuk memasangnya bisa kita lakukan dengan 2 cara, yaitu:

1. Mengambil widget langsung ke Facebook
-   Buka situs ini
-   Pilih style widget yang anda suka, lalu copy kode yang diberikan.
-  Login ke akun Blogger anda, Pilih Layout > Edit HTML, lalu centang Expand Widget  Template.
-  Cari kode <div class='post-header-line-1'/>. Paste kode widget anda tadi tepat di bawahnya.
-  Jika anda tidak menemukan kode tersebut, coba cari kode <data:post.body/>, paste kode widget anda tepat di atasnya.

- Klik Save Template untuk menyimpan perubahan.

2. Costumisasi Widget

Kodenya:
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'><img src='http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_2.png' border='0'/></a>
Lalu pilih Layout > Edit HTML, lalu centang Expand Widget Template. Cari kode <data:post.body/>, paste kode widget yang anda pilih tadi tepat di atasnya.

Gimana? Mudahkan?
Jangan lupa kasih komentar yaa,.. :y

Cara Membuat Widget Top Artikel / Popular Post

Widget Top Artikel atau Popular Posts adalah widget yang berfungsi untuk menampilkan daftar artikel yang paling banyak dikomentari oleh pengunjung. Cara membuatnya hampir sama mudahnya dengan cara membuat widget top komentar yang telah saya jelaskan sebelumnya. Mau?

Berikut Cara Membuat Widget Top Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content:
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Ftipsbloggerzacky.blogspot.com&num=10" type="text/javascript"></script><span style="font-size:9px;"><a href="http://isyaratsam.blogspot.com">Get this widget!</a></span>


*Keterangan:
- Ganti isyaratsam.blogspot.com dengan alamat blog anda tanpa http://
- Angka 10 menunjukkan jumlah artikel yang tampil pada daftar. :y



Membuat Sexy Social Boomark

Bingung ya judul postingannya,belakangan ini Fasilitas Sharing Sexy ini sudah banyak digunakan oleh para Blogger,Saya melihat Widget ini pada blog http://www.cahayabiru.com, jika anda belum mengerti juga silahkan lihat contohnya disini,apa sudah tahu sekarang maksudnya kan,yayaya[haha kayak lagu gigi] Sharing Sexy adalah sebuah Widget Bookmark dengan bentuk yang sangat unik dan enak dilihat,sangat efisien dan tampil dinamis,dan diberi nama Sharing Sexy Silahkan lihat gambar dibawah ini:
Bagaimana Anda Tertarik Membuatnya,
1.Login ke Blogger dengan ID anda
2.Lalu Klik Menu Templates
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML [jangan lupa beri centang pada Expand Widget Template cari Kode ]]></b:skin>
5.Lalu Letakan Kode dibawah ini diatas/sebelum kode ]]></b:skin>
.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

6.Jangan simpan terlebih dahulu
7.Masih pada kotak Edit HTML cari kode <data:post.body/>
8.Lalu Copy Kode dan letakan dibawah kode <data:post.body/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/12689686748957461622' title='Subscribe to RSS'/></li> 

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

[pada kode tersebut di bagian akhir terdapat kata YOUR-FEEDBURNER-ID,ganti alamat tersebut dengan ID feedburner anda]

9.  Save Template Sobat. 
10.Selesai
Note:kode biasanya terletak pada bagian readmore[yang sudah memakainya]jika kodenya ada 2,letakan dibawah kode yang pertama.
Semoga postingan ini dapat mengobati rasa rindu sobat terhadap blog ini.
Silahkan lihat blog Sobat untuk melihat hasilnya,Selamat jika sudah berhasil,Oh ya jangan lupa Komentarnya ya,karna sangat berarti untuk kedewasaan blog ini.

Moga berhasil,..
Jangan lupa komentarnya yaa,.. :y

Statistik Blog Dengan Shiniystat

Jika anda sayang ama blog anda tentunya pengen tau dunk perkembangannya.dan anda membandingkan seberapa besar pengunjung di hari ini, kemaren dan besok-besok, dan jika anda bandingkan dengan statistik blog yang lainya shiniystat ini lebih unggul dan lebih simple.. iya itu katanya orang-orang yang suka dengan shinystat tentunya wkakakak... tapi emang bener juga aku juga ngerasa seperti itu kok...
Aku akan jelaskan sedikit banyak fitur-fitur yang dimiliki shinystat

•   Kamu bisa mengetahui pengunjung kamu yang online sekarang di blog kamu
•   Kamu bisa melihat berapa banyak pengunjung yang datang hari ini dan total keseluruhan pengunjung sejak pertama kali pasang shinystat
•   Mengetahui pengunjung blog kamu itu dari negara mana
•   Mengetahui pengunjung blog kamu dari mana datangnya misalnya, Dari search engine atau dari blog orang atau dari manalah.. pokoknya datang.

Nah diatas kurang lebih fitur-fitur yang dianggap penting tapi masih banyak lagi kok fitur-fitur yang lain yg belum aku sebutin.. juga pasti fiturnya juga di update dunk dari pihak sninystat
Gimana berminat daftar aja ni http://shinystat.com

Nah sekarang ans juga kasih tau cara pasang Widgetnya di Blog gini nih...
•   Daftar dulu di http://shinystat.com
•   Setelah daftar kamu masuk di menu Settings -----> Icons/Counters kemudian pilih icons yang kamu sukai dan setting dulu yang mau kamu tampilin di widgetnya
Setelah itu Kamu masuk HTML Code kemudian taruh codenya di Sidebar Blog kamu dengan cara masuk menu Layout di blog kamu kemudian Page Elements lalu Add a Gadget kemudian pilih HTML/JavaScript

Moga berhasil,..
Jangan lupa komentarnya yaa,.. :y

Top Bottom