100 Tips and Trik Blogger

100 TIPS
AND TRIK
BLOGGER
http://cahndableck.blogspot.com | Confidential
al_fathz Production
http://cahndableck.blogspot.com
Membuat ROMING BLOGGER
mungkin kamu sudah atau kepengen membuat roaming di blog.
pertama kali temen kamu masuk ke blogger kamu ,,

dikirain nya error mozilla/ Ienternetnya/Operanya ... mayan kan bikin kaget temen kamu....
script ROMING ini memang kurang disukai bagi paga tamu yang mampir diblog kita,
sebagai ilmu tambahan dan pengalaman boleh kita coba , agar blog kita agak keren..
untuk melihat contoh nya http://roming-blog.blogspot.com
oke .. kita ke pokok permasalahan nya :
1. Sign in di blogger.
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template yang ada, lalu save untuk backup data
5. Cari kode yang ada di bawah ini : <head>
6.Kemudian copy kode yang ada di bawah ini :
<script type='text/javascript'>
//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>
</script>
7. Setelah itu paste kode tadi tepat di atas kode/dibawah <head>

8. Klik tombol Simpan Perubahan Template
9. Selesai. Silahkan lihat hasilnya.
Membuat Bubble Effect di BLOG
Membuat Bubble Effect di blog,
setelah kemarin saya memberikan tutor efek salju dan bintang berikut tutor membuat Membuat
Bubble Effect di blog..
berikut script JS bagi yang paham bisa diubah sendiri dan bagian yang lom paham bisa
menempatkan sctersebut
JS bintang script nya (copas Url nya) http://h1.ripway.com/ewin_coga/Bubble Effect.js
Clik Script JS itu..
dan perhatiin
http://img2.pimp-my-profile.com/i31/3/12/6/f_d09d084db060.gif
Login ke blogger.com hingga masuk halaman Panel Kontrol

Klik Tata Letak (layout)
Klik HTML
cari kata <Head>
Kemudian copy paste atau ketik script berikut ini.
<script language="JavaScript"
src=" http://h1.ripway.com/ewin_coga/Bubble Effect.js ">
</script>
Simpan Perubahan
Selesai
Membuat Menu CSS Ala Macintosh
Membuat menu seperti gambar diatas / ala macintonsh.

telah di jelaskan dari ahli blogger seperti www.o-om.com yang menjelaskan tutor nya , dan
langsung menuju pembuat nya Ndesign-studio.com.
naaaaaaaaaaaaah disini saya memberikan script JS yang sudah jadi , tinggal bagaimana kamu
mengedit gambar nya ?
script nya :
<script src=' http://h1.ripway.com/ewin_coga/jquery.js' type='text/javascript'/>

<script src=' http://h1.ripway.com/ewin_coga/interface.js ' type='text/javascript'/>
<link href=' http://h1.ripway.com/ewin_coga/style.css' rel='stylesheet' type='text/css'/>
Cara meletakkan script nya

