Tampilkan postingan dengan label Blogging Tutorials. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging Tutorials. Tampilkan semua postingan

Rabu, 02 Februari 2011

Cara pasang meta tag keyword dan deskripsi di blog

Melanjutkan entri sebelumnya mengenai cara mendaftarkan blog ke search engine google, maka pada entri ini saya akan membahas lagi tentang teknik seo (search engine optimation). Ada banyak teknik seo yang bisa diterapkan untuk membuat suatu blog lebih optimal, yaitu membangun backlink, memasang meta tag, mengoptimalkan konten, atau mendaftarkan blog ke search engine, misalnya google atau yahoo. Nah dari sekian teknik diatas, cara yang paling mudah diterapkan adalah memasang meta tag. Memasang meta tag pada blog sama seperti memberi identitas pada blog kita. Tujuannya agar search engine lebih mudah mengenali isi dari blog kita. Karena pertama kali yang di crawl atau ditelusuri pada blog kita adalah bagian title blog sehingga alangkah baiknya jika kita selipkan deskripsi atau keyword yang berhubungan dengan isi blog kita di bagian tersebut.




Langkah-langkah memasang meta tag di blog adalah sebagai berikut :
  • Masuk (sign in) ke blog teman-teman
  • Klik design, edit html, jangan lupa centang expand widget templates 
  • Cari code di bawah ini :
<title><data:blog.pageTitle/></title>
  • Copy script meta tag berikut di bawah code diatas

<meta name="description" content="deskripsi blog"/>
<meta name="keywords" content="keyword atau kata kunci blog"/>
<meta name="robots" content="index follow"/>

 Catatan :
 Ganti tulisan yang dicetak sesuai keterangan berikut ini :

Deskripsi blog : isi dengan deskripsi blog teman-teman, misalnya : "informasi tujuan wisata di Bali'

Keyword : isi dengan keyword atau kata kunci yang berhubungan dengan topik blog teman-teman, misalnya : "pantai, pegunungan, tempat oleh-oleh, sewa mobil". Sesuaikan dengan topik blog teman-teman, misalnya blog teman-teman tentang blogging ; "blogging trick, blogging tutorials, dst.

Index follow : pernyataan ini berarti meminta spider untuk menelusuri link yang ada pada halaman blog, jika teman-teman tidak menghendakinya gunakan perintah "
noindex nofollow".

  • Jika sudah selesai, save template
  • Terimakasih, semoga bermanfaat.

See More...

Sabtu, 29 Januari 2011

Cara mendaftarkan blog ke search engine google

Banyak cara dapat dilakukan untuk memperkenalkan blog di dunia maya, sehingga dapat menarik pengunjung sebanyak-banyaknya dan mau berkunjung kembali dilain waktu. Masalah kualitas tulisan, isi blog, dan seberapa pentingnya blog itu bagi pengunjung merupakan faktor yang paling utama agar blog tersebut tidak ditinggalkan pengunjung atau dengan kata lain mau berkunjung kembali dilain waktu. Ada beberapa cara yang dapat dilakukan diantaranya berkunjunglah sebanyak-banyaknya ke blog lain, isi shoutbox dan lebih bagus meninggalkan komentar di artikel yang sudah dibaca pada blog tersebut., karena dengan cara diatas secara tidak langsung sudah beriklan disetiap blog yang sudah dikunjungi.

Tidak jarang pengunjung melakukan pencarian artikel dengan menggunakan search engine google atau yahoo, apabila ini yang terjadi sebaiknya suatu blog didaftarkan ke search engine, agar artikel yang telah di posting dapat terditeksi di search engine tersebut. Berikut ini akan dijelaskan cara mendaftarkan sebuah blog ke salahsatu search engine yaitu google, langkah-langkahnya adalah sebagai berikut :

Memasukkan url atau alamat blog ke google
  • Daftarkan alamat blog (url) melalui alamat ini, maka akan muncul seperti gambar berikut :
  • Isi url dengan dengan alamat blog (url) teman-teman, contohnya http://bacaberitaonline.blogspot.com, isi coment dengan topik atau keterangan blog teman-teman, contohnya blogging tutorials.
  • Tuliskan verification code yang tersedia, kemudian add url.
