Showing posts with label Website. Show all posts
Showing posts with label Website. Show all posts

Thursday, September 19, 2013

Blogspot Membuat Related Post yang Menarik

Blogspot Membuat Related Post yang Menarik. Related Post adalah internal link yang di generated oleh blog atau website kita. Sangat penting karena selain internal link itu sendiri penting untuk SEO juga untuk membuat pengunjung bisa lebih lama berada di website atau blog kita.
Blogspot Membuat Related Post yang Menarik

Biasanya terletak di bawah halaman artikel kita. Berisi artikel - artikel yang sejenis dengan artikel yang sedang di baca oleh pengunjung.
Hari ini saya akan mencoba untuk berbagi bagaimana membuat related post yang menarik dengan menggunakan blogspot sebagai platform.

Langkah - Langkah Membuat Related Post yang Menarik :

1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
Blogspot Membuat Related Post yang Menarik

2. Cari kode di bawah
]]></b:skin>

3. Tambahkan kode di bawah ini, tepat di atas
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding:17px 15px 10px;
background-color:#F0F0F0;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
margin:10px 0;
}
#related-posts .widget{
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMsnIFx5Fj1JfdU6SvIswtAIQIao3SIO4vTQtdzXNIxKbYwnfws5sftyNe3DLMTADSXLMlnk5ZJVNTWwdTcLPlSJm7nEAfbHfc1oviqzJ_mPUEZ1_tSdrNZkxorJwL7qBGkyn1XRgpR8/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 5px;
padding-left: 30px;
padding-top:0px;}

4. Cari kode di bawah ini
</head>

5. Letakkan kode di bawah ini tepat diatasnya
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://droidvan.googlecode.com/svn/related_articles_2.js' type='text/javascript'/>

6. Letakkan kode di bawah sesuai dengan selera anda, namun biasanya di letakkan di bawah artikel.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-
script&amp;callback=related_results_labels&amp;max-results=6&quot;'
type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

7. maxresults bisa anda rubah sesuai keinginan anda, berapa jumlah link artikel yang ingin anda tampilkan. Save dan anda sudah berhasil membuat Related Posts pada Blogspot.

Selamat Mencoba...

Friday, September 13, 2013

Membuat Navigasi Halaman Blogspot

Membuat Navigasi Halaman Blogspot. Banyak cara kita lakukan untuk memudahkan visitor untuk mengakses halaman demi halaman dari webiste atau blog kita. Memberikan bradcrumbs dan navigasi adalah salah satu cara yang bisa kita lakukan, oleh sebab itu pada hari ini saya akan mencoba untuk mengajarkan cara yang paling mudah untuk membuat tombol navigasi halaman.

Membuat Navigasi Halaman Blogspot

Gambar di atas adalah contoh Navigasi Halaman yang akan kita buat, sebelumnya lakukan backup template blog atau website anda.

Note: Mohon backup template blog anda sebelum menambahkan navigasi halaman ke blog anda.
Langkah - langkah Membuat Navigasi Halaman Blogspot :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
Membuat Navigasi Halaman Blogspot
2. Cari kode di bawah ini
]]></b:skin>

3. Tambahkan kode dibawah ini tepat di atas nya.
.pagenavi{
clear:both;
margin:10px auto;
text-align:center;
border-bottom: 1px solid #DFDFDF;
padding-bottom: 10px;
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#48d;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
4. Cari kode di bawah ini
<b:includable id='post' var='post'>

5. Tambahkan kode di bawah, tepat diatas nya.
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 7,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script src='https://droidvan.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

6. Anda bisa mengatur sendiri berapa hanya artikel yang ingin di muncul, dengan mengatur variable perPage, untuk panjang angka yang akan di tampilkan bisa di atur dengan merubah variable numPages

7. Click Save....

Selamat Mencoba

Wednesday, September 4, 2013

Cara Membuat Breadcrumbs di Blogspot

Cara Membuat Breadcrumbs di Blogspot. Breadcrumbs merupakann salah satu cara kita untuk memberitahukan kepada pengunjung halaman / lokasi pada blog atau website kita. Yang di maksudkan agar pengunjung mengetahui di mana lokasi artikel yang mereka baca.
Breadcrumbs di buat dengan tujuan untuk mempermudah pengunjung melihat halaman di blog atau website kita tanpa kesulitan. Juga bisa digunakan untuk SEO dengan menambahkan kata kunci di setiap barisnya. Sebagai contoh jika anda menulis artikel tentang Cara Sharing Printer Windows XP maka akan mengcreate tag dengan kata kunci yang anda bidik.
Cara Membuat Breadcrumbs di Blogspot

jadi sekarang anda mengetahui bahwa Breadcrumbs sangat berguna untuk SEO OnPage blog atau website anda.

Cara Membuat Breadcrumbs di Blogspot
Note: Mohon backup template blog anda sebelum menambahkan breadcrumbs navigasi ke blog anda.

Ikuti langkah - langkah di bawah :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
Cara Membuat Breadcrumbs di Blogspot

2. Cari kode di bawah
<b:include data="top" name="status-message"></b:include>

3. Gantikan dengan kode di bawah
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

4. Cari kode di bawah
<b:includable id='main' var='top'>
5. Gantikan dengan kode di bawah
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Seluruh Artikel <b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

6. langkah berikut untuk memasang css pada breadcrumb yang sudah kita buat, cari kode di bawah
]]></b:skin>

