Cara Membuat Buku Tamu Melayang Di samping Blog

Kompitech - Pada kesempatan yang baik ini saya akan berbagi tutorial tentang Membuat Buku Tamu Melayang Di samping Blog, mungkin anda termasuk pemilik blog yang ingin menambahkan widget buku tamu seperti di blog saya ini. Mungkin kalian ingin menghemat kolom pada blog kalian agar tidak terpenuhi dengan widget - widget atau aksesoris blog, maka kalian bisa membuat widget buku tamu melayang di samping blog. Lansung saja simak langkah - langkah berikut untuk membuat buku tamu melayang :

1. Daftar untuk mendapatkan script Buku Tamu Anda di Cbox

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;

4. Tambahkan script berikut ini :

 <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/AVvXsEj8vKvh_80Cfl6e4-ZE-p3mC7duqTwUGpdHNfBPghU20_BEEeNHFDvWDGdzDGIRruvbCuQl4bnFpSZ_hx1rtPYeW5MULgCnIQzO32yFJyIUqwKbA4Oq4w6U96MRsWXIn5MzKziL2T_sw1vM/') 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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=671114&amp;boxtag=xp5f55&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-671114" style="border:#ababab 1px solid;" id="cboxmain6-671114"></iframe></div>
<div><iframe frameborder="0" width="200" height="90" src="http://www6.cbox.ws/box/?boxid=671114&amp;boxtag=xp5f55&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-671114" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-671114"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align:right">
[Pasang Widget]
|<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. Klik Tombol Save/Simpan.

Keterangan :

* URL yang berwarna merah ganti dengan script cbox yang anda dapatkan dari Cbox

Screen Shot 

 klik gambar untuk memperbesar

 

Smoga Bermanfaat !!

Cara Memasang Widget Sederhana Twitter di Blog

Tentunya Anda sudah tau apa itu twitter dan apa mungkin anda jugalah pengguna twitter untuk saat ini. Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun pada kesempatan ini Saya akan berbagi tutorial bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, jadi widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Langsung saja simak tutorial berikut : 

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/lutvi_sofx">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/lutvi_sofx.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

• Ganti code yang berwarna merah diatas dengan ID Twitter Anda
  
• Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
  
• Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut.

• Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Mudah bukan sobat blogger.

Semoga Bermanfaat !!

Membuat scrollbar pada area postingan blog

Terkadang blog sobat blogger memiliki postingan yang sangat panjang sehingga tidak bisa mengimbangi tinggi sidebar. Hal ini tentu membuat blog menjadi kurang indah untuk dilihat. Dengan script kita dapat menambahkan scrollbar otomatis pada area postingan berdasarkan tinggi sidebar sehingga postingan yang panjang itu bisa dijadikan scrollbar sehingga sidebar tetap kelihatan.

Jika kalian tertarik mencobanya langsung saja berikut cara menempatkan script ini di template blogger kalian :

1. Buka menu edit HTML di blog anda, centang expand widget template

2. Paste script ini tepat diatas </body>:
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
var x = document.getElementById("sidebar-wrapper").offsetHeight-900;
var y = document.getElementById("postingan");
y.setAttribute("style","padding-right: 10px;overflow:auto; width:100%;height:"+x+"px;");
//]]>
</script>
</b:if>

3. Sebelum di save, anda harus sesuaikan dulu parameter-parameter berikut di blog anda:
- sidebar-wrapper = Sesuaikan dengan ID sidebar di blog anda
- 900 = Bisa anda ubah-ubah untuk menyesuaikan tinggi DIV postingan
- postingan = sesuaikan dengan div ID pada <data:post.body/>. jika post body tersebut belum diapit oleh div, maka cari <data:post.body/>, kemudian tambahkan div apit sehingga menjadi
<div id='postingan'>
<data:post.body/>
</div>

Save template anda dan lihat hasilnya. Nah mudah buka cara diatas sobat blogger. 

Semoga Bermanfaat !!

Pasang Widget Translator

Pada kesempatan kali ini saya akan berbagi tips blogger yaitu memasang widget translator atau "Penerjemah". widget ini pada blog banyak sekali gunanya. Translator ini berguna apabila ada pengunjung dari negara lain yang secara sengaja maupun tidak yang melihat blog kita dan tidak tahu bahasa kita maka mereka bisa menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini sudah support untuk bahasa Indonesia. 

