Showing posts with label Tips Blogger. Show all posts
Showing posts with label Tips Blogger. Show all posts
Cara Mengedit Template Blog Agar SEO Friendly

Cara Mengedit Template Blog Agar SEO Friendly

Berbagai cara memang telah dilakukan untuk meningkatkan optimasi SEO blogspot, seperti halnya dalam memilih template blog. Memilih template blog yang benar memang mutlak diperlukan. Jika dalam memilih template blog dengan asal-asalan, alhasil nantinya SEO blogspot kita akan kacau.

Maka pilihlah template blog Anda dengan benar. Benar disini maksudnya adalah tampilannya bagus, tidak mencolok mata, cocok untuk tema blog kita, dan yang lebih penting lagi adalah SEO Friendly.

Nah, jika mungkin Anda ingin membuat template blog Anda agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Anda. Berikut cara-caranya!

  1. Page Title
    Biasanya format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.

    Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F pada keyboard!

    <title><data:blog.pageTitle/></title>

    Kalo udah dapet kodenya, silakan Anda hapus dan ganti dengan kode berikut ini!

    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>



    Atau Anda juga bisa tambahkan dengan beberapa kata kunci (keyword).

    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | KATA KUNCI ANDA | KATA KUNCI ANDA </title>
    </b:if>



    Ganti kode "KATA KUNCI ANDA" dengan keyword yang Anda incar. Setelah semua selesai jangan lupa untuk save template.

  2. Meta Keyword dan Deskripsi
    Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Anda harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta name="description" content="DESKRIPSI BLOG ANDA" />
    <meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
    </b:if>


    Setelah itu, save template Anda.

  3. Memasang Breadcrumbs
    Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging.

  4. Memasang Related Post
    Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Anda. Caranya sudah banyak dibahas di blog-blog para guru blogging.

  5. Mematikan Setting Blog Archive (Arsip Blog)
    “Lho?”
    “Buat apa?”

    Begini, Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Anda ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Anda akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGANDA.blogspot.com/2007_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

    Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai sudah! :)

  6. Menambahkan Kode ‘Rel=Canonical’
    Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Anda tambahkan kode berikut setelah kode <head>.

    <link expr:href='data:blog.url' rel='canonical' />


    Save template dan selesai.

  7. Tag Heading
    Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Anda dengan tag H1. Caranya cari kode berikut!

    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>

    Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

    h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }


Nah, mungkin cukup sekian dulu dari saya tentang bagaimana cara mengedit template blog agar SEO friendly kali ini. Sebelumnya tips ini saya rangkum dari berbagai sumber ketika saya lama belajar SEO blogspot walaupun SEO blog saya belum seoptimal blog master di luar sana. :)

Semoga bermanfaat dan sukses selalu!

Terima kasih.
Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot



Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Cara memasang Tombol +1 Google di Blogger/Blogspot:
Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:



Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.

Secara official, ada 4 jenis button atau tombol Google +1:

Besar (tall)

Standar


Medium


Small


  1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
  2. Copy kode berikut dan paste tepat SEBELUM kode </head>

    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>


  3. Copy kode berikut:

    <!-- Google +1 Button -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='post-share-buttons' style='float:right;padding:4px;'>
    <g:plusone size="standard"></g:plusone>
    </div>
    </b:if>
    <!-- http://bloggertrik-s.blogspot.com/ -->


    Kostumisasi Tombol Google +1:
    • Ganti standard dengan tall, medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.
    • Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
    • Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak. Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.



  4. Jika ingin memasang button di bagian bawah posting, cari <div class="post-header-line-1"> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body>.
  5. Jika ingin memasang button di bagian bawah posting, cari <data:post.body> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.
  6. Save template.
Cara Mengganti Icon Pada Adress Bar

Cara Mengganti Icon Pada Adress Bar

Ada salah satu sobat yang bertanya melalui komentar "kang fatur gimana cara mengganti icon pada adress bar kaya yang punya kang fatur". OK untuk sobat raa_cassie mungkin ini jawaban dari saya, mudah-mudahan bisa membantu

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi sobat yang tidak puas dengan icon/gambar tersebut, sobat bisa menggantinya dengan gambar sesuai dengan keinginan kita. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXV-70J6SPqy5CyYmsgrL05NVDLZbt3cXoveCNC7zTLDGylLPvZPfWPT1AZRwNFZyVaV3YwiyMnHI2covsCysRTWebL7N0KJSzsaQzik93cle27677irdrVpvSYzRDUzY9fmtWmq0Zwg/s1600/Title+Bar.gif' rel='shortcut icon'/>

Ganti huruf yang dicetak tebal dan merah dengan lokasi gambar dimana sobat menyimpannya. Sobat bisa menyimpan gambarnya di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo sobat tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif


Selamat mencoba....




Efek Opening Aneh

Efek Opening Aneh

Hahahah... kayak ga ada nama yang lain aja buat efek pembuka yang satu ini ! btw karena sudah bingung buat kasih namanya, terpaksa saya kasih nama n'tu ajah.....
setelah kang fatur posting Membuat Efek Roaming Windows akhirnya kangfatur buat lagi nie yang judulnya pake aneh, Kenapa diblang aneh yaa karena membuat Jendela kita menjadi mondar mandir kaya yang lagi pusing hehe. Okay... , jika para sobat tertarik, silahkan ikuti langkah-langkah berikut :


1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan script
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget


Kemudian Copast(Copy paste) kode dibawah ini :

<script>
//Edited by Andreas fafandreo at october'2008
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>




Setelah sobat paste kode diatas, silahkan sobat klik tombol Save/simpan o.k?
Jangan lupa, karena kita menginginkan agar gadget ini beraksi pada saat awal halaman dibuka, maka letakkan gadget ini pada posisi PALING ATAS !! baik pada side bar maupun tempat gadget lainnya o.K?
Dan lihat hasilnya !! hehehe... kalian dapet opening yang bikin dag-dig-dug pengunjung !!
Mudah bukan ?

Kalau sudah dipasang... silahkan anda bagikan ilmu ini pada teman-teman yang membutuhkan, Jangan pelit ya ?

Selamat mencoba !!

Menghilangkan Navbar Blogspot

Menghilangkan Navbar Blogspot

Sobat Monik mengajukan pertanyaan yang di tulis melalui shoutMix di Blog Kang Fatur yang ini. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.


Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


6. Klik tombol Simpan Template
7. Selesai.

Selamat menikmati blog tanpa Navbar, semoga bermanfaat.



Subscribe to: Posts (Atom)