Blogger Tutorial | Programming Web | Free Templates

Apa Itu Link Juice

noreply@blogger.com (Om Kempul) — Wed, 02 Dec 2009 13:42:00 +0000

Pernahkah sobat sekalian mendengar kata link juice?? Terus apa sich sebenarnya link juice itu dan pengaruhnya apa terhadap teori tentang seo? Disini akan dijelaskan definisi dari link juice serta penggunaan Link juice untuk seo.

Definisi atau pengertian link juice

menurut Impnerd, link juice adalah merupakan istilah yang digunakan untuk mengekspresikan jumlah page rangking yang diberikan kepada sebuah halaman yang berasal dari link external. Walaupun demikian, link juice juga diukur berdasarkan jumlah visitor yang dihasilkan oleh sebuah link.

GetFoundNow memberikan istilah yang berbeda yaitu Pass Through Ratio. Konsepnya sama dengan link juice yaitu kualitas atau bobot yang bisa diberikan oleh sebuah website ke website lain dengan menggunakan link. Jika anda membeli sebuah link atau backlink dari website lain maka pastikan dimana link Anda akan ditempatkan. Lokasi link anda menentukan bobot link tersebut.

Penggunaan link juice untuk SEO

Seperti kita ketahui backlink menentukan sukses kita di search engine. Link juice memberikan bobot tentang kualitas dari backlink tersebut. Menurut GetFoundNow ada beberapa aturan yang digunakan dalam link juice, yaitu :

Pahami halaman penempatan link Anda : jika situs Anda akan di-link dari atau ke situs orang lain selain home page atau halaman depan, maka pastikan Anda mengetahui dimana link anda akan ditempatkan pada situs tersebut. Jika broker Anda tidak bisa menyebutkan dimana link Anda akan ditempatkan maka itu merupakan pertanda yang buruk bagi Anda.
Link ke luar situs tidak boleh lebih dari 100 link : perhatikan halaman dimana link Anda akan ditempatkan. Jika halaman tersebut memiliki link keluar atau outbound link atau external link lebih dari 100 link maka kualitas link di halaman tersebut tidak baik.
Iklan atau link sponsor kurang dari 25 : Iklan atau link ke sponsor tidak boleh lebih dari 25 link ke luar. Lebih bagus lagi jumlahnya dibawah 16 link.
Google Adwords maksimal 2 area atau unit : situs yang memiliki iklan google adwords atau adsense unit tidak akan bisa membantu Anda.
Paling tidak 1 tingkat lebih baik page rankingnya : situs tersebut harus memiliki minimal page rangking 3 dan lebih baik dari page rangking Anda. Situs dengan page rangking di bawah 3 sedikit atau tidak berkualitas linknya

Jadi ini merupakan aturan bagi Anda dalam menerima outbound link atau tukaran link, atau bisa menjadi patokan bagi Anda ketika ingin mendapatkan backlink dari situs lain. Jadi aturan link juice sangat penting bagi situs Anda dan situs lain. Bekerja di dua sisi.

Cara Membuat Recent Post dengan Thumbnails

noreply@blogger.com (Om Kempul) — Wed, 02 Dec 2009 13:15:00 +0000

Recent Post dengan Thumbnails?? Masih gunain rencent post lama?? Sekarang sobat sekalian bisa menggantinya dengan versi thumbnails, mudah kok caranya. Ikuti tips Om Kempul ini :

Tips ini tanpa merubah code templates (body) kita, jadi kita bisa langsung Add a Gadget lalu pilih HTML/Javascript, setelah itu Copas Script di bawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";

thumbwidth = 40;
thumbheight = 40;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 5;
home_page = "http://marchsya.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
Jika ingin Merubah Codenya untuk menyesuaikan dengan temp, teman - teman bisa lihat fungsi code di bawah ini:

boxwidth - Lebar widget
cellspacing - Space antara cells (default adalah 1 sudah bagus)
borderColor - Warna Border (Warna template widget bisa anda ganti.Defauld adalah putih)
thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
fntsize - Ukuran huruf judul postingan
acolor - Warna huruf judul postingan
aBold - Bila ingin ditebalkan adalah true, jika tidak false saja.
numposts - Berapa banyak recent post yang akan ditampilkan
home_page : http://putroweb.blogspot.com/ (Ganti dengan URL blog anda)
Yakinkan seeting site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting>Site Feed>Full>Allow Blog Feeds.

Script dari : http://www.bloggertricks.com/2009/05/recent-posts-with-thumbnails-widget-for.html
Selamat Mencoba . . . =)

Cara Menyembunyikan Komentar di Blog

noreply@blogger.com (Om Kempul) — Fri, 11 Sep 2009 23:29:00 +0000

Ini adalah jawaban dari pertanyaan yang di ajukan dari adminnya http://www.koleksimainan.info/, yaitu bagai mana Caranya Menyembunyikan Komentar di Blog kita yang sering dibanjiri komentar seperti punya Kang Rohman, Agus Ramadhani (OOM). Nah mari kita simak tutorialnya :

Login ke Blogger
Masuk Tata Letak --> Edit HTML
Cari kode ]]></b:skin> dan tambahkan kode di bawah ini sebelum kode ]]></b:skin>

.commenthidden {display:none}
.commentshown {display:inline}
Cari kode <dl id='comments-block'>, salin kode di bawah ini tepat sebelum kode
<dl id='comments-block'>

<a aiotitle='Hide Comments' href='javascript:togglecomments("hideshow")'> [+/-]Click to Show or Hide Old Comments </a><div class='commenthidden' id='hideshow'>
Gerakkan mouse ke bawah dan cari kode berikut </b:loop>. Biasanya sebelum kode
<b:if cond="data:post.commentPagingRequired">
Salin kode di bawah ini sebelum kode </b:loop>