Verifikasi dan Submit ke Webmaster Tool
  • Masuk (sign ini) ke webmaster dengan menggunakan gmail account teman-teman 
  • Setelah sign in, klik tab add url, seperti gambar berikut :
  • Masukkan alamat url teman-teman tanpa http:// atau www, contohnya bacaberitaonline.blogspot.com
  • klik continue, maka akan masuk ke home seperti gambar berikut ini :
  • Klik url teman-teman, maka akan masuk ke menu verification,  muncul seperti gambar berikut :
  • Pada blogspot pilih pada Meta Tag (add meta tag to your site's home page), copy code tersebut.
  • Masuk (sign in) ke blog teman-teman, masuk ke perancangan, edit html, centang expand widget template, cari code berikut:
<title><data:blog.pageTitle/></title>

"gunakan ctrl F agar pencarian lebih mudah"
  • Paste code yang sudah di copy setelah code diatas.
  • Setelah itu simpan template (save template)
  • Kembali ke halaman google webmaster, kemudian klik tombol Verify, untuk mengkomfirmasi pendaftara.
  • Setelah terverifikasi, maka akan masuk ke dasboard.
Sumbit a Sitemap
Setelah blog terverifikasi, maka langkah selanjutnya adalah mensubmit sitemap atau peta situs teman-teman, lankahnya adalah :
  • Cari tulisan sitemap pada dasboard, seperti gambar berikut : 

  • Klik tulisan submit a sitemap, maka akan masuk ke halaman sitemap, klik add a site, sepaerti gambar berikut :
  • Masukkan code berikut ini pada kotak isian
atom.xml?redirect=false&start-index=1&max-results=500
  • Langkah terakhir klik sumbit sitemap
Untuk melakukan pengecekan apakah proses-proses di atas berhasil, maka pada dasboard akan muncul seperti gambar di bawah ini, memang memerlukan waktu (mak. 24 jam)





See More...

Sabtu, 22 Januari 2011

Mengganti 'attribution' bawaan blogger

Template bawaan blogger sebenarnya memiliki tampilan yang sangat bagus, tetapi ada beberapa bagian yang menurut saya harus ditambahkan atau dirubah agar blog kita keliatan lebih menarik dan lebih original, salah satu yang dapat dirubah adalah attribution bawaan blogger, untungnya blogger mengijinkan penggunanya melakukan modifikasi pada css ataupun html bawaan blogger, hal yang tidak saya jumpai saat saya menggunakan wordpress, berikut ini akan dijelaskan langkah-langkah untuk melakukan perubahan terhadap attribution tersebut, attribution ini letaknya paling bawah dari sebuah blog, untuk lebih jelasnya silakan lihat gambar di bawah ini mengenai attribution tersebut :




attribution bawaan blogger


perubahan attribution

Langkah-langkah untuk mengganti attribution adalah sebagai berikut :
  • Masuk (sign in) ke blog teman-teman, masuk ke design (pengaturan), edit html, centang expand widget template tujuannya adalah agar semua code html dapat terlihat
  • Cari code html berikut ini :
<!-- outside of the include in order to lock Attribution widget -->
NB : gunakan ctrl F agar pencarian lebih cepat
  • Setelah ketemu rubah lock (merah) menjadi unlock
  • Setelah itu cari lagi code berikut
<b:widget id='HTML18' locked='true' title='' type='HTML'>
  • Setelah ketemu rubah true menjadi false
  • Save (simpan) template
  • Masuk ke page element, hapus attribution bawaan blogger, letaknya dapat dilihat pada gambar berikut ini :
klik edit dan hapus attribution
  • Setelah tehapus, langkah selanjutnya adalah menambahkan gadget (add gadget), cari html / javascript, kemudian copy code dibawah ini :


<div id='footer'>
<div class='footer section' id='footer'/>
<p>
<table border='2' cellpadding='1' cellspacing='0' width='100%'>
<tr>
<td align='left' valign='middle'>Copyright &#169; 2011 | <a href='http://bacaberitaonline.blogspot.com/' title='http://bacaberitaonline.blogspot.com/'>http://bacaberitaonline.blogspot.com/</a><br/>
Powered By <a href='http://www.blogger.com'
title='blogger'>Blogger</a><br/>
| Blogging Tutorial | Tourism | Images | Sports | Word News | Entertainment | Historic Figures |
</td>
<td align='left' valign='bottom'>
<div align='right' id='footer-right'>
<a href='http://bacaberitaonline.blogspot.com/'>Home</a>
| <a href='http://blogger.com/'>Login</a> |
</div></td>
</tr>
</table>
</p>
</div></div>




  • Seret gadget yang sudah ditambahkan ke bagian paling bawah
catatan : gantilah yang berwarna merah sesuai keinginan, contohnya : bacaberitaonline.blogspot.com diganti dengan url blog teman-teman, trus blogging tutorials,images dst. ganti sesuai isi blog teman-teman, satu lagi code-code di atas juga bisa di ganti apabila teman-teman ahli HTML (hypertext murkup language)
  • Sekian dan terimakasih


See More...

Rabu, 19 Januari 2011

Cara membuat page number ( Page 1 2 3 4 Next ) pada blog

Pada tampilan (template) bawaan dari blogger sebenarnya sudah ada keterangan untuk menemukan posting lama dari blog tersebut, tetapi apabila tampilan tersebut ingin dirubah dapat dilakukan dengan melakukan sedikit modifikasi pada bagian edit html, tujuannya adalah agar tampilan kita menjadi lebih bagus, contoh dari page number tersebut adalah sebagai berikut :






Langkah-langkahnya adalah sebagai berikut :
  • Masuk (sign in) keblog teman-teman, cari design (pengaturan), edit html, centang expand widget template tujuannya adalah agar semua code html dapat terlihat.
  • Temukan code html berikut ini :

]]></b:skin>

  "gunakan ctrl F, agar pencarian lebih mudah"
  • Copy code css berikut persis di atas code tersebut.
 "gunakan ctrl F, agar pencarian lebih mudah"
  • Copy code css berikut persis di atas code tersebut.
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

  •  Langkah selanjutnya temukan code berikut ini :
