Membuat Buku Tamu Dengan Light Effect

<div style="text-align: justify;">Hari ini ada sahabat Klinik <a href="http://klinik-blogger.blogspot.com/">Blogger</a> yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti <b>Shoutbox Melayang Dengan Light Effect jQuery</b> . Buku Tamu kali ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. </div> <center></center><br /><br /><center><a href="http://klinik-blogger.blogspot.com/"><img alt="Membuat Buku Tamu Melayang Dengan Light Effect" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZFRbDdlsLYXq9XR26OBqB4d2GOGpgN2WD_VMYNBFzZKcN5gjt4X2KNPKpo0mpw0KsUEoQWm-PMxXL3RkDrfuBE5UEqh9KlIwuZfS1WMUWjJJncguqE_UByTrHZAmxH_zHWyJ5ht8taa_/s400/shoutbox+melayang.bmp" width="400" /></a></center><br /><br /><div style="text-align: center;"><br /></div>Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:<br /><br />1. Login Ke Blogger kalian<br />2. Pilih <span style="font-weight: bold;">Rancangan</span> ---> <span style="font-weight: bold;">ELEMEN halaman</span><br />3. <span style="font-weight: bold;">Tambah Gadget</span> ---> Pilih <span style="font-weight: bold;">HTML/Java Script</span><br />4. Simpan kode berikut dalam konten HTML/Java Scriptnya<br /><br /><blockquote style="color: rgb(51, 204, 255);"><!-- Start Shoutbox light effect by Han --><br /><script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script><br /><script><br />$(document).ready(function() {<br />//select all the a tag with name equal to modal<br />$('a[name=modal]').click(function(e) {<br />//Cancel the link behavior<br />e.preventDefault();<br />//Get the A tag<br />var id = $(this).attr('href');<br />//Get the screen height and width<br />var semahHeight = $(document).height();<br />var semahWidth = $(window).width();<br />//Set heigth and width to semah to fill up the whole screen<br />$('#semah').css({'width':semahWidth,'height':semahHeight});<br />//transition effect<br />$('#semah').fadeIn(1000);<br />$('#semah').fadeTo("slow",0.8);<br />//Get the window height and width<br />var winH = $(window).height();<br />var winW = $(window).width();<br />//Set the popup window to center<br />$(id).css('top', winH/2-$(id).height()/2);<br />$(id).css('left', winW/2-$(id).width()/2);<br />//transition effect<br />$(id).fadeIn(2000);<br />});<br />//if close button is clicked<br />$('.window .close').click(function (e) {<br />//Cancel the link behavior<br />e.preventDefault();<br />$('#semah').hide();<br />$('.window').hide();<br />});<br />//if semah is clicked<br />$('#semah').click(function () {<br />$(this).hide();<br />$('.window').hide();<br />});<br />});<br /></script><br /><br /><style>a {color:#ffffff; text-decoration:none}<br />img { border: none; }<br />#semah {<br />position:absolute;<br />left:0;<br />top:0;<br />z-index:9000;<br />background-color:#000;<br />display:none;<br />}<br />#wadah .window {<br />position:fixed;<br />left:0;<br />top:0;<br />width:440px;<br />height:200px;<br />display:none;<br />z-index:9999;<br />padding:20px;<br />}<br />#wadah #kid53 {<br />background:url(<span style="color: rgb(255, 0, 0);">http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png</span>) no-repeat 0 0 transparent;<br />width:272px;<br />height:460px;<br />padding:56px 0 20px 5px;<br />}<br />#tutupan {<br />padding:2px 0 0 0;<br />}<br /></style><br /><br /><ul><center> <a href="#kid53" name="modal"><img src="<span style="color: rgb(255, 0, 0);">http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png</span>" border="0" width="158" height="58" /></a> </center> </ul><br /><br /><div id="wadah"><br /><!-- Start Shoutbox --><br /><div id="kid53" class="window"><br /><br /><span style="color: rgb(255, 0, 0);">SIMPAN SCRIPT Cbox KALIAN DISINI</span><br /><br /><div id="tutupan"><input type="button" value="Close" class="close" /><br /></div></div><!-- End Shoutbox --><br /><div id="semah"></div></div><br /><!-- End of Shoutbox light effect by Han--><br /></div></blockquote><br /><br /><br />5. Jangan lupa disimpan<br /><br /><br /><div class="perhatian"><b>Catatan</b><br /><ul><li>Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.</li><li>Untuk Shoutmix ukurannya Height: 380px dan Width: 261px</li><li>Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width</li><li>untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.</li></ul></div>untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :<br /><br /><table border="1"><tbody> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png</td></tr> </tbody></table><br /><br />TAMBAHAN :<br /><br />Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,<br /><br />gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)<br />Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:<br /><blockquote style="color: rgb(51, 204, 255);"><br /><ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul></blockquote>dengan kode ini :<br /><blockquote style="color: rgb(51, 204, 255);"><ul><div style='display:scroll; position:fixed; top:5px; right:3px;'><br /><a href="#kid53" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a><br /></div><br /></ul><br /></blockquote>Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.<br /><br /><span style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_MvLBi88bM_I/TKBi67qZ-BI/AAAAAAAABgk/jkuk4xIevG0/GbNice.png" /></span><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" /><br /><br />Semoga <span style="font-weight: bold;">Membuat Buku Tamu Melayang Dengan Light Effect</span> ini bisa membantu dan Semoga bermanfaat.

