Cara Membuat Label Cloud Berputar

Buat sobat yang pengen membuat tampilan labelnya seperti gambar disamping.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran ane saranin nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama

• Login ke Blogger dengan ID sobat.
• Klik Tata Letak
• Klik tab Edit HTML
• Download dahulu template sobat dengan mengklik Download Template Lengkap
• Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

• Copy kode berikut ini setelah kode diatas :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://vikrymadz.blogspot.com/'>vikrymadz</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

II. Langkah Kedua
* Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud

* Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");

* Merubah ukuran font
so.addVariable("tagcloud", "12'>");


Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

good luck sob...
 

 sumber : http://vikrymadz.blogspot.com/2011/03/cara-membuat-label-cloud-berputar.html
                 raytkj.blogspot.com

Cara Membuat Efek Meteor Jatuh

Cara Membuat Efek Meteor Jatuh.Yups.... kali ini ::Blogging Is My Life:: akan share mengenai Cara Membuat Efek Meteor Jatuh.

Yaah sekedar menambah koleksi TIPS BLOGGING saya, jadi langsung saya share disini deh.....

Cara Membuat Efek Meteor Jatuh
1. login blog
2. rancangan -> add widget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js">
</script>

4. simpan....
5. dan Jangan LUPA BERDOA.... hihihihihih

Good Luck ^_^

sumber : http://tanpa-isi.blogspot.com/
         http://vikrymadz.blogspot.com/2011/09/cara-membuat-efek-meteor-jatuh.html

Cara Membuat Efek Kembang Api Pada Blog

Tanpa Basa-Basi lagi deh Gan .
ok deh, langsung aja ane share sekarang...

Cara Membuat Efek Kembang Api Pada Blog

1. login blog
2. rancangan --> edit HMTL
3. lalu cari kode </body>
4. lalu masukkan kode script dibwah ini diatas kode </body>

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

5. simpan...


Kok belum keluar??????
jangan takut dulu sob... masih ada cara yang lain kok... langsung aja ya..

1. login blog
2. rancangan --> elemen halaman --> tambah gadget --> HTML/JavaScript
3. lalu masukkan kode

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

4. simpan

Dan selesei deh dan jangan lupa coba lihat hasilnya....

klo belum kluar brarti kodenya masih di disabled tuh
jadi sobat bisa pakai yang kode dibawah ini aja (versi flash)

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Simpan.
Good Luck sob.... ^_^

sumber : http://vikrymadz.blogspot.com/2011/04/cara-membuat-efek-kembang-api-pada-blog.html

Membuat Semut Muter-muter di Blog

Ada gula ada semut, ada yang yang asyik-asyik dan manis akan banyak pengunjung. Kayak blog yang hitam manis ini :D. Pernah lihat blog yang di halamannya ada semut yang muter-muter. Atau malah pernah tertipu karena mengira itu semut ada di monitor PC kamu, dan mau menyingkirkannya ternyata asli dari blognya.

Baiklah, sekarang kita akan belajar untuk membuat semut berputar-putar di halaman blog. Sebenarnya sangatlah mudah, hanya menambahkan kode HTML sederhana. Dan tidak hanya semut, bisa juga diganti gambar animasi lain yang kamu suka, bisa monyet, cecak, dan lain-lain.

Cara Membuat Semut Muter-muter di Blog
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<div style="display:scroll; position:fixed; top:150px; left:20px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div>

5. Kode yang berwarna merah adalah URL gambar animasinya. 150 itu adalah jarak dari atas dan 20 jarak dari samping. Kita dapat menggantinya sesuai sesuka hati.
6. Simpan jika sudah selesai.

Cara membuat Slide navigasi Next Prev Posting di Blog

Masih di Ber-BagiGans share Cara membuat Slide navigasi Next Prev Posting di blog cekidot

Silahkan sobat Copy Paste script di bawah ini di Edit HTML jangan lupa centang Expand Template Widget kemudian tekan Ctrl+f dan paste script ]]></b:skin> jika sudah ketemu silahkan copy paste script di bawah ini simpan sebelum script ]]></b:skin> di blog sobat

/********************************
CSS Slide Out Posting lama/baru *
********************************/
.lama a {
    color: #000;
    position:fixed;
    top:50%;
    right:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa; background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topleft:7px;
    -moz-border-radius-bottomleft:15px;
    padding: 3px 3px;
    text-decoration: none;
    -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
    }
.lama a:hover {
    color: #ffffff; /* background saat hover */
    right:-1px;
    background: #fff;
    }

.baru a {
    color: #000; position:fixed;
    top:50%;  left:-50px;
    height: 23px;  width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa;
    background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topright:7px;
    -moz-border-radius-bottomright:15px;
    padding: 3px 3px; text-decoration: none;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }
.baru a:hover {
    color: #ffffff;
    left:-1px ; background: #fff; /* background saat hover */
    }

Update

/********************************

CSS Slide Out Posting lama/baru *

********************************/

.lama a {

color: #transparent;

position:fixed;

top:50%;

right:10px;

height: autopx; width: autopx;

color: #transparent; text-shadow: 1px 1px 0px #transparent;

background: #transparent; background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;

}