</body>
  • Copy script di bawah ini persis di atas code tersebut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>


  • Langkah terakhir, temukan code di bawah ini :
'data:label.url'
  • Ganti code tersebut dengan code berikut ini :
'data:label.url + &quot;?&amp;max-results=5&quot;'
  • Simpan (save) template dan lihat hasilnya.
See More...

Minggu, 16 Januari 2011

Cara Membuat Artikel terkait atau Related post pada blog

Artikel pada blog harus dipisahkan menurut label atau kategorinya, tujuannya tiada lain adalah untuk memanjakan si pembaca agar bisa memilih artikel sesuai dengan kebutuhannya, misalkan pembaca mencari artikel tentang blogging tutorials, akan lebih menyenangkan bagi pembaca apapila tulisan-tulisan tersebut letaknya sesuai dengan topiknya. Apabila pembaca sudah memilih satu artikel untuk dibaca, akan lebih bagus lagi mereka menemukan artikel-artikel yang terkait dengan topik tulisan tersebut, sehingga tidak perlu lagi kembali ke halaman sebelumnya, nah disini akan dibahas mengenai cara membuat hal tersebut, untuk lebih jelasnya dapat dilihat pada gambar berikut mengenai artikel terkait tersebut :


Langkah-langkah untuk membuat artikel terkait adalah sebagai berikut :
  • Masuk (sign up) keblog teman-teman, cari design (rancangan), masuk ke edit html, jangan lupa centang expand widget template agar semua code hlmt keliatan, kemudian cari scrip berikut ini :
]]></b:skin>

agar lebih mudah menemukannya silakan memanfaatkan ctrl F
  • Masukkan scrip dibawah ini persis di bawah code tersebut.


<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>





  • Cari bagian di bawah ini, tambahkan bagian yang berwarna merah

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>

  • Cari code baris post footer berikut ini :
<div class='post-footer-line post-footer-line-3'>

  • Masukkan scrip berikut di bawahnya :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

  • Selanjutnya save template (simpan perubahan)
  • Teman-teman bisa menambah gaya tampilannya dengan cara menambahkan pada halaman cssnya, tambahkan code di bawah ini sebelum code :  ]]></b:skin>
.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}
.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

Pilih ukuran fontm, misal : 15px
Pilih nilai warna, misal : #3366FF
See More...