INDONESIA THE BEST: Maret 2012

Senin, 12 Maret 2012

Cara Memasang Guestbook dari Shoutcamp

Cara PasangGuestbook dari Shoutcamp – Memasang widget buku tamu atau guestbook di blog sepertinya sudah jadi hal yang wajib. Semenjak Shoutmix menjadi layanan berbayar diawal 2012 lalu, banyak blogger yang bingung mengganti widget melayang di blognya dengan guestbook yang free. Nah selain bisa memakai layanan dari Cbox seperti blog saya ini, sobat blogger juga bisa membuat buku tamu/guestbook dengan menggunakan layanan dari Shoutcamp. Mau tahu gimana cara mendaftar di Shoutcamp ? Simak aja penjelasan saya dibawah ini ya..!! Dan kalau mau liat seperti apa tampilan widget guestbook Shoutcamp ini, sobat dapat melihatnya di blognya Mas Khusaini http://penowo.blogspot.com/.

1. Registrasi dulu disini apabila anda belum terdaftar sebagai member atau langsung Login apabila sudah terdaftar sebagai member ShoutCamp.

2. Setelah login, lakukan Create New Shoutbox, yang akan anda masukkan ke blog.

3. Isikan title shoutbox dan URL blog Anda. Klik NEXT untuk melanjutkan.

4. Silakan masukkan avatar Anda.

5. Upload gambar/foto dari computer Anda.

6. Crop gambar Anda menyesuaikan dengan ukuran avatar shoutcamp.

7. Klik Install untuk mendapatkan kode HTML shoutcamp.

8. Setelah mendapatkan kode HTML, copy dan paste ke blog Anda.

Selanjutnya, silakan login ke account blogger Anda dan menuju ke blog untuk memasukkan kode HTML Shoutcamp. Langkah-langkah selanjutnya adalah sebagai berikut :

1. Login ke dashboard blogger anda.

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

3. Copy script kode HTML Shoutcamp dan paste langsung pada gadget jika anda ingin meletakkan widget guestbook pada sidebar.

4. Jika anda ingin menjadikan widget guestbook ini menjadi widget melayang/floating, maka copy saja script widget dibawah ini dan ganti tulisan LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI dengan kode HTML Shoutcamp anda.

<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>

<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI

<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>

<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>

5. Save / Simpan gadget anda dan lihatlah hasilnya.

Oke sobat blogger, itu tadi sedikit tutorial caramemasang guestbook di blogspot yang bisa saya share untuk anda. Semoga dengan penambahan widget ini memudahkan pengunjung blog anda untuk meninggalkan pesan atau komentar di blog anda.

Cara Membuat Widget Buku Tamu Melayang (Shoutmix/Cbox)

Cara Membuat Widget Buku Tamu Melayang Floating Widget - Widget buku tamu/guestbook melayang atau floating widget biasanya digunakan untuk buku tamu/guest book (shoutmix atau cbox) atau widget seperti statistik blog dan lain-lain terserah yang mau memakai saja. Kelebihan utama dari widget ini adalah bisa disembunyikan (sistem buka-tutup) dan bisa diletakkan dibagian tepi kiri, kanan atau bawah, sehingga bisa menghemat tempat pada sidebar.

Cara membuat buku tamu (guest book) / chatbox melayang :

1. Daftar dulu di Shoutmix atau Cbox, pilih salah satu saja.

2. Isikan data yang diminta dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.

3. Selanjutnya login ke dashboard blogger anda.

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

5. Copy kode script dibawah ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.

<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>

<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI

<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>

<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>

6. Preview dulu untuk melihat hasilnya.

7. Edit kode shoutmix pada bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode warna background atau mengganti URL gambar button dengan URL gambar anda sendiri. Silahkan bereksplorasi sendiri saja ya. Saran saya buatlah blog khusus untuk tempat uji coba sobat.

8. Jika sudah beres Simpan/Save gadgetnya.

Dengan adanya widget guest book/buku tamu melayang seperti ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karena banyak juga pengunjung blog yang kadang malas menulis di kotak komentar namun hanya ingin sekedar menyapa melalui widget buku tamu shoutmix/cbox ini.

Cara Membuat Widget Random Post (Postingan Acak)

Tips blogging kali ini saya ingin berbagi tentang bagaimana cara membuat widget random post, topik usang tapi masih banyak dicari oleh para newbie. Widget Random Post atau posting acak adalah satu dari sekian banyak pilihan widget yang bisa kita pasang di sidebar blog kita. Pada widget random post ini semua posting yang ada di blog, baik posting lama maupun postingan terbaru akan ditampilkan secara acak setiap kali kita membuka tab baru. Seperti apa cara membuat widget random post ini, ikuti langkah-langkahnya seperti dibawah ini :

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

Copy script dibawah ini dan paste pada gadget yang baru dibuat tadi.

<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Simpan dan preview hasilnya dengan mengklik Pratinjau.

Selesai

Dengan adanya widget random post ini maka setiap pengunjung blog anda juga dapat langsung melihat postingan apa saja yang ada di blog sobat. OK sobat, demikian langkah singkat cara membuat widget random post dari saya. Selamat mencoba untuk anda dan salam blogger.

Cara Membuat Widget Google Friend Connect (Follower Blogger)

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box - Inilah persembahan 3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di penghujung tahun 2011 ini. 3 buah widget melayang
yang digabung dalam 1 gadget ini merupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Box sekaligus !! Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like ini akan kita bedah bersama (hiks..!) dalam tips blogging kali ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2. Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">

.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRn9hyZi1SRX4mJwP_fNI9Y_xm2xvLva-tHEdppjw9VRcMJ0OYEDxd47r5RhtRC6RYGFG4Aj6YAkDN86dHBNK2uKaTGJ0IYdT5ItbHudJImOzssdiyM392YK3ggiLrb8M66-QawvgjP6Ud/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}

.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1YGDCRok9Z94LBaKG1feQ1oYUmpLsXrJTTEewHm5HB-B3AorZ7lPbjwcdZDzD5f1d2dq2PLfml8rYB0ssaTxiCuf_UaEexey9ZJpoQ6lq3WmwpsfwXkIzkzL9BbxjXvEy6dfzr-QsXySH/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}

.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMpbZxgDLQcqrMSDPGIqNuGQqK2NIN0vbY0K_NFq4m8qBLbkeActtPfV857SLRgr54TYm28G7wXfMXHWwX4VtnHiCEMqTDCQcQ8m6yyDVUV0bdG0L2f-BYwd4OimTxX92jJE8cPGlO4qY/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHI9RKfAuMMhxS1s7DAH27f31CHVPigHSC7c7NX0drsG_phc0pF6ka3ie6B_CdFWD6stbAo8wQ_R62y9jpsTLovUc5Q3T2nPzuvYNCrAIpe_QAh_n5lLgjWUFoio1s3TGGXQPpZ4marohI/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvViC6_RJ2TUsXEfDX3ox9UTEvw3QfWoxKNeCCWUd_L0rQwHl6RZvMX33ny6HX-u5NRJS3GAHXDamWRz6j__FjW-rJpM_AJNTRsbXiTI7hGb_LQqRmsYuMYrfBwGb5bDRTH1vBNFrAQVZK/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLOVLLBC5qplpviZQR3GW-uqcg8OsphQ2IATyqAChXo5G2IjrbxxtBg1BFbxFxuAZJLR11A-H8eXDiR5ivPSrEevhVzyW5ElZGvuV1Dw7va8P8yGZxs7GDOsGCKKLP80RnxbOH4FNaQofR/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">

<div class="barconteblogger">

CONTENT BLOGGER HERE

</div>

</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>

</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

CONTENT FACEBOOK HERE

</div>

</div>

3. Kustomisasi widget :

Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.

Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.

Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4. Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">

.barrightblogger{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRn9hyZi1SRX4mJwP_fNI9Y_xm2xvLva-tHEdppjw9VRcMJ0OYEDxd47r5RhtRC6RYGFG4Aj6YAkDN86dHBNK2uKaTGJ0IYdT5ItbHudJImOzssdiyM392YK3ggiLrb8M66-QawvgjP6Ud/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}

.barrightbloggerc{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1YGDCRok9Z94LBaKG1feQ1oYUmpLsXrJTTEewHm5HB-B3AorZ7lPbjwcdZDzD5f1d2dq2PLfml8rYB0ssaTxiCuf_UaEexey9ZJpoQ6lq3WmwpsfwXkIzkzL9BbxjXvEy6dfzr-QsXySH/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}

.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMpbZxgDLQcqrMSDPGIqNuGQqK2NIN0vbY0K_NFq4m8qBLbkeActtPfV857SLRgr54TYm28G7wXfMXHWwX4VtnHiCEMqTDCQcQ8m6yyDVUV0bdG0L2f-BYwd4OimTxX92jJE8cPGlO4qY/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHI9RKfAuMMhxS1s7DAH27f31CHVPigHSC7c7NX0drsG_phc0pF6ka3ie6B_CdFWD6stbAo8wQ_R62y9jpsTLovUc5Q3T2nPzuvYNCrAIpe_QAh_n5lLgjWUFoio1s3TGGXQPpZ4marohI/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvViC6_RJ2TUsXEfDX3ox9UTEvw3QfWoxKNeCCWUd_L0rQwHl6RZvMX33ny6HX-u5NRJS3GAHXDamWRz6j__FjW-rJpM_AJNTRsbXiTI7hGb_LQqRmsYuMYrfBwGb5bDRTH1vBNFrAQVZK/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLOVLLBC5qplpviZQR3GW-uqcg8OsphQ2IATyqAChXo5G2IjrbxxtBg1BFbxFxuAZJLR11A-H8eXDiR5ivPSrEevhVzyW5ElZGvuV1Dw7va8P8yGZxs7GDOsGCKKLP80RnxbOH4FNaQofR/');background-

repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">

<div class="barconteblogger">



<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>



<div id="div-5280101236238054965" style="width:225px;border:1px solid #cccccc;"></div>



<script type="text/javascript">

var skin = {};

skin['BORDER_COLOR'] = '#cccccc';

skin['ENDCAP_BG_COLOR'] = '#ff9900';

skin['ENDCAP_TEXT_COLOR'] = '#333333';

skin['ENDCAP_LINK_COLOR'] = '#0000cc';

skin['ALTERNATE_BG_COLOR'] = '#ffffff';

skin['CONTENT_BG_COLOR'] = '#ffffff';

skin['CONTENT_LINK_COLOR'] = '#0000cc';

skin['CONTENT_TEXT_COLOR'] = '#333333';

skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';

skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';

skin['CONTENT_HEADLINE_COLOR'] = '#333333';

skin['NUMBER_ROWS'] = '5';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

{ id: 'div-5280101236238054965',

   site: '13497557564014853740&#039; },

skin);

</script>

</div>

</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 2,

interval: 30000,

width: 220,

height: 220,

theme: {

    shell: {

      background: '#333333',

      color: '#ffffff'

    },

    tweets: {

      background: '#333333',

      color: '#f3f5f0',

      links: '#eb9f07'

    }

},

features: {

    scrollbar: true,

    loop: false,

    live: false,

    behavior: 'all'

}

}).render().setUser('@rayhanzhampiet').start();

</script>

</div>

</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

<iframe allowtransparency="true" frameborder="0" scrolling="no"

src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Share-With-Irfan-Blogs/322414587773378&width=24

0&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;

overflow: hidden; width: 240px;background: #fff;"></iframe>

</div>

</div>

5. Kalau mau gampang sobat tinggal mengganti ID akun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudah saya tandai dengan tulisan warna merah dengan ID atau kode akun milik anda.

6. Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikut ini tutorialnya :

1. Login ke Google Friend Connect menggunakan akun blogger/gmail anda.

2. Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3. Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini.

4. Jika kustomisasi sudah selesai, klik tulisan Generate code pada langkah ke-3 Create the HTML code, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap dicopy atau disimpan di notepad.

Untuk pengaturan widget update status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Box dapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php. Mohon maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata sobat gagal memasang dan melakukan pengaturan pada widget
ini. Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!

Cara Membuat Widget Daftar Menu Blog

Cara Membuat Widget Daftar Menu Blog Otomatis - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1. Login ke dashboard blogger anda.

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

3. Copy script dibawah ini dan paste pada gadget.

Loading... </div>

</div>

var jumlah_kata_dalam_ringkasan = 250;

</script>

</script>

</script></div>

4. Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.

5. Save / Simpan.

Cukup mudah bukan cara membuat widget daftar menu blog ini ? Mudah-mudahan postingan ini bisa menjawab keinginan sobat-sobat yang “mungkin” saja salah alamat datang ke blog ini. Karena dari data statistik widget histat counter yang saya pasang di blog ini, banyak juga pengunjung yang datang dengan kata kunci membuat daftar menu blog ternyata diarahkan ke artikel Cara Membuat Daftar Isi Sitemap Blog Otomatis. Ternyata mbah Google juga bisa salah ngasih alamat ya he he.

Cara Membuat Widget Stay Connected (RSS)