.lama a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}

.baru a {

color: #transparent; position:fixed;

top:50%; left:10px;

height: autopx; width: autopx;

color: #transparent; text-shadow: 1px 1px 0px #transparent;

background: #transparent;

background-color: #transparent;background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;

}

.baru a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}

Kemudian silahkan sobat cari kode di bawah ini

<span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>

jika sudah ketemu silahkan sobat ganti dengan script di bawah ini

<div class='lama'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev</a>
      </span>
      </div>

Update

<div class='lama'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/nextbutton.png'/></a>

</span>

</div>

satu langkah lagi sobat , silahkan cari kembali script di bawah ini

 <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span> 

jika sudah ketemu silahkan ganti script di atas dengan script di bawah ini

<div class='baru'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next&gt;</a>
      </span>
      </div>

Update

<div class='baru'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/backbutton.png'/></a>

</span>

</div>

Simpan dan lihat hasilnya semoga bermanfaat

Sumber: http://variasiblogger.blogspot.com/2012/01/cara-membuat-slide-navigasi-next-prev.html#ixzz1v2odMdTq

Efect Blockquote di posting

Masih di Ber-BagiGans share Efect Blockquote di posting cekidot

Silahkan sobat Copy Paste script  di bawah ini dan simpan sebelum kode ]]></b:skin> di Edit HTML blog sobat

.post blockquote {background:#FFE694;
background-image: url(http://i.picasion.com/pic51/234fa5924aee8f96e9d5525281b29933.gif); background-repeat: no-repeat;padding: 30px;
border: 2px #295F00 dashed;overflow:auto;max-height:150px;}
.post blockquote:hover {
background-image: url(http://i.picasion.com/pic51/13bd118e0c5a05f759e51097e960b34f.gif); background-repeat: no-repeat;}

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan Ctrl+F paste script ]]></b:skin> jika sudah ketemu silahkan Copy Paste kode script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Untuk contoh sobat bisa lihat Blockquote di halaman posting ini dan kode script di atas bisa sobat edit sesuai variasi efect yang sobat inginkan

Sumber: http://variasiblogger.blogspot.com/2012/03/efect-blockquote-di-posting.html#ixzz1v2o0Yz00

Followers Keren Blog

Masih di Ber-BagiGans share Followers Keren Blog cekidot

Silahkan sobat edit terlebih dahulu tampilan followers sobat di http://www.google.com/friendconnect jika sudah mengklik , Silahkan klik nama blog sobat >> klik Tambahkan gadget anggota , Disitu terdapat tiga pilihan yang harus sobat edit ( Pilih ukuran gadget , Pilih warna , Buat kode HTML ) jika sudah di edit jangan lupa klik Buat kode , karena kode tersebut nanti akan di gunakan untuk followers keren ini , Silahkan Copy Paste dahulu ke notepad kode yang baru saja sobat buat di google friend conect tersebut

Kemudian silahkan sobat Copy Paste script di bawah ini ke blog sobat

<style type="text/css">

#fl{

position:fixed;

left:150px;

z-index:+1000;

}

* html #fl{position:relative;}

.flcontent{

float:left;

border:2px solid #676767;

background:url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/tes_21476.gif)#000000 repeat-x bottom center scroll;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideFL(){

var fl = document.getElementById("fl");

var w = fl.offsetWidth;

fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

fl.opened = !fl.opened;

}

function moveFL(x0, xf){

var fl = document.getElementById("fl");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

fl.style.bottom = x.toString() + "px";

if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

}

</script>

<div id="fl">

<div class="fltab" onclick="showHideFL()"> </div>

<div class="flcontent">

<form style="border: 1px solid #ccc; box-shadow: 4px 5px 4px #999; -moz-box-shadow: 4px 5px 4px #999; -webkit-box-shadow: 4px 5px 4px #999; padding: 3px; text-align: center;">

SILAHKAN PASTE SCRIPT YANG TELAH SOBAT BUAT TADI DI GOOGLE FRIEND CONECT DISINI

</form>

<div style="text-align: right;">

<a href="javascript:showHideFL()">

[Close]

</a></div>

<font size="2"><a href="http://variasiblogger.blogspot.com/2011/12/followers-keren-blog.html"target=_blank"><div style="color: #444444;">

<span >By Variasi Blogger</span></div></a></font>

</div>

</div>

<script type="text/javascript">

var fl = document.getElementById("fl");

fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

</script>

<a href="javascript:showHideFL()"/><img border="0" src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/Follow-.png" alt="kode" title="Klik untuk Follow" style="display:scroll;position: fixed; top:150px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

Silahkan sobat ganti teks yang berwarna merah dengan kode script google friend conect yang sobat simpan di notepad

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik Html/Javascript , kemudian paste script di atas , simpan dan lihat hasilnya semoga bermanfaat

Sumber: http://variasiblogger.blogspot.com/2011/12/followers-keren-blog.html#ixzz1v2mz7oEy

Wibiya : ToolBar Blogger Canggih

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibiya ini sangat canggih.
Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? penasaran ingin lihat Demonya?? langsung aja kunjungi wibiya dan lihat di browser kamu bagian bawah.


Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