tutorial blog Membuat Buku Tamu Dengan Light Effect

Hari ini ada sahabat Klinik Blogger yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti Shoutbox Melayang Dengan Light Ef...

Read more »

Cara Membuat Komentar Blog Berdampingan Dengan Komentar versi Facebook

<span style="font-family:Verdana,sans-serif;">Komentar facebook dan blog berdampingan? maksudnya seperti apa? Nah, biar teman teman ga bingung, bisa melihat contohnya pada gambar di bawah ini</span><br /><br /><table class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;" cellpadding="0" cellspacing="0" align="center"><tbody> <tr><td style="text-align: center;"><a href="http://klinik-blogger.blogspot.com/" style="margin-left: auto; margin-right: auto;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-yirW2qhKYK43YgPur3-41dGNAlBYQ5gA3mWwT92XwQi4eAVNyQyP2dxeFEHx0IY4fn2IAnEEMat03_ctOuxZosa0y4j3D_z68zp8ys3n62GeAmf_EX6I2L-rBnhE2dS6IbZbSCBffey/s400/ss.JPG" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Komentar Facebook dan Blogger yang Berdampingan</td></tr> </tbody></table><span style="font-family:Verdana,sans-serif;">Nah, sudah tau kan maksudnya seperti apa? pada <a href="http://klinik-blogger.blogspot.com/">kotak komentar</a> model ini</span>, <span style="font-family:Verdana,sans-serif;">akan terdapat dua tab menu yang masing masing berisi kotak komentar dengan facebook dan kotak komentar default dari blogger. tertarik untuk membuatnya?</span><br /><span style="font-family:Verdana,sans-serif;"><br /></span><br /><span style="font-family:Verdana,sans-serif;">1. Masuk ke Edit HTML, kemudian beri centang pada expand widget template. Oh ya, jangan lupa di back up dulu templatenya yah .</span><br /><span style="font-family:Verdana,sans-serif;"><br /></span><span style="font-family:Verdana,sans-serif;">2. Cari kode berikut <span style="font-weight: bold; color: rgb(255, 0, 0);"><div class='comments' id='comments'><br /></span></span><span style="font-family:Verdana,sans-serif;">3. Kode berikut di bawah kode di atas<br /><br /><blockquote style="color: rgb(255, 0, 0);"><div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><br /><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><br /><fb:comments-count expr:href='data:post.url'/> Comments<br /></div><br /><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><br /><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments<br /></div><div class='clear'/><br /></div><br /><div class='comments-page' id='fb-comments-page'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><fb:comments expr:href='data:post.url' num_posts='<span style="color: rgb(51, 51, 255);">2</span>' width='<span style="color: rgb(51, 51, 255);">400</span>'/><br /></b:if><br /></div><br /><div class='comments comments-page' id='blogger-comments-page'></blockquote><br /></span><span style="font-family:Verdana,sans-serif;">4. Cari kode <span style="color: rgb(56, 118, 29); Courier New",Courier,monospace; font-weight: bold;font-family:";" ></head></span> kemudian pastekan kode berikut di atasnya</span><br /><br /><blockquote style="color: rgb(255, 0, 0);"><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><script src='http://code.jquery.com/jquery-latest.js'/><br /><meta content='<span style="color: rgb(51, 51, 255);">Masukkan ID Facebook</span>' property='fb:admins'/><br /><script type='text/javascript'><br />function commentToggle(selectTab) {<br />$(".comments-tab").addClass("inactive-select-tab");<br />$(selectTab).removeClass("inactive-select-tab");<br />$(".comments-page").hide();<br />$(selectTab + "-page").show();<br />}<br /></script></blockquote><br /><span style="font-family:Verdana,sans-serif;">5. Kemudian cari kode berikut </span> <span style=" Courier New",Courier,monospace;font-family:";color:#38761d;" >/* Comment</span> <span style="font-family:Verdana,sans-serif;">atau</span> <span style=" Courier New",Courier,monospace;font-family:";color:#38761d;" >#comments</span>. <span style="font-family:Verdana,sans-serif;">Kemudian letakkan kode berikut di bawahnya</span><br /><br /><blockquote style="color: rgb(255, 0, 0);">.comments-page { background-color: #f2f2f2;}<br />#blogger-comments-page { padding: 0px 5px; display: none;}<br />.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}<br />.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}<br />.comments-tab:hover { background-color: #eeeeee;}<br />.inactive-select-tab { background-color: #d1d1d1;}</blockquote><br /><span style="font-family:Verdana,sans-serif;">Keterangan :</span><br /><ul><li><span style="font-family:Verdana,sans-serif;">Ganti kode warna <span style="color:blue;">biru</span> denga jumlah coment yang ingin di tampilkan dan berapa ukuran lebar yang diinginkan</span></li><li><span style="font-family:Verdana,sans-serif;">Ganti kode warna merah dengan id facebook teman teman, contoh alamat fb saya https:<span style="color: rgb(51, 51, 255);">//www.facebook.com/aziscs1</span> nah, id nya adalah <span style="color: rgb(51, 51, 255);">aziscs1</span><br /></span></li></ul><br />Sumber : http://www.diditrinjano.com/

