Cara Pasang Guestbook dari Shoutcamp

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

1.  Registrasi dulu disini apabila anda belum terdaftar sebagai memberatau langsung Login apabila sudahterdaftar sebagai member ShoutCamp.

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

3.       Isikantitle shoutbox dan URL blog Anda. Klik NEXTuntuk melanjutkan.

4.      Silakan masukkan avatar Anda.

5.      Upload gambar/foto dari computer Anda.

6.      Crop gambar Anda menyesuaikan dengan ukuranavatar shoutcamp.

7.      Klik Installuntuk mendapatkan kode HTML shoutcamp.

8.      Setelah mendapatkan kode HTML, copy dan paste keblog Anda.

Selanjutnya, silakan login ke account blogger Anda danmenuju ke blog untuk memasukkan kode HTML Shoutcamp. Langkah-langkahselanjutnya 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 padagadget jika anda ingin meletakkan widget guestbook pada sidebar.

4.  Jika anda ingin menjadikan widget guestbook inimenjadi widget melayang/floating, maka copy saja script widget dibawah ini danganti tulisan LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI  dengan kode HTMLShoutcamp anda.

 <!-- Mulai Hidden Widget -->
<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>
<!-- Gambar Atas -->
<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>
<!-- Gambar Samping -->
<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>
<!-- Selesai Hidden Widget -->

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 denganpenambahan widget ini memudahkan pengunjung blog anda untuk meninggalkan pesanatau komentar di blog anda.

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya kepincut. Pada versi awal dari menu Rocking Rolling ini hanya menggunakan efek sliding seperti yang dapat sobat lihat di http://tympanus.net/Tutorials/RockingRollingMenu/. Namun dalam versi yang saya share kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!



VIEW DEMO HERE

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

 Selamat bereksprimen coba Membuat Rocking Rolling Rounded Menu dengan JQuery ini, kalo belum berhasil coba terus aja yaaacchh…!! Salam Blogger and happy nice blogging !

Referensi tulisan :
http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
http://tip-triksblogger.blogspot.com/2011/03/rocking-rolling-rounded-menu-with.html
http://blogcunayz.blogspot.com/2011/12/menu-rocking-rolling-rounded-dengan.html

Cara Mengganti Icon Social Bookmark Pada Widget

Cara Mengganti Icon Social Bookmark – Koleksi icon social bookmark / networking ini sengaja saya posting biar sobat bisa mengganti sendiri icon pada widget melayang social bookmark dengan efek mouseover yang pernah saya posting sebelumnya. Ada kurang lebih 50 jenis icon social bookmark/networking yang bisa sobat pilih dari 2 situs website di bawah ini, download icon kesukaan anda dan upload kembali ke hosting google. Kalau mau gampang masukin aja ke halaman posting di blog sobat, kemudian gunakan link icon gambarnya pada widget.

23 Free High Quality Social Media Icon Sets

35 Awesome Social Networking Icons

Buat sobat blogger yang pernah memasang widget social bookmark melayang dengan efek mouseover dan mengalami masalah pada gambar icon yang menghilang, postingan tersebut sudah saya update dan link gambar icon pada script bisa sobat gunakan. Dijamin ngga bakal ngilang-ngilang lagi deh ! Trus kalau gambar iconnya mau diganti icon jenis lain, sudah saya sediakan banyak pilihan dari 2 link diatas. Semoga posting ini bisa bermanfaat dan happy blogging aja ya…!

Widget Melayang/Floating Follower Google Friend Connect Twitter dan Facebook Like Box ( 3in1 Widget)

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 penghujungtahun 2011 ini. 3 buah widget melayang

http://rayhanzhampiet.blogspot.com/2011/12/widget-google-friend-connect-twitter.html

yang digabung dalam 1 gadget inimerupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget inimemuat widget follower blogger (GoogleFriend Connect), widget update status Twitter dan widget Facebook Like Boxsekaligus !! Demo penerapan widgetmelayang (floating widget) ini bisa sobat lihat disamping sidebar kananblog ini. Seperti apa Cara membuatwidget Follower Blogger, status Twitter dan Facebook Like ini akan kitabedah bersama (hiks..!) dalam tips blogging kali ini.

Cara MembuatWidget 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 pastepada gadget.

<style type="text/css">