1. Buka website wibiya.com dan klik tombol "Get It Now"

2. Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

3. Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

4. Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

5. Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

6. Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

7. Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Cara Membuat Recent Post Dengan Thumbnail

Cara Membuat Recent Post Dengan Thumbnail - Kali ini saya akan berbagi Tutorial Blog yaitu Cara Membuat Recent Post yang cantik di Blog dengan Thumbelina, Recent Post atau bisa disebut juga Posting terbaru memiliki fungsi yaitu menampilkan setiap Posting terbaru, sehingga pengunjung akan dengan mudah melihat posting terbaru blog kamu, baik kita langsung aja pada intinya cara buat Recent Post di Blog.

• Login ke Blog kamu 
• Pilih Tata Letak
• Pilih Add Gadget
• Pilih HTML/JAVASCRIPT
• Lalu masukan kode di bawah ini.

<script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKeyZcY5UFVGXpIqkMmKabMrmx6M9ViulzNPdfh-XRHLjSH9vkKjLLRurlg4Re1-FFYXQDKcR1CjpPeXZv2BbTnfXkdZ0aK7DQhwGglv5-pEezkxv0y2nJ4DzuGTju2cGiCafOaP3xSdM/s1600/img1.jpg"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJ27UNmnZSZJtcDdHIIE_rr8yT6SlDV-7ShMpthjQ8nyHi-RKlISKOcOF_-7Ld89_K-aUhAEQXMoey9Tcznj8H8i51mPVKYAk_pDnP9ZZLhafEnMcTxwZ64CYqhmSpGDywW4-lL24kaU/s1600/img2.jpg"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOXFFW6hpI-inkTxWRyZ8Hlq_AOxecE_5IM_tZIhpjaMvXyQsW99Q48vX3rTl5EobWRB13kZWkN0yO8sxcdA_M4vGKX280jJHRr37iHJ1vvee9azSGwfLh_65JK84XZBOh_6ITXU8-A0/s1600/img3.jpg"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-YUWZSQa2T7yDOnsbh4SiyGL_tNnc5fb-xszU0aikcdA5UAFrosB1W_xuEgUJurgixw2QunS0NwPTSxLD2etqxp9cDWCHwrCeZNFApHJ-SuhZU7ia9fYWe4b9_0gyMuNe71SlxCasxcE/s1600/img4.jpg"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtm4SyCT4RlXhGsYOiX4fJoD2GXrn8V7_lOOC3OPBVxtzELkzbydAHxXI0ZSS-3CmmhIdPYSF-oMhiufZMQiErqNym7UHyhMUiHRGMzwszaUVUPAtYJUE4Yuomz4GnQonbuFcKgvwlD8/s1600/img5.jpg"; showRandomImg = true; tablewidth = 250; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#ffffff"; imgwidth = 40; imgheight = 40; fntsize = 12; acolor = "#000"; aBold = true; icon = " "; text = ""; fsize= "11"; showPostDate = true; summaryPost = 60; summaryFontsize = 11; summaryColor = "#666"; icon2 = " "; numposts = 4; home_page ="http://blazerracing.blogspot.com/"; </script> <script type="text/javascript" src="http://blazer-javascript-fajar.googlecode.com/files/Recent%20Post%20Thumbnail.js"></script>

Widget By : http://www.ivennuary.com/

Dan ini hasilnya

Keterangan :

• Ganti URL yang berwarna merah dengan Blog kamu.
• Yang warna orange numposts itu adalah menunjukan posting terbaru yang di tampilkan.
• Yang berwarna biru lebar kolom, sesuaikan dengan template kamu.
•  Yang berwarna ungu adalah Background nya silahkan ganti sesuai selera kamu

Akhirnya selsai juga cara buat Recent Post, baiklah seperti nya hanya segini yang bisa saya sanpaikan, jangan lupa tinggalkan pesan mu di kotak komentar, dan jika ada kesalahan dengan kode di atas hub Admin di Contact Us.

 

Thank's To : http://blazerracing.blogspot.com/2012/01/cara-buat-recent-post-dengan-thumbelina.html

Cara Membuat Related Post Dengan Thumbnail

Cara Membuat Related Post Dengan Thumbnail - Ada seorang sahabat blogger nih yang menanyakan Cara Membuat Related Post dengan Thumbnail, dan sekarang saya akan berbagi tutorial Cara Membuat Related Post dengan Thumbnail yang sangat-sangat mudah, ini dia langkah-langkah nya.

• Masuk ke alamat http://www.linkwithin.com  .
• Setelah masuk anda akan disuruh mengisi,
• Email isi dengan e-mail kamu.
• Blog Link isi dengan alamat Blog kamu.
• Platfrom kamu pilih Blogger.
• Lebar pilih sesuai keinginan anda mau 3 cerita, 4 cerita, atau 5 cerita.
• Terus kamu Klik GET WIDGET!
• Setelah klik Install Widget ke Blog kamu.
• Setelah terpasang kamu pindahkan ke Bawah posting kamu di Menu Tata Letak.

Gimana mudahkan. 

Thank's to  : http://blazerracing.blogspot.com/2012/01/cara-buat-related-post-dengan-thumbnail.html