<a aiotitle='Hide Comments' href='javascript:togglecomments("hideshow")'>[+/-]Click to Show or Hide Old Comments</a>
Terakhir, sobat cari kode </head> , dan taruh kode di bawah ini sebelum kode </head>

<script type='text/Javascript'>function togglecomments (postid) {var whichpost = document.getElementById(postid);if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }} </script>
Klik Simpan Templates.
Tambahan :
Sobat sekalian Bisa mengganti kata " [+/-]Click to Show or Hide Old Comments " dengan kata-kata sobat sendiri.
Selamat mencoba . . . Good Luck . . . . :D

Cara Membuat Back to Top Melayang

noreply@blogger.com (Om Kempul) — Wed, 09 Sep 2009 14:02:00 +0000

Yah lama tak posting gara-gara pulsa IM2 habis, payah juga ah. Ini adalah postingan yang di request oleh Mas Qucluk, yaitu Cara Membuat Back to Top Melayang. Caranya mudah kok Mas Qucluk tinggal kita menambah di Widget blog kita tanpa harus mengutak-atik di dalam Edit HTML. Berikut adalah caranya :

Login ke Blogger
Masuk Tata Letak --> Tambah Widget --> HTML/Javascript
Masukkan kode di bawah ini ke dalam HTML/Javascript

<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}

}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbWq6EjQHT2U5Wt154bGXBkmBGKYnAJCSAI9K72OjCwnaAFU19UAFqd41D-Fu8LjyPKSm4S-bytAs2y7nEe-ClyepZaycIVa3e-FNcr7rdCfWyid9cnIW9BqrElCMvB0I7-YEX829_ebU/s320/up_out.gif" height="25"/></a></div>

<a name="top"></a>
Klik Simpan, dan lihat hasilnya. Selamat mencoba . . . :D

Photo Thumbnails ala Linkwithin

noreply@blogger.com (Om Kempul) — Tue, 08 Sep 2009 14:45:00 +0000

Ada layanan gratis lagi yang akan menguntungkan buat kita para Blogger mania, yaitu Linkwithin. Layanan ini terletak dibagian bawah postingan kita, yang bertujuan meng-capture link postingan lain di Blog kita. Link akan ber-rotasi selama kita me-refresh halaman Blog kita.

Masuk ke Linkwithin
Isi form yang telah di sediakan.
Klik Get Widget setelah mengisi form-nya.
Klik Instal Widget. Secara otomatis widget akan terpasang di Blog anda.
Lihat hasilnya, Selamat mencoba . . . .

Cara Otomatis Membuat Keyword via Keywordle

noreply@blogger.com (Om Kempul) — Wed, 02 Sep 2009 10:07:00 +0000

Pengen cara cepat tau keyword untuk blog anda? kalo iya, saya sarankan mencoba aplikasi otomatis membuat keyword dengan bantuan Keywordle. Cara menggunakan aplikasi ini juga tidak sulit, kita tinggal memasukan saja alamat URL tujuan dan biarkan keywordle sendiri yang menganalisa keyword yang sekiranya paling sesuai. Jika kurang sreg dengan hasil keyword yang diberikan, kita bisa menyortirnya sendiri kok, dan menentukan keyword mana saja yang sekiranya pantas digunakan. Selain itu juga fasilitas Show meta-tag code yang isinya berupa kompilasi listing dari meta-tag keyword yang siap rekan copy-paste dihalaman blog masing2 tentunya .

Sudah dicoba belum? tolong jangan protes untuk hasil akhir keakuratannya ya, yang jelas aplikasi ini sepertinya khusus buat yang malas aja kali, masa menentukan keyword sendiri aja bingung hehehe . . . .

Membuat Tulisan Bergaya Koran

noreply@blogger.com (Om Kempul) — Wed, 02 Sep 2009 00:54:00 +0000

Membuat tulisan bergaya koran sangatlah cocok untuk Blog yang bersifat berita, informasi. Untuk membuat postingan bergaya ala koran, sobat cuma butuh sedikit meng-edit script pada Edit HTML. Pengen tau lebih lanjut, tapi seperti biasanya, lihat dulu Demonya berikut :

- Untuk Template Klasik

Login ke Blogger
Masuk ke Tata Letak - -> Edit HTML - -> Jangan lupa di beckup dulu kode tempalte-nya
Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau sobat merasa bingung, maka tempatkan saja di atas kode </style>

/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
Klik Simpan Template

- Untuk Template Baru

Login ke Blogger
Masuk ke Tata Letak - -> Edit HTML - -> Jangan lupa di beckup dulu kode tempalte-nya
Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>

/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
Klik Simpan Template

Langkah selanjutnya :

Pada waktu sobat melakukan posting, sobat harus masuk pada posisi Edit HTML bukan pada Compose, pada awalan huruf postingan sobat cukup memasukkan kode berikut :

<span class="awal"> hurup awal </span>

Berikut contoh dari Demo postingan di atas :

<span class="awal">B</span>log, tiga tahun yang lalu mungkin kata tersebut masih asing, tapi kini merupakan kewajiban untuk memilikinya seperti masa email booming dulu. Blog adalah semacam buku harian yang di pajang di internet. Disamping sebagai catatan pribadi si empunya blog, juga sebagai tempat saling sharing pengalaman pribadi masing-masing. Dan yang menjadi asiknya, catatan pribadi kita bisa di-comment si pembaca.

Selamat mencoba . . . Good Luck . . .

Cara Membuat Efek Foto Blur