tutorial blog Cara Membuat Komentar Blog Berdampingan Dengan Komentar versi Facebook

Komentar facebook dan blog berdampingan? maksudnya seperti apa? Nah, biar teman teman ga bingung, bisa melihat contohnya pada gambar di ba...

Read more »

12 Tempat Ping Blog Terbaik

<div style="text-align: justify;"><span style="font-family: Verdana,sans-serif;">Kali ini Klinik Blogger akan menjelaskan, apakah yang di maksud dengan ping itu? ping<span style="font-family: Verdana,sans-serif;"> </span></span><span style="font-family: Verdana,sans-serif;">merupakan fasilitas untuk mempercepat indeks sebuah artikel di blog atau update terbaru dari blog kita. Ping juga merupakan cara praktis agar blog diketahui oleh banyak pengunjung.</span><br /><br /><span style="font-family: Verdana,sans-serif;">Tapi sebelum melakukan ping, ada baiknya kita memperhatikan beberapa hal berikut...</span><br /><ol><li><span style="font-family: Verdana,sans-serif;">Lakukan ping apabila kita telah mengupdate artikel kita</span></li><li><span style="font-family: Verdana,sans-serif;">Lakukan ping seperlunya saja, jangan lebay...hehe</span></li><li><span style="font-family: Verdana,sans-serif;">Jangan lakukan ping dengan overdosis (baca : terlalu sering) karena bisa dianggap sebagai spam.</span></li></ol><span style="font-family: Verdana,sans-serif;">Nah, itu tadi adalah beberapa rambu rambu yang harus diperhatikan saat kita mau melakukan ping. Berikut ini adalah situs situt yang bisa kita gunakan sebagai ping artikel tersebut...</span></div><div style="text-align: justify;"><ol><li><a href="http://www.totalping.com/"><span style="font-family: Verdana,sans-serif;">Totalping</span></a></li><li><a href="http://feedshark.brainbliss.com/"><span style="font-family: Verdana,sans-serif;">Feed Shark</span></a></li><li><a href="http://autopinger.com/"><span style="font-family: Verdana,sans-serif;">AutoPingler</span></a></li><li><a href="http://ping.in/"><span style="font-family: Verdana,sans-serif;">Ping.in</span></a></li><li><a href="http://pingler.com/"><span style="font-family: Verdana,sans-serif;">Pingler</span></a></li><li><a href="http://www.mypagerank.net/service_pingservice_index"><span style="font-family: Verdana,sans-serif;">My Pagerank</span></a></li><li><a href="http://googleping.com/"><span style="font-family: Verdana,sans-serif;">Googleping</span></a></li><li><a href="http://pingomatic.com/"><span style="font-family: Verdana,sans-serif;">Pingomatic</span></a></li><li><a href="http://www.pingmyblog.com/"><span style="font-family: Verdana,sans-serif;">Pingmyblog</span></a></li><li><a href="http://pingates.com/"><span style="font-family: Verdana,sans-serif;">Pingates</span></a></li><li><a href="http://feedping.com/"><span style="font-family: Verdana,sans-serif;">Feed Ping</span></a></li><li><span style="font-family: Verdana,sans-serif;"><a href="http://www.pingoat.com/">Pingoat</a> </span></li></ol><span style="font-family: Verdana,sans-serif;">Nah, itulah beberapa layanan ping yang bagus yang ada di internet. Selamat mencoba yah...</span></div>

SEO 12 Tempat Ping Blog Terbaik

Kali ini Klinik Blogger akan menjelaskan, apakah yang di maksud dengan ping itu? ping merupakan fasilitas untuk mempercepat indeks sebuah ...

Read more »