Tampilkan postingan dengan label Gadget and Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Gadget and Widget. Tampilkan semua postingan

Cara Membuat Kotak Komentar Google Plus

Beberapa saat lalu, blogger telah memperbaharui editor html pada template blog. Sekarang, Kotak Komentar Google+ juga merupakan perangkat tambahan terbaru. Bagaimana cara membuatnya ? Sebelum mengikuti setiap langkah, kita harus mengetahui terlebih dahulu fungsi dari komentar dengan memanfaatkan jejaring sosial google plus.
google+ comments

Fitur Komentar System di Google+ :
1. Semua Aktifitas dalam satu Media.
Setiap kali kita melakukan share yaitu pada saat mempublikasikan artikel posting terbaru anda maka secara otomatis anda akan berbagi ke semua orang. Setiap jejak komentar atau juga menambah plus button akan menghasilkan komentar mereka masuk ke dalam feed anda. Dengan ini, situs anda akan menjadi praktis dan muncul juga di komentar blog anda.

2. Menambah jumlah traffik dan lalu lintas
Seperti yang kita ketahui, hampir semua produk dari Google diberikan keistimewaan swasta tersendiri. Dengan memanfaatkan setiap produk yang dimilikinya maka secara otomatis situs yang kita buat menjadi lebih maksimal dan semakin meningkatkan pengunjung.

3. Interface yang Interaktif

 Komentar yang muncul dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau menambahkan satu komentar. Anda dapat dengan mudah chat / balas komentar seperti merasa seolah-olah Anda sedang mengobrol dengan teman-teman dekat atau sahabat sekolah.

4. Bersifat Publik

Sekarang pembaca Anda akan dapat memposting komentar umum atau pribadi kepada orang-orang dalam lingkaran Google mereka. Selain itu, ketika orang browsing komentar mereka dapat melihat semuanya, sebagian sebagai orang, atau hanya dari orang-orang di lingkaran mereka.

5. Admin Comment System
Anda sebagai pemilik blog akan memiliki hak penuh terhadap setiap komentar yang masuk karena anda adalah seorang author. Anda dapat dengan menghapus, mengedit dan menambah komentar sesuai dengan keinginan.

Cara Membuat Kotak Komentar Google Plus Berdampingan dengan Blogger :
1. Silahkan anda masuk ke Google+. Klik More. Yaitu kita akan membuat halaman yang nantinya sebagai tempat untuk mengarahkan kepada situs anda.
more pages blog

Silahkan anda klik More dan pilih Pages.
Kemudian buatlah halaman baru dan isi sesuai dengan data blog anda seperti terlihat pada gambar di bawah ini.
create page
2. Kemudian jika sudah selesai, silahkan Simpan.

3. Masih di Google+, klik Profile lalu pilih About dan cari di bagian kanan seperti gambar berikut.
edit profile
4. Pada bagian Link, Isi Other Profiles, Contributor To, dan Links dengan memasukkan url blog anda.
5. Simpan Profile apabila telah selesai edit.

6. Login ke Blogger.com
7. Klik Google+ pada daftar menu elemen blogger.
blogger google+

8. Setelah anda masuk, lalu akan muncul sebuah tampilan. Disana terdapat identitas profile Google+ Anda dengan Blogger.

Klik Use Google+ Comments in Your Blog
Jika anda telah melakukan langkah 1 dan 5 dengan benar, maka dibagian bawah foto profile akan terdapat page blog anda.

Seperti terlihat pada gambar terdapat Media Blogger page milik saya.

Setelah diklik makan akan tersimpan secara otomatis oleh sistem.

9. Barulah kita akan masuk ke bagian pengeditan HTML.
10. Masuk ke Template, Pilih Edit HTML, Klik Edit Templates untuk melakukan pengeditan.
      Untuk berjaga-jaga silahkan backup (download terlebih dahulu) template anda.
11. Anda dapat melakukan pencarian kode dengan mengklik dimana saja pada bagian dalam lembar kerja berbentuk kotak di edit html tersebut kemudian tekan CTRL + F.
12. Cari kode <div class='post-footer'>
13. Copy script kode berikut di bawahnya.
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
14. Kemudian cari lagi kode <b:includable id='threaded_comments' var='post'>
Silahkan anda lihat atau download terlebih dahulu scriptnya di Comments Hack Tutorial V2
[ untuk mendownload, kik link diatas dan tunggu 5 detik lalu klik skip ad ] Comments Script Bot Cbox Link2

