Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo Tombol kembali ke atas blog 2013

Seo Master present to you:
Ketika saya blogwalking, saya menemukan blog yang ada Tombol kembali ke atas blog, yang ketika di klik kita akan di bawah ke halaman atas blog, tampaknya tombol kembali ke atas ini sangat berguna jika kita memiliki tulisan-tulisan yang panjang di setiap posting kita. Jadi akan lebih mudah bagi pengunjung dan pembaca blog untuk kembali header, karena ketika pembaca mengklik tombol akan segera dibawa ke halaman blog yang paling atas. Dan keuntungan lain adalah membuat blog kita terlihat profesional dan indah. Untuk cara pasangnya sangat mudah kok. Ingin tahu bagaimana cara menginstalnya? silakan ikuti petunjuk di bawah ini:

- Login di Blogger.
- Pilih tata letak pada Dashboard Anda.
- Pilih Tambah Gadget.
- Pilih HTML / Javascript.
- Masukkan kode berikut.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif" /></a>
- Jika Anda sudah selesai dan klik Simpan
Jika Anda ingin mengubah gambar-gambar lainnya sesuai dengan kriteria yang Anda hanya mengubah alamat pada kode gambar di bawah ini.
http://img119.imageshack.us/img119/8589/arrowupcx2.gif
Ok selamat mencoba, contohnya bisa anda lihat di bawah blog seo tutorial blogger ini.2013, By: Seo Master

seo Cara membuat spoiler blog 2013

Seo Master present to you:
Spoiler blog biasanya digunakan untuk memperkecil atau mempersingkat kode, postingan, atau tulisan apapun agar tidak terlalu memenuhi halaman. Spoiler dapat anda pasang pada side bar, halaman posting, header dan footer.Untuk membuatnya tidaklah sulit,anda tinggal mencopy kode dibawah ini.
Berikut contoh spoiler.

Spoiler Untuk lihat Script:




Hallo.....


Cara membuat spoiler ini adalah sebagai berikut:
1.Copy dan paste kode dibawah ini
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> Untuk lihat <b>Script</b>: <input value="Lihat" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi kode script, HTML dan teks anda disini

<br>
</div>
</div>
</div>
2. Seterusnya gantilah tulisan yang yang berhuruf tebal dan berwarna hitam dan merah.
Width: 55px adalah lebar kotak spoiler.Gantilah sesuai kebutuhan anda. font-size: 11px adalah ukuran huruf dalan kotak spoiler.Dapat diganti sesuai kebutuhan. Tutup dan Lihat dapat anda ganti sesuai keinginan anda Isi kode script, HTML dan teks anda disini dapat anda ganti dengan teks atau kode script. Silakan mencoba. marchsya
2013, By: Seo Master

seo Buat kotak iklan di blogger 2013

Seo Master present to you: Kali ini kita akan ngajarin trik sederhanan cara Buat kotak iklan di blogger. Untuk fungsi kotak iklan sendiri kayaknya gak perlu jelasain lagi. Saya yakin pasti semua sudah ngerti. Ya udah langsung ke intinya yuk!

Contoh Banner Box



Cara membuat kotak iklan (Banner Box):