Gimana? mau mau mencoba membuat? caranya mudah lho sobat blogger, tinggal lihat saja langkah-langkah di bawah ini 

1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget=".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

5. Kemudian simpan.

Coba sekarang lihat sudah ada translator diblogkamu sobat, kemudian tes apakah translator tersebut bekerja dengan baik atau tidak. Gimana ? Mudah bukan.

Semoga Sukses !!!

Cara Mengganti Favicon atau Icon Address Bar

Coba perhatikan icon yang muncul dekat address bar browser Anda, apakah masih berbentuk icon “B”? Kalau iya, itu adalah icon addres bar bawaan dari blogspot. Icon Address Bar biasanya juga oleh kalangan blogger disebut Favicon.

Jika Anda ingin merubah icon address bar dengan gambar yang anda inginkan, caranya sangat mudah, silahkan ikuti langkah-langkah berikut :

1. Buat gambar dengan ukuran 16x16 pixel atau 32x32 pixel atau sesuai selera anda yang penting tidak terlalu besar atau jika anda ingin download kumpulan icon, silahkan anda download DISINI
2. Setelah anda selesai download icon tersebut, kemudian anda upload icon tersebut, misalnya ke http://photobucket.com atau yang lainnya, namun jangan lupa setelah proses upload selesai, copy paste Link/URL-nya, seperti contohnya punya saya ini :  
   http://i1198.photobucket.com/albums/aa446/jarjit/pc.png
3. Langkah berikutnya Login ke Blogspot Anda, pilih Rancangan/Layout, lalu klik Edit HTML dan jangan lupa beri tanda centang pada kotak Expand Widget Template;
4. Cari kode seperti ini : ]]></b:skin>, lalu letakkan kode di bawah ini berada di bawah kode ]]></b:skin>. Agar mudah saya kasih contohnya saja dech, seperti di bawah ini :
   
   

   ]]></b:skin>
   <link href=' http://i1198.photobucket.com/albums/aa446/jarjit/pc.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

   
   
   Ganti URL yang berwarna Biru dengan URL gambar Anda. 
5. Terakhir Save/Simpan Template. Selesai dan silahkan lihat hasilnya.
   
   
   Semoga Sukses !!!

Cara Pasang Daftar Isi Otomatis Di Blogspot

Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjat pada lable dan judul postingan.

Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup. Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:

1. Login ke Blogger, Klik Layout/Tata Letak;
2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;
4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :
   <div style="overflow: auto; width: 200px; height: 100px; text-align: left;">
   <script src="http://fullmusic1975.fileave.com/daftarisiotomatis.js"><br /></script>
   <script src=" http://kompitech.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"><br /></script>
   </div>
5. Klik Tombol Save/Simpan.
   
   

   Keterangan :
   * Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
   * Width: 200px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
   * Height: 100px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.
   Semoga Sukses !!!

Cara Menyembunyikan Navbar pada Blog

 
Navigation Bar (Navbar) seperti contoh pada gambar di atas adalah widget bawaan dari Template Blogspot, nah jika Anda merasa tampilan blog anda kurang bagus dengan andanya tampilan Navbar pada Blog Anda, jangan khawatir dan bingung karena sudah ada trik untuk menyembunyikannya.

Cara Menyembunyikan Navbar Blog :

Untuk Template Widget , sebagai berikut:

1. Login ke Blogger.
2. Pada Dashboard, klik Layout/Rancangan, lalu klik Edit HTML dan jangan lupa beri tanda centang pada tulisan Expand Widget Templates;
3. Cari kode ]]></b:skin>
4. Sebelum baris kode ]]></b:skin>, tambahkan kode ini: #navbar { display: none; }
   atau: #navbar-iframe { display: none !important; }
5. Klik Save Template, selesai.

Untuk Template Klasik, sebagai berikut:

1. Sama dengan langkah di atas, pada tab Edit HTML cari kode: </style>;
2. Kemudian sebelum kode </style> tambahkan kode ini:#navbar-iframe { display: none; }
3. Selanjutnya cari kode body {;
4. Setelah kode body { tambahkan kode ini: position: relative; top: -32px;
5. Klik Save Template, selesai.

Untuk menampilkan dan menunjukkan kembali Navbar, cukup menghapus kode yang berwarna biru tersebut.

Selamat Mencoba !!!