Tutorial Sembunyikan FB Fan Page di Blog

Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda.




Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

cth: 


Nota: Jika anda dapati kod di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.

iv. Selepas selesai klik Save Template





Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>

Nota: Gantikan "URL PAGE ANDA"

contoh url page:


iii. Save dan lihat hasilnya.:

sumber

Baca selengkapnya »

Apa itu Margin dan Padding ?

berikut ini saya akan memberikan anda apa yang dimaksud margin dan pading dalam CSS dan HTML.. tutorial berikut sangat bermanfaat untuk anda  yang ingin mengedit template blog atau bukan oke langsung saja.

Persoalan klasik namun masih banyak yang mendapat problem disesi ini.

apa itu makhluk yang bernama margin dan padding itu?

margin adalah menentukan jarak komponen dari bagian paling luar, sedangkan padding adalah sebaliknya yaitu yang bagian dalam.

tarulah sekarang kita mengedit layout blogspot. (bagian content atau potingan dan sitebar).

yang saya tandai dengan garis merah tersebut adalah merupakan bagian luar dari komponen ini. tarulah saya tentukan ukuran lebarnya 760px saya beri nama bagian_content_luar. Nah pada bagian dalam komponen ini akan ada 2 komponen lagi yang tercipta. oleh karena itu perlu ditentukan berapa jaraknya dari bagian komponen (bagian_content_luar) ke bagian postingan dan header.