1. Login ke blogger
2. Tata Letak
3. Edit Html
4. cari kata <HEAD>
5. Masih di Edit HTML. masukkan script di bawah ini di atas
</body>
</html>
letaknya paling bawah, jadi peletakannya menjadi seperti ini :
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</html>
6. Ini langkah terakhir pengeditan, yang saya maksudkan disini pengeditan nya?
memang agak membingunkan,
dimana meletakkan nya script bisa di edit html (</body> "ada 2 body bisa dibagian bawah/atas)
dan juga bisa dengan menambahkan add widget yang script nya HTML.
(kalau di taruh di widget HTML sebaik nya di bagian atas atau bawah pasti nya ditengah2)
berikut yang harus di ubah .
<div class="dock" id="dock">

<div class="dock-container">
<a class="dock-item" href="NAMA LINK NYA"><img
src="http://oom.blog.googlepages.com/home.png" alt="home" /><span>Home</span></a>
src="http://oom.blog.googlepages.com/email.png" alt="contact"
/><span>Contact</span></a>
src="http://oom.blog.googlepages.com/portfolio.png" alt="portfolio"
/><span>Portfolio</span></a>
src="http://oom.blog.googlepages.com/music.png" alt="music" /><span>Music</span></a>
src="http://oom.blog.googlepages.com/video.png" alt="video" /><span>Video</span></a>
src="http://oom.blog.googlepages.com/history.png" alt="history"
/><span>History</span></a>
src="http://oom.blog.googlepages.com/calendar.png" alt="calendar"
/><span>Calendar</span></a>
src="http://oom.blog.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>
pengeditan nya warna merah merupakan link URL blog/web kamu

warna Ungu merupakan gambar nya (" bisa kamu ubah gambar sesuai dengan keinginan setelah di
upload dan mendapatkan url dari pada gambar tersebut, baru lah kamu ganti")
selamat berjuang yah..
bagi yang mengerti script Js.Css, php akan mudah mengedit² dari pada script2 tersebut .
buat o-om Tks, banget om
Pasang Translete Bahasa
waduuhh.. saya ketinggalan berita bahwa saat ini.

setelah dahulu saya posting masalah tranlator bahasa , dan akhir nya geolgle juga mengeluarkan
translator bahasa yang telah menggunakkan bahasa indonesia.
Beda dari sebelum² hanya terdapat beberapa bahasa.
Translate yang lama dapat kamu lihat disini, bereda bukan.....
dengan yang sekarang. Dilengkapi dengan berbagai bahasa (termasuk indonesia)
dan trik ini saya baca di Blog Om khendin dapat dilihat disitu.
Kegunaan mungkin banyak sekali dengan ada nya translator bahasa ini, mempermudah kita dalam
mengartikan bahasa² ke bahasa indonesia khusus nya, dengan tidak memakai Program²
translator bahasa / kamus online.
Buruan pasang... translator di blogger kamu?

agar pengunjung luar negeri/ yang tidak paham bahasa kita bisa dimengerti.
Lumayan kan buat nambah trafik blogger nya,
bagaimana bentuk script dan cara penempatan script nya :
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.
dan setelah berhasil disimpam lihat hasil nya
Memasang Bintang Berjatuhan
Dari berblogging setiap hari semakain menambah tips dan trik mempercantik blogger.
setelah dari ediasi yang dulu saya pernah memberikan cara membuat efek salju dan script
tersebut menggunakan file yang bernama JS
berikut script JS bagi yang paham bisa diubah sendiri dan bagian yang lom paham bisa
menempatkan sctersebut
JS bintang script nya http://h1.ripway.com/ewin_coga/bintang.js
Clik Script JS itu..
dan perhatiin
http://www.geocities.com/yono_pati/star.gif
Url diatas merupakan gambar dari pada bintang2 nya

dan bisa kamu ubah sesuai yang kamu mau (gambar apa aja , dengan ukuran kecil)
terlebih dahulu kamu upload script tersebut di HOSTING masing², kalo saya pake
www.ripway.com
Cara nya bila ingin mengubah gambar sendiri, selain bintang
KLIK http://h1.ripway.com/ewin_coga/bintang.js
dan copi semua di NOT PET. Save & kasih nama sesuai kamu mau "AKHIRI dengan [dot}JS nama
file nya", dan upload lah di hosting masing2.
untuk mengubah gambar nya :
Ganti url in dengan URL gambar yang kamu ingin buat.
http://www.geocities.com/yono_pati/star.gif
Setelah kamu upload dalam hosting kamu, barulah kamu tambahkan beberapa script agar
bintang berjatuhan itu bisa dipaki di blogger.
berikut sciprt tambahan nya :
src="ini merupakan file JS yang kamu upload dlm hosting tadi">
</script>
Setelah itu pasang lah di edit html nya kamu,

Dan bagaimana cara pemasangan nya, sebagai berikut dibawah ini script yang sudah jadi dan bisa
kamu pakai :
1. Login ke blogger.com hingga masuk halaman Panel Kontrol

2. Klik Tata Letak (layout)
3. Klik Tambah Gadget
4. Tambahkan HTML/Javascript
5. Kemudian copy paste atau ketik script berikut ini.
src=" http://h1.ripway.com/ewin_coga/bintang.js ">
</script>
6. Simpan Perubahan
7. Selesai
Dan hasil nya kamu dapa lihat dengan ada nya gambar
Membuat Read More
Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu
terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya
postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada
sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-
langkah berikut :
1. Buka menu Layout kemudian pilih Edit HTML.

2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode
hmtl) :
<p><data:post.body/></p>
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:
<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".
5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
<span class="fullpost">
</span>
8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km
pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :
<span class="fullpost">
</span>
10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum
tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu
keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he..
Selamat Mencoba...
Pasang Icon Di Judul Postingan
Trik berikut ini
adalah memasang gambar atau icon,, di judul posting.
dimana setiap judul posting akan secara otomatis tampak icon ,
baik itu berupa jgp,Npg,Bimp,Gif tergantung kemauan sendiri².
saya, mencoba dengan icon yg format nya gif,
mengapa? karena icon yang saya pake ini merupakan icon2 yahoo mesengger , karena icon nya
kecil dan pass Jadi tidak perlu di lakukan pengelian gambar.

berikut saya cuma kasih gambaran cara pembuatan nya
icon ini kita pake sebagai gambar nya. Berikut url dari icon tersebut :
http://yahooindo.com/vb/images/smilies/newsmile/39.gif
dan url icon tersebut biar di baca dalam pengeditan nya di tambah.....
<img src="INI BUAT URL ICON NYA"/>
Maka... akan jadi seperti ini :
<img src="http://yahooindo.com/vb/images/smilies/newsmile/39.gif"/>
Dan bagaimana cara penempatan nya, sebagai berikut:

1. Sign in di blogger.
2. Klik Tata Letak.
3. Klik Edit HTML
4. Back Up dolo template nya kamu di Not pet biar seandai nya error .
5. Tandai disamping kiri Expand Template Widget
6. Cari Kode berikut ini
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
pencarian mempermudah dengan menggunakan/ memakai Ctrl+ F
7.Sisipkan Url gambar/icon tadi yang kita miliki diantara kode :
<a expr:href='data:post.url'> URL ICON NYA <data:post.title/></a><b:else/>
sehingga akan seperti ini :

<a expr:href='data:post.url'> <img
src="http://yahooindo.com/vb/images/smilies/newsmile/39.gif"/> <data:post.title/></a>
<b:else/>
8. lakukan pertinjauan
9. Bila sudah berhasil , kamu save
10. FINISH
Klik Kanan Atau Gempa
scrip yang di klik kanan akan terlihat gempa?

scrip ini hanya berlaku Di IE (Internet Explorer)
Jika kamu klik kanan akan terlihat gempa.

Misalnya web ini kamu buka di Internet Explorer http://www.ilmuwebsite.com/javascript/klik-
gempa.htm
script nya sebagai berikut :
<html>
<head>
</head>
<body bgcolor="#000000">
<SCRIPT language=JavaScript>

</SCRIPT>
</body>
</html>
Selesai….
Membuat Tulisan Link Pelangi
membuat Tulisan Link kita menjadi kayak pelangi ???

Seperti apa yach ??
Tulisan tersebut klo di klik akan seperti pelangi / berwarna warni.
seperti PElangi ..........

Cara nya seperti ini, saya terangkan:
1. Kamu Login dulu lah ke blognya masing-masing
2. Klik LAY OUT dan klik Edit HTML nya
3. Cari kata < head >
4. Dan untuk mempermudah pencarian kata < head > kamu teken "Ctrl + F"
5. Setelah ketemu kata < head > kamu Copy Script di bawah ini :
<script src='http://pamungkaz.googlepages.com/rainbow.js'>
/*
Rainbow Links Script- TAKANASHI Mizuki
For full source code, 100's more DHTML scripts, and TOS,
Visit http://www.dynamicdrive.com
*/
</script>
Dibawah kata < head > tersebut
6. Sebelum di simpen kamu Pertinjau dulu apakah sudah berubah blom
7. Jika sudah berhasil kamu simpem tempelatenya.
Merubah Title Blog dengan Title Postingan
Perlu gak sih mengganti title/judul blog dengan title postingan?

Title blog biasanya berada didepan title postingan. Seperti yang dulu aku bilang, mengoptimalkan
title itu akan mempengaruhi dalam membuat blog kita berada dalam top rank hasil pencarian
search engine. Nha jika kamu menggunakan trik mengganti title blog kamu dengan title postingan
maka hal itu akan lebih bagus lagi buat masuk ke jajaran depan search engine.
Bener gak sih?
Dulu ketika aku belum pake trik ini, ketika aku mencari di google dengan keyword "Cara Membuat
Search Engine" maka hasilnya adalah sepeti ini:
Tapi sekarang ketika aku terapkan trik ini maka hasilnya menjadi seperti ini :
Nha tentunya orang akan lebih suka untuk memilih mengklik hasil seperti pada gambar yang
kedua daripada gambar yang pertama, ya kan? dan kalo menurut yang ahli dalam SEO (Search
Engine Optimization) katanya cara ini akan membuat blog kita menjadi lebih Search Engine
Friendly. OK bagi yang pingin mencobanya silahkan ikuti langkah-langkah berikut ini:
1. Masuk ke "Layout-->>Edit HTML

2. Cari kode ini ;
<title><data:blog.title/></title>
( letaknya dibagian atas)
3. Kalo sudah ketemu ganti dengan kode berikut ini :
<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
4. Trus simpan.
Untuk halaman utama titlenya akan tetap title blog. tapi jika km coba buka salah satu
postinganmu maka nanti title postingmu akan menjadi title blogmu.
SeLAmat MEncoBA......
Membuat kotak Scroll untuk blogroll
udah sama-sama mafhum kalau ngeblog tampa pertukeran link ibarat sayur tampa garam.
Namun karena seringnya melakukan pertukaran link, terkadang untuk mengurus yang satu ini
menjadi sangat ribet. ada sebagian orang yang mengakalinya dengan cara membuat text berjalan
( Marquee ).
Dan dalam tulisan ini, saya ingin memberi alternatif lain untuk menangani blogroll tersebut
dengan cara membuat wadag atau kotak yang bisa di scroll, atau kita sebut saja Blogroll
scrolling. - yang kebetulan akhir-akhir ini mulai trend di gunakan oleh para blogger mania.
Dan Blogroll scrolling yang saya akan tunjukan, tidak akan merubah kebiasaan kita ketika
menambah sebuah link baru, tetap mengunakan elemen linklist seperti biasanya, artinya kita
tidak perlu membuat brogroll dari elemen Html/javascript, yang apabila menambah link baru, kita
di harus menulis manuali seperti ini : <ul><li> alamat blog </li> </ul> di ulang-ulang sampai pegal
tangan kita.. cape deeeh !!!...
Untuk membuatnya, seperti biasa dalam halaman layout kita buka

tab Edit Html. kemudian tandai kotak Expand Template widget.
Setelah itu masukan kode di bawah ke dalam halaman sintaks Css.

( atau simpan saja di atas kode ini -> ]]></b:skin>
#scrolling {
overflow: auto; height: 100px; width: 94%;
background-color:#EFEFEF; border:1px solid #777;
margin: 0px auto; padding:5px; font-size: 14px;
color: #999; text-align: left;
}
oke setelah itu cari elemen blogroll yang telah kita pasang,- agar memudahkan dalam
pencarianya gunakan find browser yang kita pakai, jika anda mengunakan browser firefox buka
menu file Find In This page.
maka di posisi kiri bawah jendela browser akan terlihat kotak kosong seperti ini
kemudian agar mudah mencarinya ke dalam kotak kosong tersebut masukan judul elemen blogroll
kita, misalkan judulnya " link Teman ",
" Blogroll " atau " my link " dll . kemudian klik tombol Next sampai kita menemukan tulisan judul
tersebut , juga sampai terlihat semua kode html elemen blogroll seperti di bawah ini ( aslinya
elemen LinkList ).
<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul> <b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
setelah itu masukan kode Html yang sintaks Css-nya telah kita buat, yakni id = " scrolling " atau
tulisan lengkapnya menjadi <div id='scrolling'> dan di akhiri dengan tag </div>.
hasil penambahan dan letak posisinya bisa di lihat pada tulisan yang dipertebal di bawah ini.