15. Hapus kode yang berada di bawah kode <b:includable id='threaded_comments' var='post'> sampai kode </b:includable>
edit script html

16. Letakkan script yang didownload tadi dibawah <b:includable id='threaded_comments' var='post'>
delete script
17. Selanjutnya cari kode <b:includable id='comment_picker' var='post'> dan hapus sampai kode </b:includable> seperti pada gambar.
comment picker
18. Ganti dengan kode berikut ini :
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

19. Selesai dan Simpan Template Anda.

Cukup panjang pada tutorial kali ini, semoga dapat dilakukan dengan mudah dan benar. Source by mbloggerlab. Baca juga artikel Cara Merubah Kotak Komentar Blogger Keren. Tolong kepada para pengunjung hargailah usaha saya untuk memposting dengan tutorial yang lengkap ini. Jangan copy paste terus, karena setelah saya tinjau banyak sekali artikel saya yang dicopy paste hingga 16ribu posting artikel yang sama. Kalau bisa seharusnya kamu mengklik iklan google adsense saya agar lebih semangat lagi posting ^^ Just Kidd .

Cara Merubah Kotak Komentar Blogger

Memodifikasi tampilan blog merupakan suatu hal yang perlu dilakukan. Hal ini dilakukan agar blog atau toko online yang kita buat diminati banyak pengunjung. Oleh karena itu, desain adalah hal pokok yang harus diperhatikan. Salah satu cara agar tampilan blog terlihat cantik adalah dengan memodifikasi kotak komentar standart menjadi kotak komentar facebook.

Cara pembuatannya sangat mudah yaitu hanya menambahkan kode css tanpa perlu mengedit elemennya. Bahkan kita harus menghapus kode-kode yang memiliki kesamaan agar tidak akan merubah hasil akhirnya. Contoh dari tutorial membuat komentar blogger menjadi facebook dapat dilihat pada gambar.
merubah kotak komentar
Banyak tutorial CSS untuk merubah tampilan standart blogger Thread comments yang lain. Berikut panduan cara memasangnya :
1. Login Ke Blogger.com
2. Pilih Template > Klik Edit Template ( agar kita dapat mengedit template )
3. Klik tanda panah hitam pada bagian <b:skin> .... ]]></b:skin>
4. Download CSS Script Code Facebook V2 .
5. Letakkan script tersebut diatas kode ]]></b:skin> atau bisa didalam <b:skin>
6. Simpan Template anda.

Jika ada perbedaan, berarti ada beberapa kode yang sama dari template bawaan sebelumnya. Sedangkan untuk menambahkan kotak komentar facebook yang asli silahkan baca di Forex Comment.

Cara Mempercantik Blog dengan Tampilan Menarik

Banyak cara mempercantik blog dengan tampilan menarik, unik, rapih, dan dinamis. Karena menurut pengamatan saya, apabila pengunjung mengunjungi sebuah halaman blog yang acak-acakan meskipun dari segi non interfacenya bagus maka secara otomatis mereka akan cepat pergi. Oleh karena itu, pada artikel ini saya akan membagikan tips seputar blogging.

Di sini saya akan berbagi trik bagaimana cara agar blog yang kita punya menjadi lebih cantik, keren, unik dan membuat nyaman para pembaca menelusuri setiap bagian halaman. Penasaran kan?
cara mempercantik blog
Oke langsung ke topik utama isi artikel. Ada beberapa fitur yang bisa kamu tambahkan untuk mempercantik blog kalian. Beberapa aspek yang penting dan harus anda perhatikan adalah :

Template, Widget, Warna Tulisan, Warna Background, Artikel, dan Navigasi.

6 elemen inilah yang harus anda optimalkan guna memberikan kenyamanan bagi para pembaca.
Mungkin secara detailnya tidak akan saya bahas secara lengkap hanya dalam satu buah artikel ini, tetapi saya akan bahas di kesempatan berikutnya dengan beberapa aspek.