Ketika anda menggunakan code padding…. maka secara otomatis sisa ruang untuk dua komponen bagian dalam ini akan berkurang. tarulah anda memberi nilai padding: 10px; maka ukuran yang tersisa tinggal 740px; sebab akan terhitung dari komponen bagian_content_luar untuk sisa bagian dalam. lain halnya bila menggunakan code Margin, bila menggunakan perintah margin maka komponen bagian_content_luar ini akan bergeser (yang kiri bergeser ke kanan sebanyak 10px, dan kanan tidak bergeser namun akan memberi jarak kosong pada sebelah kanan sebanyak 10px; begitu pula pada bagaian atas dan bawah.

Sebaiknya…. bila anda memilih dalam menggunakan margin..!!! tentukan bagian per bagian, atau dengan kata lain atasnya berapa, kanan berapa, bawah… dll, dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya –> Atas, kanan, bawah, kiri

2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.

Ok saya akhir dulu postingan ini… sengaja saya posting pendek2 sebab bila postingan panjang sekali, saya khawatir… anda akan ngeri melihatnya maksud saya…!!! jangan sampai anda belum baca sudah takut… karena panjang sekali :D

Sumber

Baca selengkapnya »

Cara membuat chatbox atau buku tamu di layanan cbox

Buku tamu atau chatbox sangat penting menurut saya peranannya dalam kehidupan blogging. Salah satu fungsinya adalah sebagai fasilitas interaksi antara pemilik dan pengunjung anda.
Dari sini kita bisa tahu keluh kesah mereka, kritik mereka serta saran dari mereka yang sifatnya untuk kemajuan blog itu sendiri.

Oke, cara membuat chatbox atau buku tamu disini kita menggunakan layanan cbox.

1. kunjungi cbox.ws lalu Signup atau klik disini saja.

2. selanjutnya anda dihadapkan pada formulir berikut:



Isi data-data dengan benar seperti gambar, klik "create my Cbox!"

3. selanjutnya lihat dimenu atas klik menu "publish" copy kodenya lalu pastekan di widget blog anda.







4. selesai, save widget coba lihat hasilnya.

mengapa harus cbox? cbox sedikit sederhana dibanding widget lain.  

Baca selengkapnya »

CARA AGAR POSTINGAN BLOG TERINDEX GOOGLE

"MELIHAT POSTINGAN LANGSUNG KE GOOGLE"

Berjalan-jalan ke web dan blog sobat-sobat blogger, akhirnya menemukan suatu info yang sangat menarik. Merupakan teknik yang sederhana untuk melihat sejauh mana postingan kita bisa langsung terindex oleh MBAH GOOGLE. Karena ini merupakan hal menarik, maka tidak ada salahnya untuk bisa dijadikan suatu referensi yang menrik juga.

Tapi sebelum menuju ke cara nya, kita harus punya syarat yang dibutuhkan. Apa itu? Syaratnya cuma satu, blog kita harus dipasang widget google search tool atau fasilitas kotak pencarian google. Untuk tampilannya silahkan lihat sidebar di sebelah kanan bawah blog ini.

Untuk membuat google search tool silahkan copas script HTML di bawah ini ke dalam widget HTML/Javascript blog. Tentu saja sebelumnya harus login dulu ke akun blog kamu.

Code script HTML google search tool

<script language="JavaScript"type="text/javascript"> function search_google(){ window.open("http://www.google.com/search?q="+document.search.query.value); } function search_images(){ window.open("http://www.google.com/images?q="+document.search.query.value); } </script><br /> <br /> <form name="search"><input name="query" value="" type="text"/><br /> <input value="Search" onclick="search_google()" type="submit"/><br /> <input value="image" onclick="search_images()" type="submit"/><br /> </form>

Setelah terpasang code diatas di widget blog, jangan lupa disimpan. Nah, sekarang melanjutkan ke langkah bagaimana cara agar postingan blog terbaru cepat terindex google. Cekidot :

1. Setelah selesai mengupdate postingan terbaru, lihat tampilan blog pastikan fasilitas google search tool sudah terpasang di blog.

2. Copy-paste alamat url atau judul postingan terbaru tadi di kotak search google, klik search.

3. Jika page google sudah menampilkan hasil pencarian postingan terbaru, klik hasil pencarian agar mengarah ke postingan terbaru blog kita. Otomatis postingan terbaru tadi sudah terindex google.

Mudahkan caranya, caranya memang agak berantakan tapi semoga mudah dimengerti dan bermanfaat. Keep Blogging.

sumber

Baca selengkapnya »

Cara Pasang Iklan Di Area Postingan

Menampilkan iklan di sekitar area posting 

Oke sekarang kita langsung saja ke cara instalasinya,

kita akan merubah kode iklan itu supaya bisa di masukan kedalam HTML body

Caranya copy dan paste code HTML iklan yang akan kita tampilkan di dalam posting ke area Encode / Decode HTML Entities Silahkan Klik Disini.  sebelumya hapus dulu code yang ada di area Encode / Decode HTML Entities, lalu paste code HTML iklan anda, setelah itu klik Encode, tunggu beberapa saat sampai proses Encode selesai, setelah selesai copy kembali kode HTML.

1. loggin ke blogger
2. Rancangan

3. Edit HTML

4. Download template lengkap biar aman

5. Centang Expand Widget

Tekan tombol Ctrl+F masukan kode ini <data:post.body/>,setelah ketemu simpan kode iklan yang telah di enkode di atas atau di bawahnya jika menemukan 2 code yg sama, pilih yg ke 2, setelah itu klik simpan template.Gampang kan 

Baca selengkapnya »

Pasang Widget Update Twitter di Blog

Widgets ini memungkinkan Anda menampilkan update Twitter di situs Web atau halaman jaringan sosial 

Jika kita memiliki account twitter, dan tiap hari selalu nge-update twitter. Kalian bisa lho meletakkan profile account twitter di blog kalian.

1. Buka Widget Twitter disamping ini.
2. Kemudian akan keluar tampilan dibawah ini, Pilih My Website

3. Kemudian Pilih Profile Widget

4. Masukkan Username Account Twitter Kalian, Pilih Test Setting, Tapi ingat, Account Twitter yang diprivasi tidak bisa digunakan untuk dijadikan Widget Twitter.

5. Pilih Test Testing terlebih dahulu, Jika sudah muncul Account Twitter kalian di Samping sebelah kanan, kemudian baru pilih Finish & Grab Code

6. Copy kode terebut dan letakkan di Blog kalian.


Bagaimana cara meletakkannya di blog kalian??


1. Login terlebih dahulu di Blog kalian
2. Pilih Rancangan - Edit laman
3. Pilih Tambah gadget - HTML/JavaScript
4. Masukkan Kode tersebut
5. Pilih Simpan
6. Liat Hasilnya

Baca selengkapnya »

CARA PASANG SMS GRATIS DIBLOG KAMU

Pada postingan kali ini, saya ingin membagi tentang cara memasang widget SMS GRATIS di blog kamu, tak dapat dipungkiri, kadang kita perlu SMS seseorang, tapi kebetulan pulsa di HP kita habis, solusinya pake SMS Gratis di Internet, dan ini alat atau widget SMS gratis bisa di pasang di blog kamu. Yang sponsori widget SMS Gratis ini adalah sms-online.web.id, mereka meberikan layanan sms secara gratis kepada kita sepuasnya, jadi kita bisa mengirim sms ke nomor tujuan dengan tanpa mengeluarkan biaya.

cara sms gratisnya pun cukup mudah kita tinggal memasukkan nomor dan menulis pesan text kemudian tinggal di kirim, ini gambar widget tersebut:

Cara Buat Widget Ini

Dengan menggunakan tool di atas, maka kamu bisa mengirim sms dengan gratis tanpa di pungut biaya alias gratis, lumayan untuk sekedar sms-an sama kawan-kawan atau yayang kamu.

Makanya  segera pasang Widget SMS Gratis tersebut di blog Kamu, di bawah iniadalah cara memasang widget sms gratis di blogspot :

* Silakan login ke blogger

* Pilih tata letak

* Tambah widget baru

* Setelah itu  pilih

* Edit HTML/Javascript

* Copy dan paste-kan kode dibawahini:

<div style="margin: 5px 20px 20px;"><input value="OPEN" style="margin: 0px; padding: 0px; width: 60px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tutup&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;SMS GRATIS&#39;; }" type="button" /> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;"><iframe name="I2" src=http://sms-online.web.id/widget width="250" height="250"> not support </iframe></br><center><a href="http://bit.ly/eY1q7o" target="_blank">FreeSMS</a></div></div></center>

*kemudian  langkah terakhir tinggal save dan selesai.

Sekarang kamu sudah bisa SMS-an gratis sepuasnya.
* Ingat jangan Rubah Kode diatas, karena akan berakibat tidak berfungsinya Widget SMS Gratis di Blog Anda.
*Silahkan Posting di Blog Anda Artikel ini, asalkan menyertakan Sumber. ^_^

http://aalmarusy.blogspot.com/

Baca selengkapnya »

Ganti Favicon Blog Dengan Mudah

Baru saja ganti favicon, biar aga beda tampilannya. Nah biar saya sendiri ga lupa caranya dan biar bisa berbagi dengan yang lain, saya postingkan caranya disini. langsung saja ya.

Saya merubah favicon melalui http://iconj.com karena sangat mudah, caranya :

masuk ke http://iconj.com lalu sign up

setelah sukses sign up ( telah konfirmasi email ) langsung saja upload / generate favicon yang dipunya.

Ambil kode favicon ( My Favicon code )

Lalu login ke blogger.com ==> buka design edit HTML ==> centang Expand Widget Templates

Letakan kode favicon tadi tepat tepat di atas </head>
Preview dahulu, jika sukses langsung save template dan lihat hasilnya.

Baca selengkapnya »

Trik Mendapat ribuan backlink gratis

pada dasarnya adalah  trik ini menuntut kejujuran namun bila tak jujur mengedit atau memostingkannnya pun percuma saja mungkin menurutku...
Caranya sangatlah gampang, teman-teman hanya tinggal copy link yang ad di bawah ini dengan syarat anda harus menghapus link pada peringkat 1 dari daftar, lalu pindahkan yang tadinya nomor 2 menjadi nomor 1, nomor 3 menjadi nomor 2 dst.
Kemudian masukan link anda sendiri pada urutan paling bawah ( nomor 10) 
 1.   Jakabanda
 2.   Situs Murah
 3.   TopSiteIndo-belajar blog
 4.   Sandi Go Blog
 5.   Ilmu Komputer
 6.   Tutorial Ngeblog
 7.   Trik-Gue
 8.   Pabrik Info
 9.   MiFtah BloGs
10. Just For Fun

Keterangan : Jika anda mampu mengajak lima orang saja untuk mengcopy artikel ini maka jumlah backlink yang akan didapat adalah :

®Posisi 10, jumlah backlink = 1
®Posisi 9, jumlah backlink = 5
®Posisi 8, jumlah backlink = 25
®Posisi 7, jumlah backlink = 125
®Posisi 6, jumlah backlink = 625
®Posisi 5, jumlah backlink = 3,125
®Posisi 4, jumlah backlink =15,625
®Posisi 3, jumlah backlink = 78,125
®Posisi 2, jumlah backlink = 390,625
®Posisi 1, jumlah backlink = 1,953,125

Dan nama dari alamat blog dapat dimasukan kata kunci yang anda inginkan yang juga dapat menarik perhatian untuk segera diklik. Dari sisi SEO anda sudah mendapatkan 1,953,125 dan efek sampingnya jika pengunjung downline mengklik link anda maka anda juga mendapat traffic tambahan.

Nah silakan copy artikel ini dan hilangkan link nomor 1 dan masukan alamat blog atau web anda pada nomor 10 agar hasilnya maksimal. Mari kita coba bersama trick baru ini, semoga hasilnya dapat memuaskan.

untuk memaksimalkan trik ini usaha kan mengajak teman-temanmu untuk mengkopy dan mengedit postingn ini
INGAT: postingan ini bersifat permanen atau jangan sekali-kali menghapus postingan ini dari blog mu atau kamu akan menyesal setelah lama berusaha dan hasilnya hilang deh..! ok ,jadi tetaplah berusaha dan jangan pernah menyerah untuk mendapatkan sesuatu yang berharga......!

Baca selengkapnya »

Cara Membuat Spoiler Pada Blog

Teman-teman mungkin masih ada yang belum tahu apa itu Spoiler.... dibawah ini ada contohnya...

Judul Spoiler

-----isi spoiler-----

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul Spoiler</span></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

-----isi spoiler-----

</div>
</div>
</div>
</div>

selamat mencoba.... ^_^

Baca selengkapnya »

Cara Membuat Widget Posting Terbaru dengan Gambar

Ok langsung aja ya....
Langkah" Cara Membuat Widget Posting Terbaru dengan Gambar

1. login blog
2. rancangan -> edit HTML -> tambah gadget (HTML/JavaScript)
3. Copas Script dibawah ini

<script type="text/javaScript">
imgr = new Array();
imgr[0] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[1] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[2] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[3] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
imgr[4] = "http://photoserver.ws/images/xkRt4c7bf67561042.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5 ;
home_page = "http://aurelialiling.blogspot.com/";

</script>
<script src="http://rhoedalismev2.googlecode.com/files/removeHtmlT.js" type="text/javascript"></script>

NB :
numposts = 5 adalah jumlah posting yang akan ditampilkan. 
Dan jangan lupa ganti tulisan yang berwarna biru dengan alamat blog sobat.
4. simpan.... Dan coba lihat hasilnya......

Selamat mencoba  ^_^

Baca selengkapnya »

Cara Membuat Kotak Blogroll

Ok deh langsung saja  Cara Membuat Kotak Blogroll :

1. login blog
2. rancangan -> Elemen halaman -> tambah gadget (HTML/JavaScript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;width: 200px;
height: 200px;
text-align: center; ">

ISI BLOGROLL

</div>

maka hasilnya akan seperti ini.... 

ISI BLOGROLL

NB :
# Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, sobat bisa merubahnya dan menyesuaikanya dengan ukuran yg sobat suka.
# Ganti tulisan "ISI BLOGROLL" dengan tulisan sobat atau juga bisa kasih link juga.


Selamat Mencoba  ^_^

Baca selengkapnya »

Cara Membuat Link dengan Efek Pelangi

Teman-teman yang suka memperindah dan mempercantik blognya, bisa mencoba tips ini.



Cara Membuat Link dengan Efek Pelangi langkah-langkahnya :
1. Login Blog
2. Rancangan >> Edit HTML
3. Cari kode <title><data:blog.pageTitle/></title>
4. Lalu taruh kode dibawah ini dibawah kode <title><data:blog.pageTitle/></title>

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/rainbowlink.js'/>

5. simpan dan lihat hasilnya....

Good Luck...


sumber

Baca selengkapnya »

Cara Memberi Scroll pada Label

Untuk teman2 yang berminat memberi scroll pada labelnya...
Ok langsung aja...

1. login blog
2. Rancangan >> edit HTML >> centang 'Expand Template Widget'
3. Cari kode dibawah ini ( NB: Harus ada widget labelnya terlebih dahulu )
4. Tekan Ctrl + F untuk memudahkan mencari
5. Cari kode seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:300px;'>

 <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div> </div>

kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya. Angka 300px adalah tinggi kotak scroll. bisa sobat ganti sesuai selera sobat...
Gak ada kode yang seperti <div class='widget-content'> ????? 
Tenang gak usah khawatir, mungkin pada template sobat yang ada hanya kode

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

yah kalau adanya kode di atas ini maka taruh <div style='overflow:auto; width:ancho; height:300px;'>dibawah kode yang berwarna hijau 

Baca selengkapnya »