<div id='scrolling'>
<ul>
<b:loop values='data:links' var='link'>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template.
sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan
link baru.. hmmm ngga pegal lagi kan mengetik berulang-ulang ....enjoy aja lagi !
Begitu juga jika anda keukeuh ingin mengunakan text berjalan ( marquee ) untuk blogroll ini,
lakukan saja tata cara dan upacara pada bagian tag Html seperti di atas. hasilnya seperti ini.

<marquee behavior="alternate" direction="top" bgcolor="#33FFCC">
<ul> <b:loop values='data:links' var='link'>
</b:loop>
</ul>
</div></marquee>
</b:includable>
</b:widget>
Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template. sekarang coba
masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru..
hmmm enjoy aja lagi !
Masalah Dan Solusi
Nah sekarang bagaimana jika tampilan blogroll-nya ingin seperti ini. memanjang secara
horizontal.
Gampang saja dalam tag Html listlist di atas kita tinggal hapus tulisan ini semua : <ul> <li> </li>
</ul> .. segitu saja ngga kurang ngga lebih.
Membuat Kotak Komentar Blogger di Bawah Postingan
Akhirnya datang juga....

Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot
menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah
postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg sekarang
kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah
ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku
yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft
tapi sudah bisa dinikmati.
Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.
1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.

