Cara Mengganti Template Blogger

Cara Mengganti Template Blogger

blogger tutorial blogart   04:47

Sebenarnya blogger sudah menyediakan template yang bisa di gunakan oleh pengguna blogger, bahkan saat ini blogger sudah menyediakan template versi baru yang di lengkapi dengan template editor, sehingga kita bisa merubah tampilan blog kita baik itu gambar, susunan tata letak, warna, dsb.

Walaupun blogger sudah menyediakan template siap pakai, namun terkadang ada sebagian (mungkin sebagian besar) pengguna blog blogger menginginkan template lain yang di sediakan oleh penyedia template blogger gratis.

Nah kali ini saya sengaja menuliskan panduan cara mengganti template blogger menggunakan template yang kita inginkan (yang sudah kita download di penyedia template blogger).

Langsung Saja...

Panduan Cara Mengganti Template Blog Blogger

Jika anda tertarik ingin menggati template (tampilan) blog blogger anda silahkan ikuti langkah-langkah mengganti template blogger berikut:

Langkah Pertama

Login ke akun blogger anda kemudian klik tulisan Design/Tata Letak

Langkah KeDua

Setelah halaman tata letak sudah terbuka silahkan klik menu Edit Html

Langkah KeTiga

Upload Template yang ingin anda gunakan pada tempat yang sudah di sediakan (lihat gambar berikut)

Langkah Ke Empat
Setelah template tersebut di Upload maka akan muncul tulisan seperti ini

Ketetangan Gamar

KEEP WIDGETS = Klik ini jika tidak ingin menghapus widget yang sudah anda pasang
DELETE WIDGETS = Klik ini jika ingin menghapus widget yang sudah anda pasang
CANCEL = Klik ini jika ingin membantalkan penggantian template

Nah itulah langkah-langkah yang bisa anda lakukan untuk menggati template blog blogger. Mudah-mudahan bermanfaat dan semoga berhasil

Update

Silakan baca Tutorial Cara Mengganti Template Blogger Versi Baru

Cara Membuat Breadcrumb Di Blogger

Cara Membuat Breadcrumb Di Blogger

blogger tutorial blogart   04:04

Bagaimana Cara Bikin Navigasi Breadcrumb Di Blogger?

Sebelum saya teruskan menulis Cara Membuat Breadcrumb Di Blogger mungkin ada yang masih belum tahu apa itu Breadcrumb, jika masih belum tahu apa yang di maksud dengan breadcrumb silahkan ihat contohnya ada di blog ini, yang ada di atas judul artikel itu lo.

Okey mari kita mulai...

Cara Mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger

Langkah Pertama yang harus anda lakukan adalah login ke blogspot.com, kemudian Pilih menu Tata Letak (Layout) =>> Edit HTML, setelah anda berada di halaman Edit Html silahkan Centang bagian yang ada tulisan Expand Widget Templates.

Sekarang Cari Kode Ini

<b:includable id='post' var='post'>

Kemudian letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <b:if cond='data:post.labels'><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:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a></em>

Setelah itu silahkan simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Itu adalah cara mudah Memasang Navigasi Breadcrumb Di Blogspot/Blogger, selain cara di atasa anda bisa juga menggunakan cara lain yaitu dengan menambahkan sedikit kode CSS di template blogger anda.

Cara Pasang Breadcrumb Di Blogger + Kode CSS

Sebenarnya cara ini hampir sama dengan cara pertama, naun perbedaannya adalah cara ini di sertai dengan kode css.

Silahkan ikuti langkah-langkah di atas, setelah anda sampai pada bagian Expand Widget Templates maka lanjutkan dengan tutorial berikut.

Cari kode ini ]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Kemudian cari kode <b:includable id='post' var='post'&gt
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<div class='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <b:if cond='data:post.labels'><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:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a>
</div>

Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.

Jika di saat anda menyimpan template timbul pesan eror atau perubahannya tidak bisa di simpan silahkan cek kembali pengaturannya apakah sudah sesuai atau belum dengan tutorial yang tertulis di sini.

Gunakan h1 Untuk Title Post (Judul Artikel) Anda

Gunakan h1 Untuk Title Post (Judul Artikel) Anda

seo on page blogart   10:14