Membuat Headline News Blog

Kali ini aku akan membahas tentang membuat headline news untuk blog. Sesuai namanya,widget headline news ini menampilkan judul serta link artikel-artikel terbaru dari blog kamu di bagian atas atau bawah blog kamu.
Kamu bisa lihat contoh gambarnya di bawah:


Judul-judul artikel pada headline news tersebut bergerak, sehingga lebih menarik perhatian pembaca.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" dan pilih "HTML/JavaScript",
3. Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:

   <script type="text/javascript"> var hn_url_blog = "http://BLOGKAMU.blogspot.com"; var hn_jumlah_post = 5; var hn_warna_latar = "#EEEEEE"; var hn_warna_garis = "#000000"; var hn_posisi = "top"; var hn_tampilkan_judul = true; var hn_backlink = true;</script><script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js"></script>

4. Berikut adalah penjelasan tentang variabel-variabel di atas:
   
   • hn_url_blog adalah URL blog kamu (widget ini hanya untuk pengguna blogger).
     
   • hn_jumlah_post adalah jumlah judul artikel yang ingin kamu tampilkan pada headline news.
     
   • hn_warna_latar adalah kode warna untuk latar belakang headline news. (Baca artikel kode hex warna di sini)
     
   • hn_warna_garis adalah kode warna untuk garis bingkai/border headline news. (Baca artikel kode hex warna di sini)
     
   • hn_posisi menentukan posisi headline news kamu apakah di atas ("top") atau di bawah ("bottom"),
     
   • hn_tampilkan_judul bernilai true kalau kamu ingin menampilkan tulisan "Headline news of BLOGKAMU" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
     
   • hn_backlink bernilai true kalau kamu ingin menampilkan backlink ke blog ini dan falsejika tidak.
     

Selamat mencoba dan semoga bermanfaat! :D 

Thank's to : Info Blog

Cara Memasang Widget Google Pagerank (PR)

Sebenarnya banyak widget Google PR. Tapi, yang paling populer adalah keluaran Mypagerank. Oke, langsung saja ke tutorialnya:

1. Buka situs Mypagerank.
2. Klik 'Google Pagerank Button'.

3. Masukkan URL blog anda. Misalnya: http://www.vickiu.com, lalu klik 'Check PR'.


4. Muncul pilihan model widget PR. Klik salah satu yang anda sukai.


5. Masukkan kode di bawahnya ke blog anda.
6. Selesai.

Komentar Anda Sangat Bermanfaat Bagi Perkembangan Blog ini.

Memasang Bookmark AddThis Di Blog

ocial bookmarking sangat berguna sekali untuk sebuah blog, salah satunya adalah dapat meningkatkan trafik blog kita. Salah satu situs social bookmark yang banyak dipakai oleh para blogger adalah AddThis. Sebenarnya banyak situs yang menyediakan jasa bookmark dan sharing gratis. Diantaranya adalah AddThis.com, AddToAny.com, ShareThis.com, AddInto.com, dan masih banyak lagi. Anda tinggal pilih untuk menggunakan salah satu diantaranya. Karena saya menggunakan jasa AddThis.com maka saya bahas yang ini saja. Untuk yang lainnya tidak jauh berbeda, pada dasarnya cara pasang tombol bookmark di setiap posting sama saja. Bahkan anda bisa memasangnya di sidebar dan tidak perlu di akhir postingan.

Pasang Bookmark Di Setiap Posting
Perbedaan antara meletakkan tombol bookmark di sidebar dan akhir posting adalah, jika anda letakkan tombol di sidebar maka bookmark akan mengambil feed pada halaman utama blog anda. Sedangkan jika diletakkan di akhir setiap posting, maka bookmark akan mengambil feed dari setiap judul posting yang dipilih. Nah, untuk memasang di akhir posting akan saya bagi menjadi dua tahap yaitu tahap pendaftaran atau registrasi dan tahap pemasangan kode script pada template blog.

Tahap Pertama

1. Kunjungi situs AddThis untuk mendaftar..
2. Pada halaman Create your button, akan ada pilihan dimana anda akan meletakkan tombol. Misalnya seperti di website, blogspot, wordpress. Kalau saya pilih yang blogspot. Di bagian bawah, silahkan pilih model tombol yang anda rasa cocok.
   
   
3. Setelah itu klik tombol Get the code yang berada di bawahnya.
   
   
4. Pada halaman berikutnya anda akan diberikan dua pilihan. Apakah anda ingin menambahkan tombol addthis di sidebar atau di akhir setiap posting. Anda bisa memilih dua-duanya secara bertahap. Nah, untuk menambahkan tombol addthis pada setiap posting maka pilihlah yang bagian bawah. Disana ada kode script addthis yang bisa anda copy dulu ke teks editor. Caranya dengan mengklik tombol Copy Code.
   
   

Tahap kedua

1. Login ke blogger dengan ID anda
2. Klik Layout
3. Pada tab menu pilih Edit HTML
4. Centang kotak Expand Template Widget
5. Cari kode <div class='post-footer'>
6. Paste kode script AddThis anda di bawah kode <div class='post-footer'>
7. Klik tombol Save Template