Pertama, masuk pada halaman Edit Html, kemudian masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[
#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}
Sudah? selanjutnya buat element halaman baru..kemudian anda tinggal memasukan kode dibawah ini.
<center><div id="Box-Banner-ads">
<a target="_blank" href="http://lerry060183.wordpress.com"><img alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"
border="0"/></a>
<a target="_blank" href="http://lerry060183.wordpress.com"><img alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"
border="0"/></a>
<a target="_blank" href="http://lerry060183.wordpress.com"><img alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"
border="0"/></a>
<a target="_blank" href="http://lerry060183.wordpress.com"><img alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"
border="0"/></a>
</div></center>
Untuk jumlah iklan anda tinggal menambahkan atau mengurangi sesuai kode dibawah ini. jangan lupa mengganti hijau dengan alamat url anda sendiri.
<a target="_blank" href="http://lerry060183.wordpress.com"><img
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
Semoga tutorial sederhana ini bisa bermanfaat.

o-om2013, By: Seo Master

seo Cara Buat Menu Drop Down Blogroll 2013

Seo Master present to you: Ini nie saya kasih tau cara bikin Drop Down Blogroll yang dipakai di blogger.com untuk itu kamu bisa memasangnya di blog blogger mu sekarang caranya cuma mudah dengan memasukkan kode di bawah ini ke dalam HTML / JAVASCRIPT di Gadget blogger :

1.Ambil dan copy/paste
<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
Keterangan :
Text yangn berwara merah adalah link. ganti text1 dan 2 tersebut dengan link kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus kamu ganti.

Contoh Seperti Ini :
<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://www.matrixar.com/"> Cara Membuat Menu Drop Down </option>
<option value="http://www.matrixar.com/"> Cara Membuat Blog </option>
</select>
2.Cara memasukkan kodenya yaitu :
1. Sesudah login, klik Tata Letak atau Layout
2. Klik Tambah Elemen atau Add Element
3. Klik HTML / JAVASCRIPT
4. Copy dan paste kode di atas
5. Klik Simpan/Save.
6. Sudah selesai.

3.Untuk menambah atau membuat link baru :

tinggal di copy / paste salah satu baris link yang ada dan ganti dengan alamat situs yang akan dimasukkan ke blog Kamu.

2013, By: Seo Master

seo Cara Pasang ShoutBox Di Blog 2013

Seo Master present to you: SEO Tutorial, kita akan bikin kotak shoutbox (buku tamu) dengan menggunakan fasilitas gratisan yang disediakan oleh oggix.com. Sebenarnya banyak penyedia shoutbox dan mereka memberikannya secara cuma-cuma tapi di tutorial ini kita pilih oggix.com> kenapa? Karena di oggix emang lebih mudah bikin shoutbox (paling tidak itu yang saya rasa). Sebelumnya kita masuk ke http://oggix.com/

untuk masuk dan daftar jadi member dulu, tenang daftarnya gratis ko. Klik register, kemudian isi form yang ada;

* Email/username : (isi dengan alamat email kamu. Alamat email ini sekaligus jadi username buat login di oggix nantinya)
* Password : (kode rahasia -hanya kamu yg tahu-)
* Confirm Password : (ulangi lagi kode rahasia tadi, yang sama ya)
* Name : (isi dengan nama kamu, jangan nama tetangga!)
* Website Title : (isi dengan judul atau tema Blog kamu)
* Website Url : (isi dengan alamat blog kamu yang akan pake shoutbox nantinya)
* Website Description : (Isi dengan penjelasan singkat mengenai Blog kamu, sedikit saja!)
* Country : (pilih negara kamu -Indonesia-)
* Security Code : (kamu liat nomor ? -biasanya tiga digit- ketik ulang di kotak bawahnya)


Setelah semua diisi klik Register dibawahnya.
Ok, tinggal login sekarang; Isi username/alamat email dan passwordnya kemudian klik login. Kita akan bikin shoutbox sekarang.

Setelah masuk ke oggix, kita akan dapetin tool-tool (alat2) disebelah kiri sebagai menu; ada Home, Avatar, Intall Shoutbox dan sebagainya ke bawah.

Karena kita akan bikin Shoutbox maka kita pilih (klik) Install Shoutbox lalu klik HTML Code. Yang kita perlukan hanya lima langkah untuk dapetin shoutbox.

1. Set shoutbox configuration (Menyetel konfigurasi)
2. Choose shoutbox type (Memilih tipe yang kita suka)
3. Choose shoutbox color (Memilih warna)
4. Choose shoutbox template (Memilih tampilan)
5. Copy and paste the HTML codes to your HTML page where you want to put the shoutbox (Dan terakhir copas alias copy-paste ke blogger baru)

1. Set shoutbox configuration (Menyetel konfigurasi)
ada:

* Enable Smilies, klik yes jika pengen pake (ikon) smile jika tidak ya klik no.
* Enable Avatar, sama seperti diatas.
* Shoutbox Time, pilih standar waktu tempat kamu tinggal. Jika kamu tinggal di bagian barat wilayah Indonesia pilih "GMT+7 Bangkok, Jakarta"
* TimeStamp, gaya tampilan tanggal dan jam kamu pengen seperti apa? atur aja!
* Flood Control, banyaknya pesan yang ditampilkan di shoutbox sisanya di hide tapi bisa dibuka juga.

Setelah klik next...

2. Choose shoutbox type (Memilih tipe yang kita suka)

Kalo udah nemuin tipe yang serasi alias cocok bin pas ama kita, klik aja Choose Thiss>>nya ga usah ragu dah.

3. Choose shoutbox type (Memilih tipe yang kita suka)

Milih warna kadang gampang kadang susah, tergantung! Warna yang kita pengen ada nggak? Atau justru kita ga tau apa warna yg kita pengen?!? Waaaaah bahaya boss. Ya udah, kira2 pilih warna yang sesuai dengan warna Blog kamu, atau justru pilih warna yang justru ga sesuai dengan warna Blog kamu... Biar kontras gituh! Kan mudah dapet perhatian... Itu semua terserah kamu. Choose This>> Kalo dah nemuin warna yang cocok.

4. Choose shoutbox template (Memilih tampilan)

Memilih tampilan ini berhubungan dengan style kita... dengan gaya dan kepribadian kita! Blogger bilang tampilan shoutbox menggambarkan kepribadian blogger tersebut, wallahu a'lam benar tidaknya, yang jelas jangan salam milih tampilan (tapi ntar dilain waktu bisa di ubah ko, tenang ajah) . Ok seperti biasa Choose This>> kalo dah menemukan tampilan buat shoutbox kamu.

5. Copy and paste the HTML codes to your HTML page where you want to put the shoutbox

Beres sudah... Sekarang tinggal masukkan kode tersebut ke blogger kamu, blogger baru! Caranya? Setelah login ke blogger dengan account google kita klik Layout-Template-Page Element. Lalu klik Add a Page Element di bagian (sidebar) kanan, tunggu sebentar lalu pilih HTML/JavaScript - ADD TO BLOG. Pada Title kita tuliskan "Buku Tamu" atau kata-kata lain yang lebih kamu sukai, misalkan "Jejak Blogger" atau yg lebih formal "Silahkan Tinggalkan Pesan Anda" atau what everlah, terserah kamu ajah. Pada Content, kamu paste kode yang dari oggix tadi.

Ingat: Kodenya jangan diubah-ubah kecuali kamu tahu bagian mana saja yang bisa diubah dan bagian mana yg tidak boleh diubah.

Klik Save . Selesai deh…..
2013, By: Seo Master

seo Cara Pasang Emotions di Kotak Komentar 2013

Seo Master present to you: Kalo kata o-om sih "ga akan lengkap kalo komentar tanpa emotions". Yupz..emang betul banget sih kayak gitu soalnya dengan adanya emotions kita jadi bisa mencurahkan perasaan kita. Nah...untuk pasang emotions di Kotak Komentar ini sebelumnya anda harus sudah pasang dulu kotak komentar blogspot, kalo belum silahkan menuju ke bikin kotak komentar di bawah postingan blog. Kalo udah langsung aja ikutin cara2 ini :

Langkah #1 (Pasang Javascript)
Anggap saja anda sekarang telah berada di menu edit HTML, Silahkan copy paste kode ini persis diatas kode tag body penutup --> </body>

<script src='http://mizwar.blog.googlepages.com/senyum.js'
type='text/javascript'/>

Jadi posisi sesudah di copy-nya seperti ini :

<script src='http://mizwar.blog.googlepages.com/senyum.js'
type='text/javascript'/>

</body>

Nah....kalo udah silahkan kasih tanda centang pada kotak expand template widget. Lalu cari kode seperti ini :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>


</b:if>

</b:if>

</p>

Jika sudah ketemu, copy paste kode berikut di bawah <p class='comment-footer'> (lihat kode diatas)
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
save template dan selesai. Untuk cara pakai-nya tinggal tambahin aja tanda emotions sesuai gambarnya.
2013, By: Seo Master

seo Cara Pasang Alexa Widget di Blog 2013

Seo Master present to you: Alexa widget merupakan salah satu aksesoris blog yang sangat berguna. Alexa widget ini akan menampilkan suatu nilai traffic atau alexa rank dari suatu blog. Jika misalnya anda masih bingung dengan yang namanya alexa rank, silahkan baca postingan saya mengenai meningkatkan alexa rank. Untuk pasang alexa widget di blogspot, caranya sangat mudah. Bagi anda yang ingin memasangnya, silahkan ikuti langkah berikut :

* Buka situs http://alexa.com/
* Di halaman pertama, klik webmaster corner (lihat gambar)


*Kemudian akan muncul suatu halaman dan klik widget (lihat gambar)


* Selanjutnya, silahkan pilih jenis tampilan alexa rank kemudian masukan alamat blog anda di jenis tampilan widget alexa rank. contoh : www.bloganda.blogspot.com


* Nah...yang terakhir, silahkan pilih jenis widgetnya kemudian copy paste script yang ada disampingnya ke dalam page element blog anda.

Nah...begitulah mengenai cara pasang widget alexa rank di blogspot. Jika ada pertanyaan, silahkan mengajukan lewat kolom komentar.
2013, By: Seo Master

seo Cara Memasang Menu Related Post by Label (Postingan Terkait dengan Label/Kategori) di Blogger Baru XML 2013

Seo Master present to you:
Setiap mania blogger selalu menginginkan blognya tampil lengkap dengan aksesori yang dibutuhkan oleh pengunjung atau widget-widget untuk kepentingan blogger itu sendiri. Pada prinsipnya, semua aksesori berupa widget tersebut, lebih dimaksudkan agar blog tampil keren dan “enak” dilihat mata. Setuju nggak?

Hanya saja, perkembangan dunia internet, termasuk per-blogger-an (blogosphere) saat ini terus melejit bahkan hingga sampai pada level : blog hampir tak bisa dibedakan dengan website lagi! Suatu evolusi teknologi informasi yang memang selalu berada beberapa puluh langkah di depan revolusi “moralitas” kita, hehe…

Postingan saya kali ini adalah tentang bagaimana memasang menu “Postingan Terkait dengan Label”, atau bahasa Inggrisnya “Related Post by Label”. Awalnya sih si Blogger Hack yang terkenal itu (Hectro) yang membuat widget ini, kemudian dimodifikasi lagi menjadi lebih sederhana oleh banyak orang, termasuk yang akan saya tampilkan di sini.

Widget “Postingan Terkait dengan Label” atau “Related Post by Label” ini memang cukup membantu para blogger meningkatkan jumlah Page View (tampilan halaman) dari blognya, karena pengunjung blog yang mendapatkan sebuah postingan dengan tema tertentu, selalu ingin informasi lebih banyak.

Jika pada bagian bawah setiap postingan tersedia layanan “Related Post” atau “Postingan Terkait”, maka kemungkinan besar orang akan mengunjungi link postingan tersebut. Bagaimana cara memasang widget “Related Post” atau “Postingan Terkait” tersebut di Blogger Beta XML?
Berikut Contohnya:

Berikut ini adalah tutorial singkatnya :
1. Buka account Blogger Beta Anda, lalu klik “TEMPLATE”, selanjutnya klik “EDIT HTML”
2. Klik “Expand Widget“.
3. Jangan lupa untuk menyimpan template Anda di Komputer atau File lain dengan meng-klik Download Full Template. Ini adalah prosedur standar (gold procedure) setiap kali Anda akan melakukan perubahan pada template Blogger Beta. Sewaktuwaktu, jika proses editing Template Blogger Anda bermasalah, maka Anda masih bisa kembali ke Template Anda sebelumnya.
4. Cari kode <data:post.body/>
5. Copy + Paste kode Java Script di bawah dan letakkan setelah kode <data:post.body/> di atas.
6. Pekerjaan selesai!
7. Jangan lupa di simpan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************http://www.matrixar.com*********************** -->

<div class='widget-content'>
<b>Postingan Terkait Lainnya Dengan Label :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
Widget by <u><a href='http://www.matrixar.com/' target='_blank'>SEO Tutorial</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>
Saya tunggu komentar Anda…2013, By: Seo Master

seo Menampilkan Label dengan Menu Dropdown 2013

Seo Master present to you: Tampilan menu Label untuk default blogspot yaitu dengan menu ul (list style). Mungkin untuk sebuah blog yang mempunyai label sedikit, tampilan tersebut tentu tidak masalah karena hanya memerlukan sedikit space di bagian sidebar. Nah....coba kalo blog tersebut mempunyai label yang banyak....berapa banyak space yang habis untuk memuat label tersebut.....Tentunya hal ini akan sangat mempengaruhi efisiensi blog kita. Nah...supaya tampilan label tidak terlalu menghabiskan space sidebar anda, saya punya trik bagaimana cara menampilkan label dengan dropdown menu. Berikut Tutorialnya :

* Seperti biasa, Login dulu di http://blogger.com/
* Di jendela dashboard, klik menu layout lalu pilih edit HTML
* Setelah itu, jangan lupa kasih tanda centang di expand template widget
* Lalu cari kode seperti di bawah ini :

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

Kalo ngga ketemu, berarti menu label anda belum terpasang. Silahkan pasang terlebih dahulu lalu ikuti langkah2nya lagi. Kalo sudah ketemu, ganti kode tersebut dengan kode di bawah ini :

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Klik save dan selesai.....2013, By: Seo Master

seo Tune up Widget yang ditampilkan dalam Blog 2013

Seo Master present to you: Blog aku berat loadingnya, kenapa ya? Banyak faktor yang mempengaruhinya, antara lain; kebanyakan script, kebanyakan image, koneksi lagi lelet, dan sebagainya. Umumnya script dan image tersebut akan dimuat dalam suatu widget, iya khan? Berkaitan dengan widget tersebut, ada trik agar sedikit-banyaknya dapat mengurangi berat loading suatu blog.

Caranya cukup sederhana yaitu :

* Widget tampil di halaman depan saja.

Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman depan.
<b:if cond="data:blog.url == data:blog.homepageUrl">
</b:if>
Contoh penggunaannya :
<b:widget id="HTML44" locked="false" title="Tips SEO" type="HTML">
<b:includable id="main">

<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>


* Widget tampil di halaman selanjutnya.

Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman selanjutnya.
<b:if cond='data:blog.pageType == "item"'>
</b:if>
Contoh penggunaannya :
<b:widget id="HTML45" locked="false" title="Trik Blogger" type="HTML">
<b:includable id="main">

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

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>

Catatan :
1. Kode di atas dapat dilihat saat kamu melakukan edit template (Tata Letak --> Edit HTML -- > centang "Expand Template Widget").
2. Pilihlah widget yang menurut kamu sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.
3. Pemilihan widget diutamakan yang memuat script dan image.

Selamat mengoptimalkan tampilan widget dalam blog...2013, By: Seo Master

seo pasang jam di blogger yuk 2013

Seo Master present to you: Banyak sekali sahabat blogger baru yang menanyakan bagaimana cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kaum hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog. Layanan gratis aksesori jam sangat banyak, namun kali ini saya hanya menjelaskan cara pasang jam menggunakan layanan gratis dan paling banyak digunakan http://www.clocklink.com/

Langkah-langkah pasang jam di blogger sebagai berikut:

1. Masuk ke http://www.clocklink.com/gallery.php
2. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
3. Pilih gambar yang ingin sobat gunakan, lalu klik "">view html" dibawah gambar jam.
4. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
5. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
6. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
7. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
8. Selesai :) dan lihat hasilnya.2013, By: Seo Master

seo Recent Comment (komentar terbaru) di Blogger 2013

Seo Master present to you: Komentar terbaru atau biasa disebut Recent Comment merupakan informasi singkat dari Komentar pengunjung yang ditampilkan secara berurutan. Untuk membuatnya kita bisa menggunakan source code dibawah. Caranya pasang tinggal copy paste code tersebut dan masukan pada halaman element blogger.
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://nama.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Jangan lupa mengubah kode pada warna pink : Ganti dengan alamat blog mu!
selamat mencoba teman.2013, By: Seo Master

seo Menampilkan Recent Post + (Thumbnails dan Comment Count) 2013

Seo Master present to you: Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari http://bloggertriks.com/. Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript dan menggunakan Feed, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar. Silahkan lihat samplenya di zoomtemplate.com


Ok tanpa banyak omonk langsung ke tutorial saja yoooo.

Untuk memasangnya caranya sangat mudah, kita tinggal copy-paste aja semua kode dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)

<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://nama.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
Apa saja yang perlu diedit?

boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NAMABLOGKAMU.com/ (Ubah sesuai URL blog masing2)2013, By: Seo Master

seo Post Rating di Blogger 2013

Seo Master present to you: Post Rating Widget adalah widget yang tampil pada setiap posting kita pada akhir post, yang dapat di vote langsung oleh pengunjung untuk menilai posting kita. Widgetnya dapat dilihat seperti gambar di bawah ini