.barrightblogger{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv2XbkPGSm0vz-j4sd2BvgUBUsXM2F5asKo979fmmIgfSIW1uB_9lv1ogQRjzKN-FaUJLB6765y96Fi8pebIzMBEQAbo-Fy3cVfVcgwuqArd_KnNG1nRD1icXI5nLFN_kC2PCqkcHaArTM/');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/AVvXsEioe58bMuhYnxYFWkNa1CMaLqBVu4gsoCBvvakz8dEHBi329GlsIvGvPJ_EKzV9s0MY1ImjTCeGE1qMwGKLiiMscLWSlvmlcegn1bVueMXQ9lsxAjuRg4bRXBZAHHFE5s35_4ELTEilmja1/');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/AVvXsEjxII3XVA65loBl_weWOjXlPsMXTyLmX9qG2QC7z-0vQKcABgG99Zt18AXNKvWw0_-C7NHaw8UbOyZbdkKYxebflQ5vgkz2sWeyHPJ0YNyeB4CNiOCnK-kimIwEaEupvQQOdcDj7UIdIrcA/');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/AVvXsEjwz0WzWtfsNgURQYFJe_56TmnvFJcRNMBizHPc5VfD_SXfJFkmO8u1iURg2cbPvp1ubTujw6cILJeCU91xSkH5wmbpgXdQfd1NxotT8naMVq535tK7ObeM__ztH4th7c0RJUj9vFHpDhQd/');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/AVvXsEgKQis9Qrucmweaa-f1YPOVKiqrY2-WJ6lvzzWIU1qgif7ddNog99xpi63W_ZWgOX5V9lUiTHIQMp7dNHzj0QjqREDpLKGwcv4eoL0XcIRH4-pU_OGuj27nlfUH_C2BfYYtIpEeyARrlrAg/');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/AVvXsEjzHc87S706lIDkLerLHgFP2RJfICmtnstmZhbxQ0HM9BYyrPVn5_X-53v-D0jWOnQrMybPWHLHijHwC3TEgeH4VjURFxdMtJteJ55Cp1Y54gyjD7dip3FhAHt6faNzILaLMd0J_jF6uCVy/');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">

CONTENTBLOGGER HERE

</div>

</div>

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

<div class="barcontetwitter">

CONTENTTWITTER HERE

</div>

</div>

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

<div class="barcontefacebook">

CONTENTFACEBOOK 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/AVvXsEgv2XbkPGSm0vz-j4sd2BvgUBUsXM2F5asKo979fmmIgfSIW1uB_9lv1ogQRjzKN-FaUJLB6765y96Fi8pebIzMBEQAbo-Fy3cVfVcgwuqArd_KnNG1nRD1icXI5nLFN_kC2PCqkcHaArTM/');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/AVvXsEioe58bMuhYnxYFWkNa1CMaLqBVu4gsoCBvvakz8dEHBi329GlsIvGvPJ_EKzV9s0MY1ImjTCeGE1qMwGKLiiMscLWSlvmlcegn1bVueMXQ9lsxAjuRg4bRXBZAHHFE5s35_4ELTEilmja1/');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/AVvXsEjxII3XVA65loBl_weWOjXlPsMXTyLmX9qG2QC7z-0vQKcABgG99Zt18AXNKvWw0_-C7NHaw8UbOyZbdkKYxebflQ5vgkz2sWeyHPJ0YNyeB4CNiOCnK-kimIwEaEupvQQOdcDj7UIdIrcA/');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/AVvXsEjwz0WzWtfsNgURQYFJe_56TmnvFJcRNMBizHPc5VfD_SXfJFkmO8u1iURg2cbPvp1ubTujw6cILJeCU91xSkH5wmbpgXdQfd1NxotT8naMVq535tK7ObeM__ztH4th7c0RJUj9vFHpDhQd/');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/AVvXsEgKQis9Qrucmweaa-f1YPOVKiqrY2-WJ6lvzzWIU1qgif7ddNog99xpi63W_ZWgOX5V9lUiTHIQMp7dNHzj0QjqREDpLKGwcv4eoL0XcIRH4-pU_OGuj27nlfUH_C2BfYYtIpEeyARrlrAg/');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/AVvXsEjzHc87S706lIDkLerLHgFP2RJfICmtnstmZhbxQ0HM9BYyrPVn5_X-53v-D0jWOnQrMybPWHLHijHwC3TEgeH4VjURFxdMtJteJ55Cp1Y54gyjD7dip3FhAHt6faNzILaLMd0J_jF6uCVy/');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">

<!-- Include the Google Friend Connect javascript library.-->

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

<!-- Define the div tag where the gadget will be inserted.-->

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

<!-- Render the gadget into a 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">

<scriptsrc="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&amp;width=24

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

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