2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi
"Embedded below post" (lihat gambar dibawah)
3. Kemudian klik "Save Setting"
Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat
hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah
berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang
baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg
belum dan ada juga yg sudah).
4. Selanjutnya pergi ke menu "Layout-->Edit HTML"

5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>
7. Kemudian ganti kode tersebut dengan kode dibawah ini:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>
8. Lalu simpan template kamu.
Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul
kotak komentar seperti punyaku ini (Bagi yang berhasil).
Membuat Anu Supaya Selalu Berada Di pojok
Pasti pada bingung nih, apa maksudnya dan kenapa judulnya begitu, sebenarnya aku sendiri juga
bingung mau ngasih judul apa untuk trik yang berikut ini. Setelah aku pikir-pikir eee.. nggak
nemu-nemu juga judul yang cocok, ya udah deh aku asal aja kasih judul gitu. Trus apa maksudnya
dari judul tersebut dan trik apa yang akan dibahas?
Gini, untunya itu gini trik nyoba ngebahas gimana cara membuat "ANU" itu selalu berada di
pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu
apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan
keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "ANU" itu apa? "ANU" itu
maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender,
Adsense, Iklan, Widget-widget dan lain-lain. Kalo untuk di blog ini aku pasang gambar sonic yg
sedang lari-lari (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin
mencobanya mari ikuti trik berikut ini:
1. Login ke blogger trus klik "Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }
3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal
text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa
diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
<div id="trik_pojok">
<a href="http://trik-tips.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>
"http://trik-tips.blogspot.com" adalah link. ganti dengan link kamu.

"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar
kamu.
5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-
widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.
Cara Menghilangkan Navbar (Navigation Bar)
Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil
memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya
antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar
juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan
oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap
merugikan orang lain.
Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam
keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena
itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak
melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat
teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan
yang cukup detail tentang hal ini.
Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu
yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah
caranya.
1. Kamu harus Login dulu di Blogger.com / Blogspot.com

2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head
#navbar-iframe {
display: none !important;
}
contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
4. Kemudian simpan.
Selamat Mencoba.....!!
Cara Mengganti Icon Pada Address Bar
Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar
atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di
Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan
gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif,
jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya
bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>
<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>
ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa
menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack
atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan
linknya.
Cara membuat Form "Email Subscriber" / "Berlangganan Lewat Email"
Beginilah cara membuat form "Email Subscriber" tersebut :
1. Kunjungi situs ini : http://www.feedburner.com