Beberapa tips mengoptimalkan design dan mempercantik blog :

  1. Gunakan template sesuai dengan isi dari blog.
  2. Pasang Widget Fans Page Like Box Facebook.
  3. Memasang Keterangan Waktu baik itu Jam, Tanggal, Hari, Kalender dan sebagainya.
  4. Gunakan widget Shoutbox atau Buku Tamu agar pengunjung dapat berinteraksi.
  5. Pakai Sharethis Button di setiap artikel.
  6. Jangan gunakan warna Judul Posting atau warna Text Body halaman blog kamu dengan warna terang dan silau.
  7. Jangan menggunakan animasi flash/ jQuery yang membuat beban loading blog kamu menjadi berat.
  8. Berikan artikel yang berkualitas dan bermanfaat.
  9. Jangan tidak menghiraukan Judul. Semakin menarik judul, semakin besar kemungkinan untuk dibaca oleh pengunjung.
  10. Tambahkan navigasi mengenai status dimana pengunjung berada, dan kemudahan pengunjung untuk menemukan informasi yang dicari.
Dengan memperhatikan semua kriteria pengoptimalan tampilan blog seperti diatas, diharapkan mampu meningkatkan jumlah Pageviews anda per user. Fungsi Sitemap, Link Exchange, Cara Membuat Halaman Blog.
Pengunjung akan dengan mudah menyukai sebuah halam blog apabila memberikan informasi mengenai apa yang sedang dicarinya. Agar informasi dapat dilihat dan ditemukan dengan mudah tentu kualitas artikel, navigasi yang baik, dan design yang bagus sangat dibutuhkan.

Membuat Tombol Share dibawah Posting

tombol share this
Tombol banyak digunakan sebagai salah satu alternatif seperti guest book, read more, dll. Artikel Cara Membuat Tombol Share dibawah posting ini terinspirasi dari multifungsi sebuah blog sebagai media untuk mempublikasikan artikel ke social networking agar menjadi lebih bermanfaat dan berguna untuk orang banyak.

"Berbagi itu Indah" Begitulah kata yang tepat untuk menu tutorial blogger kesempatan pagi ini. Bagaimana cara pemasangannya, yuk ikuti panduannya berikut ini :

1. Masuk ke menu template di dalam blogger, pilih EDIT HTML > Centang Expand Widget Templates.
2. Copy kode di bawah ini dan letakkan diatas kode ]]></b:skin> ( Dapat dengan menekan CTRL + F di Keyboard anda )
#post-share-button{margin-top:25px;background:#fafafa;padding:10px 10px 5px 15px;width:95%}

3. Lalu cari lagi kode yang seperti ini <div class='post-footer-line post-footer-line-3'>,letakkan kode di bawah ini diatas kode tersebut.
<div id='post-share-button'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
<span style='margin-left:15px'><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></span>
<span><span id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>

function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> </span>
</div>
4. Simpan Template Anda.

Demikian tutorial singkat mengenai pemasangan Tombol Share This di bawah Artikel. Untuk anda yang ingin merubah tampilannya menjadi lebih bagus dan cantik disertai icon dapat menuju ke artikel Share Button Beautifull in Bottom Article.

Membuat Tombol Back To Top Blogger

back_to_top_button
Berbagai macam cara dilakukan untuk mempermudah pengunjung saat mengunjungi halaman blog kita. Tombol Back To Top adalah salah satu yang sering digunakan dan berfungsi untuk mempercepat proses scroll ke bagian atas. Biasanya button ini terpasang di sebelah kanan atau kiri bagian bawah widget. Pembuatannya cukup mudah dan simple, karena hanya menggunakan script CSS biasa tanpa menggunakan JQuery. Bagaimana cara memasangnya? Ikuti panduannya yang akan saya jelaskan berikut ini.

Cara Membuat Tombol Kembali Ke Atas di Blogspot :
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget, anda dapat menaruhnya bebas di letak apapun.
4. Pilih HTML/Javascript.

Copy Kode berikut : <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="link URL gambar" /></a></div>

5. Save Template.
Anda dapat mengganti link URL gambar dengan gambar panah ke atas yang anda inginkan. Atau dapat menggunakan opsi ke 2.