Menggunakan h1 pada title post atau judul postingan merupakan teknik SEO On Page yang bisa kita gunakan untuk mengoptimasi blog atau situs kita agar lebih SEO Friendly (Search Engine Optimization Friendly) yang tujuannya sudah pasti agar blog/situs kita bisa masuk ke halaman pencarian Google yang pertama atau dalam istilah keren nya masuk 10 besar Google :-)

Trik Optimasi Blog menggunakan tag h1 title post (judul posting) ini bukanlah hal yang baru, walaupun ini bukan sesuatu yang baru namun tidak semua orang mengetahui trik optimasi blog yang satu ini, karena cara ini cukup susah di lakukan dan harus memiliki ke ahlian khusus (Cieeh sok tau) :-)

Selain tidak banyak yang tahu cara ini juga tidak wajib di lakukan karena walaupun kita tidak menggunakan tag h1 pada title post blog atau situs kita mungkin saja masuk 10 besar Google, asalkan rajin optimasi off page saja (SEO Off Page menurut saya sangat susah, karena kita harus rajin dan konsisten optimasi nya, dan jujur saya hampir tidak pernah menjalankannya, sangat jarang).

Okey lanjut...

Lalu bagaimana cara optimasi menggunakan tag h1 pada title post?

Seperti yang sudah saya sebutkan di atas bahwa untuk optimasi blog/situs menggunakan cara ini kita harus memiliki keahlian khusus (setidaknya sedikit, atau ada panduannya).

Untuk optimasi menggunakan cara ini maka yang harus kita lakukan adalah mengedit template/themes yang kita gunakan untuk blog/situs kita tadi, dan setiap blog/website memiliki bahasa template yang berbeda-beda. Blog wordpress berbeda dengan blogger bahasa template, dst.



Untuk website berbasis web html juga berbeda dengan wordpress dan blogger, namun kalau di bandingkan mana yang paling mudah untuk pemula menurut saya hampir sama saja, yang perlu kita tahu adalah cara bagaimana mengedit template tersebut.

Secara umum semua template baik itu template website ataupun blog sudah memiliki fungsi tag h1 ini, namun sayangnya tag h1 tersebut hanya di tanamkan pada judul blog/situs saja, sehingga di semua halaman blog/situs kita tag h1 berada di judul blog/situs.

Oh ia...

Pada artikel kali ini saya sengaja tidak menuliskan cara modifikasi template agar ada tag h1 nya pada judul posting karena saya sengaja ingin membahasnya secara global saja, untuk cara memasukkan tag h1 pada template mungkin nanti akan saya tulis pada artikel khusus, namun mungkin saya akan membahas untuk blog wordpress saja, untuk blog blogger akan saya bahas di http://blog.ahmadrifai.net (tapi nanti juga)  :-)

Update 4 September 2010

Untuk mengetahui bagaimana cara pasang tag h1 pada single post wordpress silakan baca Cara Optimasi Single Post Title Pada Blog WordPress

Cara Bikin Tulisan Berjalan Di Address Bar

Cara Bikin Tulisan Berjalan Di Address Bar

blogger tutorial blogart   00:21

Bagaimana Cara Bikin Tulisan Berjalan Di Address Bar ketika orang membuka blog kita?

Pada artikel yang telah lalu saya sudah menuliskan panduan Cara Membuat Tulisan Berjalan atau Cara Membuat efek Marquee, namun artikel tersebut hanya membahas cara membuat tulisan berjalan di postingan blog atau sidebar blog saja.

Nah kali ini saya ingin menuliskan tutorial bagaimana cara bikin tulisan berjalan pada adress bar (itu lho,,, tulisan berjalannya terlihat di atas kotak untuk menuliskan alamat website maksudnya)

Membuat Tulisan Berjalan Di Address Bar

• Untuk membuat tulisan berjalan di address bar langkah pertama yang harus anda lakukan adalah Login ke Blogger
• Setelah itu klik menu Layout atau Tata letak
• Kemudian klik menu Edit HTML
• Silahkan temukan kode ini </head>
• Setelah itu kode nya sudah di temukan silakan taroh kode di bawahnya.

<script type='text/javascript'>
//<![CDATA[
msg = " --- SILAHKAN DIGANTI ";
msg = " | SILAHKAN DIGANTI | SILAHKAN DIGANTI | SILAHKAN DIGANTI | SILAHKAN DIGANTI --- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