2. Saat pertama kali datang kamu akan langsung disodori kotak untuk mengisikan alamat feed
blogmu yang akan dibakar

3. Biasanya alamat feed blog kamu seperti ini
http://NAMABLOGMU.blogspot.com/feeds/posts/default , ganti tulisan NAMABLOGMU
dengan nama alamat blogmu.
3. Isikan nama feed blogmu tadi dalam kotak yang disodorkan tersebut, jika blogmu itu isinya
hanya video2 maka beri tanda centang pada kotak "I am a podcaster", jika tidak ya gak usah
dicentang. Kemudian klik tombol "next"
4. Setelah itu kamu akan disodori lagi dengan form pendaftaran, isikan data2 yg diperlukan
disana, trus klik tombol "Activate Feed"
5. Nha kalo berhasil nanti akan ada informasi "Congrats! your ......".
6. Dibawahnya akan ada tombol "Next" dan link "Skip directly to feed management" kali ini pilih
yang link "Skip directly to feed management", sebenarnya lewat tombol "next" bisa sih tapi biar
seru kita lewat jalan lain aja.
7 Kemudian nanti akan ada beberapa menu, kali ini pilih menu "Publicize"
8. Setelah itu disebelah kiri akan muncul beberapa menu. PIlih menu "Email Subscriptions".
9. Kemudian klik tombol "Activate"
10. Nha setelah itu nanti akan ada beberapa kotak yang berisi kode2. Nha kalo km pinginnya yang
berbentuk form maka pilih kode yang ada di kotak "Subsciption Form Code".
11. Copy kode yang ada dalam kotak tadi, trus klik tombol "Save" untuk mengaktifkan layanan
tersebut.
12. Cara pasangnya, Login ke blogger, pilih "layout --> Add a Gadget --> HTMl/Java Script" nha
paste kode yang sudah kamu copy tadi disana.
Sekarang coba dilihat blogmu, udah ada kan form untuk "Email Subscriber".
Trus kalo mo nampilin jumlah reder yang berlanganan gini caranya :
- Login ke feedburner kemudian pilih feed blogmu
- Trus masuk ke menu "Publicize --> FeedCount" nha disitu scriptnya yang harus km copy dan
pasang di blogmu
Membuat Pesan Alert (Pesan Pembuka)
Buat Kamu pencinta Blog.