Add Go To Top Button with CSS for Blogger :
1. Login ke akun blogspot anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </body> dengan menggunakan CTRL + F (Search Find)
4. Letakkan kode berikut diatasnya atau sebelum kode </body>
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>
5. Simpan Template.

Demikian tutorial blogspot yang mudah dan simple mengenai Cara Memasang Tombol Back To Top. Anda dapat mengikuti panduan menarik lainnya yang dapat anda pahami dengan mudah seperti Cara Membuat Efek Zoom Pada Gambar , Benarkah Keyword Density tepat untuk SEO, dan Download Prmeium Template Free .

Membuat Gadget Widget Blogspot Terlengkap

Tutorial cara memasang widget / gadget banyak dijelaskan oleh para bloggers. Dalam membuat widget, tidak hanya keren, cantik, menarik, simple, dan terlengkap yang dibutuhkan. Kita memerlukan beberapa faktor penting seperti posisi penempatan widget, fungsi dari widget tersebut, dan script html yang digunakan.

Agar gadget blog yang kita pasang jauh lebih optimal kita dapat memperkecil ruang untuk setiap widget tersebut dengan baik. Bukan hanya dari segi ruang, tetapi juga dari susunan script HTML/Javascript , CSS, JQuery dan lainnya yang kita gunakan.
membuat widget/gadget

Subscribe Widget Blogspot di Btemplate yang sangat elegan, cantik, dan keren tentu akan menarik untuk anda seperti terlihat pada gambar diatas. Bagaimana cara pembuatan dan pemasangannya? Mari ikuti, tutorial membuat widget blogspot berikut ini.

Membuat Gadget/Widget Blogspot Beautifull :
1. Login ke Blogger.com
2. Masuk ke bagian Layout / Design Rancangan
3. Pilih posisi gadget yang ingin anda tempatkan, pilih tambah widget.
4. Kemudian pilih HTML/Javascript.
5. Copy kode di bawah ini, dan masukkan di kotak tersebut. Dan beri Nama Gadget tersebut (kosong tidak apa).
<style type="text/css">
/*<!CDATA[*/
#mediablogger{width:300px;margin:auto;padding:0;}
.mediablogger-googleplus {height: 57px;}
.mediablogger-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.mediablogger-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.mediablogger-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.mediablogger-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.mediablogger-twitter a.twitter-follow-button {display: block;}
.mediablogger-twitter iframe {margin: 9px 11px;}
.mediablogger-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.mediablogger-sociallinks a {text-shadow: 1px 1px white;}
.mediablogger-sociallinks .mediablogger-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.mediablogger-sociallinks .mediablogger-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLgke1TSSxFCNBjLw8PyA-7kLL88qVvrfvR3koQZ5CSkksMqZ_WxlwrA8IUObCG4BVs82IjMgXWp1EtRsI-h9IBSxXxHGvVFJ5lmfQgT0WfGNHUsUB2jO9Z4dH_IZDsrUGW5g5xA1MYLeD/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.mediablogger-sociallinks .mediablogger-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.mediablogger-sociallinks .mediablogger-social li a:hover {text-decoration: underline;}
.mediablogger-sociallinks .mediablogger-social li.technorati {background-position: 0 -180px !important;}
.mediablogger-sociallinks .mediablogger-social li.rss {background-position: 0 -240px !important;}
.mediablogger-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.mediablogger-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.mediablogger-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.mediablogger-emailbox input.emailu:focus {color: #333;}
.mediablogger-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.mediablogger-emailbox input.submitu:hover {text-decoration: none;}
.w2bOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.w2bOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.mediablogger a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="mediablogger">
<div class="mediablogger-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/114260774078734881680" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="mediablogger-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fpemakan.wortell&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="mediablogger-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://impoint.blogspot.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="mediablogger-twitter">
   <a href="https://twitter.com/ravdania" class="twitter-follow-button" data-show-count="true">Follow @ravdania</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="mediablogger-sociallinks">
   <ul class="mediablogger-social">
<li class="technorati"><a href="http://technorati.com/blogs/impoint.blogspot.com">Technorati</a></li>
<li class="rss"><a href="http://impoint.blogspot.com/feeds/posts/default">RSS</a></li>
   </ul>
</div>
<div class="mediablogger-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mediablogger1', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bOrange" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="mediablogger1"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
<div class="mediablogger">
   <a href="http://impoint.blogspot.com/">Get this Gadget</a>
</div>
    </div>
6. Ganti kode yang diberi warna dengan keterangan sebagai berikut :
  • Ganti kode warna merah dengan ID Google Plus anda.
  • Kode warna biru : Ganti dengan ID Facebook anda.
  • Kode warna hijau : Ubah dengan nama akun twitter anda.
  • Kode warna biru tua : Ubah dengan url blog anda.
  • Ganti kode warna orang : dengan ID Feedburner Google anda.
Dengan memaksimalkan tempat, tentu akan menghemat elemen sidebar, footer, header ,body dan lainnya sesuai dengan pengaturan di blog / website anda. Jika anda ingin menambahkan widget lain yang keren dan minimalist dapat membaca artikel berikut :

Cara Membuat Efek Zoom pada Gambar

zoom efek
Seperti yang kita ketahui, Photoshop adalah software untuk mengolah, mengedit, dan desain gambar. Berbagai macam efek seperti Brush, Clone Stamp, Magic Blur, Krop, dan sebagainya, tetapi tidak dengan efek zoom di Blogger. Karena efek zoom lebih kepada gambar yang ditampilkan lalu apabila dilihat akan membesar secara otomatis pada blog.

Zoom berfungsi untuk memperbesar atau memperkecil penglihatan sebuah gambar. Dengan memberi efek zoom di gambar artikel kita, maka akan membuat blog kita lebih terlihat menarik dan juga mengurangi berat loading blog apabila menggunakan gambar yang besar.

Cara pembuatannya cukup mudah dan simple, langsung ke tips cara membuatnya. Artikel Cara Merubah Background Blog dengan Gambar dapat anda baca juga.

Cara Membuat Efek Zoom pada Gambar :

1. Login ke akun blogger.com
2. Template >> Edit Html >> Lanjutkan >> Beri centang "Expand Template Widget".
3. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> untuk caranya dengan menekan ctrl+F

    .post img:hover {
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3); }