</div>

</div>

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

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

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

1.      Login ke GoogleFriend 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 gadgetseperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris followeryang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalamanini.

 4.       Jikakustomisasi sudah selesai, klik tulisan Generatecode pada langkah ke-3 Create theHTML code, maka kode HTML gadget follower / Google Friend Connect milikanda sudah selesai dan siap dicopy atau disimpan di notepad.

Untuk pengaturan widgetupdate status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets,sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php. Mohonmaaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganyaberhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendirimembuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyatasobat gagal memasang dan melakukan pengaturan pada widget

http://rayhanzhampiet.blogspot.com/2011/12/widget-google-friend-connect-twitter.html

ini. Blogger sejatitidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIEFOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!

Tips Membuat Floating Facebook Like Box Di Blogspot

Tips Membuat Floating Facebook Like Box  - Widget melayang Facebook Like Box kali inilebih simple dan ringan daripada widget-widget melayang lain yang pernah sayacoba. Menempatkan widget dengan cara disembunyikan atau widget floating/melayang selainmenghemat tempat pada sidebar juga dimaksudkan supaya tidak menghambatkecepatan loading awal blog pada saat dibuka. Floating Facebook Like Box inisaya dapatkan saat melancong ke blog tetangga dari Uruguay (jauh sekalee..!) yangfull stylish banget. So mumpung masih fresh mendingan langsung bagi-bagi ajabuat sobat blogger yang mungkin kepingin memasang widget melayang Facebook LikeBox di blognya.

Cara Membuat Widget Melayang Facebook Like Box

1.     Sebelumnya anda harus sudah mendaftar danmendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.

2.      Login ke dashboard blogger anda.

3.      Pilih Rancangan > Elemen Laman > AddGadget (HTML/Javascript).

4.      Copy script widget dibawah ini dan paste padagadget.

<style type="text/css">

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQis9Qrucmweaa-f1YPOVKiqrY2-WJ6lvzzWIU1qgif7ddNog99xpi63W_ZWgOX5V9lUiTHIQMp7dNHzj0QjqREDpLKGwcv4eoL0XcIRH4-pU_OGuj27nlfUH_C2BfYYtIpEeyARrlrAg/');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/AVvXsEjzHc87S706lIDkLerLHgFP2RJfICmtnstmZhbxQ0HM9BYyrPVn5_X-53v-D0jWOnQrMybPWHLHijHwC3TEgeH4VjURFxdMtJteJ55Cp1Y54gyjD7dip3FhAHt6faNzILaLMd0J_jF6uCVy/');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="barrightfacebook"onmouseover="this.className='barrightfacebookc'"onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

<!-- Begin Facebook -->

CONTENTFACEBOOK HERE

<!-- End Facebook -->

</div>

</div>

5.      Ganti tulisan CONTENT FACEBOOK HERE dengan kodeFacebook Like Box anda.

6.      Jika pada template anda belum terdapatjavascript dari Facebook, maka copy saja javascript dibawah ini dan letakkantepat diatas kode </head>  pada template supaya widget Facebook Like Boxini bisa berfungsi.