Cara Membuat Stay Connected Widget - Widget dengan deretan tombol follower social bookmark, feed burner serta tombol untuk berlangganan via email ini biasa disebut dengan widget stay connected. Kenapa disebut seperti itu ? Ya karena pada bagian atas widget ada tulisan Stay Connected, gitu aja koq repot sih hi hi. Soalnya saya sendiri bingung mau mendefinisikannya dalam bahasa Indonesia seperti apa. Widget stay connected dapat diletakkan pada sidebar, kalau bisa paling atas supaya mudah dilihat. Biasanya widget berlangganan via feed burner dan berlangganan via email bawaan blogger dibuat terpisah dengan widget social bookmark. Nah pada widget stay connected ini semuanya dikumpulkan dalam “1 rumah” sehingga lebih menghemat tempat di sidebar.

Cara membuat widget stay connected :

1. Login ke dashboard blogger anda.

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

3. 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/AVvXsEgV_9QObpESKlU_wZpAaur0tUaVqKAqaCNI7xrZYdB18iu1w-77K7JBSJFRyA0vGCCTjx-9i6kUhlAWLghUaMP-_bR13-v27IZb9VwKQsCj0hyphenhyphen68TxfeIA_i0FrQAEBLd4c5FWR7sHcIPw/s800/mail-box.png) no-repeat;}

.news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}

</style>

Read latest headlines in your favorite news reader

</div>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

<td>

</td>

</tr>

</table>

</center>

<b>Sign up for our email news letter</b>

</p>

</form>

</div>

4. Save / Simpan.

Cara mengedit script widget stay connected (kustomisasi) :

1. 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, buatlah judul feed blog anda sama dengan title blog. Misalnya untuk blog ini saya berikan nama feednya “ShareWithIrfan”.

2. Ganti TWITTER-NAME dengan nama akun twitter anda.

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

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

5. Dan yang terakhir, ganti HOMEPAGE-URL dengan alamat homepage blog anda. Misalnya http://rayhanzhampiet.blogspot.com/.

OK sobat selamat mencoba membuat widget stay connected ini dan semoga puas dengan hasilnya. Keep in touch for next update.

Cara Membuat Widget Kode Warna Non RGB

Widget Kode Warna Hexadecimal Non RGB - Kode-kode warna hexadecimal atau non RGB suatu saat pasti akan kita butuhkan manakala kita ingin membuat tulisan, teks, border atau efek warna pada background blog kita dengan warna-warna lain selain warna standart seperti hitam, putih, biru, merah, kuning, dan hijau yang sudah umum kita pakai. Cara praktis untuk mendapatkan kode warna yang kita inginkan adalah dengan cara memasang widget kode warna pada blog sobat. Dalam tips blogging ini saya akan menampilkan widget kode warna dalam bentuk kode hexadecimal/non RGB yang bisa sobat pakai untuk mengetahui kode warna-warna tertentu. Cara penggunaannya gampang, sobat tinggal klik pada warna yang diinginkan dan copy kode warna hexadecimal yang muncul disitu.

Kode Warna Hexadecimal / Non RGB

Silahkan sobat gunakan widget kode warna hexadecimal diatas sesuai keperluan anda, mudah-mudahan bisa membantu.

Cara Membuat Widget Recent Post

Cara Membuat Widget Recent Post Dengan Thumbnail – Widget Recent Post atau artikel terbaru umumnya ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut sepengetahuan saya hanya ada 2, yaitu widget recent post dengan thumbnail yang statis/diam (tidak bergerak) dan ada juga widget recent post dengan slide show/bergerak (model tayangan). Nah yang mau kita bahas pada tips blogging kali ini adalah membuat widget recent post yang statis tapi ada gambar/thumbnailnya seperti yang ada di sidebar blog ini, biar ngga susah-susah nyari contohnya he he. Cara membuatnya mudah saja koq, silahkan sobat ikuti langkah-langkahnya dibawah ini.

Cara Membuat Widget Recent Post dengan Thumbnail :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3. Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

4. Simpan dan lihat hasilnya.

5. Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Mudah saja bukan cara membuat widget recent post dengan thumbnail ini ? Kalo masih kesulitan juga silahkan tulis dikomentar OK ! Selamat mencoba dan salam blogger.

INDONESIA THE BEST

Ads 468x60px

Senin, 12 Maret 2012

Cara Memasang Guestbook dari Shoutcamp

Cara Membuat Widget Buku Tamu Melayang (Shoutmix/Cbox)

Cara Membuat Widget Random Post (Postingan Acak)

Cara Membuat Widget Google Friend Connect (Follower Blogger)

Cara Membuat Widget Daftar Menu Blog

Cara Membuat Widget Stay Connected (RSS)

Cara Membuat Widget Kode Warna Non RGB

Cara Membuat Widget Recent Post

Cool B themes Slider

Follow Now.......!

Popular Posts

Blog Archive

Followers

Rss

Mengenai Saya