4. Klik "Simpan Template" dan lihat salah satu postingan blog anda.

Begitulah cara sederhana untuk menampilkan gambar posting membesar apabila tersentuh mouse di blog. Semoga panduan dan tutorial cara membuat efek zoom pada gambar tersebut dapat bermanfaat.

Cara Membuat Efek Salju, Daun, Bintang Berjatuhan

efek salju bertaburan
Berbagai macam widget dan gadget banyak digunakan untuk menghiasi dinding halaman blog. Efek Salju, Dau, dan Bintang bertaburan lalu berjatuhan adalah yang sering digunakan. Layaknya seperti di musim semi daun berjatuhan dengan indahnya.

Cara Membuat Efek Salju, Daun, dan Bintang berjatuhan sebenarnya mudah. Widget bertebaran ini akan membuat pengunjung menjadi tidak bosan mengunjungi halaman kita. Cara Pembuatan dan cara memasangnya adalah sebagai berikut :

Memasang Efek Salju Bertaburan / Berjatuhan :
1. Login ke Blogger.com
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.

Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1. <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

Anda dapat menggunakan kode pertama atau kedua sesuai keinginan Anda. Untuk mengganti warna lainnya anda dapat mengunjungi halaman Kumpulan Efek Melayang di Blog.
Tunggu 5 detik dan klik skip add di pojok kanan atas untuk melihatnya.

Cara Membuat Tombol Like Facebook, Twitter, Google+ Blogspot
Source : softwaremaniapc

Cara Membuat Like Facebook dan Follow Twitter Melayang

twitter and facebook
Cara Membuat Tweet Box Melayang di sebelah kanan Blog merupakan widget yang banyak dipasang. Media Blogger juga akan memberikan informasi mengenai Cara Membuat Tombol Like Facebook dan Follow Twitter di blogspot.

Social networking memang merupakan kegiatan banyak orang di era teknologi saat ini. Bagaimana tidak? Kecanggihan transaksi secara online, menghubungi kerabat dan saudara, mendapatkan penghasilan di internet dapat dilakukan dengan media social.

Untuk itu apabila anda ingin lebih memajukan blog anda dan agar lebih dikenal, bisa juga dengan menambahkan sebuah kotak yang dapat menghubungkan mereka dengan anda. Bagaimana cara memasang widget tersebut, langsung saja ikuti tips dan tutorialnya.