Sekarang coba perhatikan pada salah satu posting blog anda. Tombol addthis sudah berada di bawahnya dan di setiap akhir postingan yang lain. Jika tidak ada masalah, maka hasilnya akan seperti gambar ini :


Nah, langkah-langkah di atas akan mirip jika anda menggunakan jasa situs lainnya. Yang penting, anda mendapatkan script bookmark dan tinggal menempatkannya akhir setiap posting. Tombol bookmark tadi masih bisa ditempatkan selain di bawah <div class='post-footer'> pada template, termasuk di sidebar blog. Artinya, tidak semua template sama namun pada dasarnya mirip. Dicoba-coba saja dulu terus lihat preview blog anda. 

Demikian tadi tutorial singkat memasang bookmark addthis di blog, selamat mencoba dan semoga berhasil.

Memasang Jam di Blog

Bagi Anda yang lebih mengutamakan konten daripada tampilan lebih baik tidak usah memasangnya karena akan memperlambat loading page pada blog Anda. Tapi bila tidak terlalu mempermasalahkan loading blog maka tidak ada salahnya untuk memasang aksesoris ini.

Saat ini ada cukup banyak layanan yang menyediakan aksesoris jam gratis seperti timeanddate.com, clock4blog.eu, clocklink.com, widgetbox.com dan masih banyak lagi. Pada postingan kali ini saya akan membahas tentang memasang jam analog dari World time server. Karena layanan ini bisa menyediakan waktu yang lebih akurat dan banyak pilihan warna yang bisa Anda pilih sesuai selera.

Untuk memasangnya, silahkan ikuti langkah-langkah dibawah ini:

1. Kunjungi situs http://www.worldtimeserver.com/clocks 
2. Pilih salah satu bentuk jam analog yang Anda inginkan dengan mengklik link dibawah gambarnya masing-masing 
3. Kemudian Anda akan masuk kehalaman kustomasi seperti ini:

Clock Color : Pilih warna sesuai dengan selera dan template Anda. Size : Pilih ukuran yang Anda inginkan. Location : Pilih lokasi Anda. City Name : Isi nama kota Anda. Ini bersifat optional. Jika Anda tidak ingin menampilkan tinggal dikosongkan aja
4. Jika sudah, klik Update HTML Code 
5. Copy kode dalam kotak Object HTML Code 
6. Buka blogger. Klik menu Layout -> Page Elements  
7. Klik Add a gadget. Klik tombol + pada HTML/ Javascript 
8. Pastekan kodenya dalam kotak lalu klik Save 
9. Selesai. Silahkan klik View blog untuk melihat tampilannya

Demikian tadi penjelasan cara memasang jema di blog, selamat mencoba dan semoga bermanfaat.

Memasang Gambar Pada Pojok Blog

Sebenarnya gambar untuk sebuah blog mempunyai banyak maksud dan fungsinya, fungsi yang paling menonjol adalah untuk memperjelas suatu pembahasan. Dan fungsi lainya hanya sebagai aksesoris atau mempercantik tampilan suatu blog saja, supaya pengunjung lebih betah dan lama-lama mengintip blog yang kita kelola. Kali ini saya akan memberikan tutorial yang sangat sederhana, tutorial yang sifatnya hanya untuk menambah aksesoris blog anda. Tapi bisa juga berfungsi untuk menghemat ruangan blog, karena lokasi penempatannya berada di pojok kanan atau kiri.

Nah, bagi temen-temen yang tertarik dan ingin menambah aksesoris untuk blog, di bawah ini akan saya jelaskan langkah-langkah pemasangannya :

1. Login ke blogger dengan akun anda
2. Rancangan >> Edit HTML
3. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.
   

   #gambar_mojok {
   position:fixed;_position:absolute;bottom:0px; left:0px;
   clip:inherit;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4. Text yang dicetak tebal adalah posisinya, kalau pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top"
5. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
   

   <div id="gambar_mojok">
   <a href="http://www.ber-bagigans.co.cc">
   <img src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" border="0" /></a>
   </div>

6. Jika anda pingin yang ada disitu bukan gambar tetapi jam, kalender, hit counter atau widget-widget yang lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
7. Simpan hasil kerja kamu dan lihat hasilnya

Keterangan :

• Kode url yang berwarna bitu http://www.ber-bagigans.co.cc" ganti dengan url blog anda.
• Warna merah http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif adalah url gambar yang anda bisa ganti sesuai keinginan.

Jika anda sudah selesai, jangan lupa kasih komentar di bawah. Dan jika anda ingin copy paste artikel ini silahkan saja, karena blog saya ini blog bebas copy paste. Selamat mencoba dan semoga bermanfaat.

Mengganti Link Posting Lama, Home, dan Posting Baru dengan Gambar

Untuk menggantinya sebenarnya tidak membutuhkan proses yang cukup lama, kalian tinggal mengikuti tahap-tahapnya dibawah ini :

1. Login ke Blogger kalian
2. Pilih Rancangan
3. Masuk Ke EDIT HTML ( centang Expand Widget Template )
4. Untuk mengganti tulisan link tadi kalian cari kode berikut :