7. letakkan kode di bawah, di atas kode yang ada di langkah "6", jika anda mengerti tentang css anda bisa memodifikasi kode dibawah sesuai dengan selera anda.
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:11px;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

8. Click "Save"

Selamat Mencoba ...

Monday, August 26, 2013

Google SandBox, Ada dan Tiada ?

Google SandBox, Ada dan Tiada ?. Tanggal 26 Agustus 2013 tepatmya hari senin ada yang ganjil dengan blog baru saya, traffik yang biasanya mencapai 700 uv/day turun drastis. Hari sabtu 24 Agustus 2013 trafik hanya 682 uv/day dan kemudian di perparah lagi pada hari minggu 25 Agustus 2013 trafik hanya menembus angka 496 uv/day.
Google SandBox, Ada dan Tiada ?
Pikiran dalam hati, mungkin karena hari sabtu dan hari minggu kantoran dan kerja service an tutup sehingga traffik turun karena niche blog saya adalah tentang reparasi komputer, handphone, printers dll. Setelah di pantau selama 3 jam pada hari senin traffik tidak juga naik bisa di simpulkan bahwa blog saya terkena hukuman dari google.
Untuk lebih memastikannya saya menggunakan tool sandbox checker, dan benar hasil yang di dapat.
Google SandBox, Ada dan Tiada ?
Yang menjadi pertanyaan dalam hati saya :
1. Salah apa pada website saya, template saya gunakan sama dengan website saya yang sudah berumur tahunan dan tidak pernah ada problem, SEO on Page dan Off Page sama dengan ke 3 blog saya yang lain, Domain blogspot belum di pake custom, Pusing ???
2. Di Google Webmaster tidak terdapat indikasi / error yang bisa menyebabkan blog saya masuk "SandBox", bahkan pada Help di suruh check pada Search Traffic - Manual Action tidak ada pesan atau warning dari Google Webmaster. 2x Pusing ???
3. Bagaimana cara menanganinya ???

Akhirnya cari - cari referensi, masuk ke dalam forum Webmaster Google search dengan kata kunci sandbox, muncul beberapa reference yang sangat menarik, dan bisa untuk diambil beberapa kesimpulan.

Kesimpulan :
1. Google SandBox sebenarnya tidak ada, meskipun ada kebenaranya masih perlu dipertanyakan. yang ada adalah hukuman dari google karena kita tidak menaati peraturan yang diberikan.
2. Google tidak akan memperbolehkan adsense di sandingkan dengan afflicate.'
3. Type hukuman dari google :
     a. Penalty or SandBox -> blog masih berada pada search engine, namun hanya beberapa link saja. sebagian besar hilang.
     b. De-Indexed -> blog bener - benar tidak bisa di temukan di search engine, namun masih bisa di akses dengan metode direct.

Dari kesimpulan yang saya ambil di atas maka bisa saya simpulkan bahwa blog saya sedang di hukum oleh Google karena Saya memasang banner afflicate (HostGator) tanggal 20 Agustus 2013 bersamaan dengan Google Adsense.

Recovery :
hanya menuliskan artikel dan berharap Google bot mau melakukan index terhadap blog saya kembali..