post rating widget


Bagaimana cara menggunakannya pada blogger blogspot ?

Relatif mudah, begini caranya :

1. Login ke account blogger

2. Klik pada layout

3. Kemudian klik pada Edit HTML dan centang box "expand widget template"

4. Cari kode di bawah ini
<data:post.body/>
5. Kemudian letakkan kode dibawah ini persis dibawah kode di atas
<script language='JavaScript'>
var OutbrainPermaLink='<data:post.url/>';
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
6. save dan selesai.

Silahkan diutak-atik, kodenya dapat diletakkan dimana saja selama masih didalam include=’post’.
2013, By: Seo Master

seo Tampilkan postingan terbaru di blog 2013

Seo Master present to you: Sebelumnya sudah saya jelaskan cara membuat Recent Post dengan Javascript
. Nah sekarang akan saya jelaskan bagaimana membuat Recent Post Via Feed. Mungkin rekan akan bingung memilih yang mana...keduanya tentu mempunyai kelebihan dan kekurang. Yang jelas Recent post via JavaScript
mempunyai kelebihan dalam tampilan sedangkan menggunakan Feed dalam hal tampilan terlihat lebih sederhana namun dalam masalah loading tentu akan terasa lebih cepat.

Cara menggunakan Feed:

Pertama masuk Layout -> Element halaman -> Add a Page Element -> Feed kemudian pada Add Url masukan alamat Feed kamu, ada 2 pilihan feed yang bisa digunakan:

1. Mengunakan Feed Default Blogger

http://namablog.blogspot.com/feeds/post/default

2. Feed dengan FeedBurner

http://feeds.feedburner.com/NamaFeedPost

Jangan lupa mengganti warna merah dengan nama blog / nama feed post kamu. Selamat mencoba :)
2013, By: Seo Master

seo Modifikasi Tampilan MyBlogLog Recent Readers 2013

Seo Master present to you: Ada satu hal yang tidak saya sukai dari tampilan standar widgets MBL yang kurang nyaman memberikan kemudahan dalam mengajak pembaca bergabung dalam komunitas. Anda bisa melihat tampilannya pada gambar di bawah :


Gambar diatas tidak perlu saya jelaskan panjang lebar, anda pasti memahaminya. Nah demi meningkatkan jumlah komunitas pembaca tentu harus ada sedikit perubahan, terutama pada modifikasi tampilan, selain hanya tampak seperti thumbnails, anda juga bisa menambahkan sendiri kalimat berupa ajakan atau menghasut pengunjung agar tergabung dalam komunitas.

Cara Modifikasi tampilan MyBlogLog:

Sebelum memodifikasi tampilan, pastikan widget MBL yang anda gunakan merupakan versi lama, karena versi terbaru sudah jauh berbeda. Jika perlu anda bisa mengembalikan script baru anda ke versi lama, baca caranya: Copy paste kode dibawah ini, jangan lupa mengganti ID_MBL dengan code ID anda sendiri.
<script src="http://pub.mybloglog.com/comm2.php?mblID=ID_MBL&c_width=330&c_sn_opt=n&c_rows=2&c_img_size=h&c_heading_text=&c_color_heading_bg=eeeddf&c_color_heading=111&c_color_link_bg=eeeddf&c_color_link=c13a10&c_color_bottom_bg=ffffff" type="text/javascript"></script>
Selanjutnya pada Element halaman Blogger pilih Edit-HTML, masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[
td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}

Untuk menambah link berupa kalimat ajakan, anda dapat menggunakan kode dibawah ini, ganti warna merah NamaUserMBL dan ID_MBL sesuaikan dengan nama user dan ID MBL anda dan pastikan kode diletakan dibawah javascript MLB.
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/community/NamaUserMBL/">
Lihat pembaca yang tergabung komunitas</a></p>
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/yjoin/?ref_id=ID_MBL&ref=w">
Gabung dalam komunitas ini</a></p>
Untuk lebih maksimal, anda bisa mengatur sendiri kombinasi warna dalam Script, sebaiknya sesuaikan warna background MBL dengan background template anda.
2013, By: Seo Master

seo Kolom Tukeran Link dengan tombol select All 2013

Seo Master present to you: Masuk ke Dashboard, --> Layout --> add Gadget, pilih HTML/Javascript.
Berikut adalah scriptnya..

<center>
<h2>Tukaran Link</h2>
<br/><br/>Cukup copy text dalam area dan paste dalam blog anda. <br/>Saya akan segera linkback kembali.<br/>
<a href="
http://www.matrixar.com
/" target="blank"><img alt="" src="
http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog.gif
" border="0" /></a>
</span></div></center><center><form name="select_all"><textarea rows="3" cols="13" name="text_area"> <a href="
http://www.matrixar.com
" target="blank"><img border="0" alt="" src="
http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog.gif
" /></a></textarea><br/>
<input value="Select All" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button">
</form>
</center>
- Ganti alamat blog yang berwarna merah dengan alamat blog anda,
- Ganti alamat link gambar yang berwarna biru dengan link gambar anda.

Hasilnya akan seperti ini :

Tukaran Link

Cukup copy text dalam area dan paste dalam blog anda.
Saya akan segera linkback kembali.







* Pilih tab Tata Letak --> Elemen Halaman.
* Tambah Gadget dalam elemen (ex: sidebar) blog kamu.
* Dalam "Tambahkan Gadget", pilih HTML/JavaScript.
* Paste kode tukaran link di atas.
* Lihat tampilan blog kamu.2013, By: Seo Master

seo Recent Post (Postingan Terbaru) 2013

Seo Master present to you: Blog bisa dibikin rame dengan beberapa pasangan widget. Betul gak? Nah, sekarang q mau sharing bagaimana cara menampilkan Postingan Terbaru dengan mengunakan java script di blog. Gampang kok. Gini caranya:

1. Login pada Blogger

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu)

3. Copy kode berikut di kotak Content:

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var
showpostdate =
false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>


4. Ganti BLOGKAMU.blogspot.com dengan URL blog kamu.

5. Angka 10 adalah jumlah posting yang ditampilkan di Recent Post.

6. Simpan deh....

2013, By: Seo Master

seo Pasang tombol tukaran link 2013

Seo Master present to you:
Nah dalam posting ini kamu langsung belajar menggunakan dua trik blogger. Yah, itung-itung sambil menyelam minum air (asal jangan kelelep).Biasanya dengan menyediakan tempat untuk bertukar link, diharapkan mampu menarik minat para blogger lain untuk memanfaatkannya.

Fungsinya bukan hanya di situ doang... Tukaran link (link exchange) juga dapat digunakan sebagai bookmark yang dipasang dalam elemen blog. Kok bisa...? Coba bayangkan jika kamu sering membaca blog yang kamu link (favorit link), kebetulan kamu lagi membuka blog sendiri.

Di sana sudah tersedia link-nya, jadi tinggal nge-klik dan langsung dibawa ke alamat blog favorit kamu. Selain itu juga dapat berguna untuk ajang promosi blog. Ketika orang lain mengunjungi blog teman kamu dan di blognya ada link kamu. Mungkin mereka tertarik untuk meng-kliknya, lumayan untuk nambah trafik walaupun tidak seberapa. Namun perlu diingat nge-link harus yang berkualitas sesuai dengan tema dan kata kunci blog kamu, agar ngga jauh-jauh amat dengan SEO.

Text area merupakan kode pembantu untuk menampung berbagai tulisan, baik yang standart maupun berupa kode-kode HTML. Fungsinya untuk memadatkan suatu tulisan supaya tampil ringkas. Coba kamu buka posting icon emosi (emoticon) dalam komentar, membuat readmore tanpa loading halaman, dan trik blogger | related posts dinamis, kelihatan panjang dan serasa menelusuri rel kereta api (posting sendiri, kok dijelek-jelekin).

Baiklah mari bersama-sama kita mulai trik blogger mengenai memasang tukaran link dengan text area :

* Siapkan image sebagai perwakilan blog kamu.

Kamu bisa membuat sendiri dengan software editor gambar atau kalau lagi malasnya kambuh cara gampang untuk membuat image atau gambar dengan mengunjungi http://www.chicklette.net/chicklet-maker/


* Simpan image kamu ke dalam media penyimpanan atau komputer dan upload ke situs penyimpanan gambar (Picassa, Flickr, Photobucket, dan sebagainya).
* Login ke account blogger kamu.
* Copy kode berikut :

<h2>Tukaran Link</h2>
<br/><br/>Cukup copy text dalam area dan paste dalam blog anda. <br/>Saya akan segera linkback kembali.<br/>
<img border="0" src="http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog-1.gif"/>
<br/>
<textarea rows="6" cols="20" name="code">
<a href="http://www.matrixar.com/" target="_blank">
<img border="0" src="http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog-1.gif"/></a>
</textarea>

* Ganti kode yang berwarna merah dengan alamat penyimpanan image kamu dan alamat blog kamu.

Catatan :
Kode rows="6" digunakan untuk mengatur tinggi text area dan kode cols="20" untuk mengatur lebar text area.

Hasilnya akan seperti ini :

Tukaran Link

Cukup copy text dalam area dan paste dalam blog anda. Saya akan segera linkback kembali.






* Pilih tab Tata Letak --> Elemen Halaman.
* Tambah Gadget dalam elemen (ex: sidebar) blog kamu.
* Dalam "Tambahkan Gadget", pilih HTML/JavaScript.
* Paste kode tukaran link di atas.
* Lihat tampilan blog kamu.
2013, By: Seo Master

seo Ternyata Astaga.com Memang Keren 2013

Seo Master present to you:
Kembali kita bersua di blog Astaga.com lifestyle on the net ini, kali ini judul Ternyata Astaga.com Memang Keren yang akan saya berikan pada artikel ini, karena apa ? karena memang pada kenyataanya portal berita astaga.com memang memberikan sebuah sensasi hebat di dalam kegiatan ngeblog saya. Ini bisa saya rasakan hari demi hari yang memang pada saat ini gebyar Astaga.com lifestyle on the net sedang gencar gencarnya di serukan oleh para blogger indonesia.

Terkadang adrenalin di tubuh ini terasa naik dan terkadang down karena melihat posisi keyword yang bagaikan ombak di tengah lautan yang terkadang naik dan turun. Memang pada awal perlombaan kontes Astaga.com lifestyle on the net ini sedikit terasa tidak percaya diri tetapi setelah melihat banyaknya dukungan dari teman-teman blogger saya menjadi lebih percaya diri untuk bisa bangkit dari ketakutan karena tidak memiliki kepercayaan diri yang tinggi dalam menghadapi para ahli dan pakar seo yang sekarang pasti lagi sibuk dan selalu siap menyalip di tikungan, emang balapan motor ya, heheheeee. Sekian dulu optimasi on page blog Astaga.com lifestyle on the net jika kurang berkenan tolong di maafkan aja ya.... Regard
2013, By: Seo Master
Powered by Blogger.