Silahkan ganti tulisan berwarna biru dengan tulisan yang anda inginkan, nanti tulisan itulah yang akan terlihat berjalan di address bar.
Sebelum pengaturannya di simpan, sebaiknya di preview dulu.

Cara Cepat Terindex Di Search Engine Google

Cara Cepat Terindex Di Search Engine Google

SEO blogart   09:19

Bagaimana Ya Cara Cepat Terindex /Di Index Google atau masuk halaman pencarian Google?

Sebelum saya tuliskan tips agar blog kita cepat terindex di Google saya akan coba jelaskan bagaimana cara mengetahui apakah blog/website kita sudah di index Google atau belum.

Untuk mengetahui apakah blog/website kita sudah di index Google atau blog maka langkah pertama yang harus di lakukan adalah pergi ke Google kemudian tulis (www.bloganda.com atau site:www.bloganda.com) bisa juga ga pakai www, setelah itu silakan tekan enter atau tombol Telusur.

Jika pada halaman hasil pencarian blog anda sudah terlihat maka itu artinya blog anda sudah di index Google.

Namun jika pada halaman hasil pencarian blog anda belum terlihat maka blog anda belum di index Google, lantas bagaimana agar blog kita bisa masuk halaman pencarian Google (Di Index Google)?...

Berikut sedikit tips agar blog kita cepat di index search engine Google:

1. Daftarkan blog kita Ke Google + Submit Sitemap Blog Kita.


2. Submit blog ke search engine selain google seperti yahoo dsb.


3. Submit blog kita ke situs social bookmark.


4. Bertukar link dengan blog blogger lain.


5. Pasang/Sebar iklan gratis dengan menyertakan link blog anda (sebaiknya lakukan ini secara berkala).


6. Beri komentar pada blog-blog yang memiliki topik yang sama dengan blog kita.


7. Izinkan Google mengindex blog kita dengan memasang meta tag robots (<meta name="robots" content="INDEX, FOLLOW"/>
   ).


8. Terus Berusaha :-)

Itulah cara sederhana yang bisa di lakukan agar blog anda cepat di index Google.

Note*Cepat Di Index Google bukan berarti blog kita bisa masuk 10 besar Google lho.

Tukar Link - Kumpulan Link Teman

Tukar Link - Kumpulan Link Teman

lain lain blogart   12:04

Halaman ini khusus saya buat untuk sarana Tukar Link, bagi siapa saja yang berminat untuk bertukar link dengan blog http://blog.ahmadrifai.net (Blogger Tutorial) ini silakan masukkan link/alamat blog ini ke blog teman

Link : http://blog.ahmadrifai.net
Nama : Blogger Tutorial

Atau Kopi Paste kode html berikut ke blog teman

<a target="_blank" href="http://blog.ahmadrifai.net/">Blogger Tutorial</a>

Setelah itu silahkan konfirmasi dengan cara meninggalkan komentar di halaman ini. dan jangan lupa sertakan alamat blog teman + Nama untuk link blognya nanti, dan jangan lupa juga untuk menyebutkan di mana teman meletakkan link blog saya.
Oh ia... Agar adil, bagi teman yang memasang link blog ini di Sidebar/Widget yang akan terlihat di semua halaman blog maka linknya juga akan saya taroh di Sidebar/Widget juga, sehingga dapat di lihat di semua halaman blog ini.
Sedangkan bagi teman yang memasang link saya di halaman seperti halaman ini maka linknya akan saya masukkan linknya di halaman Tukaran Link ini.
Berikut Kumpulan Link Teman Blogspot Tutorial

1. Informasi Seputar Hacking
2. KRESNATEL TRONIK
3. Blogetho's Blog

Google Public DNS Solusi Koneksi Internet Lambat

Google Public DNS Solusi Koneksi Internet Lambat

Lainnya blogart   13:49

Sudah pernah dengar istilah Google Public DNS?

Google Public DNS merupakan sebuah layanan Free DNS Service yang di berikan oleh Google yang berfungsi untuk mempercepat koneksi internet dalam hal browsing.

Bagi teman-teman yang merasa koneksi yang di gunakan lambat dan sering eror maka Google Public DNS bisa menjadi solusi untuk masalah koneksi lambat atau sering eror ini, karena salah satu penyebab koneksi internet kita lambat dan sering eror adalah DNS.

Ok Mari Kita Mulai....

Cara Setting Google Public DNS Untuk Windows