Mungkin kamu dah pernah baca cara membuat srcipt alert di blog.
atau
Pernah dan ingin mencoba membuat Alert di blog kamu...
sricpt ini menampilkan srcipt nya doolo yang berupa pesan yang kamu buat.
Sebelum memasuki blo kamu.
Memasang alert tentunya jangan terlalu banyak?

Knapa.......???
karena orang pasti males buka blog kita, karena terlalu banyak pesan²nya,
yang muncul sehingga banyak sekali yang di klik baru masuk ke blog nya.
Sehingga para pengunjung merasa tidak nyaman.
baiklaaaaaaaah.......
bagi yang kepengen membuat nya?
mudah Kok, hanya sedikit kode srcipt.
<SCRIPT language='JavaScript'>alert("Selamat datang di blog cahndableck);</SCRIPT>
Tulisan yang berwarna merah itu bisa kamu ganti sesuai dengan keinginan kamu.
Satu script adalah untuk satu alert,
jika ingin menambahnya berarti tinggal menambahkan script tambahkan sesuai dengan keinginan.
Misal ingin memasang dua buah alert, maka misalkan scriptnya jadi seperti ini :
<SCRIPT language='JavaScript'>alert("Selamat datang di blog cahndableck);</SCRIPT>

<SCRIPT language='JavaScript'>alert(".::al_fathz Production::.);</SCRIPT>
Mudah bukan.
selain dengan memakai script di atas, tentu saja masih banyak cara untuk membuat alert, misal
dengan memakai script ini :
<SCRIPT language='JavaScript'>window.alert("Selamat datang di blog cah

ndableck);</SCRIPT>
Hasil nya akan nampak sama.

Cara penempatan script nya:
1. Login ke blogger.
2. Klik Tata Letak.
3. Klik tab Edit HTML
4. Klik tulisan Download Template Selengkapnya.
5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila
terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up
data untuk mengembalikannya seperti semula.
6. Cari kode </head>
7. Copy paste kode berikut di atas kode </head> (ganti tulisan yang berwarna merah
dengan yang anda inginkan).
8. Klik tombol PERTINJAU DULU.
9. Selesai klo sudah bagus dan save jgn lupa.
Silahkan buka blog anda untuk melihat hasilnya
Membuat alert pesan penutup di BLOGGER
ada yang ketinggalan buat alert nya di blog, sebagai penutup nya (pesan penutup)
setelah kemaren saya posting tentang alert
sekarang saya mengasih script penutup di blog..?
banyak script alerts penutup buat blog yang saya coba,
namun tidak berhasil,
akhir nya saya coba script ini dan berhasil..
Script nya :
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('besoK maMpiR lagi ya '+parent.pageViewerFName+' jangan bosen-bosen berkunjung');
}
parent.window.onunload=goodbye;
</script>
tulisanya yang berwarna merah itu diganti terserah kemauan sendiri
klo g diganti g apa2
Untuk peletakkan script nya

1. Login ke blogger.
2. Klik Tata Letak.
3. Klik tab Edit HTML
4. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila
terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk
mengembalikannya seperti semula.
5. Cari kode
6. Copy paste kode berikut didibawah nya kode
7. Klik tombol PERTINJAU DULU.
8. Selesai klo sudah bagus dan save jgn lupa.
9. Silahkan buka blog anda untuk melihat hasilnya.
Pernah mendengar atau melihat Bookmark yang ada di setiap postingan di blogger maupun
situs2 laen nya. ? tentu nya sudah pernah mendeengar dan melihat nya.. bukan..?
dan saya coba mempostingkan kembali cara pembuatan nya bookmark, yang berada tepat di
bawah komentar. ""mungkin bagi saya in merupakan penting g penting,""
Add boorkmark itu di tempatkan tepat dibawah postingan kita. bukan nya dengan add tambah
GADGET, melaikan tepat di bawah nama postingan kita.
so, mau lihat , kira2 seperti ini:
baiklah caranya sebagai berikut :
1. Masuk kealamat http://www.addthis.com/ lakukan registrasi terlebih dahulu jika belum

terdaftar.
2. Pilih "Get the code for your widget!"
3. Setting pilihan :
Which kind of widget? : --> Bookmarking Widget
Which widget? : --> (Pilih button sesuai selera)
Where? Where do you
want to put the widget? : --> On a Blog
Blogging Platform : --> Blogger
4. Pilih "Get Your Free Button"
5. Pilih code "Blog Button (New or Older Blogger)"
cara diatas merupakan buat di pasang secara otomatis di blog dengan ditambahkan nya widget.
naaaaaaaaah,,, sekarang kita buat add bookmark nya di bawah postingan kita.
setelah kamu mengedit di http://www.addthis.com/
maka akan ada 2 pilihan yaitu BUTTON...
Lihat kebawah nya lagi .. dibawah nya terdapat 2 SCript, yaitu
1. Drop-down:
2. Or, Original Button:
setelah mendapatkan kode script nya ,,
lalu kamu COPI + PASTE salah satu / dua2 nya,,,
dimana letak nya DIBAWAH KODE NYA harus diletkkan ---> lihat TUTOR nya:
1. Login ke Blogger klik Layout/Tata Letak ----> Edit HTML

2. Klik tanda Expand Template Widget
3. cari kode (BACK UP DOLO HTML KAMU + lakukan pencarian dengan menekan Ctrl+F,, copi paste di
find setelah kamu teken Ctrl+F)
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if></span></p>
ATAU


<b:include data='post' name='postQuickEdit'/>
</span></p
Kemudian Copy-Paste code Bookmark di bawah code diatas. jangan lupa disimpan . Jika
proses berhasil maka bookmark hanya akan mengambil Feed sesuai dengan nama judul posting
yang dipilih .
Menghilangkan Icon Obeng dan Tang / Quick edit Blogger
Icon Obeng dan Tang Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut
tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya
bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa
melihat icon tersebut.
namun sebalik nya ada juga yang tidak suka melihat ada nya tanda tersebut..
Dan jawab nya sangat lah muda,, cuma menambah kan perintah script agar tidak muncul gambar
tersebut.
berikut code css nya :
.quickedit{
display:none;
}
Cara peletakkan nya sebagi berikut :
1. Login ke blogger dengan ID anda tentunya.

2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini : ]]></b:skin> ( pencarian dengan menekan Ctrl + F)
5. Copy paste kode berikut persis di atas kode yang tadi :DIBAWAH ]]></b:skin>
6. Klik tombol Simpan template.
7. Selesai.
Memberi Gambar Sebelum Judul Post
Hai... sobat blogger, buat yang pingin blognya tampil lebih indah dan expresif dengan memberi
gambar sebelum judul itu bisa dilakukan dengan cara seperti ini, tapi tunggu dulu q mo tanya apa
ada yang sudah negenet lama?? wah... k'lo gitu jangan bosen ya liat" tutorial yang lain di
Oke... langsung ja kita masuk ke pokok pembahasan untuk bisa memberi gambar sebelum judul
posting temen" harus dan wajib Log in dulu ke Blooger ya iyalah masa' ya iya donk.
Truzzz cari kode berikut (mungkin setiap template berbeda):
.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
Atau k'lo g' ada coba deh cari yang ini:

.post-title {
margin:.5em 0;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}
truzz kamu sisipkan kode dibawah ini ke dalamnya:

padding:48px 0px 0px 45px; height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-
48x48.png) no-repeat left center;
kamu bisa ganti kode yang dicetak tebal dengan lokasi gambar kamu dan jika jarak gambar
dengan judul bertumpuk/ tabrakan kamu bisa edit kode padding, untuk lebih jelasnya seluruh kode
akan seperti ini:
.post h3 {
margin:.5em 0;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-
48x48.png) no-repeat left center;
Terakhir tinggal di Save deh... n' lihat hasilnya
Highlight Kode Di Posting
Meberi Highlight pada kata, kode, script di dalam posting dapat memperjelas pembaca. Sebagai
contoh kamu dapat melihat di Lab Komputer ini dimana setiap kode dalam setiap posting selalu
diberi Highlight agar pembaca tertarik untuk membaca posting serta memperjelas kode/script.
Untuk caranya silahkan lihat dibawah ini:
1. Login ke Blogger pilih Layout-->Edit HTML
2. Truzz copy paste kode di bawah ini sebelum ]]></b:skin>
.Lkom_Highlight { background: #ccc;

text-align: left;
padding: 5px 5px 5px 5px;
border:#666 1px dashed;}
3. Jika sobat mengerti sedikit tentang CSS silahkan utak-atik sedikit kode diatas jika kurang
sesuai dengan keinginan, mulai dari warna background dan lain".
4. Untuk cara Posting letakkan kode kamu diantara kode berikut:
<p class="Lkom_Highlight"> kata"/kode kamu </p>
Cara Membuat Menu DTree

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-
cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan
menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara
membuatnya?
Beginilah cara membuatnya :
1. Login to Blogger, trus pilih "Layout --> Edit HTML"

2. Taruh kode berikut ini diatas kode <head>
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css"
/>
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di
menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy
di sidebar kamu.
<div class="dtree">
<script type="text/javascript">

</script>
</div>
berikut ini keteranganya:

- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna
sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);
Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu.
Cara Auto Hide Navbar
Auto Hide ini akan berfungsi menyembunyikan Navbar Blogger bukan menghilangkan, Navbar ini
akan muncul jika kita arahkan pointer ke tempat navbar berada tapi jika tidak maka navbar akan
tersembunyi.
Untuk trik yang kali ini cukup mudah gini:
1. Log in dulu ke Blogger
2. Pilih Menu Layout Kemudian Edit HTML
3. Kemudian Cari Code seperti ini ]]></b:skin> (berada ditengah agak keatas truz...truzz... nah
ketemu kan)
4. Lalu Copy Code dibawah ne tepat di atas code ]]></b:skin>
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
5. Terakhir simpan selesai deh...
Sekian dulu posting kali ne disambung lagi Happy blogging!!!

100 Tips and Trik Blogger

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

100 Tips and Trik Blogger

Diunggah oleh

Hak Cipta:

Format Tersedia

100 TIPS

mungkin kamu sudah atau kepengen membuat roaming di blog.

pertama kali temen kamu masuk ke blogger kamu ,,

7. Setelah itu paste kode tadi tepat di atas kode/dibawah <head>

Membuat Bubble Effect di BLOG

Membuat Bubble Effect di blog,

Login ke blogger.com hingga masuk halaman Panel Kontrol

Membuat Menu CSS Ala Macintosh

Membuat menu seperti gambar diatas / ala macintonsh.

<script src=' http://h1.ripway.com/ewin_coga/jquery.js' type='text/javascript'/>

Cara meletakkan script nya

5. Masih di Edit HTML. masukkan script di bawah ini di atas

letaknya paling bawah, jadi peletakannya menjadi seperti ini :

berikut yang harus di ubah .

<div class="dock" id="dock">

pengeditan nya warna merah merupakan link URL blog/web kamu

selamat berjuang yah..

buat o-om Tks, banget om

Pasang Translete Bahasa

waduuhh.. saya ketinggalan berita bahwa saat ini.

Buruan pasang... translator di blogger kamu?

1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"

dan setelah berhasil disimpam lihat hasil nya

Memasang Bintang Berjatuhan

Url diatas merupakan gambar dari pada bintang2 nya

Ganti url in dengan URL gambar yang kamu ingin buat.

Setelah itu pasang lah di edit html nya kamu,

1. Login ke blogger.com hingga masuk halaman Panel Kontrol

Membuat Read More

1. Buka menu Layout kemudian pilih Edit HTML.

<b:if cond='data:blog.pageType == "item"'>

Pasang Icon Di Judul Postingan

kecil dan pass Jadi tidak perlu di lakukan pengelian gambar.

<img src="INI BUAT URL ICON NYA"/>

Maka... akan jadi seperti ini :

Dan bagaimana cara penempatan nya, sebagai berikut:

sehingga akan seperti ini :

Klik Kanan Atau Gempa

scrip yang di klik kanan akan terlihat gempa?

Jika kamu klik kanan akan terlihat gempa.

script nya sebagai berikut :

Membuat Tulisan Link Pelangi

membuat Tulisan Link kita menjadi kayak pelangi ???

seperti PElangi ..........

7. Jika sudah berhasil kamu simpem tempelatenya.

Merubah Title Blog dengan Title Postingan

Perlu gak sih mengganti title/judul blog dengan title postingan?

Bener gak sih?

1. Masuk ke "Layout-->>Edit HTML

( letaknya dibagian atas)

3. Kalo sudah ketemu ganti dengan kode berikut ini :

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Untuk membuatnya, seperti biasa dalam halaman layout kita buka

Setelah itu masukan kode di bawah ke dalam halaman sintaks Css.

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>

Masalah Dan Solusi

Membuat Kotak Komentar Blogger di Bawah Postingan

Akhirnya datang juga....

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.

3. Kemudian klik "Save Setting"

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"

<b:if cond='data:blog.pageType == "index"'>