:( ...

Friday, July 26, 2013

Bagaimana Optimasi Blog onPage SEO Sederhana

Bagaimana Optimasi Blog onPage SEO Sederhana. Setelah membaca artikel Cara Membuat Blog dengan Mudah anda pasti sekarang sudah memiliki blog atau website yang siap untuk di kembangkan. Blog atau website yang baru anda buat belum akan tampak di google search engine kalo belum anda optimasikan. oleh karena itu pada kesempatan hari ini akan coba saya ajarkan Bagaimana Optimasi Blog onPage SEO Sederhana.
Ada beberapa hal yang mesti anda lakukan untuk mengoptimasi blog atau website anda, berikut cara - cara nya :

Cara 1 - masuk ke menu Settings > Basic. Title harus berisi kata - kata yang relevan atau berhubungan dengan isi dari artikel yang anda buat. panjang kata - kata hanya bisa 40 - 65 huruf tidak boleh lebih. karena google hanya menampilkan 65 karakter di hasil google search. usahakan jangan menggunakan kata "dan","atau" dan kata - kata lain yang di abaikan search engine. Setingan yang lain lihat pada gambar di bawah.
Bagaimana Optimasi Blog onPage SEO Sederhana

Cara 2 - masuk ke Settings > Search Preferences. disabled meta tags yang ada di settings karena kita akan menggunakan dyanamic meta tags untuk title, description dan keywords. Set custom page not found, custom robot.txt dan custom robot header tags.
Bagaimana Optimasi Blog onPage SEO Sederhana
Custom Page Not Found
Bagaimana Optimasi Blog onPage SEO Sederhana
Custom Robot.txt
Bagaimana Optimasi Blog onPage SEO Sederhana
Custom Robot header
Cara 3 - masuk ke Settings > Other, pada settingan bagian ini yang harus menjadi perhatian adalah bagian Site Feed dan Google Analytics. pada Site Feed setting ke Full dan pada google Analytics isikan ID anda jika anda sudah mendaftar, jika belum segera mendaftar ke Google Analytics
Bagaimana Optimasi Blog onPage SEO Sederhana

Cara 4 - dynamic title, description dan keywords, masuk ke menu Templates > Edit HTML, temukan kode
<title><data:blog.pageTitle/></title>
kemudian ganti dengan
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
<meta content='Description Anda mengandung keyword' name='description'/>
<meta content='Keyword Anda' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<title><data:blog.pageName/>-Title Anda</title>
<meta expr:content='data:blog.pageName + &quot;, Description Anda mengandung keyword &quot;' name='description'/>
<meta content=' Keyword Anda &quot;' name='keywords'/>
</b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Keyword Anda &quot;' name='keywords'/>
</b:if>
ganti yang berwarna merah dengan keyword dan description anda.

Cara 5 - setelah selesai semuanya saat nya untuk mengecek blog anda, buka halaman seocentrol di sini anda juga bisa mengetahui keyword - keyword yang sangat relevan atau berhubungan dengan isi artikel anda, sekaligus bisa untuk mengkoreksi kekurangan dari blog / website yang anda buat.

Mungkin untuk cukup untuk section ini, lain kali akan di bahas kembali cara untuk mengoptimalisasi blog atau website yang lebih rumit lagi. seperti bagaimana cara membuat breadcrumb (menu navigasi), membuat recent post untuk artikel sejenis dan yang lainnya. Semoga artikel ini bisa bermanfaat.

Wednesday, July 17, 2013

Cara Membuat Blog dengan Mudah

Cara Membuat Blog dengan Mudah. Langkah awal dalam bermain SEO (Search Engine Optimization) adalah dengan membuat blog sendiri. Dalam kesempatan ini saya akan mencoba untuk berbagi bagaimana cara membuat blog dengan mudah dengan menggunakan fasilitas yang di sediakan oleh perusahaan internet terbesar di dunia "Google".

Berikut langkah - langkah yang bisa dilakukan dalam membuat blog,

langkah 1 - anda harus memiliki akun email dari gmail.com, ini merupakan syarat mutlak yang harus di miliki. karena dengan mendaftarkan diri ke gmail.com anda otomatis akan dapat menikmati semua fasilitas yang di sediakan oleh Google. jika anda belum memiliki nya segera daftar ke gmail.com
langkah 2 - setelah selesai membuat akun google, login lah kedalam google.com. klik Sign in dipojok kirim google.com

Cara Membuat Blog dengan Mudah

langkah 3 - setelah berhasil masuk dan login kedalam google.com, bukalah halaman blogger.com. jika anda sudah login ke google.com dan membuka blogger.com maka anda tinggal mengisikan password email gmail anda di kolom yang telah disediakan. sedangkan untuk usernamenya sudah terisi otomatis dan tidak bisa di ganti. 1 email dari gmail akan terhubung ke semua service yang di miliki oleh google.com

Cara Membuat Blog dengan Mudah

langkah 4 - dengan mengisikan password ke dalam kolom yang di sediakan, berarti anda sudah mendaftar ke dalam blogger.com, anda akan di minta untuk mengkonfirmasi bahwa anda telah setuju untuk menggunakan blogger service dari google.com

Cara Membuat Blog dengan Mudah

langkah 5 - dengan menekan tombol Continue to Blogger maka anda sudah berhasil mendaftar ke blogger.com. sekarang yang anda harus lakukan adalah membuat blog. tekan tombol New Blog yang ada di pojok kiri atas di bawah nama profile anda.

Cara Membuat Blog dengan Mudah

langkah 6 - maka akan muncul form Create New Blog, isilah kolom - kolom yang tersedia.
Title - isikan dengan judul yang anda inginkan untuk blog baru anda. jangan terlalu panjang dan jangan terlalu pendek usahakan agar relevan dengan isi article yang akan anda buat nantinya.
Address - isikan dengan alamat blog anda, biasanya akan diakhiri dengan .blogspot.com namun jika anda menginginkan nama yang lebih ramping dan simple anda bisa menggunakan custom domain.
Template - tema tampilan dari blog baru anda, blogger menyediakan banyak template default yang nantinya bisa anda modifikasi sendiri.
ketika anda menekan tombol Create blog! maka anda sudah berhasil membuat blog anda sendiri.

Cara Membuat Blog dengan Mudah

langkah 7 - selamat anda sekarang sudah memiliki sebuah blog, anda bisa membuat blog lagi di dalam akun yang sama. 1 akun gmail bisa memiliki lebih dari 5 blog. untuk melihat blog yang baru anda buat ketikkan alamat blog baru anda (langkah ke 6) ke dalam web browser.

Semoga artikel ini bisa bermanfaat, happy blogging

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger