Cara Agar Supaya Breadcrumb Terindex Google

Revisi:

Rahasia Teknik Seo dalam Cara Ampuh Agar Supaya Breadcrumb Terindex Google

Seakan iri melihat blog-blog master seo yang memiliki breadcrumb/breadcrumbs yang dapat terindex di Google.

Lihat screenshot gambar dari blog sahabat saya yang breadcrumb-nya dapat terindex google berikut ini:

Di blog teknik seo blogger ini sendiri memang sulit meiliki breadcrumb yang dapat terindex seperti itu,tapi setelah posting ini mudah-mudahan breadcrumb pada blog tutorial ini dapat cepat terindex.

Nah,dalam kiat seo blogger template kali ini,kita akan ngbahas masalah ini sob,yup! bagaimana trik dan teknik agar blogger templates yang kita miliki seo friendly dengan optimasi dari breadcrumb.

Cara Membuat Breadcrumb Seo Friendly

Bagi sobat yang belum membuat breadcrums sebaiknya sobat bikin dulu ya,dan beruntung jika sobat belum membuatnya,karena breadcrumb seo friendly ini,akan kita ciptakan sore hari ini.

Pertama,pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<b:includable id='main' var='top'>

Nah jika sobat sudah temukan,hapus kode tersebut dan gantilah dengan kode berikut:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah itu simpan templates sobat.

Tips Agar Breadcrumbs Terindeks di Google

Berikut tips dan trik agar breadcrumbs dapat diindex mesin pencari google:

1. Buatlah label blog yang tidak terlalu banyak (buatlah 1 atau 2 nama label saja)
2. Cantumkan label entry pada sidebar atau bagian footer blog (karena ini akan memungkinkan traffik dari link ini)
3. Nama label usahakan tidak jauh dari tema posting (misal posting tentang 'belajar seo' maka nama label usahakan seperti nama 'tutorial belajar seo',dll)
4. Intinya,buatlah posting yang sangat bermanfaat dan tidak bersifat menipu pengunjung
5. Buatlah pengunjung sangat tertarik dengan isi dari nama label yang ingin sobat shoot
6. Berdo'a :D

Semoga saja,dalam Teknik Seo Blogger Template ( Bag.2 ) - Cara Agar Breadcrumb Dapat Terindex posting kali ini,sedikit dapat membantu dan memberi harapan sobat blogger yang mulai terkikis rasa percaya dirinya dari langkah yang diambil Google terhadap blogspot.
Keep Post!

Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter)

Trik Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter) di Blogger

Pernahkah sobat menjumpai sebuah blog dengan menampilkan kode (hal ini berhubungan dengan cara membuat posting kode di blogger post pent-) yang dilengkapi dengan fitur Print button dan View plain seperti gambar dibawah ini?

Klik di SINI untuk tampilan lebih besar.

Fitur seperti ini sangat membantu,terlebih jika sobat ingin menjadikan kode yang sedang disimak ingin disimpan dalam flashdisk (dalam bentuk *.txt) maupun sekedar untuk di print.

Sangat berbeda dengan tampilan kode biasa,apalagi yang menggunakan text area,hal ini sangat sulit untuk didokumentasikan baik dalam flash disk maupun print.
Tak banyak berpengaruh memang,tapi selain membuat tampilan kode lebih profesional (chie) juga akan tampak menarik.

So,gimana cara kita mendapatkan hasil copy-nya? betul gan,tinggal klik 'View Plain' pada fitur yang disediakan.
Contoh live-nya sobat bisa lihat di postingan di SINI

Nah,gimana gan?

Langkah dan Cara Membuat Tampilan Print & View Kode Posting Syntax Highlighter

Sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat BAWAH nya letakkan script berikut:

<script src='http://mrpujiajadeh.comze.com/shCore.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCpp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCSharp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCss.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushDelphi.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJava.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJScript.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushPhp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushRuby.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushVb.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushSql.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushXml.js' type='text/javascript'>
</script>

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:


.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }


Setelah itu,cari lagi kode berikut:

</body>

Setelah sobat ketemukan,letakkan script berikut tepat di ATAS nya:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Lalu simpan templates sobat.
Sebagai langkah terakhir,kita terapkan dalam posting,ikuti langkah berikut ini:
Pertama,sobat kunjungi dashboard lalu pilih 'New Post'


Lihat Gambar lebih Besar di SINI

Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'


Lihat Gambar lebih Besar di SINI

Kemudian cara menerapkannya letakkan script berikut:


<pre name="code" class="JScript">
Saya belajar membuat tampilan kode di Blogger.
Tampilan kode Syntax Highlighter gan!
</pre>


Lalu publikasikan dan lihat hasilnya :D
**kode warna biru adalah kode yang ingin ditampilkan (tentu untuk menampilkan kode di posting blog telah kita share beberapa waktu lalu pent-)

Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize

Seperti Apa Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize) Ini?

Masih dengan teknik jquery yang sama seperti trik dan cara memperlebar widget pada posting yang lalu.

Yup,membuat Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize).
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Tombol Memperbesar / Memperkecil Huruf Blogger

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#main&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:


<div id='resizeFont'>
<input id='large' type='button' value='Perbesar Huruf'/>
<input id='reset' type='button' value='Ukuran Normal'/>
<input id='small' type='button' value='Perkecil Huruf'/>
</div>


Simpan Templates dan lihat hasilnya.

Untuk kode yang berwarna biru,sobat sesuaikan dengan attribut yang sobat inginkan,misal sobat ingin mengatur mengubah huruf dengan tombol ini pada bagian #main-wrapper atau #content-wrapper maka ganti kode berwarna biru tersebut dengan tag tersebut.

Membuat Menu Horizontal dengan Efek jQuery

Seperti Apa Menu Horizontal dengan Efek jQuery Ini?

Mengingat waktu yang sudah malam gan,saya share langsung kepermasalahannya aja ya.

Yup,membuat menu dengan efek memanjang ke kanan menggunakan jQuery.
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Menu Horisontal dengan jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.memanjang&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;100%&quot;}, 400);
$(this).hide();$(&#39;.menyusut&#39;).show();
});

$(&#39;.menyusut&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;200px&quot;}, 400);
$(this).hide();$(&#39;.memanjang&#39;).show();
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

#menuguegitu {
width:200px;
height:50px;
background:#999999;
}

.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:

<div id='menuguegitu'><div class='membuatbordermelengkungroundedcorner'>
<center><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/">Home</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/search">Index</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/feeds/posts/default">New!</a> | <a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Facebook</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Twitter</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Google+</a></center></div></div>
<br/><br/>
<div id='button-wrapper'>
<button class='memanjang'>Tampilkan Menu Horizontal</button>
<button class='menyusut' style='display:none;'>Kembalikan</button>
</div>

Simpan dan lihat hasilnya :D
Berhubung waktu sudah larut,edit sendiri ya sob sesuai dengan attribut yang sobat inginkan.See you dan Moga sukses ya nguliknya ya gan!

Javascript Jam dan Tanggal (Membuat / Memasang Jam dan Tanggal dengan Javascript)

Cara Memasang Waktu / Jam dan Tanggal di Blogger Blogspot dengan Javascript

Adakah tampilan baru di blog sederhana ini? Betul sob,tanggal dan jam yang terdapat pada header blog seperti pada blog ini.

Script ini sengaja saya padukan dari berbagai script yang sebenarnya sudah bertebaran di serp paman Google.
Namun sebagai referensi semata tutorial ini sangat efektif dan tidak mempengaruhi dalam proses loading.

Adalah 'sebel' yang akan kita alamai saat memasang sebuah 'widget' dari pihak ketiga dan dalam waktu beberapa bulan saja widget yang kita pasang sduah tak bisa tampil karena 'pihak ketiga' yang bersangkutan sudah tak menyediakannya lagi.
Tapi,yaah,itulah resiko gan.

Tapi ada solusi jitu,kita dapat memasang script sendiri untuk menciptakan widget berupa jam dan tanggal,yup! dengan javascript sob.
Dan caranya pun sangat mudah,sobat tinggal pergi ke AC Hardware dan beli jam juga kalender disana,EH SALAH!!! maksudnya pergilah ke Dashboard lalu pilih Tata Letak / Design,pilih tab Edit Html dan contreng tulisan Expand Widget Templates:

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.pelajaranblogareakeren {border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.pelajaranblogareakeren a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

Setelah itu simpan template ya sob.

Selanjutnya,kembali pergilah ke Dashboard lalu pilih Tata Letak / Design,pilih Add a Gadget dan pilih Html/Javascript seperti gambar berikut:





Lalu sobat letakkan script tanggal dan jam untuk blogger berikut:

<table style="border:0px" bgcolor="transparent"><tr><td> <div class='pelajaranblogareakeren'><div style='font-family:arial; color:#999999;font-size:12px;text-transform:none;'>

<script type="text/javascript">

window.setTimeout("jam()",1000);
function jam() {
var tanggal = new Date();
setTimeout("jam()",1000);

document.getElementById("mrpujiajadehclock").innerHTML=tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}

</script>

<strong><div id="mrpujiajadehclock"></div></strong></div></div></td><td><div class='pelajaranblogareakeren'><div style='font-family:arial; color:#999999;font-size:12px;text-transform:none;'>
<script type="text/javascript">

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new

Array("Minggu","Senin","Tuesday","Rabu","Kamis","Jumat","Sabtu")
var montharray=new
Array("January","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write("<b>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+"</b>")

</script></div></div></td><td></td></tr></table>

Simpan dan lihat hasilnya :D
Untuk kode yang berwarna hijau sobat sesuaikan sendiri sesuai selera dan keinginan,moga berhasil ya sob :D

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)

Yuk! Menghias Kotak Pencarian Blogger!

Lain dengan materi posting Pelajaran Blog beberapa waktu lalu yang membahas juga seputar kotak pencarian,kali ini kita hanya sebatas menghiasnya saja (pembaca:yah..ga seru dong!)

Tunggu dulu sob,ini bisa diterapkan di form apa aja kok,ya salah satunya pada form kotak pencarian yang akan dibahas pada sore hari ini :D

Memang contohnya seperti apa sih?,coba saja sobat lihat kotak pencarian di SINI

Gimana? ingin mencobanya sob? ikuti ya gan.

Langkah Memodifikasi Kotak Pencarian dengan Tooltip jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='http://mrpujiajadeh.comze.com/gips.css' rel='stylesheet' type='text/css'/>
<script src='http://mrpujiajadeh.comze.com/gips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;input#purple&#39;).gips({ &#39;theme&#39;: &#39;purple&#39;, autoHide: true, text: &#39;This is purple tooltip, auto hide after pausess time elapses.&#39; });
$(&#39;input#green&#39;).gips({ &#39;theme&#39;: &#39;green&#39;, placement: &#39;left&#39; });
$(&#39;input#yellow&#39;).gips({ &#39;theme&#39;: &#39;yellow&#39;, autoHide: true, placement: &#39;right&#39; });
$(&#39;input#red&#39;).gips({ &#39;theme&#39;: &#39;red&#39;, placement: &#39;bottom&#39; });
});
</script>

Setelah itu simpan templates.

Kemudian,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:

<div id="demo"><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="red" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
</form></div>

Simpan template sobat dan lihat hasilnya :D

Ref:

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)
Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value
Membuat Auto Clear pada Mesin Pencari
Membuat Search Engine sendiri pada Blog

Inilah 8 Inti Teknik Seo (Tingkat Mahir)

Rangkuman 8 Langkah Teknik Seo Paling Manjur,100% Bekerja!

Seo atau search engine optimization adalah salah satu upaya agar postingan atau konten sebuah situs/blog maupun website masuk dalam dalam daftar pencarian search engine,Google pada khususnya.
Trik maupun teknik seo yang telah Pelajaran Blog sharing di beberapa waktu lalu dalam label 'Seo dan Monetizing' saya kira sudah cukup menjelaskan bagaimana teknik dasar sebuah website agar terindex di serach engine result page.

Namun,inti dari optimasi seo adalah backlink.Yup! itulah inti dari teknik seo yang tak pernah akan usang meskipun sebuah search engine berulang kali merubah algoritma mereka.
Bagaimana menerapkan backlik secara efektif?

Inilah yang akan kita sharing dalam posting sore hari ini gan,semoga postingan yang akan kita bahas ini dapat bermanfaat terkhusus untuk blogger-blogger pemula yang mulai 'ngfans' dalam dunia perseoan.

Backlink atau tautan balik ini dapat kita ciptakan dan dapatkan dalam banyak cara,namun yang akan ditulis dalam artikel ini adalah inti dari sebuah teknik seo itu sendiri dalam mendapatkan sebuah backlink.

Perhatikan ilustrasi berikut sob:

1.Saya membuat blog baru yang pertama,dengan judul utama 'Belajar Teknik Seo Tingkat Mahir'

2.Saya akan membuat sebuah posting awal dalam blog pertama saya tersebut dengan judul 'Dasar dalam Belajar Teknik Seo untuk Tingkat Mahir'

Mengapa saya menggunakan judul tersebut,betul sob,untuk langkah awal,usahakan judul sebuah postingan menjadi sebuah media keterangan dari judul utama sebuah blog.
Hal ini sangat berguna untuk menunjang search engine membaca 'paling tidak' judul utama blog yang kita miliki.

3.Saya akan membuat posting kedua dalam blog pertama tersebut dengan judul 'Mengapa Harus Teknik Seo Tingkat Mahir?'

Dengan tanpa membuat spam title,postingan kedua ini sangat membantu untuk mengangkat dari posting pertama,dengan catatan dalam posting kedua usahakan meletakkan link dari url postingan pertama.
Dengan demikian,jika judul utama sebuah blog sudah terindex,maka judul posting pertama sebuah blog otomatis akan menyusul masuk dalam daftar pencarian sebuah mesin pencari.

Itu berarti,kita sudah menempatkan dalam daftar mesin pencari daripada judul utama,postingan pertama dan postingan kedua.

4.Dari dua posting yang telah kita ciptakan,usahakan kedua posting tersebut dapat dilihat minimal 10 atau 20 pengunjung perhari.

Bagaimana caranya?
Sangat mudah sob,lakukan chating dengan teman atau blogwalking (berkomentar di blog teman),usahakan teman yang berinteraksi dengan kita,hari itu pula dapat melihat halaman posting kita.
Kita bisa menggunakan jasa twitter,facebook dan situs jejaring sosial sejenisnya untuk melakukan usaha ini.

5.Saya akan membuat blog baru kedua dengan judul utama 'Trik dan Teknik Seo Tingkat Mahir' sebagai dummy.

Mengapa harus menggunakan judul utama dalam blog kedua yang saya ciptakan seperti tersebut diatas? Betul sob,ini adalah salah satu upaya untuk mengangkat judul utama dari blog yang pertama kita ciptakan.
Bagaiamana hal ini bisa bekerja?

Logikanya adalah dengan menciptakan dummy blog (blog kedua yang kita buat),meskipun dummy ini tak sempurna terindex mesin pencari,tetapi mesin pencari akan mencari daftar nama blog yang lebih sempurna dalam optimasinya dengan nama yang sama,dan hal ini mesin pencari akan melirik blog utama yang kita pertama ciptakan,yakni dengan title 'Belajar Teknik Seo Tingkat Mahir',dan akan lebih baik lagi dari blog dummy (blog kedua yang kita ciptakan) tersebut kita mencantumkan link blog utama dari blog pertama yang kita buat.

6.Buatlah blog dummy sebanyak yang sobat inginkan,tapi ingat sob,jangan membuat blog sama persis dengan blog utama,bukan tidak mungkin justru blog dummy tersebut akan masuk sandbox Google dan tak dapat membantu banyak dalam optimasi.

Usahakan judul yang wajar meskipun hanya sebuah blog dummy (blog pembantu),misal dengan judul uatama seperti; Tutorial Teknik Seo Tingkat Mahir,Panduan Teknik Seo Tingkat Mahir,Tips dan Trik Belajar Seo Tingkat Mahir dan sejenisnya.

7.Baik blog utama maupun blog pembantu usahakan menjadi referensi pengunjung dalam menunjang belajar seo mereka,jadi jangan coba membuat blog 'ecek-ecek' atau sekedar copas sana sini gan,ada resiko yang sangat besar disana.

8.Lakukan update konten (bisa dengan cara menambah posting setiap hari) dan lakukan pula pemeliharaan juga perawatan blog secara berkala (bisa dengan membuat tampilan menarik,rapi dan navigasi yang mudah) agar pengunjung betah berlama-lama dalam mengunjungi blog utama yang kita miliki.

Wah,ternyata mudah ya belajar seo itu,betul sob,inti dari teknik seo adalah sebuah backlink dan pageview.
Selamat berkreasi dan beroptimasi :D