Cara Membuat Widget Melayang

Cara Membuat widget melayang itu sebenarnya mudah, tapi saya sendiri membuatnya dengan mengulang beberapa kali. Tapi mungkin anda bisa membuatnya hanya denga satu kali. Itu mungkin jika anda melihat semua step di bawah ini (harus semua):

1. Masuk ke Blogger
2. Masuk ke tata letak
3. Tambah Gadget
4. HTML/JAVASCRIPT
5. Masukan Kodenya di bawah ini :
   

 
#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i895.photobucket.com/albums/ac151/simbahbrukno/th_Gb.jpg') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:transparent;

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(30-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 1 ? 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://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=557612&amp;boxtag=63175r&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

NB: warna merah kamu ganti dengan url gambar chat box kamu
       warna hijau kamu ganti dengan kode warna kesukaanmu (untuk border)
      warna biru kamu ganti dengan warna kesukaan kamu (untuk background chat box)
      warna ungu kamu ganti dengan kode chatbox kamu
6. Jangan kamu klik rich text , karena jika di klik akan gagal
7. Langsung klik simpan dan lihat hasilnya

 sumber

Read more »

Pasang Tombol "Like" Facebook pada setiap Artikel Blog

Facebook, situs layanan jejaring sosial paling ngetop, baru-baru ini merilis fitur baru yaitu Faebook Like. Kalau sebelumnya tobol “Like” hanya terlihat pada situs Facebook saja (misalnya di bawah status update seorang pengguna Facebook), dengan fitur ini seorang pengguna Facebook bisa menunjukkan rasa suka/like langsung di situs di luar Facebook. Tapi tentunya hanya pada situs/blog yang memasang tombol ini.

Nah, bila anda ingin juga memasang tombol “Like” di artikel blog, berikut ini cara pemasangannya.

Sebenarnya, di situs Facebook sudah tersedia tool untuk mendapatkan kode yang bisa dipasang di website/blog (silahkan lihat di sini). Tapi sayangnya, pada pilihan URL to Like di tool itu, kita hanya bisa menentukan URL statis, tidak bisa membaca secara otomatis URL setiap artikel/halaman blog (URL dinamis). Untuk itu perlu sedikit modifikasi dari kode yang bisa di dapat di Facebook itu.

Silahkan pilih kode yang sesuai dengan platform blog yang dipakai.

*

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

*

2. Pasang di template WordPress.ORG (self hosted)

Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:25px;"></iframe>

*

3. Pasang di Sidebar/Widget/Webpage (javascript)

<script type="text/javascript">
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + escape(location.href) + '&amp;action=like&amp;layout=standard&amp;show_faces=true&amp;width=100%&amp;font=arial&amp;colorscheme=light" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>');
</script>

*

Catatan:

• Kita bisa memilih setting tampilan tulisan pada tombol, yaitu “Like” (Suka) atau “Recommend” (Rekomendasikan). Silahkan ganti kode like pada bagian action=like menjadi action=recommend pada pilihan kode di atas (kode berwarna biru).
• Kalau mau silahkan ganti-ganti setting pada kode yang berwarna hijau, utuk pilihannya silahkan lihat di situs Facebook.

Kalo suka artikel ini, boleh juga direkomendasikan atau di-”like”

 sumber

Read more »

Menampilkan Widget pada Halaman Tertentu

Saya sudah pernah posting tentang Menampilkan Widget Hanya di Halaman Selanjutnya atau tentang Menampilkan Widget Hanya di Halaman Depan . Tapi kali ini saya akan posting lagi dengan beberapa tambahan tentang menampilkan widget hanya di halaman tertentu/di halaman yang anda inginkan saja. Oke langsung saja Step.By.Step :

1. Login ke blog anda tentunya

2. Masuk Design > Edit HTML > beri centang pada Expand Template Widget

3. Cari judul widget yang kalian ingin sembunyikan dan tambahkan kode berwarna merah berikut

<b:widget id='HTML3' locked='false' title='The New Posting' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