== Mengganti Link Posting Lama/older posts dengan gambar
cari kode :

<data:olderPageTitle/>

Ganti dengan kode berikut :

<img src='URL GAMBAR'/>

== Mengganti Link Posting Baru/newer posts dengan gambar
cari kode:

<data:newerPageTitle/>

Ganti dengan kode berikut :

<img src='URL GAMBAR'/>

== Mengganti Link Beranda/home dengan gambar
cari kode :

< data:homeMsg/>

ganti dengan kode berikut:

<img src='URL GAMBAR'/>

Keterangan :
== Ganti kata URL Gambar dengan link gambar kalian
== Untuk < data:homeMsg/>, Jika kalian menemukan 2 kata itu, ganti kata yang pertama.


5. SIMPAN template kalian dan lihat hasilnya.

Itulah tutorial singkat, sederhana dan sangat mudah dilakukan yang mudah2an akan sangat bermanfaat buat kalian. Terima kasih dan Happy Blogging.

Membuat Sliding Login/Register Form Panel di Blogspot [JQery]

Apakah Anda terarik dengan Widget ini.. ? Ikuti Tutorialnya dibawah..

Untuk membuatnya silahkan ikuti tahap-tahap berikut ini :

1. Login Ke blogger kalian
2. Pilih Rancangan
3. EDIT HTML --> centang expand template widget
4. Kalian simpan kode berikut diatas kode ]]></b:skin>

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

5. sekarang simpan javascript berikut diatas kode </head>

<script src="http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js" type="text/javascript">

Keterangan
Jika file Js diatas sudah ada ditemplate kalian, abaikan saja tahap ini.

6. simpan script berikut dibawah file Js tadi

<script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});
</script>

7. Sekarang kalian cari kode <body> dan simpan kode berikut dibawahnya

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Selamat Datang !!</h1>
<h2>Contoh Sliding Login</h2>
<p class='grey'>BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla</p>
<h2>Tutorial</h2>
<p class='grey'>Untuk membuat sliding login panel silahkan baca : <a href='http://www.z33s.co.cc/2010/08/sliding-login-panel-with-jquery.html' title='Download'>Cara membuat Sliding Login Panel di Blogger</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'></div>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'></li>
<li>Hello Guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Log In | Register</a>
<a class='close' href='#' id='close' style='display: none;'>Close Panel</a>
</li>

<li class='right'></li>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

KETRANGAN  :

Kode yang Berwarna MERAH dapat di ganti sesukan Anda..

Saran Saya :
Jika kalian ingin mengganti form login dengan kata-kata kalian atau dengan artikel kalian, silahkan ganti kode warna biru diatas

8. Simpan template kalian

Tambahan :
simpan kode diatas dalam bentuk file css dan file js eksternal, jika kalian ingin lebih enak. contoh :

• <link href='http://namahostingfile/namafile.css' media='screen' rel='stylesheet' type='text/css'/>
• <script src='http://namahostingfile/namafile.js' type='text/javascript'></script>
• <script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'></script>
Simpan diatas kode </head>

 

OKE SEKIAN TIPS DARI SAYA BHAKER SEVENFOLDISM TRIMA KASIH ATAS PERHATIANNYA WASSALAMUALLAIKUM WR. WB 

EMANG PIDATO PAKE GITUAN , hahahahahaha.. :D

Cara Mendaftar dan Memasang Sitemeter pada Blog

Sitemeter adalah salah satu blog tool untuk mengetahui statistik blog (jumlah pengunjung di blog) dan Tracker (asal pengunjung blog).
Oleh karena itu, pemilik blog harus memasang sitemeter di blognya, untuk cara mendaftar dan memasangnya pun sangat mudah !!!
Contoh widgetnya bisa sobat lihat di bawah ini:



Oke, tanpa basa-basi lagi langsung saja ke TKP.

Cara mendaftar di Sitemeter :
1. Masuk ke www.sitemeter.com

2. Klik Sign Up

3. Pilih sitemeter basic FREE alias gratis

4. Isikan data-data blog/web sobat

Note : Yang penting untuk diisikan saat daftar sitemeter:
Your site's URL : alamat blog/web sobat
Codename : nama account untuk log in member
Email Address : untuk verifikasi password dll (penting !!)
Jangan lupa pilih YES (Can you receive HTML email?) untuk mendapatkan report sitemeter lewat email sobat

5. Klik next, dan akan muncul pesan Success! Thank You

6. Pilih menu Manager

7. Klik HTML (adding sitemeter to your site)

8. Get code >> Copy Site Meter JavaScript HTML untuk yang pakai new blogger/XML/JavaScript atau Site Meter Regular HTML untuk yang pakai blogger klasik

9. Copy code HTMLnya

Untuk cara memasangnya di blog :
1. Masuk ke Blogger dengan ID sobat

2. Pilih Rancangan

3. Pilih Elemen Halaman

4. Klik Tambah Gadget

5. Pilih HTML/JavaScript

6. Paste code yang sobat copy tadi ke kotak yang telah di sediakan

7. Klik Simpan

8. Selesai

Cara kerja dan Fungsi Sitemeter :

