Cara Membuat Like Box Facebook Melayang

Gak pake lama dan basa-basi, pada kesempatan kali ini saya akan buat tutorial cara membuat like box melayang pada Blog sobat. Tutorial ini khusus untuk Blogspot aka Blogger.com yah, so kalo blog kalian menggunakan wordpress tunggu aja tutorial dari saya ya 

Langsung aja berikut cara bikin kotak like facebook melayang :

1. Login ke halaman dashboard blogger kamu.

2. Setelah berada dalam halaman dashboard kamu, silahkan pilih salah satu blog yang ingin kamu sisipkan kotak like facebook melayangnya :

3. Setelah mengikuti langkah 2, selanjutnya klik “Tata Letak” yang berada pada sisi kiri.

4. Setelah melakukan langkan no.3 , kamu akan melihat layout blog kamu seperti contoh blog saya ini :

5. Klik “Tambah Gadget” maka akan keluar Pop-up window, lalu klik “HTML/Javascript” seperti yang ditunjukan tanda panah di bawah :

Lalu akan tampil window berikut :

Selanjutnya copy paste kode berikut ke dalam kotak 

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/urlpagekamudisini?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

5.  Ganti tulisan https://www.facebook.com/urlpagekamudisini dengan URL Facebook Fanpage kamu.

6. Klik “Simpan”

Sampai sini tutorial cara membuat kotak like facebook melayang telah selesai. Semoga kamu sukses ya dengan tutorial saya. Jika ada yang tidak dimengerti dapat komentar di bawah. Semoga tutorial kategori Blogspot ini bermanfaat.

Read More

Traffic Counter

 Assalamualaikum.Wr.Wb

 

  Penghitung visitor/ traffic counter

Perlu gak sih? Kalau menurutku sangat perlu..supaya kita tahu seberapa banyak yang sudah mengunjungi web kit.sebagus apapun blog/web kalau tida ada visitor kan percuma..
Nah supaya kita tahu berapa jumlah pengunjung...ada beberapa penyedia counter, alexa, histat..
Boleh yang mana aja..tapi disini aku kasih yg histat aja ya..

1. Log ini ke http://Histats.com/
2. Klik Register
3. Isi semua form =>idi email,password(bikin sndiri utk log in), time pilih asia/jakarta, centang agree terms..tulis kode verifikasi..klik register
nanti log in lagi ya...

 

kemudian  masuk control panel di histats temen2..

- klik add website..akan tampil form seperti berikut..ikuti isiannya

stats visibility boleh pilih vissible to everyone atau hanya kita yg bisa lihat
- masukan kode verifikasi
- continue

 

 

Kembali ke control panel akan ada nama blog kita..klik ya ...
selanjutnya muncul halaman data..

•   langsung klik counter code( disebelah kanan atas)
•   add new counter
•   pilih model counter sesuai selera , sudah ada kategorynya..animasi, 1 lines, 2 lines dst..klik aja utk tahu model dan perbedaannya.
•   klik model yang dimau
•   Pilih informasi yang mau didisply di blog - kalau hanya 1 lines baiknya pilih total visitor -  centang
•   klik save
•   muncul sperti dibawah..
•   klik counter id yg tadi sudah disave..dibox kanan akan muncul contoh histats kita..
•   setelah diklik..muncul kode dibawahnya
•   copas di gadget html ..save
  
  

 

Selesai deh. Monggo langsung di praktekin yah 

Rinni Mamelas

Read More

PASANG YM

Assalamualaikum.Wr.Wb

Sekarang Saat nya pasang YM ( Yahoo Massangger ), fasilitas yang memudahkan kita juga, seandai nya ada yang berkunjung ke blog kita dan mereka tertarik dengan banner yang di pasang dan bisnis  yang kita jalanin, mereka langsung ngajak kita chat dan akhir nya gabung deh.. hehehe :D.

silahkan ikuti petunjuk di bawah ini :

1. Masuk yuk ke rancangan - tambah gadget - pilih yang HTML/Java script
2. copas kode ini ya di box:

<a href="ymsgr:sendIM?id-yahoo-anda"> <img src="http://opi.yahoo.com/online?u=ID-YAHOO-ANDA&amp;3Bm=g&amp;3Bt=0&amp;3Bl=us"/>
</a>

PENTING:
Ganti id-yahoo-anda dengan id yahoo temen2 ya dan ganti angka 0 dengan kode smile yang di inginkan

 

Met mencoba yah, kalo masih bingung..tinggalin komen aj yah..ok

Met BLOGING

Wassalamualaikum.Wr.Wb
Rinni Mamelas

Read More

PASANG SHOUTMIX di BLOG

Assalamualaikum. Wr. Wb.

Setelah selesai dengan materi BLOG sesion pertama, dari cara bagaimana buat blog dari awal sekali, mulai dari tamplate,  posting dan  pasang banner,   temen2 juga bisa pasang asesoris yang lain nya untuk menghiasi blog masing2.

Dan tuk yang pertama kita bisa pasang "  CHAT BOX  "yaitu fasilitas tuk kita bisa ngobrol dengan pengunjung yang mampir ke blog kita . Salah satu penyedia Chat Box gratis adalah SHOUT MIX.

 jadi bisa chating dgn pengunjung blog:)
Salah satu penyedia gratis adalah Shoutmix
1. browse http://www.shoutmix.com/
2. klik CREATE SHOUTBOX
3. Ada form yang harus teman2 isi untuk mendaftar: pilih username, password dan masukan nama serta alamat email kita
4.Klik lanjutkan..maka akan muncul seperti gambar dibawah
isikan password yang tadi sudah di tulis.

pilih display shoutmix:

supaya box chat gak standart..temen2 bisa mulai otak atik tampilan.
coba perhatikan kotak 2 yang berjajar horizontal..pilih kotak display, isinya ada beberapa ya:
- style and colour
pilih warna sesuai yang teman2 mau.bisa diotak atik /dipadu padan:)
untuk merubah warna..klik kotak kecil ditiap bagian..lalu pilih warna
sebelum save..temen2 bisa klik preview untukk melihat hasil rancangan warna dan style tadi..kalau sudah cocok, klik save seting

klik back to seting

 

 

.Date and Time  C

sekarang pilih date and time..
- pilih Asia/jakarta
-tampilan jam: sesuai selera ya..silahkan dipilih->save

 Ambil kode chat box

Balik lagi ke setting..muncul tabel seperti awal.( liat gambar)
- klik pada box yang dikasih tanda panah..klik kanan-select all-copy

e . Pasang Shoutbox di blog

Nah sekarang cara pasangnya..
- masuk lagi ke dassbor blogspot-rancangan-tambah gadget
- pilih yang html/java script
- Paste kode yang sudah kita copy tadi di bagian yang ada tanda panah -paste disini
- bagian judul boleh dikosongi..boleh diisi
- save
coba lihat blog temen2 sekarang

 

dan kalo misal nya neh temen2 mau pasang shoutmix nya lebih uniQ lagi, alias shoutmix kalian tersembunyi dan ngga memakan space yang banyak karna pas di klik dia akan masuk ke dalam di copas yah kode 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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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">

<!-- Ganti ini dengan kode shoutmix kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

trus dari kode diatas <!-- Ganti ini dengan kode shoutmix kamu -->. proses penempatan nya sama seperti di atas.

ok... :D .. selamat BLOGING

kalo masing bingung, bisa tinggal kan coment yah.

sukses selalu

Wassalamualaikum.Wr.Wb
Br.
Rinni Mamelas

Read More