noreply@blogger.com (Om Kempul) — Tue, 01 Sep 2009 16:45:00 +0000

Apakah di benak sobat sekalian terlintas pikiran, gimana caranya membuat Blog kita lebih menarik?? Membuat efek foto blur (kabur) adalah salah satu cara supaya Blog kita terlihat lebih menarik. Karena jika kita posting gambar atau foto yang biasa akan terlihan kesannya monoton. Maka dari itu kita membuat sedikit perubahan supaya kesannya lebih menarik yaitu dengan menambahi efek blur. Yupz langsung saja kita bahas Cara Membuat Efek Foto Blur, tapi jangan lupa lihat demo nya, klik priview :

Cara 1

Login ke Blogger
Masuk ke Tata Letak - -> Edit HTML - -> Download Template Lengkap (supaya terjadi kesalahan bisa dikembalikan)
Cari kode ]]></b:skin>
Copy paste code berikut diatas code ]]></b:skin>

.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
Klik Simpan Template

Cara 2

Setiap sobat memasang foto atau gambar, sisipkan code berikut :

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

Dibawah ini adalah contoh code demo gambar diatas :

<a href="http://blogg-tutorial.blogspot.com/" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif"></a>

Selamat Mencoba . . . Good Luck . . .

Berbagi Backlink

noreply@blogger.com (Om Kempul) — Mon, 31 Aug 2009 23:52:00 +0000

Ada sebagian orang senang dengan Nofollow, sebagian lagi anti dengan Nofollow. Namun apapun pilihan terserah kembali ke sobat sekalian. Kalau kita berpikir positif tentu ada baiknya kalau kita mengubah Nofollow menjadi Follow. Apa dong untungnya....??
Trik ini merupakan SEO Friendly karena jika ada yang memberi komentar di blog kamu, sang komentator itu akan mendapat Backlink. Dan keuntungannya ialah blog kamu akan sering diberi komentar oleh pengunjung karena akan di data oleh Robot google.
Mau tau cara mengubahnya:

Login ke blogger
Masuk ke Tata Letak --> Edit HTML --> centang Expand Widget Templates
Cari kode di bawah ini

<a expr:href='data:comment.authorUrl' rel='nofollow' ><data:comment.author/></a>
Hapus kode yang berwarna merah
Cari lagi kode seperti di bawah

<a expr:href='data:backlink.url' rel='nofollow' ><data:backlink.title/></a>
Hapus kode yang berwarna merah
Simpan Template

Ada macam-macam alternatif para blogger untuk memberi tahu bahwa blog nya adalah bukan nofollow, seperti di bagian kotak komentar di tambah tulisan "Blog ini Do Follow" seperti blog punya sahabat saya marcellinoagatha, atau dengan menampilkan gambar "U comment I follow" pada elemen sidebar, misalkan seperti ini:

Lalu bagaimana cara comment supaya kita bisa mendapatkan backlink??

Pada saat anda mengisi identitas komentator, pilih Name/Url pada dropdown menu Comment As, masukkan nama dan Url blog Anda!

Free Kontak Form Ajax

noreply@blogger.com (Om Kempul) — Mon, 31 Aug 2009 15:43:00 +0000

Layanan ini adalah layanan gratisan dari kontactr.com . Layanan ini memberikan kemudahan bagi kita yang mempunyai Blog, Mengapa?? Karena dengan layanan kontactr.com ini kita sebagai pengguna Blog akan lebih mudah untuk berinteraksi dengan pengunjung di Blog kita, yaitu dengan mempermudah pengunjung di Blog kita jikalau ingin menanyakan hal tertentu, komplain, me-riquest postingan, atau pun saran-saran dan kritik dengan langsung terkirim ke email kita. Penasaran bukan??? Silahkan mecobanya, klik konactr me.

Caranya :

Sialahkan mendaftar di sini : DAFTAR
Isi form yang disediakan
Setelah sukses mendaftar, Kontactr akan mengirimkan Registration Confirmation ke email Anda.
Buka email Anda, klik link activate your account.
Login
Copy script yang telah disediakan ke Blog anda
Dan lihat hasilnya . . . Good Luck . . .

Cara Membuat Caption Foto Menarik

noreply@blogger.com (Om Kempul) — Sun, 30 Aug 2009 15:36:00 +0000

Akan lebih menarik jika di Blog kesayangan kita terdapat foto yang di kasih sedikit sentuhan yang berbeda. Solusinya adalah dengan modifikasi Caption. Pengen Coba?? Tapi sebelum ke tutorialnya, akan saya tunjukkan contoh foto dengan caption menggunakan teknik modifikasi HTML, klik Preview :

Cara 1 :

Login ke blogger
Masuk 'Layout' ---> 'Edit HTML' ---> centang 'Expand widget template' (jangan lupa backup buat jaga-jaga)
Cari kode </head>
Letakkan script berikut ini di atas kode </head>

<style type="text/css">
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}

.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>
Klik Simpan Template

Cara 2 :

Untuk memunculkan foto dengan teks pada postingan, sisipkan kode dibawah ini pada postingan anda :

<div class="caption" style="width: 410px;"><img src="URL foto yang sudah diupload"/><p class="caption-text">Tulis teks disini</p></div>

Contoh kode gambar saya:

<div class="caption" style="width: 410px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif" /><div class="caption-text"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxlbDnEEL5E507Y9pcIXXlsKc77Gtal2JV5PNTAvKwaOAp01cjvGGtu4ixj0OkctB2hL1pVcNPqnCLRSGX2-3Xoppvt81ECBrxsgf0anP2muWDwWiyo-PVlDZHKzAXAuYwbZZkn53GDg/s400/wonogiri.gif">Liburan bersama keluarga di Wonogiri</a></div></div>