4. Kode merah yang bercetak tebal bisa di ganti dengan kode di bawah ini :
Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Menampilkan Widget selain di Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Menampilkan Widget hanya di Archivepages
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

Menampilkan Widget selain di Archivepages
<b:if cond='data:blog.pageType != &quot;archive&quot;'>

Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Menampilkan widget selain di Itempages
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Menampilkan widget selain di staticpages
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

Menampilkan widget pada Postingan Tertentu
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

Catatan : ganti alamat postingan dengan url postingan kamu

5. Save templates.
Semoga bisa bermanfaat dan jika ada yang kurang jelas silahkan tinggalakn comment terima kasih

Read more »

Cara Membuat Cbox pada Blog

Kali ini saya akan membahas tentang cara membuat Cbox. Apa itu Cbox ? selalu deh kalo w posting nanya mulu. Ya udah Cbox itu ibarat seperti buku tamu, sebagai contoh lihat di sebelah kiri blog saya yang berjudul Chat BOX. Nah itu dia (tolong sekalian di isi ya...hehe). Ok lanjut, untuk membuat yang sepeti itu, cukup mudah ko. Ikuti Langkah-langkah di bawah ini :

1. Pertama anda masuk dulu ke http://cbox.ws/
2. lalu daftar dengan cara klik sign up, ikuti langkah pendaftrannya.
3. Sudah daftarnya ? Jika sudah silahkan Login ke Cbox anda, lalu klik Publish! Copy semua kode yang ada di step 1.
4. sekarang Login ke blog anda, klik Layout/Tata Letak -> Page Elements/Elemen Laman -> Add a Gadget/Tambah Gadget -> HTML/JavaScript.
5. Beri judul sesuai keinginan anda dan paste kode yang tadi anda copy di kotak konten. Simpan
6. Selesai, Sekarang lihat blog anda, bagaimana ? masih kosong ? tunggu ada ngisi dong sabar aja

Ok... saya rasa cukup untuk saat ini.
Jika ada yang kurang di mengerti silahkan Commentnya. 

sumber

Read more »

Cara Menu Navigasi Melayang

Setelah banyak mencari Menu Navigasi yang unik ,akhirnya saya menemukan Menu yang cantik dan simple .Biasanya Navigasi itu berupa header saja ,tapi kali ini kita menggunakan animasi dan tidak perlu bermain HTML karena hanya perlu tambah gadget saja. Untuk lebih mudah perhatikan contoh di bawah ini ....



Ini adalah gabungan dari 2 gadget yang saya pelajari dan modifikasi sendiri. Untuk membuatnya ikuti langkah-langkah di bawah ini :

1. Silahkan kunjungi http://www.flashvortex.com/menus.php
2. Silahkan pilih menu yang anda inginkan dengan cara klik "CLICK HERE TO EDIT THIS" pada menu yang anda inginkan.
3. Ikuti langkah-langkah pembuatan menu, bagi yang tidak mengerti akan saya jelaskan.

• Step 1 tidak begitu penting, lewati saja
• Step 2 kolom pertama, isi dengan judul menu anda (setiap judul pisahkan menggunakan ENTER)
• Masih pada Step 2, di kolom yang kedua isi dengan alamat link judul menu (setiap link pisahkan menggunakan ENTER, urutan di sesuaikan dengan judulnya)
• Lewati Step 3 & 4
• Klik Generate Animation
• Copy code yang ada di kolom "Copy / paste this code into your site"

4. Login ke blog anda > Layout (tata letak) > Page Elements (Laman Elemen) > Add a Gadget (Tambah Gadget) > HTML/JavaScript
5. letakan code berikut di kotak konten (ganti yang berwarna merah dengan code menu anda)

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-16.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<script src="http://h1.flashvortex.com/display.php?id=3_1259075124_65300_151_0_131_137_6_34" type="text/javascript"></script>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

6. Save dan lihat hasilnya

Terima kasih ,dan jangan lupa tinggalkan komentar .

Read more »