Cara Membuat Twitter Box Melayang di Blog :
1. Silahkan buat terlebih dahulu tampilan widget tersebut di http://twittercounter.com/
2. Login dengan menggunakan akun Twitter anda.
3. Jika sudah Lalu klik My Widget, Lalu Klik Widget Setting and Code, sesuaikan dengan selera dan tampilan blog kita, jika sudah cocok lalu copy kode script widget yang telah disediakan.
4. Masuk ke Blogger.
5. Pilih Dashboard, lalu klik Layout / Tata Letak.
6. Tambahkan Gadget Baru dengan klik Add a Widget / Add a Gadget.
Sesuaikan dengan posisi letak yang ingin anda pasang.
7. Pilih HTML/Javascript.
8. Ganti kode warna merah pada script berikut ini dengan kode yang tadi diperoleh dari twittercounter.com
<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwzj6EHwBV7qVocjO4vivkvBtHl8w3hmQxtaqGHHcIv8uDKlLZg_qViPBNvdmSvLtQMAU7K7B-ZA5kpoZoCFnYas6R1tqj6MxoeSmmnYxV81uQ4snsK-lwRyzPLCOKS-TUy582s6E_WWd7/');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/AVvXsEimLGrSq-AMyhOcNMy1RiFEBuHHfqJWuS287PzPcbjNSpmcxrj-bQzX1WokAURkyNcsfsFQEFG2cAJ_qhJ2gIaFY-0nBPCpXa9j_KHUU6kwpK74vrEjD8qlRFwcOYqqnay0bVUirFNFx4cJ/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
PASTEKAN KODE SRIPT TwitterCounter
</div>
</div>

9. Setelah anda ganti, copy semua kode yang telah digabungkan dengan twittercounter diatas.
10. Masukkan ke dalam kotak HTML/Javascript di Blogger tadi.
11. Save Widget.

Maka pada halaman anda, telah terpasang box twitter melayang di blog.
Source : abufarhan

Cara Memasang Tombol Like Facebook dengan Follow Twitter Simple :
1. Masuk ke Blogger.com
2. Pilih Blog Anda, lalu ke Layout / Tata Letak
3. Tambah Widget anda.
4. Pilih HTML/Javascript
5. Copy kode CSS dan HTML berikut :
<style type="text/css">
#AGCnavbar3{border:4px solid #000;border-radius:5px; width:155px; height:57px; margin-bottom:460px; margin-left:10px; font-family:Comic Sans Ms; color:white;text-align:left; background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7czPlpfFofg0HqUkXUHVw8_3ESjpuj7pJE8aCwlpvUuCjRpUB7JfE76cKcz9Hlw6aGL7inBk9hw1h-8NpsK5nPvk92HdP7TmWTD38kTL2ifNrnQ3tPQVWo0pkDAqXe00Z7orzxxtzR8k/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7czPlpfFofg0HqUkXUHVw8_3ESjpuj7pJE8aCwlpvUuCjRpUB7JfE76cKcz9Hlw6aGL7inBk9hw1h-8NpsK5nPvk92HdP7TmWTD38kTL2ifNrnQ3tPQVWo0pkDAqXe00Z7orzxxtzR8k/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7czPlpfFofg0HqUkXUHVw8_3ESjpuj7pJE8aCwlpvUuCjRpUB7JfE76cKcz9Hlw6aGL7inBk9hw1h-8NpsK5nPvk92HdP7TmWTD38kTL2ifNrnQ3tPQVWo0pkDAqXe00Z7orzxxtzR8k/s1600/grid.png"); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}
#AGCnavbar3 .left{float:left; text-align:left; font-family:Supermercado; font-size:10px; font-style:normal; font-weight:normal; color:White; padding:2px 10px}
#AGCnavbar3:hover{box-shadow:1px 1px 5px black;font-size:20px; font-style:bold; width:155px; height:57px; margin-bottom:460px; margin-left:10px; margin-right:120px;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}
</style>
<div id='AGCnavbar3' style='position:fixed;'>
<span class='left'><img src='' title=''/>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/http://impoint.blogspot.com&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:85px; height:21px;'/>
<div style='margin-right:3px;margin-left:2px;'>
<a class='twitter-follow-button' data-lang='id' data-show-count='false' href='https://twitter.com/ravdania'>Ikuti @Media Blogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div>
</span></div>