General
* Sumary : total semua pengunjung dari awal sobat pasang sitemeter
* Who's On : jumlah pengunjung pada saat ini
* Traffic Prediction : prediksi traffic untuk blog/web sobat

Recent Visitor
* By Details : detail pengunjung seperti alamat domain/IP, jumlah halaman yang dilihat, waktu kunjungan dan lama kunjungan
* By Referrals : asal pengunjung
* By World Map : menampilkan asal kota atau negara asal pengunjung dalam bentuk peta
* By Location : menampilkan data kota atau negara asal pengunjung
* By Out Clicks : link yang di klik pengunjung pada saat meninggalkan blog
* By Entry Pages : halaman yang dituju pada saat pengunjung datang
* By Exit Pages : halaman yang terakhir di lihat oleh pengunjung

Visits : menampilkan data pengunjung dalam bentuk diagram
* Current Day : per hari
* Previous 7 Days : per minggu
* Previous 30 Days : per bulan
* Previous 12 Month : per tahun

Visits and page views : menampilkan data kunjungan dan jumlah halaman yang dilihat oleh pengunjung
* Current Day : per hari
* Previous 7 Days : per minggu
* Previous 30 Days : per bulan
* Previous 12 Month : per tahun

Page Ranking : ranking halaman berdasarkan pada saat masuk (Entry pages), atau keluar (Exit pages).

Selamat mencoba...
Semoga berhasil !!!

Pasang Widget Keren Stay Connect (Social Bookmark dan Berlangganan)

Alhamdulillah, Kamu Klik posting lagi nih.. :) pada kesempatan yang baik ini, Kamu Klik bakal ngasih widget keren lagi hehe.. seperti beberapa widget keren lainnya yang sudah Kamu Klik posting. Widget kali ini bernama Widget Stay Connect. Penasaran seperti apa widget stay connect ini ?  Okelah, saya jelaskan.. widget stay connected adalah widget dengan deretan tombol follower social bookmark, feed burner serta tombol untuk berlangganan via email. Widget stay connected dapat diletakkan pada sidebar, kalau bisa paling atas supaya mudah dilihat. Widget ini cukup keren pemirsaa, gak kaya widget berlangganan via email bawaan blogger yang tampilannya standard :p  Jadi widget stay connected ini semuanya dikumpulkan dalam 1 kotak sehingga lebih menghemat tempat di sidebar.

Seperti apa bentuknya ? Silakan bisa dilihat pada gambar dibawah:

Cara pemasangannya juga mudah sob ^^ yakni tinggal ikuti langkah-langkahnya dibawah. hehe..

Cara membuat widget stay connected :

• Seperti biasa kamu harus Login ke dashboard blogger kamu.

• Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

• Copy script dibawah ini dan paste pada gadget.
  
  <style>
  #news-letter{clear:both;padding-top:10px;}
  .msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2DZexnniILNfmG71WkBJ38XdXjbePK_siaZl_xj-QsM_S90Z6jCit-dXmaumGdZhpHQMxJKo6yw0ws4DkANsfqNS5-pZCV0zoxcHpN5dv-2vG-GKhuCIeHjdPuAgdzC0RNraEnJMtqZw/s800/mail-box.png) no-repeat;}
  .news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}
  </style>
  
  
  <div class="news-headline" color:#333;>
  Read latest headlines in your favorite news  reader
  </div>
  <center>
  <table border="0">
  <tr>
  <td style="padding-right:4px;">
  <a href="http://twitter.com/TWITTER-NAME" target="_blank" title="Follow Me On Twitter">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxw-8PrDwMNd_Ksn7i8UiLTwfyemJcK-MuF6ZWmcLy5rvRlCPS5fh4jfrdrf8OTpIjFSlwmpNaXmOh3zTCoa-HxmdaX3aGyHEUMvDrrCl98wM5tS2u1jTrbGnAxwLKoI4VDoiTYEZDjFU/s800/twitt.png" /></a>
  </td>
  <td style="padding-right:4px;">
  <a href="http://feeds.feedburner.com/FEEDNAME" target="_blank" title="Subscribe Via RSS">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhML_EocPFJ7_wBrSGajUiLULREcN5q-0ZdOj1phYLD_p7_5tcNnNkac0gdA0w1_-PX1OYxZ6HJZn4_JyX5cHDhKJgbH5kuGvnY0Xmqeg8MgwnuLVE212kWd7yLGdL66KjKdueTEvX5eic/s800/Feed-icon_128.png" /></a>
  </td>
  <td style="padding-right:4px;">
  <a href="FACEBOOK-URL" target="_blank" title="Find Us On Facebook">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lwK8qX0biorpoQV3NrGpu5WFt-5rlJiUGVYXhoevL-gtOEObQYFNrB98Bp_6HcoJ6gRe2Dx_yRZXLEvKBfcLOmfk4brjcsvp1MB9uJKanN2sVZWQIlxiGqS6cCWkz9Fy6OS9ZdA2SV8/s800/Facebook_icon.png" /></a>
  </td>
  <td style="padding-right:4px;">
  <a href="GOOGLE-PLUS-URL" target="_blank" title="Add me on Google+">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQv1qD9zYuyolCA7KCld89k9kubBDthoA_HHpDBco2-5Kazaim-0QidpCYvZVZgHzCc4py1ipjFNGm_UbtaAw9_tOG4nkT_127vObteSyRnp_5NcLL1FfG0URoLH5-pBnSDIKUEiQTko/s800/googleplusicon.png" /></a>
  </td>
  <td style="padding-right:4px;">
  <a href="http://www.stumbleupon.com/share?url=URL BLOG KAMU" target="_blank" title="Stumble Upon">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPXepNLIgyH1f3cE4mR10X7j0RSWOKkZqGfiGSHGZZoG5ANAK2ehljVPPELayhsWgVkSQu2ZgM9hWUBdGzIfim5YZbIZkhXm2pU1wMvgkl0lyHnzi-ikDW1xVDuY3ErWZHeQ9ATdVx108/s800/stumbleupon_icon.png" /></a>
  </td>
  <td style="padding-right:4px;">
  <a href="http://technorati.com/faves?sub=addfavbtn&add=URL BLOG KAMU" target="_blank" title="Add To Technorati">
  <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Mlw4A8q4SGmBlKC7clb-mZct4Yn4cyL21lLlsMCFkd63hpzReJpkQYDf0DgfNnkSWut01oGXmeHIsPfc0uPeFjHVaJJan8hd47ZEm8_ZqDtk4D-Q5BrH5W95WvfTeji1MSEuWEkEwas/s800/Technorati-icon.png" /></a>
  </td>
  <td>
  <td style='padding-top:-2px;'>
  <a href="http://feeds.feedburner.com/FEEDNAME"><img src="http://feeds.feedburner.com/~fc/FEEDNAME?bg=000000&amp;fg=ffffff&amp;anim=0&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a>
  </td>
  </td>
  </tr>
  </table>
  </center>          
  <div id="news-letter">
  <span class="msg-box"></span>
  <b>Sign up for our email news letter</b>
  <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify?uri=FEEDNAME">
  <p><input type="text" valign="middle" name="email" value="Enter your email address" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/>
  <input type="hidden" value="FEEDNAME" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input type="submit" value="Sign Up" id="submit"/>
  </p>
  </form>
  </div>
  Get this <a href="http://www.ber-bagigans.co.cc/2012/03/pasang-widget-keren-stay-connect-social.html" target="_blank"><blink>widget</blink></a></div>
  