<script>(function(d, s, id) {

  var js, fjs =d.getElementsByTagName(s)[0];

  if (d.getElementById(id)){return;}

  js = d.createElement(s); js.id= id;

  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

  fjs.parentNode.insertBefore(js,fjs);

}(document, &#39;script&#39;,&#39;facebook-jssdk&#39;));</script>

<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'type='text/javascript'/>

7.     Sesuaikan tinggi dan lebar widget supaya samadengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook.

8.      Save / Simpan.

Well, cukup gampang bukan membuat widget melayang Facebook Like Box  ini ? Sekian dulu tipsblogging kali ini, happy nice blogging on Saturday Night !!

Tips Membuat Tampilan Dynamic View Blogger

Cara Membuat/Mengubah Tampilan Dynamic View di Blogger – Sebenarnya sudahagak lama blogger/blogspot meluncurkan feature terbarunya yaitu Blogger Dynamic Viewatau tampilan dinamis blogger ini. Kalau tidak salah diluncurkan sekitar bulanSeptember yang lalu, namun masih banyak juga blogger yang belum tau denganfeature dynamic view dari Blogger ini. Kelebihan feature dynamic view iniadalah halaman blog ditampilkan dalam 7 modus pilihan tampilan dengan navigasiserta appearance yang sangat baik. Sehingga akan memberikan nuansa lain buatpengunjung dan anda sendiri tentunya bisa melihat tampilan blog dalam formatyang berbeda dan lebih fresh. Untuk melihat demo tampilan dynamic view sobat dapat mengklikbutton yang saya buat di pojok kiri atas halaman blog ini atau dengan mengkliklink dibawah gambar.

Classic  |  Flipcard  |  Magazine  |  Mosaic  |  Sidebar  |  Snapshot  |  Timeslide

Cara Mengaktifkan Feature Dynamic View di Blogspot :

1.      Login ke dashboard blogger anda.

2.      Pilih Rancangan > Edit HTML, centang Expandtemplate widget.

3.      Copy script dibawah ini dan letakkan tepat diataskode </body>  pada template.

<a href='/view'style='display:scroll;position:fixed;top:30px;left:10px;'title='Show dynamic views..!'><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_yyFn7ipy2jfPs04hGOt82V3t6h3-1vbifSq8mRqVB9iaJ1t5KYXJgV5vQRezBuI2o-tDwKkOp8_rOBJgQJBLdb584y12Su2CjN7BYajD4FP9oNUXTkkenvcD1cfrvdXsY_qwGTDeiM/s1600/Blogger%252Bicon%252Bdynamic%252Bview.jpg'/></a>

4.      Untuk posisi kiri, kanan, atas dan bawah dapatanda rubah sesuai keinginan, begitu juga dengan jarak margin serta URL button.Sobat dapat mengupload button sendiri yang lebih keren dan mengganti URL yangada pada script diatas.

5.      Save / Simpan template anda dan lihatlahhasilnya.

Cara Mengubah Homepage Menjadi Tampilan Dynamic View:  (NB: Kalo mau lho ya….!!   )

1.      Login ke dashboard blogger anda.

2.      Pilih Rancangan > Edit HTML, centang Expandtemplate widget.

3.      Copy script dibawah ini dan letakkan tepat dibawahkode <head>  pada template.

<meta content='1; url=http://url-blog-anda.blogspot.com/view'http-equiv='refresh'/>

4.      Save / Simpan template anda dan lihatlahhasilnya.

5.      Anda juga dapat langsung menentukan pilihantampilan Homepage blog anda dengan memasukkan salah satu dari 7 modus tampilandynamic view. Misalnya http://url-blog-anda.blogspot.com/view/Mosaic.Jadi saat ada orang lain yang mengklik link homepage blog sobat maka secaraotomatis akan di-redirect ke URL tampilan dynamic view blog anda. Yang perludipahami adalah dalam tampilan dynamic view maka semua widget dan pernak pernikblog sobat tidak akan bisa terlihat. Jadi dynamic view sebenarnya hanyalah alternativetampilan saja.

Bagaimana sobat, tertarik untuk membuat tampilan dynamic view di blog anda ? Silahkan dicoba saja dah.., setidaknya khan bisabuat cuci mata he he he.

Cara Mengganti Background Blog Otomatis

Cara Mengganti Warna Background Blog Otomatis – Banyakcara untuk membuat variasi dan memperindah tampilan blog. Salah satunya adalahdengan menempatkan widget untuk mengganti warna background otomatis ini disidebar blog anda, sehingga pengunjung dapat memilih warna background kesukaanmereka. Selain supaya kita juga ngga bosan dengan tampilan background yangitu-itu saja, dan pengunjung yang datang pun kita harapkan mendapatkankenyamanan sehingga mereka betah berlama-lama membaca  di blog kita. Contoh penggunaan widgetpengganti warna background blog otomatis ini dapat sobat lihat langsung disidebar blog ini.

Cara Mengganti Background Blog :

1.      Login ke dashboard blogger anda.

2.      Pilih Rancangan > Elemen Laman > Addgadget (HTML/Javascript).

3.      Copy script yang ada dibawah ini dan paste padagadget.

<div class="widget-content">

<center><b>Pilih Warna Kesukaan Anda</b></center>

<br/>

<script type="text/javascript">

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

<table border="1"width="100%" height="20">

<tbody><tr>

<tdonclick="bgChange('#8B008B')"bgcolor="#8B008B">

</td>

<tdonclick="bgChange('#9400D3')"bgcolor="#9400D3">

</td>

<tdonclick="bgChange('#008080')"bgcolor="#008080">

</td>

<tdonclick="bgChange('#808080')"bgcolor="#808080">

</td>

<tdonclick="bgChange('#CD853F')"bgcolor="#CD853F">

</td>

<tdonclick="bgChange('#2F4F4F')"bgcolor="#2F4F4F">

</td>

<tdonclick="bgChange('#DC143C')"bgcolor="#DC143C">

</td>

<tdonclick="bgChange('#4B0082')"bgcolor="#4B0082">

</td>

<tdonclick="bgChange('#A52A2A')" bgcolor="#A52A2A">

</td>

</tr></tbody></table>

</div>

4.      Silahkan sobat edit teks tulisan yang berwarnamerah dan kode pilihan warna yang berwarna biru dengan warna-warna kesukaananda. Untuk kode warna dapat dilihat disini.

5.      Save / Simpan.

Mudah dan gampang bukan ? Pada widget pengganti warnabackground ini hanya ada 9 pilihan warna background, jika sobat inginmenambahkannya copy saja kode yang terakhir sehingga kolom warna akan bertambah.Kalau masih bingung, baca lagi postingan sebelumnya tentang cara membuat tabel dan kolom. Semoga tips Cara Mengganti Warna Background Blog ini bermanfaatuntuk anda.

Cara Membuat Kotak Admin Dibawah Postingan Blog

Cara Pasang Kotak Admin Dibawah Posting Blogger  - Banyak cara untuk membuat tampilan blogmenjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotakadmin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentangartikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author)ini terserah pada kreasi masing-masing. Sobat blogger bisa juga menuliskankata-kata lucu didalamnya. Yang jelas untuk link nama penulis/author, judulposting dan tanggal publish postingan sudah saya sertakan dalam script widgetkotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secaramanual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawahpostingan blog ini sebagai demo-nya.

Cara Membuat Kotak Admin Di Blogspot :

1.      Login ke dashboard blogger anda.

2.      Pilih Rancangan >> Edit HTML, centangExpand template widget.

3.      Cari kode <divclass='post-footer'> pada template.

4.   Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<!-- Kotak Admin -->

<b:if cond='data:blog.pageType ==&quot;item&quot;'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>~ Deskripsi Blog Anda</h4>

<div class='kontainer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzhO0DG0CDuXuWz_d3QKHcs58pbGmU-bsTeO_yJNY_luBxgp2bcvC3TWkkZ1Uv7c5i0-MnmqwflrWx_fWiKbuj4iGxleDxg9C12gkwVx5ww-2awB5LtDxO4-5CVPrgPyIf0BloTY_3L4/s220/AVATAR+KU-128.jpg'/>

Artikel <aexpr:href='data:post.url'><data:post.title/></a>ini diposting oleh <data:post.author/> pada hari<data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaanAnda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic10px Arial, Sans-Serif;'><ahref='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html'target='_blank'>:: Get this widget !::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

5.      Kemudian cari lagi kode ]]></b:skin>pada template sobat.