Keterangan :
  • Ganti kode berwarna hijau dengan ID Facebook Anda / URL Fans Page FB kalian.
  • Ganti kode berwarna orange dengan kode tombol twitter anda.
Anda dapat mengganti nama twitter di widget tersebut dengan nama twitter anda (di dalam kode warna orange).
Itulah tadi berbagai macam jenis widget tambahan yang dapat anda gunakan agar memudahkan pengunjung mencari atau melakukan contact dengan anda. Semoga Cara Membuat Tombol Like Facebook dan Twitter Box ini dapat bermanfaat.

Merubah Warna Judul Posting Berwarna warni

warna judul blog
Cara Membuat Judul Berwarna-Warni di Blog - Judul adalah sebuah inti mengenai isi dari berbagai gagasan utama di suatu halaman. Dalam pembuatan artikel di blogspot, Judul merupakan hal yang sangat penting. Judul yang menarik, maka akan banyak dibaca oleh pengunjung.

Untuk membuat judul yang menarik caranya adalah sebagai berikut :
      1. Membuat Judul dengan Kontroversi
      2. Mengubah Warna, Link, atau tampilannya menarik.
      3. Buat Judul yang sedang menjadi topik utama.
      4. Judul harus memiliki sifat mengajak, bertanya, analisa, memberikan informasi dan sebagainya yang berfungsi untuk menarik pembaca.

Namun, pada kesempatan hari ini saya akan membahas Cara Merubah Warna Judul Posting di Blog menjadi Pelangi ( Warna-Warni ).

1. Login ke Blogger

   2. Masuk ke Rancangan → Edit HTML
       3. Cari Kode </head>
   4. Kalau sudah anda temukan, copy script ini dan letakkan (paste) di bawah kode </head>
<script src='http://sites.google.com/site/muzzymusthofa/javascript/rainbow.js'/>

5. Save Template

Dengan menggunakan javascript diatas, maka secara otomatis warna judul blog anda akan berubah. Javascript tersebut sebenarnya berisi CSS dan HTML biasa, namun untuk memudahkan anda jadi di ringkas dan di simpan melalui Javascript di media Dokumen Google. Semoga Dapat bermanfaat :).

Membuat Widget Google Plus Cantik

widget google plus
Google Plus adalah salah satu social media yang hampir sama seperti Facebook,Twitter,Skype dan lainnya. Tetapi, Google+ memiliki kelebihan lain yang berbeda dengan jejaring sosial lainnya yaitu product dari search engine.

Google adalah search engine nomor 1 di dunia sekaligus menempati peringkat 1 di alexa rank. Product Google ini sangat banyak, mulai dari Google Adsense, Google Search, Google Adwords, Google Plus, Gmail, Google Analytics, Webmaster Google dan sebagainya. Dengan memasang widget button Google Plus di website / blog yang kita buat, maka akan memberikan dampak yang positif agar mendapat nilai lebih terhadap hasil pencarian.

Cara Membuat Widget Google Plus Cantik sebenarnya sangat mudah dan hanya mengikuti tools yang disediakan oleh google+.  Salah satu hal penting dalam SEO khususnya Blogger adalah faktor Social Signals.
Social Signals merupakan sebuah lalu lintas pengiriman sinyal ke jejaring social meliputi retweet, like, status, mentions, shares, dan sebagainya yang dihubungkan ke blogger.

Keuntungan dari pemasangan Add Google+ Button ini adalah
  • Membuat artikel lebih terindex mesin pencari Google.
  • Dapat melakukan share ke banyak orang.
  • Memunculkan profile gambar pada hasil pencarian jika aktif dalam menggunakan products Google tersebut.
  • Memudahkan dalam meningkatkan prioritas sebuah konten yang unik.
  • Orang lain dapat menemukan dan terhubung dengan lingkaran anda melalui Blogger.
google plus widget