Slamat mencoba . . . . Good Luck . . . .

Membuat Navigasi Halaman Bernomor/Paging

noreply@blogger.com (Om Kempul) — Sun, 30 Aug 2009 06:46:00 +0000

Kali ini Om Kempul akan membahas tentang bagaimana Cara Membuat Navigasi Halaman Bernomor/Paging, tapi sebelumnya saya akan jelaskan dulu paging itu apa? Paging adalah salah satu teknik menampilkan data perhalaman dengan n jumlah data. Keuntungannya, biar komputernya gak hang kalau nampilin 200 data atau lebih dalam satu waktu ! kan berbeda tuh kalau nampilin 10 atau 20 data per halaman ketimbang 200 atau lebih perhalaman. Masih belum da gambaran? Lihat demonya berikut, Pagingnya terletak di paling bawah. Klik Preview

Login ke blog anda
Klik 'Layout/Tata Letak'
Klik 'Tambah Widget'
Pilih 'HTML/Java Script'
Masukkan kode HTML di bawah ini

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=10;
var displayPageNum=5;
var firstPageWord = 'Home';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
Klik Simpan dan lihat hasilnya.
Selamat mencoba, Good Luck . . . . . .

Membuat Thumbnail Blog Otomatis

noreply@blogger.com (Om Kempul) — Wed, 26 Aug 2009 23:36:00 +0000

Menampilkan screenshot atau thumbnail (gambar kecil) dari sebuah website/blog adalah salah satu cara agar calon pegunjung website atau blog Sobat bisa melihat terlebih dahulu bagaimana tampilan situs Sobat sebelum mereka mengunjunginya. Atau bisa juga untuk sekedar estetika untuk link ke sebuah situs, dimana Sobat sekalian dapat meletakkan gambar preview sebuah situs sebagai link ke situs tersebut (bukan sekedar tulisan). Lalu, bagaimana Cara membuat thumbnail sebuah situs/blog? Sebelum saya bahas, kita lihat dulu Demo-nya, klik preview

Buka alamat http://www.thumbshots.org/
Klik Free Signup
Isi semua form yang di sediakan
Setelah regerstasi sukses, klik Get My Free Thumbshots
Pada Step 1, masukkan kode tersebut kedalam gadget blog sobat ato kedalam postingan. Dengan memasukkan URL tujuan. Contoh :

<img src="http://open.thumbshots.org/image.aspx?url=[LINK]" border="1" />

Masukkan URL tujuan

<img src="http://open.thumbshots.org/image.aspx?url=http://blogg-tutorial.blogspot.com/" border="1" />
Masukkan kode Step 2 ke blog anda, sama seperti di atas, bisa dipasang di postingan maupun gadget, disarankak kode ini dekat dengan kode Step 1
Jika ingin dimasukkan kedalam postingan supaya rapi, lihat kode berikut :

<center><table border="1" cellpadding="2" cellspacing="1" style="margin-top:2px;"><tbody><tr><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://blogg-tutorial.blogspot.com/" border="1" /><a href="http://blogg-tutorial.blogspot.com/">Om Kempul</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://updatechordgitar.blogspot.com/" border="1" /><a href="http://updatechordgitar.blogspot.com/">Chord Gitar</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://boso-inggris.blogspot.com/" border="1" /><a href="http://boso-inggris.blogspot.com/">Learn English</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://loan-studies.blogspot.com/" border="1" /><a href="http://loan-studies.blogspot.com/">Personal Loan and Credit</a></td></tr><tr><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://redysatria.cn/" border="1" /><a href="http://redysatria.cn/">Redy Satria</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://listen-dangdut.blogspot.com/" border="1" /><a href="http://listen-dangdut.blogspot.com/">Listen Dangdut</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://a.ndri.info/" border="1" /><a href="http://a.ndri.info/">Andri Nawawi</a></td><td align="center"><img src="http://open.thumbshots.org/image.aspx?url=http://miscah.blogspot.com/" border="1" /><a href="http://miscah.blogspot.com/">Blog Go Blog</a></td></tr></tbody></table></center><br />__________<br /><a href="http://www.thumbshots.com/" target="_blank" title="This site uses Thumbshots previews"><sub>This site uses Thumbshots previews</sub></a></p></div>
Keterangan :
1. Kode warna Coklat adalah Tabel, berfungsi supaya gambarnya tertata rapi

2. Kode warna Merah adalah URL tujuan

3. Kode warna Hijau adalah nama/identitas blog/website tujuan
Selamat mencoba . . . Good Luck . . .

My Friends Blog; Thumbnails and Links

noreply@blogger.com (Om Kempul) — Wed, 26 Aug 2009 21:05:00 +0000

Syukur adalah ucapan yang pantas untuk kita sebutkan, karena apa?? Karena detik ini pula Om Kempul masih di beri kesempatan untuk saling berbagi informasi, menjalin silaturahmi di dunia maya ini. Saya sangat-sangat berterimakasih kepeda semua teman-teman di dunia maya karena tidak hanya di dunia nyata saja kita bisa menjalin pertemanan ( silaturahmi ) tetapi di dunia maya pun kita juga bisa. Untuk itu, sebagai rasa berterima kasih dan untuk meluaskan silaturahmi kita, mari kita sama-sama melakukan cara yang termudah di dunia maya, yaitu Bertukar Link. Silahkan sobat sekalian me-request untuk dimasukkan linknya kedalam Blog Om Kempul dan tentunya jangan lupa back link nya dari sobat sekalian. Silahkan me-request melalui kotak komentar di bawah, Insyaallah secepatnya akan saya masukkan link sobat sekalian. Terima kasih. "Love Friendship"