• Lalu kamu Save / Simpan.

Panduan mengedit widget stay connected :

• Ganti FEEDNAME dengan nama/judul feed blog anda yang sudah terdaftar pada layanan Feedburner. Kalau anda belum memiliki akun di Feedburner maka mendaftarlah lebih dulu dan supaya mudah diingat (untuk cara mendaftar, silakan cari di google dgn kata kuncu 'Cara mendaftar feedburner) buatlah judul feed blog anda sama dengan title blog. Misalnya untuk blog ini saya berikan nama feednya “Kamu-Klik”.

• Ganti TWITTER-NAME dengan nama akun twitter anda.

• Ganti FACEBOOK-URL dengan alamat fan page atau boleh juga profil Facebook anda.

• Ganti GOOGLE-PLUS-URL dengan nama akun Google +1 anda.

• Dan yang terakhir, ganti URL BLOG KAMU dengan alamat/url homepage blog anda. Misalnya http://ber-bagigans.co.cc/.

Naa.. bagaimana sobat ? mudah kan ? kalau ada pertanyaan silakan komen dibawah yaa ^^
Yap, demikian postingan ini, semoga bermanfaat.. selamat mencoba :D

Cara Membuat Link Menjadi Huruf Miring Ketika Disorot Mouse

Postingan kali ini sih sepele aja, mungkin banyak yang uda tau, tapi postingan tentang tutorial blog ini dikhususkan buat yang belum tau aja. Cara Membuat Link menjadi Huruf Miring Ketika disorot Mouse - yap, itu yang bakal Kamu Klik bahas pada postingan kali ini.

Salah satu cara untuk mempercantik blog kita, dengan memvariasi bentuk link ketika disorot mouse. Naah.. lalu bagaimana cara link blog kita menjadi huruf miring ketika disorot mouse ? Untuk itu silakan ikuti cara-caranya dibawah.

Berikut cara agar link blog kita menjadi huruf miring ketika disorot mouse:

• Masuk ke akun Blogger Anda.

• Klik Rancangan > Edit HTML.

• Klik Download Template Lengkap untuk membuat back-up template. Hal ini berguna kalau kita ingin mengembalikan template seperti semula jika ada kesalahan dalam pengeditan.

• Cari kode yang mirip dengan kode di bawah ini yaitu kode yang mengandung a:hover.
  
  a:hover {
  color:#5588AA;
  text-decoration:underline;
  }

• Tambahkan kode font-style:italic; sehingga hasilnya menjadi seperti di bawah ini.
  
  a:hover {
  color:#5588AA;
  text-decoration:underline;
  font-style:italic;
  }

• Klik tombol SIMPAN TEMPLATE.

• Selesai dan lihat link text yang ada di blog kamu.
  

Mudah kan ? silakan mencoba :D