Cara Membuat Widget Google Plus Button :
1. Registrasi untuk membuat akun Google+
2. Login ke akun anda.
3. Buat sebuah halaman Google Plus, biasanya untuk pertama kali pendaftaran akan diarahkan untuk membuat halaman tersebut.
4. Buka Blog Anda di Browser dengan Tab baru.
5. Masuk ke Layout / Tata Letak / rancangan
6. Klik Tambah Gadget atau Widget dan sesuaikan posisi penempatannya.
7. Pilih HTML / Javascript.
8. Masukkan kode berikut ini :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/114260774078734881680"></g:plus>

9. Ganti kode ID Google Plus dengan ID yang anda miliki.
10. Simpan widget yang anda buat.


Untuk mengetahui ID Google Plus Anda, Silahkan masuk ke Google Plus.
Klik Profile. Lihat di Address Bar bagian paling atas browser anda. Disana terlihat ID seperti script diatas.

Dengan membuat widget google plus, traffik akan segera meningkat dengan baik. Traffik tergantung seberapa besar aktivitas anda di social media tersebut. Semoga Cara Memasang Widget Google Plus Cantik ini dapat bermanfaat.

Cara Membuat Efek Gelap Terang Gambar dengan CSS

css efek
Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.

Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.

Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.
<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

5. Simpan Widget Anda.

Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :
<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.

xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>

xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>

Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :
<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOxLvtq-ORcEsFoxUuWgt7sgQNabHfTdVOx_XTe2tWCjMExO3BRlRA65B4kMrvs3b8djYQC1t5khEe1p30C7A0fWkfA_6QcDNUQqvaks-hqhFo3AGqrO37XCsasRQcQToczfvrYG_zHMU/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>

Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image. Semoga cara membuat dan memasang efek gelap terang tersebut dapat dilakukan dengan mudah.

Cara Membuat Buku Tamu Tersembunyi

guestbook
Guest Book atau yang lebih dikenal adalah Buku Tamu Chat Box adalah tempat untuk pengunjung yang sedang online memberikan daftar hadir di sebuah situs / blog. Komponen dari buku tamu adalah dengan memasukkan nama, email, dan message (pesan) kepada pemilik blog.

Buku Tamu ini sering dimanfaatkan untuk meletakkan url link menuju halaman website kita. Beragam Gadget dan Widget Guest Book tersedia di beberapa website yang menyediakan chat box menu secara gratis. Apabila anda belum memiliki guest book silahkan daftar terlebih dahulu di Shoutmix atau Cbox.

Disana anda hanya perlu melakukan pendaftaran dan melakukan optimisasi warna bukutamu, warna text, background dan sebagainya. Setelah anda melakukan personalisasi, copy kode HTML / Javascript yang diberikan.

Untuk menghemat ruang, guest book ini dapat disembunyikan di bagian scroll kiri kita. Jadi Buku Tamu tersebut tidak melayang di blog, tetapi akan dibuat auto hide dengan tombol click pada mouse. Berikut panduan pembuatan widget buku tamu tersebut.

Cara Membuat Buku Tamu Tersembunyi :
1. Masuk ke Blogger.com
2. Pilih Layout > Tambah Gadget / Widget
3. Klik HTML/Javascript
4. Masukkan kode di bawah ini ke dalam kotak box tersebut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYtGrzUQY37sjQoMgZvUYrU8W7FXLV0Df1pwCwbszx85gZQ9aPMYC8BJDTLla1YYLYjb6AGzDVlg8EcchWM5QVQszJF7T9vgdbps87GluOAhHFhqzd_iF2yJIZuoQW1AXtB69dd2VRrA-/s1600/impoint.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<Letakkan disini kode Buku Tamu Anda>

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://sazuke-4rt.blogspot.com/2013/01/buku-tamu.html" target="_blank">Sasuke Blog</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

5. Ganti tulisan <Letakkan disini kode buku tamu anda> (berwarna merah) dengan kode Guestbook yang anda buat di Shoutmix atau Cbox.ws tadi.
6. Simpan Template.

Buku tamu tersebut sudah terpasang rapih dan lebih optimal di blog anda. Semoga dapat bermanfaat. Jika ada yang masih belum paham silahkan berkomentar. Anda juga dapat mengganti background gambar buku tamu tersebut pada kode berwarna biru diatas. Demikian artikel mengenai Cara Membuat Buku Tamu Tersembunyi.