Chord Gitar	Learn English	Blog Qucluk	Putry
Facebook-Hot	Goceng	Ecko	Basha The Czar
Belajar & Praktek	Berita Aneh?	Blog Pak RT	Blog Em
Buzz!	Putro Web	Cermin Hati	Computer and IT
Mind Author	Denani	Devarizt	Devy Huzairin
Dhila	Dilamazing	Dmmbaldazotes	DonBiu
Dunia Bisnis Indonesia	Dunia Boneka	Dunia Rumah	Edi Samsuri
HMJ-TM	Encyclopedia For All	ExiOST	Fuadidaud
Gatel? Garuk!	G-Cell	Hangga Nuarta	Maxi
Human Figure	Ideas Loading	Indo Nusantara	Indonesia Newspapers
Iyank Ucun	Putra Eka	Kang Jaloe	Kang Rohman
Mba Kania	Kurniawan	Learn to writing blog	Mampir Ngombe
Olivia PiNk	OOM	Pikiran Bijak	Puspa Natalia
Qunisha	Rama	Areena	Dian Apriany (Iyank)
Rohman	Rudy	Secret Affiliate	Senafal's Blog
Silemot	Slikers Info	Takatophilip	Techy-Ku
Tiara Vylette	Tiobudi	T1to	Tweakinet
Tyasmelani	Vini Firliyanti	Vinna	Yuria Chan
Budiawan Hutasoit	Frizzy's 2008	Bach-Files	yuh4n
can301	Jom-Blogger	Dhé	InaPurple
Kampanye Damai Pemilu Indonesia 2009	Mbakyuku Lyla	Learn Forex Trading	Personal Loan and Credit
Redy Satria	Listen Dangdut	Andri Nawawi	Blog Go Blog

__________
_{This site uses Thumbshots previews}

Cara Memasang Slider

noreply@blogger.com (Om Kempul) — Tue, 25 Aug 2009 19:03:00 +0000

Banyak sekali manfaat dari memasang Slider, salah satunya adalah akan membuat blog kita semakin lebih atraktif dan bergaya sehingga banyak respone dari pengunjung untuk tertarik membacanya lebih lanjut. Ngomong-ngomong sobat sekalian udah tau belum sih tentang slider yang saya maksud??? Untuk lebih jelasnya tentang slider, kita lihat demonya bersama, klik dibawah ini.

Nah sekarang sudah jelaskan tentang slider yang saya maksud? yuk langsung ja kita bahas Cara Membuat Slider:

Login ke Blogger
Masuk Tata Letak --> Edit HTML
Cari kode ]]></b:skin> , dan letakkan kode dibawah ini di atas kode ]]></b:skin>