6.      Copy kode CSS dibawah ini dan paste tepat diataskode ]]></b:skin>. Jikagagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan{

display:block;

width:auto;

background:#CFE2E0;

border:2px solid #fff;

box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px#000;-webkit-box-shadow:0 1px 3px #000;

padding:0;

margin:30px 0 10px 0;

font:normal 12px Arial, Sans-Serif;

color:#222;

}

.admin-tulisan .kontainer{padding:5px;}

.admin-tulisan h4{

background:#8A9C04;

border:none;

border-bottom:1px solid #699019;

color:#fff;

text-transform:normal;

text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);

font:bold 12px Arial,Sans-Serif;

padding:5px 10px;

margin:0 0 0 0;

display:block;

}

.admin-tulisan h4 a{color:#FEEA83;}

.admin-tulisan img{

width:70px;

height:70px;

margin:0 10px 0 0;

float:left;

border:1px solid #954B02;

padding:2px;

background:#C36702;

box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

}

7.      Silahkan ganti link URL gambar profil yangberwarna merah dengan link gambar profil sobat.Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kataulasannya di notepad.

8.      Untuk jenis font, warna background dan border jugadapat sobat ganti/edit sesuai keinginan.

9.      Preview dulu hasil kotak admin yang dibuat. Jikaediting sudah dirasa cukup, Save/Simpan template anda.

Nah sekarang kotak admin yang keren sudah nampangdibawah postingan sobat. Ayo tuangkan ide kreasi kamu untuk membuat kotak admin dibawah postingan blog sobat jadi tuambah keren lagi. Tadinya untukPenulis/Authornya saya juga mau memakai kata-kata "Ditulis Oleh : Ayu Ting Tingyang sedang mencari alamat palsu". Namun batal karena takut diprotes ama Ayu Ting Ting yang beneran..hi..hi.

Sumber: Hompimpa Alaihum Gambreng