Untuk pengguna Windows XP langkah pertama yang harus di lakukan adalah pergi ke Control Panel, kemudian buka Network Connections. Klik kanan dan Properties pada jaringan koneksi yang anda gunakan dan akan di seting DNS-nya, misalnya Local Area Connection.

Silakan pilih TCP/IP kemudian klik Properties, setelah muncul TCP/IP Properties silakan ganti DNS yang ada, atau isi DNS nya dengan DNS Google berikut

preferred DNS Server: 8.8.8.8

Alternate DNS Server: 8.8.4.4

Setelah DNS nya sudah di setting menggunakan Google Public DNS silakan simpan pengaturannya.

Jika masih bingung silakan lihat Video Tutorial: How to Use Google DNS Servers berikut ini

Google DNS Tutorial for Windows Vista

Itulah panduan singkat Cara Google Public DNS, mudah-mudahan bermanfaat.

Marhaban Ya Ramadhan 1431 Hijriah

Marhaban Ya Ramadhan 1431 Hijriah

ramadhan blogart   01:41

Selamat datang bulan Ramadhan (Bulan Penuh Berkah).

Alhamdulillah kita masih bisa bertemu dengan bulan ramadhan (1431 H), bulan ramadhan sering juga di sebut dengan bulan puasa yang mungkin akan mulai kita laksanakan besok  (Rabu 11 Agustus 2010). Mudah-mudahan kita mampu menunaikan ibadah puasa dan semua ibadah kita di terima.

Cara Membuat Related Post Blogger

Cara Membuat Related Post Blogger

blogger script blogart   22:21

Sebelum saya menuliskan Cara Membuat Related Post/Artikel Terkait Di Blogger saya akan coba jelaskan dulu apa sih kegunaan Related Post atau Artikel Terkait Sehingga kebanyakan blogger menggunakan Related Post atau Artikel Terkait.

Biasanya Daftar Artikel terkait dengan sebuah posting di letakkan di bawah posting tersebut, ini fungsinya adalah untuk memudahkan pengunjung blog kita untuk membaca tulisan yang masih berhunbungan dengan tulisan/artikel tersebut baik itu panduan, tutorial, cara, tips, trik, dsb. Selain itu Related post juga berguna untuk meningkatkan Page View di blog kita dan memperbanyak internal link.

Ok mari kita mulai

Panduan Membuat Artikel Terkait Di Blogger

Untuk membuat deretan Related Post Di Blogger maka kita memerlukan sebuah Script yang akan membantu kita untuk menampilkan Artikel Terkait.

Silakan login dulu ke akun blogger anda kemudian Klik Menu Template => Edit Html => Lanjutkan => Setelah itu beri centang pada pada bagian Expand Widget Templates (Pada Blog Yang Ingin Anda Pasangi Script Related Post)

Berikut Script Related Post yang harus kita pasang

<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>

Letakkan Scriprt Related Post tersebut sebelum kode </head>

Kemudian itu cari kode ini

<b:loop values='data:post.labels' var='label'>
<A expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></A><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Ganti semu kode tersebut dengan kode ini

<b:loop values='data:post.labels' var='label'>
<A expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></A><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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:loop>

Setelah itu cari kode <DIV class='post-footer-line post-footer-line-3'/> kemudian letakkan kode ini di bawahnya (***)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H4>Artikel Terkait Lainnya </H4>
<SCRIPT type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</SCRIPT>
</b:if>

(Ket***) Kode di atas adalah kode yang akan menampilkan deretan artikel terkait atau related post, anda bisa meletakkannya di tempat yang anda inginkan dan menurut anda bagus.

Sebelum menyimpan pengaturan yang sudah anda lakukan sebaiknya di cek lagi, jika sudah yakin silakan simpan perubahan nya.

Sekarang coba lihat salah satu halaman artikel blog anda, jika anda sudah melihat deretan artikel terkait di bawah posting blog maka itu artinya anda berhasil, namun jika anda tidak melihatnya mungkin ada kesalahan yang harus anda perbaiki, silakan cek lagi semua kode nya.

Oh ia....

Script Related Post ini akan menampilkan deretan artikel terkait berdasarkan label yang sama, jika tulisan/artikel anda tidak memiliki label maka related post juga tidak ada. Jika masih bingung apa itu label silakan baca : Mengenal Fungsi Label Di Blogger & Cara Penggunaannya