#slider {
background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 800px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 300px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 400px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 30px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
Kemudian letakan kode javascript dibawah ini dibawah kode ]]></b:skin>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><![CDATA[//><!]]></script>
Cari kode dibawah ini:

<div id='header-wrapper'>
..........
.........
</b:section>
Kalu sudah ketemu kode diatas, letakkan kode dibaawah ini di bawahnya


<div id='casing'>

<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by Om Kempul </span>
<h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-daftar-dan-membuat-feedburnercom.html'>Pengen Nyoba Feedburner?</a></h2>
<p>Rasa-rasanya da yang kurang kalau di Blog kita belum
ada feedburner. Tanya kenapa? Karena banyak sekali
keuntungan dari feedburner. Pengen nyoba?</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UNe5LBVmzLYKnYG672qlNK2DxOm4vJQvBZGO-5hH5xOefl9eJVV7NADG6WjxsinJ5TZSBc1URBecbiBfiYRouE8wYRj8iCkKGQvtKLeyUZg53f92FkckvXRZ-LDu9ul6z6qCcTIQC5uh/s320/feedburner.png'/>
</div>

<div class='slide'>
<span class='slmet'> Posted by Putry Rasya </span>
<h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-pasang-auto-read-more-terbaru.html'>New Read More
</a></h2>
<p>Masihkah Anda menggunakan read more versi jadul??? Sekarang ada
Auto Read More yang lebih praktis dan mudah untuk digunakan.
Penasaran???.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwMk3WUq2tF9f5-ih0B0-HnHV6oq3tDieXHe0zuSv76bSLESUSrnEPwiCBYhQLtl2tcnOLfEqMd1mKw6VHj_nM-8cIZJ7XnbOVNj26FHOSu90rqpxXJ518qALTdWBEUzgjzrc-XM9eyIi/s320/read+more.png'/>
</div>

<div class='slide'>
<span class='slmet'> Posted by Om Kempul </span>
<h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
<p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
kami menyediakan panduan praktis membuat Banner..</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
</div>

</div>

</div>

</div>
<div class='clear'/>
Simpan, dan lihat hasilnya.

Peringatan :

Jika gambar latarnya tidak sesuai dengan template, bisa diubah ukurannya lalu di upload di tempat yang sama dan masukkan URL nya didalam scriptnya.Contoh yang berwarna merah.

#slider {
background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
Untuk penempatan gambar jika tidak seperti yang kita inginkan, bisa kita edit dengan cara atur ukuran yang berwarna merah.

.slide img {
position: absolute;
top: 20px;
left: 400px;
background:#fff;
padding:10px 10px;
}
Jika ingin melakukan pengeditan pada tulisan STOP, bisa di edit pada script berikut yang berwarna merah.

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 30px;
color: #AC0000;
Jika ingin melakukan pengeditan tulisan paragraf, (ingin memperpanjang ukuran tulisan atau memperpendek) edit script berikut yang berwarna merah.

.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 300px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
Pengeditan pada isi.Edit yang berwarna merah

<div class='slide'>
<span class='slmet'> Posted by Om Kempul </span>
<h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
<p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
kami menyediakan panduan praktis membuat Banner..</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
</div>

Selamat mencoba.... Good Luck . . .

Cara Membuat Efek Marquee (Tulisan Berjaalan)

noreply@blogger.com (Om Kempul) — Tue, 25 Aug 2009 09:36:00 +0000

Sobat sekalin udah tau belum Cara Membuat Efek Marquee (Tulisan Berjaalan)?? Caranya mudah kok, bagi sobat sekalian yang belum tau, tenang aja om kempul akan membahasnya di postingan kali ini. Inti dari kode HTML Marquee adalah di awali dengan tag tag <marquee> dan di akhiri tag </marquee>. Lihat contoh berikut :

marquee berjalan dari arah bawah ke atas, silahkan tunjuk ke sini

marquee dengan variasi hurup

marquee berjalan dari arah kanan ke kiri

Learn English

Hot Chord

Blogging

Nah sekarang kita pelajari kode HTML nya :

Kita harus memahami dulu atribut-atribut yang nanti akan kita gunakan :

BGCOLOR = "warna" / Untuk mengatur warna background (latar belakang) teks

DIRECTION = "left/right/up/down" / Mengatur arah gerakan teks

BEHAVIOR = "scroll/slide/alternate" / Untuk mengatur perilaku gerakan

Scroll = "teks bergerak berputar"

Slide = "teks bergerak sekali lalu berhenti"

Alternate = "teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik )"

TITLE = "pesan" / Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT = "angka" / mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY = "angka" / Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP = "angka|-1|infinite" / Mengatur jumlah loop

WIDTH = "lebar" / Mengatur lebar blok teks dalam pixel atau persen
Marquee yang berjalan dari arah Kanan ke Kiri :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

Marquee yang berjalan dari arah Kanan ke Kiri

</MARQUEE>
Marquee yang berjalan dengan arah Memantul :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

Marquee yang berjalan dengan arah Memantul

</MARQUEE>
Marquee dengan Mengunakan Latar :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

Marquee dengan Mengunakan Latar

</MARQUEE></b></FONT></div>
Marquee dari arah Bawah ke Atas, jika di sorot mouse akan berhenti gerakannya.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

Marquee dari arah Bawah ke Atas

</marquee>
Marquee juga bisa di isi dengan link

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://boso-inggris.blogspot.com/" target="new">Learn English</a><br/>

<a href="http://updatechordgitar.blogspot.com/" target="new">Update Chord Gitar</a><br/>

<a href="http://blog-qucluk.blogspot.com/" target="new">Bloggig </a><br/>

</marquee>
Peringatan :
a. Direction bisa diganti sesuai dengan kebutuhan, seperti :left, right, up, down.
b. Semua settingan seperi width, scrollamoun,height, bisa diganti sesuai kebutuhan.c.Jika mengiginkan didalam marquee terapat tulisan berbentuk link, sobat sekalian tinggan menulis isinya dengan ditambahi:<a href="alamat tujuan" target="new">Kata-kata</a>
Selamat mencoba . . . Salam Blogger.,...

Navbar Kelap-kelip

noreply@blogger.com (Om Kempul) — Mon, 24 Aug 2009 09:12:00 +0000

Coba sobat sekalian arahkan mouse ke atas pada bagian navbar saya, jika disorot mouse navbar akan muncul jika tidak disorot mouse maka navbar akan menghilang. Nah, Navbar Kelap-kelip ini akan saya kupas pada artikel saya kali ini.

Login ke Blogger
Klik Tata Letak
Klik Edit HTML
Cari kode body {
Copy kode di bawah ini dan paste di atas kode body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Klik Simpan Template

Nah sekarang sobat sekalian bisa melihat hasilnya... Selamat mencoba yah...

Cara Menampilkan Navbar di Blog

noreply@blogger.com (Om Kempul) — Mon, 24 Aug 2009 07:20:00 +0000

Perlu sobat sekalian ketahui bahwa sebenarnya menghilangkan navbar di Blogger itu ternyata melanggar TOS blogger. Dan resikonya, Blog kesayangan kita ditutup oleh pihak Blogspot. Dalam tanda kutip Kalau kita sudah memiliki domain sendiri yang berbayar barulah kita bisa hilangkan itu Navbarnya. Kebanyakan saat kita mengganti template dari jasa penyedia template gratis external Navbar telah di hilangkan. Nah, bagi sobat sekalian yang belum tahu Cara Menampilkan Navbar di Blog, sekarang ikuti tips saya berikut :

Login di Blogger
Klik Tata Letak
Klik Edit Enteri
Cari kode :

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
Kalau sudah ketemu, Hapus kode tersebut.
Klik Simpan Template

Dan lihat hasilnya . . . Selamat mencoba . . . .

Cara membuat Favicon

noreply@blogger.com (Om Kempul) — Sun, 23 Aug 2009 04:45:00 +0000

Favicon adalah gambar kecil di samping kiri address bar. Favicon juga salah satu cara mempercantik blog kita, dan juga bisa jadi logo blog kita. Apakah sobat sekalian sekarang tertarik untuk membuatnya?? Tenang saja bagi yang belum tau Cara membuat Favicon, kali ini ikuti tips dari Om Kempul :

Sobat tentuin gambar yang akan di jadikan favicon.
Ubah gambar yang sudah sobat tentuin menjadi icon (.ico). Gunakan Favicon Generator untuk mengubah extensinya menjadi .ico
Tekan tombol Browse, cari lokasi gambar yang akan di pilih.
Tekan tombol Generate Favicon!
Klik Click Here to Download Your Favicon!
Save gambar yang sudah di Generate ke komputer sobat.
Upload gambar tadi di hostingan, bisa di http://photobucket.com/ atau yang lainya.
Copy URL gambar sobat. ini contoh URL gambar saya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico
Sobat ubah alamat URL gambarnya menjadi Seperti ini:

<link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico"/>

atau bisa juga di ubah seperti berikut:

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb_p28z9ZXH2ql73zXx3mKwnf6yxcqbKMtoVTbct_glIN1KAja-0kKv0paUw0b7jTIkFlxAGJ6T1lDpCebYZJlTzdI-0CyqoSMPL1rwg9PqAuuQPEi9whMVwhG6xZVizzT3n_S4Les0AS/s320/favicon(3).ico' rel='shortcut icon' type='image/x-icon'/>
Login ke blogger
Klik Tata Letak
Klik Edit HTML
Klik Download Template Lengkap, biar nanti jika ada kesalahan bisa dikembalikan seperti semula
Cari kode <b:skin><![CDATA[/*
Paste kode URL gambar sobat yang sudah di edit tadi sebelum kode <b:skin><![CDATA[/*
Atau dengan cara lain, cari kode </head>, Paste kode URL gambar sobat yang sudah di edit tadi persis di atas kode </head>
Klik Simpan Template
Dan rasakan hasilnya . . . Good Luck . . .

Cara Membuat Tab View

noreply@blogger.com (Om Kempul) — Sun, 23 Aug 2009 03:58:00 +0000

Apakah sobat sekalian ingin membuat tab view?? Sobat sekalian belum tau cara membuatnya?? Tepat sekali bagi sobat sekalian yang belum tau Cara Membuat Tab View membuka blog saya, karena kali ini saya akan membahasnya, yuk langsung ja :

Login ke blogger
Klik Tata Letak
Klik Edit HTML
Kemudian cari kode ini ]]></b:skin>
Kemudian masukkan kode di bawah ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode-kode warna silahkan lihat DISINI
Cari kode <./head> , dan pasang kode di bawah ini sebelum </head>

<script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>
Klik Simpan Template
Masuk ke Elemen Halaman
Klik Tambah Gadget
Klik HTML/Javascript, dan masukkan kode berikut kedalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Perhatian :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabview tersebut. Sobat bisa mengisinya dengan link, gambar, banner, script dll.
Selamat mencoba yaahhh.....

Mempercepat Loading Page Blog

noreply@blogger.com (Om Kempul) — Sat, 22 Aug 2009 00:06:00 +0000

Apakah blog sobat sekalian Loading Page nya lola alias loading lambat?? Apakah sobat sekalian inginkan Mempercepat Loading Page Blog setelah merasakan lola yang lama banget??
Jika iya ikuti tips dari saya :

Silahkan buka alamat CSS Drive
Pada Compression mode, saya sarankan untuk pilih Light bagi yang baru pertama mulai utak-atik CSS, jangan langsung mencoba mode Super Compact.
Pada Comments handling, saya sarankan untuk memilih don't strip any comments terlebih dahulu bagi yang baru coba pertama kali.
Login ke blogger
Klik Tata Letak
Klik Edit HTML, beri tanda centang pada Expand Template Widget
Backup template, dengan cara klik Download Templates Lengkap. Supaya jika ada kekeliruan bisa dikembalikan seperti semula.
Selanjutnya adalah cari kode diantara :

<b:skin><![CDATA[

dan

]]></b:skin>
Copy semua script diantara kode diatas, kemudian paste di Insert CSS code
Kalau sudah klik Compress it!
Seteah di compress, klik tombol Highlight Code, lalu copy codenya kemudian paste kan code yang baru di compress tadi ke kode yang lama yang terletak diantara kode <b:skin><![CDATA[ dan ]]></b:skin>, jangan salah "code yang lama dihapus terlebih dahulu baru di paste code yang baru di compress"
Klik Simpan Template, dan rasakan kecepatan Loading Page yang berbeda dari sebelum di edit.
Selamat mencoba . . . .

Cara Mudah Mengetahui Kode Warna

noreply@blogger.com (Om Kempul) — Fri, 21 Aug 2009 22:57:00 +0000

Sekarang sobat-sobat sekalian tidak perlu membingungkan sagi soal kode-kode warna, karena kita sekarang sudah disediakan banyak sekali layanan-layanan yang akan mempermudah kita dalam aktivitas Blogging. Ini tentunya adalah kabar gembira buat sobat-sobat sekalian yang gemar mengutak-atik kode HTML template.

Get it

Yuk langsung aja kita bahas Cara Mudah Mengetahui Kode Warna :

Login ke Blogger
Klik Tata Letak
Klik Elemen Halaman
Klik Tambah Widget
Pilih HTML/Java Sript
Lalu masukkan kode di bawah ini :

        <script language='javascript'>
    function Barva(koda)
    {
    document.getElementById("vzorec").bgColor=koda;
    document.hcc.barva.value=koda.toUpperCase();
    document.hcc.barva.select();
    }
    function BarvaDruga(koda)
    {
    document.getElementById("vzorec2").bgColor=koda;
    document.hcc.Barva2.value=koda.toUpperCase();
    document.hcc.Barva2.select();
    }
    </script>

    <script type='text/javascript'>

    var hue;
    var picker;
    //var gLogger;
    var dd1, dd2;
    var r, g, b;

    function init() {
    if (typeof(ygLogger) != "undefined")
    ygLogger.init(document.getElementById("logDiv"));
    pickerInit();
    //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
    //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
    }

    // Picker ---------------------------------------------------------

    function pickerInit() {
    hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };

    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

    hueUpdate();

    dd1 = new YAHOO.util.DD("pickerPanel");
    dd1.setHandleElId("pickerHandle");
    dd1.endDrag = function(e) {
    // picker.thumb.resetConstraints();
    // hue.thumb.resetConstraints();
    };
    }

    executeonload(init);

    function pickerUpdate(newX, newY) {
    pickerSwatchUpdate();
    }

    function hueUpdate(newVal) {

    var h = (180 - hue.getValue()) / 180;
    if (h == 1) { h = 0; }

    var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

    document.getElementById("pickerDiv").style.backgroundColor =
    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    pickerSwatchUpdate();
    }

    function pickerSwatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById("pickerhval").value = (h*2);

    h = h / 180;

    var s = picker.getXValue() / 180;
    document.getElementById("pickersval").value = Math.round(s * 100);

    var v = (180 - picker.getYValue()) / 180;
    document.getElementById("pickervval").value = Math.round(v * 100);

    var a = YAHOO.util.Color.hsv2rgb( h, s, v );

    document.getElementById("pickerSwatch").style.backgroundColor =
    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    document.getElementById("pickerrval").value = a[0];
    document.getElementById("pickergval").value = a[1];
    document.getElementById("pickerbval").value = a[2];
    var hexvalue = document.getElementById("pickerhexval").value ='#'+
    YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
    ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
    if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
    }

    </script>
Klik Simpan
Klik Tab Posting, untuk menampilkan warna-wana kedalam postingan kita, kayak punya saya di atas.
Masukkan kode HTML berikut kedalam postingan :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form><p><a href="http://forantum.blogspot.com/" target="new">Get it</a></p></center>
Setelah selesai, klik Terbitkan Entri dan lihat hasilnya
Selamat mencoba ya . . . . .

PipmTheFace Cara Mudah Membuat Karikatur Wajah

noreply@blogger.com (Om Kempul) — Thu, 20 Aug 2009 16:06:00 +0000

Sobat pernah ngebayangkan ngebuat foto wajah kita menjadi karikstur? Sobat tidak perlu ribet-ribet belajar, karena sekarang sudah ada layanan yang akan memudahkan kita untuk membuat karikatur wajah, yaitu dengan Pimpn The Face. Bayangin aja kalau kita harus membuat gambaran umum mengenai sketsa karikatur wajah seseorang atau wajah kita tentu sangatlah sulit bagi yang belum berpengalaman, nah maka dari itu cobalah layanan ini, mungkin bisa membantu sobat-sobat sekalian. Kunjungi ja alamatnya http://www.pimptheface.com/

Cara Mengganti Blockquote (Tanda Petik)

noreply@blogger.com (Om Kempul) — Thu, 20 Aug 2009 13:15:00 +0000

Biasanya Blockquote itu tergantung dari templates bawaan Blog kita. Seperti templates Blog saya, Blockquote-nya dulu biasa tidak seperti itu, tapi sekarang sudah saya ganti. Dan saya berterimakasih atas infonya dari Mas Doyok berkat infonya saya jadi tau Cara Mengganti Blockquote (Tanda Petik).

Nah bagi sobat sekalian yang belum tau Blockquote itu apa, ini lah yang saya maksud tentang Blockquote. Tanda petik di sebelah kiri dari tulisan ini.

Yak langsung saja kita bahas cara membuat/mengganti Blockquote:

Silahkan sobat Login ke blogger
Klik Tata Letak
Klik Edit HTML
Centang Expand Widget Templates
Cari Kode .post blockquote {
Hapus kode diantara .post blockquote { dengan .post blockquote p { , dan ganti dengan kode dibawah ini.

background:#e4e3e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7QSANovUQ7ywFaA2lZ3Ej6tfj7X9WiJAuLQR_p1356kLM1_Ey49pprSSOcRxHTja0uVg34xdsjc5FJ-yYTtBqMoeB16PFGbO_D1asfOL0-vwAnY-Y0EtioeOhjqwIo0hcbKB3lr9x0En/?imgmax=800) no-repeat top left;
margin:0 25px 15px;
padding: 40px 15px 10px 80px; }
Simpan Temlates, dan lihat hasilnya. Selamat mencoba yah . . .

Cara Membuat BlogUpp

noreply@blogger.com (Om Kempul) — Thu, 20 Aug 2009 12:27:00 +0000

Sudah pada tau belum BogUpp itu apa? BlogUpp adalah suatu layanan gratis untuk mempromosikan Blog agar tampil dalam sebuah Blog yang di pasang dengan widget dari BlogUpp dengan menampilkan blog secara random, secara tidak langsung akan memberikan dampak kepada trafik kunjungan ke Blog kita. Nah maka dari itu tidak ada ruginya bagi sobat sekalian mencobanya, kalau belum tau Cara Membuat BlogUpp tenang saja, kali ini saya akan membahasnya, yuk langsung aja kita bahas :

Buka alamat http://www.blogupp.com/
Isikan URL Blog sobat
Klik Get widget
Setelah itu muncul kode HTML, copy kode HTML nya
Jika sobat menginginkan ganti model posisinya, caranya tinggal klik saja di atas kode HTML ada berbagai macam posisi, setelah sobat klik, maka otomatis kode HTML di bawahnya akan ikut berubah
Paste kode HTML di blog sobat dengan cara klik Tata Letak, klik Tambah Gadget, HTML/Javascript, paste kodenya lalu simpan dan lihat hasilnya.

Selamat mencoba yah Cara Membuat BlogUpp . . .