Tutor Blog

Cara Setting Blog Blogspot
Thursday, June 11, 2009
Hallo rekan-rekan blogger semua, sudah lama nich tidak membuat postingan lagi, kebetulan waktu itu blog saya ada masalah sedikit
mengenai settingan komentar, dimana pengunjung tidak bisa comment. Setelah diteliti, eh ternyata ada beberapa setting-anyang salah.
Lalu timbul pemikiran untuk membaginya disini buat rekan-rekan blogger yang memakai fasilitas blogspotseperti saya, untuk yang baru
membuat blog atau yang sudah tapi settingnya bermasalah, saya akan memberikan informasi Panduan Belajar Blog berupa pengaturan
yang harus di lakukan agar blog kita bisa di kenali mesin pencari sepertiGoogle,yahoo, Msn dan lain-lainnya.
Bila anda belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya berikut ini :
1. Silahkan anda Login ke blogger.com
2. Pada tampilan Dashboard Klik Setting
3. Lalu Klik tab Basic/Dasar. Disitu ada Beberapa form yang harus di isi diantaranya :
o Title/Judul ⇒ isi dengan judul blog anda sobat. Contoh : Belajar Ilmu Komputer dan Internet
o Uraian/Description ⇒ isi dengan deskripsi blog anda. Contoh : Panduan Belajar Blog | Belajar Ilmu Komputer | Belajar Internet | SEO Tips
o Add your blog to our listings/Tambahkan blog Anda ke daftar kami ? ⇒ anda pilih yes ini berfungsi agar setiap postingan kita selalu masuk
di daftar Blogger.com.
o Let search engines find your blog/Biarkan mesin pencari menemukan blog Anda ? ⇒ pilih yes
o Show Quick Editing on your Blog/Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Yes
o Show Email Post links/Tampilkan Link Posting Email ? ⇒ Sebaiknya pilih yes, tapi pilih no juga tidak masalah
o Adult Content/Konten Dewasa? ⇒ Pilih no. Kalau pilih yes berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
o Show Compose Mode for all your blog/Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Yes
o Enable transliteration/Aktifkan transliterasi ? ⇒ pilih disable, jika pilih Enable, berarti anda ingin ada button untuk mengubah karakter
biasa ke huruf hindi/India
o Lalu Klik tombol Save Settings/Simpan Pengaturan.
4. Klik tab Publishing/Publikasi untuk mengatur menu Publikasi :
o Isi Your Domain/Alamat Blog anda, Contoh : www.tentang-komputer-internet.co.cc. Biasanya alamat yang tercantum disitu adalah
langsung alamat blog anda, jadi sebaiknya jangan di rubah aja.
o Isi Word Verification
o lalu Klik tombol Save Settings/Simpan pengaturan.
5. Klik tab Formatting/Format untuk pengaturan menu format :
o Show/Tampilkan ⇒ pilihlah jumlah/angka posting yang ingin anda tampilkan. Misal : Show 7 posts on the main page, berarti posting yang
akan tampil di halaman blog anda adalah sebanyak tujuh posting. Pilih posting (jangan hari) pada menu pulldown-nya.
o Date Header Format/Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul
diatas setiap postingan kita.
o Archive Index Date Format/Format Tanggal Index Arsip ⇒ pilih model untuk pengarsipan yang anda sukai. Misal : June 2009
o Timestamp Format/Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai. Misal : 11:54 AM
o Time Zone/Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [GMT+07.00]Jakarta.
o Language/Bahasa ⇒ Pilih bahasa yang di inginkan.
o Show Title Field/Tampilkan Field judul ⇒ Pilih yes atau tidakpun tidak apa-apa
o Show Link Field/Tampilkan kolom link ⇒ pilih yes, tapi seandainya pilih tidak juga tidak apa-apa.
o Enable Float Alignment/Aktifkan perataan float ⇒ pilih yes, tapi seandainya mau pilih tidak juga tidak apa-apa
o Post Template/Template Posting. Kolom ini diisi bila anda menggunakan fasilitas Read More (Template non klasik) dan untuktemplate
klasik di artikel saya sebelumnya.
o Jangan lupa Save Settings
6. Klik tab Comments/Komentar Untuk mengatur menu komentar :
o Comments/Komentar ⇒ pilih Show/tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
o Who can Comment ?/Siapa yang Bisa Berkomentar ? ⇒ PilihAnyone/Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar
setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
o Comments Default for Posts/Default Komentar untuk Posting ⇒ pilih New Posts Have Comments/Posting baru memiliki komentar.
o Back links/Link balik ⇒ Pilih Show/tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
o Backlinks Default for Posts/Default Link Balik untuk Posting ⇒ pilihNew Posts Have Backlinks/Posting baru Memiliki Link Balik.
o Comments Timestamp Format/Format Timestamp Komentar ⇒ anda bisa memilih jenis format waktu dalam komentar, bisa dengan singkat
seperti Contoh: 8.00 PM, atau June 11, 2009 12:46 PM
o Comment Form Message/Form Kolom Komentar, dalam kolom ini anda bisa isi komentar apa saja untuk memandu pengunjung yang akan
memberikan komentarnya.
o Comment Moderation/Aktifkan moderasi komentar ? ⇒ pilih Never(sebaiknya).
o Show word verification for comments ?/Tampilkan verifikasi kata untuk komentar? ⇒ pilih Yes. ini di maksudkan agar terhindar dari
software robot dengan tujuan melakukan spam.
o Show Profile images on comments ?/Tampilkan gambar profil dalam komentar? ⇒ pilih yes. Ini dimaksudkan supaya gambar komentator
yg punya id blogger, dapat ditampilkan fotonya.
o Comment Notification Email/Email Pemberitahuan Komentar ⇒ isi dengan alamat email anda, ini di maksudkan agar setiap ada yang
berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.
o Klik tombol Save Settings/Simpan Pengaturan.
7. Klik tab Archiving/Arsipkan Untuk mengatur menu Arsip :
o Archive Frequency/Frekuensi Arsip ⇒ pilih Monthly/Bulanan.
o Enable Post Pages ?/Aktifkan Halaman Posting? ⇒ pilih yes.
o Klik tombol Save Settings/Simpan Pengaturan.
8. Klik tab Site Feed/Feed Situs untuk mengatur menu feed :
o Allow Blog Feeds/Izinkan Feed Blog ⇒ pilih Full/Penuh.
o Post Feed Redirect URL/Posting URL untuk Pengubahan Arah Feed ⇒ di isi dengan alamat feed anda di feedburner, jika belum punya, di
kosongkan saja.
o Post Feed Footer/Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsensedsb,
namun jika tidak punya, silahkan kosongkan saja.
o Jangan lupa Klik tombol Save Settings/Simpan Perubahan.
Cara setting Related Post/Link Posting di Blogger
Wednesday, June 24, 2009
Hallo rekan-rekan Blogger semua, bagi anda yang sering mengunjungi blog dan membaca salah satu postingan yang ada dalam suatu
web atau blog sering kali di bagian akhir tulisan dari postingan tersebut terdapat link yang disebutRelated Post, di mana link tersebut
masih satu topik dengan postingan yang sedang dibaca.
Tentunya dengan link Related post tersebut, anda menginginkan topik lainnya yang mempunyai kesamaan dengan pokok bahasan artikel
yang sedang dibaca, dan anda akan tergoda untuk membaca postingan yang lainnya. Nah hal inilah yang membuat pembaca setia anda
akan lebih betah berlama - lama di blog atau web anda.
Sebelumnya, saya informasikan bahwa pembuatan related post pada tulisan ini didasarkan pada satu Kategori/Label didalam Blog.
Jadi postingan anda yang satu topik harus anda kategorikan menjadi satu.
Oke Berikut ini langkah-langkah pembuatan Related Post :
1. Sign ke Blogger anda
2. Klik Layout lalu Klik Edit HTML
3. Tandai atau tick Expand widget Template
4. Lalu anda cari Kode ini :
<p><data:post.body/></p>
5. Copy kode dibawah ini, dan paste tepat dibawah kode di atas
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
6. Bila sudah, Klik Save Template
Untuk mengantisipasi kemungkinan error, alangkah baiknya kalau template asli anda di simpan terlebih dahulu.
Anda bisa merubah atau mengutak-atik angka - angka seperti dibawah ini untuk menentukan berapa link related post yang ingin anda
tampilkan.
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
Cara Mengganti Favicon Blogger di Address Bar
Tuesday, June 2, 2009
Hallo semuanya……
Artikel Panduan Belajar Blog yang akan saya berikan kali ini adalah mengenai Pengantian Favicon Blogger yang terletak di Address Bar.
Sebelumnya saya ingin bertanya, apakah diantara kalian yang mengetahui tentangFavicon ? kalau belum, Favicon adalah sebuah icon
kecil yang akan selalu muncul di pojok sebelah kiri tab dan pojok kiri Address Bar.
Icon defaultnya sebelum dilakukan perubahan adalah bersimbol B (Blogger/Blogspot) dengan background warna jingga. Nah bagi rekan-
rekan blogger sekalian jika ingin mengubah icon tersebut sesuai dengan keinginan tentu akan terlihat lebih menarik bukan ? Anda akan
memiliki Favicon sendiri sebagai Branding Blog.
Untuk membuat Favicon dan lalu menampilkannya di blog/address bar, ikuti langkah-langkah berikut ini :
 Pertama-tama anda haruslah memiliki gambar untuk favicon. Untuk anda yang memiliki keterampilan grafis, bisa membuat
sebuah logo dengan menggunakan software Adobe Photoshop, Corel Draw atau software lainnya yang anda kuasai, di export ke
format .gif atau .pngatau .jpg . Jika anda tidak memiliki keterampilan grafis, maka bisa juga mencari icon gratis di google atau bahkan bisa
juga menggunakan foto anda sendiri.
 Setelah gambar/icon dipersiapkan, uploadlah file tersebut ke websiteFavIcon from Pics. Browse lah gambar yang telah disiapkan,
Lalu klik “Generate Favicon.ico” Lihat gambar dibawah ini :
Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".
Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis sepertiGoogle
Pages, atau Photobucket.
Sekarang, login ke Blogger anda, Pilih Layout lalu klik Edit HTML.
Copy kode di bawah ini:
<link href='http://i576.photobucket.com/albums/ss209/kwangkxz/animated_favicon1.gif' rel='icon' type='image/gif'/>
Sebelumnya, rubahlah kode diatas yg berwarna merah, dengan link anda, Lalu paste persis di bawah baris kode berikut:
<b:include data="blog" name="all-head-content"/>
diatas kode ini :
<b:skin><![CDATA[
seperti gambar dibawah ini :
Setelah anda merubah alamat URL favicon dengan URL tempat anda menyimpan file favicon di file hosting. Lihat gambar di atas,
Perhatikan, bagian yang di highlight adalah contoh URL yang telah diubah. Periksa lagi apakah alamat URL sudah benar.
Jika sudah klik Save Template dan lihat hasilnya.
Jika favicon belum muncul, refresh dahulu browsernya.
Selamat mencoba ! dan semoga informasi ini bermanfaat buat anda semua.
Terimakasih
Pengaturan Blog DoFollow di Blogspot
Sunday, May 31, 2009
Halo rekan-rekan blogger semua, PostinganSEO Tips kali ini adalah mengenai Pengaturan Blog DoFollow di Blogspot anda.
Sebelum saya lanjutkan pembahasan artikel ini, saya ingin informasikan dulu mengenai keuntungan dan kerugian
Blog NoFollow dan DoFollow, supaya rekan-rekan bisa lebih jelas sebelum melakukan hal ini dan tidak salah langkah dalam mengambil
keputusan mengubah blog anda dari NoFollow menjadi DoFollow. Karena yang saya ketahui kebanyakan orang mengubah blog-nya hanya
sekedar ikut-ikutan dan tidak mengerti dampak dari perubahan tersebut.
 Blog Nofollow merupakan setting standar HTML pada suatu template blog dimana Search Engine tidak akan memberikan
peningkatan performa kepada link blog pengunjung yang berkomentar. Ini dikarenakan hyperlink tidak akan ter-indeks didalam Index
Search Engine (Tidak mendapatkan Backlink). Dalam setting ini memiliki keunggulan yaitu akan mengurangi Spam sehingga untuk blog
yang menganut No Follow pada search engine akan memiliki keuntungan
lebih besar terindeks dengan mudah di mesin google karena blog lain yang berkomentar di blog kita tidak akan mendapatkan backlink.
intinya Blog yang menganut No Follow tidak akan memberikan keuntungan backlink yang dapat meningkatkan PR terhadap blog lain yang
singah dan berkomentar.
Blog dengan system No Follow ini sangat baik untuk blog yang PR nya masih rendah. Karena dengan system No Follow ini blog anda akan
lebih besar mempunyai kesempatan untuk terindeks oleh searh engine karena blog lain yang berkomentar tidak mendapatkan backlink
sehingga kesempatan untuk berada di search engine dan menduduki peringkat teratas di search engine lebih besar dan efek nya adalah
peningkatan PR dari blog No Follow.
 Blog DoFollow adalah kebalikan dari Blog NoFollow, yaitu suatu blog yang memberikan bonus backlink secara langsung kepada
blog yang berkunjung dan berkomentar. Dengan berkomentar pada blog yang menganut Do Follow maka blog penggunjung yang
memberikan komentar akan mendapatkan backlink dari blog Do Follow sehingga blog tersebut akan terindeks di search engine, dan ini
merupakan keuntungan bagi blog yang berkomentar tapi sebaliknya bagi blog yang menganut Do Follow dikarenakan banyaknya backlink
yang terjadi dari komentar pengunjung, maka lama kelamaan blog Do Follow jadi tidak terindeks oleh google dan sebagai gantinya adalah
link blog dari pengunjung yang berkomentar yang terindeks. Melakukan komentar di blog anda sendiri atau memposting artikel anda
dengan menuliskan link blog yang menganut Do Follow saja tanpa anda perlu berkomentar di blog
Do Follow anda akan mendapatkan backlink. Jadi inti nya backlink bisa didapatkan dengan berkomentar di blog Do Follow dan juga
dengan menuliskan alamat link blog yang Do Follow. Sedangkan keuntungan dari blog yang Do Follow adalah Jumlah pengunjung. Karena
biasanya penggunjung yang tahu akan keuntungan blog Do Follow ini berusaha memberikan komentar untuk mendapatkan backlink.
Dengan mengetahui blog kita Do Follow maka blog yang datang akan tertarik berkomentar untuk mendapatkan tautan link atau backlink.
Untuk blog yang sudah Do Follow namun jarang pengunjung yang datang dan berkomentar, saya sarankan disetting No Follow saja.
Sebenarnya blog ini pun tadinya adalah menganut system NoFollow, trus sempat dirubah menjadi DoFollow, tapi di rubah lagi menjadi
NoFollow karena PR saya masih 0 dan butuh peningkatan terlebih dahulu. Kemungkinan bila sudah mencapai PR 2, akan saya rubah lagi
menjadi DoFollow karena tujuan blog ini adalah SHARE dan membantu rekan-rekan bisa meningkatkan backlink disini.
Semua terserah anda ingin pada setting awal yaitu No Follow atau sebaliknya menggubah menjadi Do Follow.
Bila anda sedang berusaha membagun blog anda untuk mendapatkan kenaikan PR maka saya sarankan setting NoFollow saja.
Saya rasa sudah cukup jelas penjelasan yang diberikan dan saya berharap rekan-rekan blogger bisa mempertimbangkan nya lagi
keuntungan dan kerugiannya sehingga tidak terjadi salah langkah.
Bagi anda yang sudah membaca penjelasan yang telah saya berikan dan masih tetap ingin mengubah blog anda dari NoFollow menjadi
DoFollow berikut langkah-langkahnya:
1. Login ke Dashboard blogger anda
2. Klik Layout lalu Edit HTML
3. Centang pada kotak Expand Template Widget
4. Cari kode seperti dibawah ini
<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
5. Hapus rel='nofollow' yang saya beri warna merah dan hasilnya akan menjadi seperti dibawah ini :
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<a expr:href='data:comment.authorUrl' ><data:comment.author/></a>
<b:else/>
</b:if>
</dt>
6. Setelah itu meghilangkan rel='nofollow' pada kolom backlink. Dengan menghapus rel='nofollow' pada kolom backlink maka anda sama
dengan menyediakan kolom untuk track jika ada yang melakukan link pada postingan.
Cari kode seperti ini :
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow' ><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
Hilangkan kode rel='nofollow' (yang berwarna merah) pada kolom backlink sehingga menjadi seperti dibawah ini :
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
7. Lalu save template anda.... dan selamat blog anda sudah berubah dari NoFollow menjadi DoFollow.
Untuk mengetahui apakah blog anda sudah dofollow atau belum, anda bisa melakukan pengecekan dengan cara klik kanan
dihalaman blog anda klik “view page source” jika anda masih menemukan tulisan rel=’nofollow‘ pada kode :
<a href=‘http://domain penulis komentar’ rel=’nofollow’>nama penulis komentar</a>
contoh : <a href=’http://www.tentang-komputer-internet.co.cc’ rel=’nofollow’>Belajar Ilmu Komputer dan Internet</a>
Ini menandakan bahwa blog anda belum dofollow.
Sebagai informasi tambahan, anda bisa melihat daftar blog dofollow di
 Blog Do Follow Indonesia
 Daftar Blog Dofollow Berbahasa Indonesia
 Do-Follow Blog untuk blog yang menggunakan bahasa Inggris.
Cara Menambahkan Gadget dibawah Header
Thursday, May 28, 2009
Hallo teman-teman Blogger semua, ada 1 Informasi buat anda nich dalam Panduan Belajar Blog kali ini, yaitu
Menambahkan Gadget dibawah Header blog anda.
Mungkin anda selama ini hanya tahu bagaimana cara menambah Gadget di halaman bagian samping atau bawah dari Page element. Lalu
bagaimana caranya bila kita ingin menambahGadget di bagian header blog kita ?
Oke, saya akan memberi tahu langkah-langkahnya berikut ini :

1. Login ke blogger anda
2. Klik Layout atau Tata Letak
3. Lalu Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Widget Templates
5. Lalu cari kode berikut ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
6. Jika sudah ketemu, lalu ganti kode diatas dengan kode berikut ini :
<b:section class='header' id='header' preferred='yes'>
7. Klik Save Template

8. Lalu klik Page Element
Elemen Halaman anda sudah berubah bukan ?
Disana ada Add a Gadget (diatas Header) yang bisa anda isi dengan apa saja yang anda inginkan.
Membuat Kotak Scrollbar Pada Blogspot
Saturday, May 16, 2009
Hallo para blogger…….

Postingan Panduan Belajar blog kali ini adalah mengenai Pembuatan Kotak Scrollbarpada Blogspot/Blogger. Saya tergerak untuk
membuat artikel ini sambil membagikan ilmu yang saya dapat, terutama saat mengubah kode HTML untuk Banner Exchange di Blog saya
(sangat berantakan kelihatannya). Kini saya membuat kotak/bingkai supaya lebih enak dipandang.
Bingkai/Kotak ini bisa anda gulung kekanan atau kebawah untuk menemukan teks lain yang tersembunyi sehingga juga bisa menghemat
ruangan pada blog kita.
Untuk membuat kotak ini caranya sangat mudah:
1. Buka Blogger anda, lalu Klik menu Layout -> Page Elements
2. Klik Add a Gadget. Lalu klik tombol + pada HTML/Javascript
3. Masukkan kode dibawah ini:
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Masukkan
teks atau kode script disini</div>
Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.
Sebagai contoh, saya memasukkan :
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Bingkai
atau kotak ini adalah sebuah penampilan yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog
anda</div>
Maka hasilnya akan seperti ini :
Bingkai atau kotak ini adalah sebuah penampilan yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog
anda
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog
Jika Anda misal ingin menambahkan gambar kedalam kotak scrollbar, maka gantilah tulisan yang dicetak tebal diatas dengan <img
src="alamat url gambar Anda" />
Sebagai contoh saya memasukkan kode ini :
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><img
src="http://i576.photobucket.com/albums/ss209/kwangkxz/tentangkomputerinternet-1.gif" /></div>
Maka hasilnya akan seperti ini :
4. Bila sudah anda lakukan, Klik Save lalu klik View Blog untuk melihat hasil hasilnya.
Selamat Mencoba..!!
Menarik bukan ?
Oke sampai disini dulu pembahasannya mengenai Belajar Blog denganKotak scrollbar, bila ada kesulitan jangan sungkan untuk
ditanyakan di kolom komentar.
Terimakasih.
Cara Memajang Video Youtube di Blog
Wednesday, May 13, 2009
Pembahasan Artikel Panduan Belajar Blogkali ini adalah mengenai Memajang/Menampilkan Video di Blog anda.
Ini adalah salah satu cara untuk mendongkrak Performance Blog anda, dan langkah-langkahnya adalah sebagai berikut :
 Kunjungi/Buka situs dihttp://www.youtube.com
 Carilah video favorit anda yang akan di pasangkan, Jika masih bingung, anda tinggal menuliskan kata kunci pada mesin pencari
di bagian atas, misalnya : Anne Ahira.
 Setelah muncul pilihan videonya, anda klik aja link nya.
 Coba anda lihat ke bagian sebelah kanan layar. Temukan tulisan → Embed. Misalkan gambarnya seperti ini :
Oke, Langkah berikutnya adalah :

 Sign in ke www.blogger.com dan masukkan ID dan Password anda.
 Lalu Klik Posting Baru
 Klik tab Edit HTML, lalu Copy kode embed yang sudah anda simpan di notepad tadi, lalu paste pada kolom untuk posting.
 Klik tombol Publish
 Selesai
Ada 1 cara lagi yg saya gunakan adalah
 Klik Layout,
 Page Element,
 Add a Gadget
 Klik Kode HTML/Java Script
 Paste-kan kode embed yang sudah anda copy tadi di kolom Content
 Isikan juga Title-nya Misal : “Anne Ahira internet marketing No. 4 Dunia”
 Lalu Klik Save
 Drag Gadget tersebut ke kolom dibawah Postingan/Blog Post
 Save
Silahkan anda lihat hasilnya.
Cara Memasang ShoutMix di Blogspot
Tuesday, May 12, 2009
Pembahasan Artikel Panduan Belajar Blog kali ini adalah mengenai ShoutMix.

Shoutmix adalah suatu tempat komunikasi dengan cara meninggalkan pesan di chatbox dan disimpan pada sebuah blog atau website, ini
akan mempermudah pengunjung untuk meninggalkan pesan. Untuk melihat contoh shoutmix anda bisa melihat di Blog saya,
klik www.tentang-komputer-internet.co.cc
Mendaftar untuk mendapatkan Shoutmix
1. Buka situs http://www.shoutmix.com
2. Lalu Klik CREATE YOUR SHOUTBOX NOW
3. Kemudian Isi Formulir (seperti gbr dibawah ini)
 Shoutbox ID:
Isi Shoutbox ID yg merupakan Username untuk mengakses Shoutbox, misalkan: kwangkxz
 Choose Password:
“Isi password anda yg diinginkan”
 Retype password:
“Isi kembali password anda (harus sama ya !)
 Name:
“Isi Nama Anda, contoh: kwangkxz”
 Email:
“Masukan email Anda, contoh kwangkxz@gmail.com“
 Checklist label ” I have read and agree to the Terms of Service.”
 Lalu, Klik continue
1. Pilihlah salah satu bentuk Shoutmix yang anda inginkan denganmeng-klik lingkaran di gambar, kemudian klik Continue
2. Lalu klik “Go to my control panel now”

3. Klik Get codes, jika ingin merubah warna atau style shoutmix
anda bisa merubah di bagian Display.
4. Tentukan Width (Lebar) dan Height (Tinggi) yang diinginkan,

atau ukurannya dibiarkan saja.
5. Blok Script (kode tulisan di bawah) dengan cara klik kanan

mouse, lalu klik copy.
CARA MEMASANG DI BLOGSPOT
1. Login ke blogspot anda
2. klik “Tata Letak” atau “Layout”
3. Klik Tambah Gadget di kiri atau kanan Layout
4. Cari dan klik HTML/Java Script
5. Masukan Judul yang diinginkan, contoh: Tinggalkan Pesan

6. Pada bagian Konten, Paste Script yang tadi diambil di
shoutmix.com
7. Kemudian klik Simpan
8. Kemudian pada Layout bagian atas klik SIMPAN (sebelah
kanan BERSIHKAN EDIT)
9. Lihat hasilnya dengan klik “Lihat Blog” pada bagian atas
Dashboard
Demikianlah artikel dalam Belajar Blog ini dibuat dan semoga bermanfaat bagi teman-teman Blogger yg ingin blognya di isi
dengan ShoutMix.
Sebenarnya selain ShoutMix, masih ada 1 cara lagi yaitu ShoutBox, dan bila anda ingin mengetahui tentang ShoutBox, bisa link ke sini.
Bila ada pertanyaan, jangan sungkan untuk bertanya di kolom ShoutMix yg saya miliki atau dengan mengiriman email kepada saya.
Terimakasih.
Membuat Read More untuk Template klasik
Selamat bertemu kembali para blogger semua, Artikel Panduan Belajar Blog saya kali ini adalah mengenai Read More.
PERHATIAN !! Artikel ini dikhususkan bagi anda yang masih menggunakan template klasik, tapi jika anda sudah menggunakan template
baru (xml/beta), silahkan baca petunjuk membuat read more di artikel saya : Cara mudah membuat “Read More”
Sebenarnya apa yg dimaksud dengan "membuat Read More" maksudnya ? Begini, sebenarnya saya kurang setuju dengan judul tersebut,
ada baiknya seperti ini :"Menu Selengkapnya", tapi berhubung kode HTML dibuat dalam bahasa Inggris, maka dibuat dengan istilah "Read
More".
Kita mulai pembahasannya. Bagi anda yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan
dengan membaca artikel ini dapat menambah pengetahuan kita tentang apa yang namanya nge-blog.
Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk
melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya...", ini di sebut trik atau kamuflase posting.
Bagi anda yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel, namun jika nanti
artikel anda sudah terlalu panjang, maka mungkin saja anda ingin membuat menu seperti ini.
Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali
ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan baca artikel saya
tentang Cara mudah membuat “Read More”.
Silahkan ikuti langkah-langkah berikut :
 Login ke blogger.com dengan id anda
 Klik menu bertuliskan Template
 Klik menu Edit HTML
 jangan lupa Copy seluruh kode template lalu paste pada notepad dan kemudian simpan, ini dimaksudkan untuk membuat back up
data apabila terjadi kesalahan dalam template setelah kita rubah, tapi kita masih punya cadangan data untuk mengembalikannya.
 Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
div.fullpost {display:inline;}
</ItemPage>
Untuk mempercepat pencarian kode </style>, silahkan anda klik menu Edityang ada pada bar menu browser, kemudian klik Find (on this
page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
 langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :
<MainOrArchivePage><br/>
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan anda klik menu Edit yang ada pada bar menu browser, kemudian
klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis kita akan di bawa ke kode
tersebut.
 Klik tombol yang bertuliskan SAVE SETTINGS
 Langkah selanjutnya adalah klik menu Setting
 Klik menu Formatting
 Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di
bawah ini :
<div class="fullpost">
</div>
Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan
muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
 kemudian jangan lupa klik tombol Save Settings
 Selesai
Cara Posting Artikel
Oke, sesudah beberapa tahap diatas kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada
menuReadmore nya.
 Klik menu Posting
 klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :
</div>
simpan artikel anda yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian simpan sisa keseluruhan artikel setelah kode
<div class="fullpost"> dan sebelum kode </div>
Agar lebih jelas, saya berikan contoh, misal artikelnya begini :
Ini adalah sebuah artikel bermanfaat mengenai Bisnis Online yg perlu anda baca dan praktekkan.
Bisnis ini bukan MLM atau Money Game, tapi merupakan Bisnis legal tanpa adanya penipuan.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah sebuah artikel bermanfaat mengenai Bisnis Online yg perlu anda baca dan praktekkan.
Read more…
sedangkan kata-kata :
Bisnis ini bukan MLM atau Money Game, tapi merupakan Bisnis legal tanpa adanya penipuan. Akan muncul bila anda mengklik Read more
nya.
Bagaimana ? sudah jelas ?. bila belum silahkan di tanyakan pada pada kolom komentar.
Sedikit informasi, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah menjadi Baca
lanjutannya...,Selengkapnya.., atau apa saja yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita
itu ada kelanjutannya.
Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span. Hasilnya akan
sama, cuma bagi anda yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah
lain yang juga memakai kode Span.
Cara mudah membuat “Read More”
Artikel Panduan Belajar Blog kali ini adalah membahas tentang cara mudah membuat fasilitas Read more.. atau dalam bahasa indonesia
bisa diartikan : Selengkapnya..
Pada template baru (XML), topik ini paling banyak di baca dan di minati oleh para blogger baru. Hal ini terlihat dari banyaknya komentar
yang masuk pada artikel tersebut, ada yang senang karena sudah berhasil dan ada juga yang sedikit kecewa karena masih menemui
kegagalan.
Dengan masih adanya kegagalan-kegagalan tersebut, maka dapat di tarik kesimpulan bahwa metode yang saya sampaikan ternyata
masih kurang untuk di pahami. Dari itu tentu harus di pikirkan cara yang tepat dalam penyampaian panduan yang baik.
Ketika anda melakukan Editting pada kode template, sebaiknya jangan memakai browser Internet Explorer terutama Internet Explorer 6,
pakailah browser lain misalnya FireFox ataupun Opera. Bagi yang belum mempunyai browser FireFox bisa mendownloadnya secara
gratis di sini!dan untuk Opera bisa mendownloadnya di sini!, Kenapa jangan memakaiInternet Explorer? ini merupakan pengalaman
pribadi saya ketika melakukan editting sering menemukan pesan error ketika memakai IE, dan apabila memakai browser lain
pesan Error tersebut tidak muncul (proses edtting sukses), dan saya pernah membaca di blogger forum banyak yang melaporkan isu ini
dan pihak blogger sendiri menyarankan untuk sementara memakai browser lain selain IE.
Bagi yang belum sukses membuat fungsi read more..., coba ikuti langkah berikut ini :
Langkah #1
 Sign in di blogger dengan id anda.
 Klik Pengaturan
 Klik Format
 Pada layar paling bawah, ada text area kosong disamping tulisanTemplate Posting, isi text area kosong tersebut dengan kode di
bawah ini :
<span class="fullpost"> </span>
 Klik tombol Simpan Pengaturan
Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih
dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.
Langkah #2
 Klik menu Dasboard
 Klik Tata Letak
 Klik tab Edit HTML
 Klik tulisan Download Template Lengkap.
 Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan
editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
 Beri tanda centang pada kotak di samping tulisan Expand Template Widget
 Tunggu beberapa saat ketika proses sedang berlangsung
 Silahkan anda cari kode berikut pada kode template milik anda :
<data:post.body/>
atau kode di bawah ini (sama saja) ;
<p><data:post.body/></p>
 Hapus kode diatas, lalu ganti dengan kode di bawah ini (klik pada tombol untuk menandai):
Top of Form
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/>
<style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
Bottom of Form
 Klik tombol Simpan Template
 Selesai.
Cara Posting Artikel
 Klik menu Posting
 Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
<span class="fullpost"> </span>
 Tuliskan artikel yang ingin tampak pada blog sebelum kode :
<span class="fullpost">
 Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</span>
 Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING
 Klik tulisan Lihat Blog(di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak.
Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas
Bagi anda yang mengikuti artikel Belajar Blog ini dan mengalami kegagalan, jangan kecewa ketika blog anda menjadi kacau, upload
kembali backup templatenya dan nanti akan kembali ke keadaan semula sebelum di edit.
Memindahkan Blogger ke domain co.cc
Bagi rekan-rekan yg sudah mengikuti artikel saya yg pertama tentang "Panduan Membuat Blog dengan Blogspot.com" dan sudah berhasil,
maka lewat artikel Panduan Belajar Blog yg ini mungkin dapat membantu rekan-rekan jika berminat memindahkan blog-nya dari
akhiran .blogspot.com menjadi berakhiran .co.cc (Domain co.cc !)Tapi sebelumnya, coba Anda cek terlebih dahulu, apakah domain
tersebut masih tersedia, dengan mengisikan nama domain yang Anda inginkan dibawah ini :
Bila domain yang Anda cek diatas ternyata tersedia / available, silahkan ikuti lagi langkah berikutnya.
Nah berikut ini langkah-langkahnya :
1. Pertama kali login ke CO.CC anda (akunnya harus dibuat sendiri yah, tinggal masukin email, dan id-lain yang dibutuhkan , plus
password). Kemudian pergi ke “Domain Setting“. Klik pada domain yang kamu buat lalu klik “Set Up”. Kemudian pilih pilihan “Zone Record”
dan isi sesuai apa yang ada di gambar ini. Gantikan www.tentang-komputer-internet.co.ccdengan domain CO.CC kamu. Pastikan ada
WWW didepannya ! Kemudian klik “Set Up“.
2. Selesai setting CO.CC-mu, login kedalam akun Blogger anda. Dan setelah login anda berhasil, kemudian tekan “Settings“.
3. Setelah memilih “setting”, Klik pada tab “Publishing“. Kemudian tekan pilihan “Custom Domain” dan klik “Switch to advanced settings“. Isi
domain anda beserta www pada field “Your Domain“. Selesai itu jangan lupa klik “Save setting“. (Harus di-Klik ya, kadang-kadang
diberlakukan pula kode sekurity pengaman)
4. Proses setup untuk domain ini kurang lebih membutuhkan waktu selama 48jam. Jadi anda mohon bersabar dahulu sebelum dapat
menggunakan domain CO.CC anda. Tapi tidak selalu sedemikian lama, terkadang tidak sampai 48 jam tapi sudah digunakan.
Membuat Website dengan Domain dan Hosting Gratisan
Friday, May 7, 2010
Hallo rekan-rekan Blogger semua dan pengunjung setia TentangKomputerInternet, kali ini Saya akan memberikan informasi tentang
caraMembuat Website dengan Domain dan Hosting Gratisan. Dan informasi ini Saya berikan sebagai langkah awal sebelum Anda
memutuskan untuk memiliki website dengan Domain dan Hosting berbayar, karena pada prinsipnya Free atau Pay itu secara teknis
adalah sama, perbedaannya adalah dari segi performance dan fitur-fitur yang lengkap bila Anda memilih yang berbayar.
Sebelumnya Saya ingin menjelaskan bahwa untuk membuat sebuah website, kita dihadapkan pada 2 hal yang sangat penting yaitu :
 Domain
 Hosting
Bila Anda sebelumnya belum tahu tentang Domain, klik Disini untuk melihat informasinya.
Begitu juga bila Anda yang belum tahu tentang Hosting, klik Disini.
Nah kali ini kita akan belajar mengenai apa saja yang dibutuhkan untuk membuat website, tapi kali ini adalah gratis dan Anda tidak perlu
membayar apapun untuk mendapatkannya.
Berikut ini adalah hal-hal yang diperlukan untuk membuat sebuah website :
Domain
Domain adalah alamat situs seperti www.namaanda.com, dan Domain tersedia berbagai macam dengan akhiran .com, .net, .co.id, dll. Dan
yang paling populer adalah menggunakan domain .com (international).
Anda bisa memilih nama apapun asalkan nama domain tersebut masih tersedia. Dan nama domain harus dibayar/disewa untuk periode
per tahun.
Nah bagi Anda yang belum mampu atau ingin mencoba Domain gratisan, anda bisa mendaftar di co.cc. dan masa gratis tersebut biasanya
hanya 1 tahun, dan berikutnya Anda harus Renew kembali atau membayar bila ternyata pihak co.cc mengetahui kalau website Anda
digunakan untuk berjualan / berbisnis online. Domain co.cc ini adalah yang paling populer menurut Saya, seperti yang Anda lihat alamat
atau URL website ini yaituwww.tentang-komputer-internet.co.cc adalah domain dengan menggunakan co.cc cuma saja hostingnya masih
menggunakan Blogspot dan belum memiliki hosting sendiri. Dan Bagi Anda yang ingin mendaftar untuk mendapatkan domain gratis ini dari
co.cc silahkan mendaftar Disini. Dan bila Anda kesulitan dengan langkah-langkahnya, Anda bisa mengikutinya lewat Link ini.
Hosting
Hosting adalah merupakan salah satu layanan jasa penyewaan tempat atau space di Internet yang memungkinkan perorangan ataupun
organisasi dapat menampilkan layanan jasa atau produknya di web / situs Internet. Arti tempat atau space disini dapat juga diartikan
sebagai tempat penyimpanan data dan file-file website yang dapat diakses oleh user dari semua tempat. Sehingga sebuah website dapat
diakses dalam waktu yang sama oleh setiap orang di seluruh dunia.
Sebuah web hosting adalah hal utama dari setiap situs web dan situs tersebut tidak bisa diakses tanpa adanya web hosting. Mereka
bertanggung jawab untuk memberikan Anda tempat untuk membangun halaman web, mengatur account email Anda, memberikan anda
pilihan untuk menetapkan tambahan fungsionalitas untuk situs Anda misalnya : message board, shopping cart dll.
Web hosting biasanya disewakan dan dibayar secara bulanan atau pertahun.
Kekurangan Free Web Host/Hosting gratisan

1. Halaman web dengan ruang yang dibatasi
2. Tidak dapat menambahkan fitur-fitur interaktif seperti : chat room, message board, games, pemesanan online, dll
3. Mesin pencari sering mengabaikan dan ini merupakan kerugian buat Anda
4. Pengunjung dapat meragukan kredibilitas Anda
5. Mungkin akan muncul spanduk dan / atau pop iklan di situs Anda dan / atau disemua halaman Anda
6. Tidak ada jaminan ketersediaan situs untuk jangka panjang
7. Miskin bantuan dan dukungan lainnya
8. Bisa jadi tidak gratis selamanya.
Mungkin setelah baca kekurangan dan kelemahan anda sakit hati…… hehehehe…… Alasan-satunya yang masuk akal membuat situs
gratis yaitu apabila anda memerlukan website sementara Atau mungkin anda belum mampu untuk berinvestasi dalam situs web sekarang.
Itu sepenuhnya dimengerti.Klo ntar menghasilkan uang jangan lupa segera beli hosting yang berbayar.
Salah satu hosting gratisan yang saya pake dan sudah terbukti baik adalah 000webhost.com ,untuk penjelasan lebih detail silahkan klik
link ini.
Web Building Software (Optional)Bila Anda belum tahu software website yang akan Anda gunakan, Anda bisa googling di internet, untuk
melihat website-website lain yang sudah ada, dan lihat contoh website yang Anda rasa cocok sebagai website yang Anda inginkan.
Anda bisa menggunakan software website open source (script gratis) seperti blog wordpress.org , joomla, drupal ,phpbb, dan lain-lainnya,
tentunya semua tergantung selera anda… Tetapi harap di ingat yang Anda contoh adalah jenis websitenya, bukan mencopy tampilan, dan
isi (content) websitenya,karena hal tersebut tidak diperbolehkan.Saran saya lebih baik anda menggunakan wordpress.org karena selain
mudah pengelolaannya , seta sangat disukai google/mesin pencari.
Ada Beberapa web host menyediakan web builder sehingga anda tidak memerlukan software tambahan. Salah satu Contoh web host
gratisan yang menyediakan web builder adalah 000webhost.com.
Cara mendapatkan Hosting Gratis di 000webhost.com
Friday, May 7, 2010
Sebagai kelanjutan dari postingan sebelumnya yaitu cara Membuat Website dengan domain dan Hosting Gratisan danMendaftar Domain
Gratisan di CO.CC, nah kali ini Saya akan membahas satu Web Hosting gratisan juga untuk Anda coba. Karena setiap Domain yang
sudah dibuat tentunya membutuhkan space untuk menempatkan file-file website Anda, nah tempat yang akan digunakan tersebut
disebut Web Hosting. Pada akhirnya nanti, Anda lebih baik membeli hosting berbayar daripada gratisan karena perbedaannya sangat
banyak, terutama dari fitur-fitur yang diberikan, tetapi kali ini Saya akan membahas yang gratisan dahulu agar Anda mengerti dasar-
dasarnya.
Ada terdapat banyak perusahaan jasa yang menawarkan webhosting gratis di internet, tapi Saya menyarankan untuk
menggunakan000webhost. Karena menurut Saya, 000webhost adalah hosting gratisan yang terbaik, dan cepat serta mudah dalam
pengelolaannya.
000webhost adalah sebuah perusahaan jasa web hosting yang cukup berkualitas dengan fasilitas cpanel dan kecepatan server yang cepat
dan stabil dan tak kalah dengan hosting berbayar juga, dan yang paling menarik yaitu semuanya GRATIS !!
Fasilitas yang bisa Anda dapatkan adalah :
- 1500 MB of Disk Space, 100 GB Bandwidth

- bisa menggunakan nama domain anda sendiri bila berbayar (http://www.yourdomain.com)
- CPanel Powered Hosting
- Lebih dari 500 website template yang siap untuk digunakan
- Easy to use website builder
- Free POP3 Email Box dengan akses Webmail
- FTP dan Web based File Manager
- PHP, MySQL, Perl, CGI, Ruby.
- Dan lain-lain
Langkah-langkah untuk mendaftar di 000webhost.com

 silahkan klik link ini
 Kemudian, klik "Sign up" untuk mendaftar.
 Lengkapi formulir dengan subdomain gratis yang Anda inginkan.atau isikan dengan domain anda sendiri Jika Anda sudah
mempunyainya. Atau isikan dengan domain co.cc yang anda miliki sebelumnya untuk di padukan dengan 000webhost . Isikan nama anda
dengan benar dan alamat email yang valid lalu centang kemudian klik create my account
 Setelah itu akan muncul halaman pesan “Registration is almost complete”. Yang maksudnya kira-kira bahwa proses
pendaftarannya hampir selesai.
 Konfirmasi IP (Ini adalah tahap yang penting)
Matikan Antivirus saat Anda mendaftar saat ini. Anda dapat melakukannya dengan mengklik kanan ikon dari antivirus Anda pada system
tray (di bagian kanan bawah layar Anda di samping jam) dan centang pada “Antivir Guard Enable” dengan mengkliknya.Jika Anda
menggunakan antivirus yang berbeda,maka anda harus menonaktifkan antivirus yang aktif tersebut.Klo perlu uninstall antivirus yang ada di
komputer anda.klo tidak maka file ip_config.exe tidak akan bisa terbaca alias di deleted oleh antivirus.
 Download ip_config.exe.
 Begitu download selesai, Buka dan Anda akan memiliki kode 6 digit.
 Copy dan paste kode tersebut pada kotak kode konfirmasi . (Jangan sampai salah angka)
 Kemudian klik confirm dan activate !
 Tunggu account Anda akan diaktifkan. Biasanya berlangsung beberapa menit. kini Anda dapat pergi ke CPanel dan mulai
membuat situs web Anda.
 Tutup jendela ip_confirm.exe kemudian hapus ip_confirm.exe download file.
 Aktifkan antivirus Anda.
jika keduanya sudah terhubung ,maka langkah selanjutnya adalah memilih software website.Beberapa Script atau Sofware yang umum
dan populer dipake diantaranya wordpress, jomlaa, mambo, dan masih banyak lagi yang lain.
Cara Mendapatkan Domain Gratis di CO.CC
Setiap website / blog tentunya harus memilikiDomain dan juga Hosting, dan kali ini Saya ingin berbagi informasi sedikit mengenai salah
satu layanan Domain Gratisan yaitu Domain CO.CC. Sebenarnya topik CO.CC pernah dibahas dalam artikel Saya yang terdahulu yaitu
"Memindahkan Blogger ke Domain CO.CC" yaitu setelah Anda mendaftar disana, lalu Domain Standar yang Anda dapatkan di Blogger
dengan akhiran .blogspot.com dirubah menjadi .co.cc jadi secara teknis untuk pendaftarannya tidak berbeda.
Jadi tidak ada salahnya bila Saya mengulangi kembali langkah-langkah yang harus dilakukan sebelum Anda memutuskan untuk memiliki
Domain Berbayar nantinya.
Untuk mempersingkat waktu, baiklah berikut ini adalah cara untuk mendaftar di CO.CC :
 Kunjungi alamat situsnya klik di sini
 Di kotak yang tersedia (lihat gambar dibawah ini), isi alamat yang diinginkan. Contoh. namabloganda.co.cc. Klik “Check
Availability”. Kalau “Available” itu artinya nama domain tersebut belum ada yang memiliki dan Anda bisa meneruskan ke langkah
selanjutnya, tapi bila tidak tersedia maka ulangi lagi dengan mengisi nama yang lain.

 Klik “Continue to Registration”

Klik “Create an Account Now” di bagian paling bawah
5. Isi formulirnya dan jangan lupa kasih tanda(centang) di bagian paling bawah pada “I accept the Terms of Service”
6. Klik “Create an account now.”

7. Proses daftar domain selesai.
Panduan membuat Blog dengan Blogspot.com
Artikel Panduan Belajar Blog pertama yang ingin saya bagikan adalah mengenai Panduan/cara membuat blog, dimana salah satunya
adalah dengan menggunakan Blogspot atau anda bisa klik di www.blogger.com
Bila diantara anda ada yg bertanya-tanya tentang blog, maka saya akan menerangkan sedikit tentang blog menurut versi saya yaitu :
I. Apa arti Blog ?
Blog ( singkatan dari Web log) yaitu situs yang sifatnya lebih pribadi, yaitu lebih menggambarkan kepada si pembuat blog itu sendiri.
Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan. Jadi bagi anda yang masih
bingung dengan bahasa pemrograman untuk membuat sebuah website, itu tidak jadi masalah bila anda sudah bisa membuat sebuah
account email di internet, maka dalam membuat blog pun saya yakin anda pasti bisa.
II. Cara membuat blog
Seperti juga e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan
mendaftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis).
Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com,
http://www.wordpress.com serta http://blogsome.com.
Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog dengan menggunakan blogspot. Untuk mendaftar, Silahkan
anda klikhttp://www.blogger.com
Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti ini :
Lalu Lakukan langkah-langkah berikut :

1. Klik tanda anak panah yg bertuliskan "CIPTAKAN BLOG ANDA"
2. Isi ALAMAT EMAIL dengan alamat email anda
3. Isi kembali alamat email anda tadi pada label KETIK ULANG ALAMAT EMAIL
4. Isikan password yg anda inginkan pada label MASUKKAN SEBUAH PASSWORD
5. Isikan kembali password pada label KETIK ULANG SANDI/PASSWORD
6. Isi NAMA TAMPILAN dengan nama yg ingin anda tampilkan di blog tersebut
7. Ketik tulisan yg tertera pada bagian VERIFIKASI KATA. Lalu beri tanda Check pada kotak di pinggir tulisan "SAYA MENERIMA
PERSYARATAN DAN LAYANAN"
8. Lalu Klik gambar anak panah yg bertuliskan "LANJUTKAN"
9. Tuliskan judul blog yg anda inginkan pada Label JUDUL BLOG (ket: Judul ini bisa anda rubah bila diinginkan)
10. Tulis nama situs anda pada label ALAMAT BLOG (URL)
11. Tulis tulisan verifikasi yang ditampilkan pada form VERIFIKASI KATA. Jika sudah selesai, klik gambar panah yg bertuliskan
"LANJUTKAN"
12. Pilihlah gambar/template yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan
"LANJUTKAN"
13. Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah yg bertuliskan "MULAI POSTING". Silahkan anda tuliskan
semau anda, jika sudah selesai klik tombol "MEMPUBLISHKAN POSTING".
III. Isi/Content Blog :
Bagi para blogger pemula, biasanya mereka bingung setelah mendaftar/membuat sebuah blog terus apa yang harus di isi/posting
didalamnya.
Isi ( content ) dari sebuah blog tentu saja terserah kepada si pemilik blog itu sendiri, apakah mau di isi tentang "perjalanan hidup", "puisi",
"Berita" ataupun apa saja.
Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar
sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-
tulisan anda.
Cara Membuat Button dalam Blogspot
Saturday, May 29, 2010
Mungkin sebagian dari Anda para pengunjung atau rekan Blogger, tahu yang dimaksud dengan "Button" ?
Sebuah visualisasi tombol yang muncul dalam layar monitor Anda, dan apabila di klik, maka akan terjadi proses yang sudah kita rumuskan
berbentuk kode HTML dan dia akan melakukan sesuatu seperti yang kita perintahkan.
Dan kali ini, Saya akan memberikan informasi mengenai Cara Membuat Button dalam Blog atau Website kita.
Untuk kode HTML yang Saya maksudkan tadi, tulislah kode ini :
<button type="button">Ketik teks Anda di sini</button>
Maka, hasilnya akan seperti dibawah ini :
Ketik teks Anda disini
Ada beberapa kode lainnya juga agar Button yang kita buat bisa lebih menarik, seperti contoh dibawah ini :
Klik Disini !
dan untuk menghasilkan tombol button seperti diatas, Anda bisa membuatkode HTML seperti dibawah ini :
<button type="button" style="background:#000000; color:#FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px
0 5px 0; padding: 0 10px 0 10px;">Klik Disini !</button>
Keterangan :
 background : warna latar button.
 color : warna tulisan/text.
 padding : Jarak tepi button dengan teks di dalamnya, 0 10px 0 10px artinya padding atas bernilai atau = 0; kanan = 10px; bawah
= 0; kiri = 10px.
 margin : jarak button dengan tepi bidang gambar ke luar, 5px 0 5px 0 artinya margin atas = 5px; kanan = 0; bawah = 5px; kiri = 0.
 font : huruf teks.
Dan masih banyak Kode HTML lainnya yang bisa Anda tambahkan untuk lebih memperindah Button yang ingin dibuat.
Mungkin Anda memerlukan lebih dari satu button untuk mengisi blog Anda, dan apabila isi dari button yang ingin ditambahkan, sama
dengan button yang sudah ada, tentunya Anda akan berulangkali menuliskan kode yang sama. Dan tentunya dengan penulisan Kode
HTML yang berulang-ulang, itu menyebabkan pekerjaan kita jadi kurang efisien bukan ?
Oleh sebab itu, kita harus mengatur kode html tersebut bisa mencakup keseluruhan button yang akan dibuat dengan menggunakan CSS,
dimana kumpulan elemen dari HTML, dijadikan dalam bentuk CSS seperti kode dibawah ini :
#buttonku {
background:#000000;
color:#FFFFFF;
font:bold 20px Verdana, Geneva, sans-serif;
margin:5px 0 5px 0;
padding: 0 10px 0 10px; }
Dan kode CSS biasanya berada diantara kode :
<b:skin><![CDATA[ ... ]]></b:skin>
Selanjutnya tinggal mengatur HTML-nya seperti ini :
<button id="buttonku" type="button">Tekan Disini !</button>

<button id="buttonku" type="button">Klik Disini !</button>
<button id="buttonku" type="button">Klik Sekali lagi !</button>
Hasilnya akan nampak seperti dibawah ini :
Tekan Disini !
Klik Disini !
Klik Sekali lagi !
Bila Anda ingin menyisipkan sebuah link dalam button tersebut, maka tuliskanlah Kode HTML link seperti dibawah ini :
<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>
Keterangan :
target="blank" dapat diartikan, link akan diarahkan ke tab baru.
Contoh button yang menggunakan link :

<a href="http://www.tentang-komputer-internet.co.cc/"><button type="button">Tentang Komputer Internet</button></a>
<a href="http://dreamlandhost.com/" target="blank"><button type="button">Hosting Murah Berkualitas</button></a>
Hasilnya :
Tentang Komputer Internet

Hosting Murah Berkualitas
Oke, sampai disini pembahasan mengenai cara membuat button dalam blogspot kita, semoga bermanfaat, dan trik ini sebenarnya dapat
Anda kembangkan lebih jauh, sehingga tampilannya sesuai dengan yang Anda inginkan.
Cara Menambah Kolom Iklan Header ADS di Template Blogspot
Bagi Anda yang ingin memonetize website atau blognya, tidak salah bila mencoba program iklan yang bisa ditampilkan di blognya.
Sebenarnya trik ini pernah di bahas dalam artikel Saya yang terdahulu yaitu Cara Menambah Kolom Iklan SIDEBAR ADS di Template
Blogspot, cuma trik tersebut hanya menampilkan iklan di kolom sidebar saja. Nah kali ini, Saya ingin memberikan trik dengan Menambah
Kolom Iklan di Header Ads website atau blog Anda.
Jumlah Kolom Iklan yang akan dibahas kali ini adalah 7 Kolom iklan dengan ukuran 125x125 dibawah header website atau blog Anda.
Untuk membuatnya, ikuti langkah - langkah dibawah ini :
1. Login ke blogspot, lalu masuklah ke halaman Layout atau Tata letak blog Anda dan klik Edit HTML ( jangan lupa untuk backup template
terlebih dahulu ).
2. Lalu Anda copy kode dibawah ini :
<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125'
src='http://kwangkxz.com/images/banneriklan.png' width='125'/></a></li>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125' src='http://kwangkxz.com/images/banneriklan.png'
width='125'/></a></li>
width='125'/></a></li>
width='125'/></a></li>
width='125'/></a></li>
width='125'/></a></li>
width='125'/></a></li>
</ul></center>
</div>
</div>
3. Kemudian kode tersebut paste diatas <div id='main-wrapper'> atau <div id='main-wrap1'><div id='main-wrap2'>kalau template Anda
adalah 3 kolom, itu pasti berada diantara id=main dan sidebar, maka yang harus Anda lakukan adalah paste di atas kode <div id='side-
wrapper1'> jadi pada intinya, iklan tersebut akan berada di bawah header blog atau website Anda, dan ini tergantung pada template yang
Anda gunakan karena masing-masing template berbeda kode Html nya.
4. Langkah selanjutnya, Anda copy kode dibawah ini :
#sidebar-ads {
width:970px;
margin-bottom:5px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}
#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}

#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt;
padding:10px 0pt 10px 2px; width:970px}
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}
.ads-sidebar ul{margin:0px; padding:0px}

.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 5px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}
Untuk lebar Width, itu tergantung template masing-masing, kebetulan untuk template yang Saya gunakan dengan width 970px ( Anda
tinggal merubah sesuai dengan lebar template yang digunakan ), demikian juga dengan margin dan padding.
5. Lalu paste kode tadi di atas ]]></b:skin>
6. Klik SAVE atau Simpan, dan lihat hasilnya

Cara Menambah Kolom Iklan SIDEBAR ADS di Template Blogspot
Bagi Anda para blogger yang sudah tau cara menambahkan kolom Iklan ditemplate blogspot tentu tidak asing lagi dengan trik yang satu
ini. Dengan bermodalkan tehnik coding kode HTML, Saya mencoba diterapkan di blog ini, dan ternyata berhasil. Selanjutnya Saya
langsung share didalam artikel ini, karena trik ini cukup berguna bagi Anda yang ingin memonetize website atau blognya, yaitu menjadi
Publisher dari Iklan-iklan yang akan dipasang.
Dengan adanya iklan ini, maka setiap pengunjung yang datang, tentunya merasa penasaran dengan banner iklan yang sudah di buat
semenarik mungkin, dan melakukan klik disana, dan bila mereka berminat, maka akan terjadi sebuah transaksi online.
Sebagai tambahan, bila rekan-rekan blogger memiliki website atau blog yang sudah memiliki traffic yang cukup tinggi, ini bisa dijadikan
tambahan penghasilan tentunya, karena dengan banyaknya kunjungan, maka kemungkinan mereka melakukan klik terhadap iklan yang
ada, itu semakin besar.
Untuk banner yang nantinya akan tampil di website atau blog kita, adalah seperti gambar dibawah ini :
Dan langkah-langkah yang harus Anda lakukan untuk membuat kolom iklan tersebut adalah sebagai berikut :
1. Login ke blogspot, lalu masuk ke halaman Layout/Tata letak blog Anda dan klik Edit Html ( jangan lupa untuk selalu melakukan backup
sebelum merubah Kode HTML untuk berjaga-jaga)
2. Lalu copy kode dibawah ini
<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
width='125'/></a></li>
width='125'/></a></li>
</ul></center>
</div>
</div>

3. Kemudian paste di atas <div id='sidebar-wrapper'>
4. Lalu copy juga kode dibawah ini :
#sidebar-ads {
width:300px;
margin-bottom:10px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}
#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt;
padding:10px 0pt 10px 2px; width:300px}
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}
.ads-sidebar ul{margin:0px; padding:0px}
.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 8px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}
5. Dan paste lagi di atas ]]></b:skin>
6. Klik SAVE
Cara Membuat Daftar Isi atau Sitemap
Friday, May 14, 2010
Berikut ini, Saya ingin memberikan informasi mengenai Cara Membuat Daftar Isi atau Sitemapyang akan disimpan di blog atau website kita
agar para pengunjung bisa lebih mudah dalam mencari konten atau daftar artikel yang sudah dibuat.
Sebenarnya banyak sekali trik yang bisa dilakukan untuk menampilkan sitemap atau daftar isi seperti ini, dan Saya ingin membagikan 1
cara yang bisa dilakukan, dan cara ini sudah Saya terapkan di blog atau website ini, dan Anda bisa melihatnya di menu header.
Cara membuat sitemap atau daftar isi blogger sungguh sangat mudah. Ikuti langkah-langkah saya dibawah ini:
1. Sign in di blogger dengan ID anda

2. Bila sudah berada di halaman dashboard, klik Layout.
3. Klik tab Edit HTML
4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).
5. Ceklis "Expand Widget Template".
6. Lihat ke bagian body template, lalu carilah kode tag seperti ini :
<b:include data='post' name='post'/>
7. Delete semua ganti (replace) dengan kode dibawah ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-
bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
</b:if>
<b:else/>
</b:if>
8. Lalu Simpan Template.

9. Langkah terakhir cantumkan link sitemap Anda, lihat contoh di bawah ini :
<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi»</a>
10. Selesai, jika Anda mengikuti langkah-langkah diatas, maka Anda pasti akan berhasil membuat sitemap di blogger Anda.
nb : untuk point no. 9, bisa anda ubah sesuai keinginan ada jadi kode modifikasinya bisa disesuaikan dengan selera anda.
Membuat Menu Horizontal Drow Down dibawah Header
Hallo para pengunjung dan Blogger semua, cukup lama juga Saya tidak membuat postingan baru, dan malam ini tiba-tiba saja terinspirasi
untuk sedikit mengubah penampilan website atau blog ini dengan Tampilan Menu Baru yaitu Menu Horizontal Drop Down dibawah
header template kita.
Sebenarnya menu horizontal yang sudah ada pada blog atau website ini sudah ada sebelumnya, cuma ada sedikit kekurangannya yaitu,
jika Saya ingin menampilkan menu tertentu dengan detail sub menu-nya, itu tidak bisa dan menu-menu tersebut hanya berisi 1 link saja
secara global.
Dan seperti janji Saya bahwa informasi apa yang telah Saya dapatkan dan dipraktekkan dalam website atau blog ini, pasti Saya share juga
untuk Anda semua.
Apa saja yang harus dilakukan untuk meletakkan menu drop down tersebut dalam template Anda ?
Silahkan Anda ikuti langkah-langkah dibawah ini :
1. Masuk Ke halaman Dashboard - Tata Letak - Edit HTML.
2. Jangan Lupa untuk 'Download Template Lengkap' untuk mengantisipasi terjadinya error pada template Anda.
3. Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>
#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {

color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {

background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
border-bottom: 1px solid #FF7800;
#catmenu li li a:hover, #catmenu li li a:active {

background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {

}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,

#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,

#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover {

position: static;
}
4. Setelah itu copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div style='float:right;margin-right:20px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img
src='http://4.bp.blogspot.com/_4HKUHirY_2U/S6m5f0b1vkI/AAAAAAAAA38/wPNiRj2nZ9w/Mail_Read.png'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img
src='http://1.bp.blogspot.com/_4HKUHirY_2U/S6m5gDGJGAI/AAAAAAAAA4E/cHINlVzdTLI/RSS.png'/></a>
<a href='http://www.twitter.com/btipandtrick'><img
src='http://2.bp.blogspot.com/_4HKUHirY_2U/S6n2fLHS5RI/AAAAAAAAA4c/G9M3awpSwZI/Twitter.png'/></a>
<a href='mailto:123@abc.com'><img
src='http://3.bp.blogspot.com/_4HKUHirY_2U/S6n2qsFN6vI/AAAAAAAAA4k/NrkOt_6IvYs/contact.png'/></a>
</div>
</div>
</div>
<div class='clear'/>
Selesailah sudah, jangan lupa untuk Simpan / Save Template Anda serta Lihatlah Hasilnya.
Cara Memasang Widget Top Komentator Pada Blogger
Tuesday, October 27, 2009
Salah satu tujuan utama bagi para blogger menerapkan sistem dofollow adalah untuk memancing minat pembaca agar aktif memberikan
komentar diblognya dengan imbalan berupa backlink bagi sipemberi komentar. Nah, banyak diantaranya yang memanfaatkan kesempatan
ini untuk mencari backlink sebanyak - banyaknya misalnya dengan berkomentar disetiap postingan dari blog tersebut, yang kemudian
menjadi ajang untuk mengumpulkan backlink. Nah untuk mengatasinya sobat bisa memasang widget Top Komentator yang dengan mudah
membuat anda untuk mengetahui siapa yang memberikan komentar terbanyak dan apakah komentar yang diberikan itu benar benar
bermanfaat atau hanya sekedar untuk mencari backlink saja.
Nah bagi anda ingin memasang widget ini. Caranya sangat mudah. Silahkan ikuti langkah-langkah dibawah ini:
1. Login ke blogger. Klik menu Layout -> Page Elements
2. Klik Add a gadget -> Html/Javascript
3. Masukkan kode dibawah ini kedalamnya
----------
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a>
</li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&
_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&
EntertheURL=http%3A%2F%2Ftentang-komputer-internet.blogspot.com&number=5&
Nametobeexcluded=Nama" type="text/javascript"></script>
<noscript><a href="http://tentang-komputer-internet.blogspot.com" target="_blank">Blogger
Hacks</a></noscript>
----------
Catatan:
Ganti teks yang di bold dengan alamat blog anda
Angka 5 merupakan jumlah komentator yang ditampilkan. Silahkan diganti bila perlu.
Nama pada "nametobeexcluded" menunjukkan nama yang ingin anda abaikan. Anda bisa memasukkan nama anda jika tidak mau nama
anda dilist disitu.
4. Jika sudah, klik Save lalu lihat hasilnya.
5. Jika berhasil maka nama komentator terbanyak akan muncul didalam list :)
Tips untuk mempopulerkan Blog Anda
Sunday, April 25, 2010
Bagi anda para newbie janganlah pernah berharap kalau blog yang kita buat bisa langsung mendapat banyak kunjungan dan Traffic yang
tinggi , butuh waktu yang tidak sedikit agar blog kita dikenal dan mendapat respon blogger lain. Tetapi bila usaha kita keras dan
menggunakan trik yang jitu maka respon blogger lain terhadap blog kita akan meningkat, dibawah ini tip trik yang dapat anda lakukan
untuk menempatkan respon dari blogger lain :
1. Ulet dan sabar

Kesabaran merupakan sifat yang harus dimiliki oleh seorang Blogger sejati. Hanya sebagian orang yang baru pertama kali membuat blog
dan ingin langsung tinggi trafiknya, maka dengan itu kita harus meningkatkan pengalaman blogging dan mencari cara terbaik untuk
menulis konten yang bagus dan bermutu. Oleh sebab itu, pertajamlah keahlian menulis Anda mulai dari sekarang.
2. Berikan Sesuatu yang Gratis

Cara ini terbukti sangat efektif untuk meningkatkan kunjungan. Sesuatu yang gratis disini bisa berupa Freeware, e-book, download MP3,
Wordpress Theme dan lain sebagainya, dan konten tersebut haruslah selalu update bila pengunjung mendatangi blog Anda.
3. Menulislah di Blog popular

Tulislah artikel yang menarik pada blog yang sudah popular tapi dengan syarat artikel tersebut belum pernah diterbitkan sebelumnya, dan
tambahkan link ke blog anda, dan cara ini dapat menarik blogger lain untuk melihat blog anda secara langsung.
4. Kumpulkan Artikel yang paling banyak dicari pengunjung

Artikel yang paling banyak dicari pengunjung adalah artikel yang komentarnya yang paling banyak, dan untuk mengumpulkan artikel
tersebut, Anda dituntut untuk menulis artikel yang bagus agar menarik bagi Blogger lain.
5. Promosi Artikel
Dengan cara meninggalkan komentar pada blog lain, itu berarti anda melakukan promosi artikel anda, dan jangan lupa berilah link ke blog
anda pada komentar yang anda berikan disana.
Cara ini sudah Saya buktikan dapat meningkatkan Traffic blog, sekarang tinggal giliran anda.
Cara Membuat Navigasi Halaman
Thursday, August 6, 2009
Hallo teman-teman Blogger dan para pengunjung setia, Artikel Panduan Belajar Blog kali ini membahas tentang Cara Membuat Navigasi
Halaman, dimana cara ini dilakukan adalah untuk memudahkan para pengunjung web/blog dalam melakukan pencarian suatu artikel
dalam halaman-halaman di web/blog kita.
Tombol navigasi halaman ini sebetulnya hampir sama dengan tombol next atau previous pada web/blog Anda, bedanya adalah navigasi
halaman ini bisa mengingatkan pengunjung akan tempat suatu artikel pada halaman ke berapa pada web/blog kita. Karena navigasi
halaman akan menampilkan nomor per halaman web/blog kita, mungkin Anda pernah melihat contoh pada halaman bawah search engine
di google, disana terlihat tombol navigasi halaman untuk pencarian keyword dihalaman-halaman selanjutnya.
Untuk mempersingkat waktu, berikut ini langkah-langkah dalam pembuatan tombol navigasi halaman :
1. Login ke Blogger Anda.
2. Klik Tata Letak, lalu klik Elemen Halaman.
3. Lalu klik Tambah Gadget.
4. Pilihlah Edit HTML/Javascript.
5. Tambahkan kode berikut dibawah ini pada kotak kosong yang tersedia.
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
}
.showpageNum a:hover {
font-size:11px;
color: #000000;
}
.showpagePoint {font-size:11px;
margin: 2px;
font-weight: bold;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
color: #000000;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
margin: 2px;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
color: #000000;
}
</style>
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=4;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-
results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-"
class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
6. Lalu Drag and drop kode HTML tersebut tepat dibawah kolom postingan Anda.
7. Jangan lupa Klik Save
Keterangan :
Untuk kode var pageCount=5;, merupakan jumlah postingan dalam satu halaman, jadi Anda bisa sesuaikan dengan jumlah postingan
dalam satu halaman. Jika Anda menampilkan 5 postingan setiap halaman, maka Anda gunakan var pageCount=5.
Sebagai Catatan : Jika Anda sudah menggunakan script ini, tapi tombol navigasi halaman masih juga belum muncul berarti akan muncul
di halaman ke dua setelah anda meng-klik link Older Posts/Posting Terbarudi bawah postingan blog. Ini mungkin dikarenakan pengaruh
template atau anda sebelumnya pernah menghapus bagian HTML blog anda yang berhubungan dengan hal ini.
Cara Membuat Tab View di Blog Anda
Friday, July 24, 2009
Hallo rekan-rekan blogger dan pengunjung setia blog ini, malam ini tiba-tiba saya berpikir untuk sedikit meminimize halaman blog/web
saya, agar lebih menghemat tempat dan para pengunjung semua bisa melihat Tampilan Link, Komentar, Artikel Postingan, Banner dan
lain-lain. Dan Tab View ini berbentuk sebuah kotak yang besarnya bisa kita atur sesuai dengan yang kita inginkan, sehingga dapat
menghemat ruang sidebar di blog/web kita.
Apa itu Tab View ?
Anda bisa melihatnya di bawah postingan blog/Blog Post saya, dan Anda ingin tahu cara membuatnya adalah sebagai berikut :
Sebagai Langkah Awal :
 Login ke Account Blogger Anda
 Lalu klik "Layout / Tata letak" dan lalu klik "Edit HTML"
 Kemudian cari kode ini ]]></b:skin>
 Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
 Perhatikan text-text yang dicetak biru, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan
ganti sesukamu.Untuk melihat kode warna klik disini.
Melihat style border klik disini.
 Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>
<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>
 Kemudian Simpan
Langkah Selanjutnya :
 Pilih "Page Elements"
 Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.
 Copy script dibawah ini kedalamnya:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
tabview_initialize('TabView');
 Lalu Simpan/Save
Keterangan:
 Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.
 Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).
 Kode yang berwarna Hijau adalah isi dari Tab View.
Demikianlah informasi yang bisa Saya berikan dan sudah di coba di blog/website ini, semoga berguna buat Anda semua.
Cara Mudah Membuat Banner Link
Wednesday, July 22, 2009
Hallo rekan-rekan Blogger dan pengunjung setia Blog Belajar Ilmu Komputer dan Internet, Artikel atau Postingan Panduan Belajar
Blog kali ini mengenai Cara Mudah untuk Membuat Banner Link, yang nantinya bisa digunakan untuk bertukar link dengan sesama pemilik
blog lainnya.
Ide untuk membuat artikel ini adalah sehubungan dengan adanya beberapa blogger yang menghubungi saya via YM Chat (Yahoo
Messenger), dan menanyakan bagaimana cara pembuatannya. Oleh sebab itu, semoga artikel singkat dan praktis yang saya buat ini dapat
membantu anda semua.
Seperti kita ketahui bahwa banyak tutorial untuk pembuatan sebuah Banner, menggunakan situs resmi seperti di
alamathttp://www.cooltext.com, dan ada sebagian dari mereka yang menggunakan fasilitas ini mengatakan bahwa prosesnya cukup
panjang dan ribet, harus melakukan upload gambar dan bahkan kadang hasilnya tidak sukses atau tidak seperti yang diharapkan.
Ada 1 cara yang bisa kita gunakan, yaitu dengan menggunakan Metoda Tabel.
Dan berikut ini langkah-langkah pembuatannya :
1. Silakan anda copy kode di bawah ini :
<a href="http://alamatbloganda/"><table width="120" bg border="1" style="color:black;"><tbody><tr bg style="color:blue;"><td

align="center"><b><span style="color:white;">Judul yg ingin ditampilkan</span></b></td></tr></tbody></table></a>
Keterangan :
 http://AlamatBlogAnda : isilah dengan alamat blog/website anda.
 width="120" : ini adalah Lebar bannernya.
 border="1" style="color:black : ini adalah warna garis pinggir (border).
 tr bg style="color:blue : ini adalah warna background banner.
 span style="color:white : ini adalah warna judul banner.
 Judul yg ingin ditampilkan : isilah dengan kalimat yg ingin kamu tampilkan dibanner anda.
2. Copy kode tersebut secara keseluruhan (setelah dirubah) pada :
Layout - Page Element - Add a Gadget dan anda pilih HTML/Javascript
3. Lalu Save, dan sekarang lihat bagaimana hasilnya.
Nah, sekarang anda tidak perlu membutuhkan waktu panjang untuk membuat sebuah banner.
Selamat mencoba, dan bila anda kesulitan, isi kolom komentarnya, dan saya akan bantu membuatkannya untuk anda.
Sebagai tambahan, saya juga menyertakan 1 Software yang bisa diinstall secara lokal di komputer anda, dan bila anda berminat, dapat
mendownloadnya disini.
Cara Setting Tampilan Admin di Kolom Komentar
Monday, July 6, 2009
Hallo rekan-rekan blogger dan pengunjung setia Blog ini, satu settingan lagi dalamPanduan Belajar Blog yang saya lakukan mengenai
Kolom Komentar, setelah diartikel sebelumnya tentang Membuat Kolom Komentar dibawah Postingan, kali ini saya akan membahas
tentang Tampilan Admin di Kolom Komentar.
Tujuan setting ini adalah membuat komentar yang diposting oleh sang pemilik blog, akan berbeda dengan komentar yang di posting oleh
pengunjung blog. Untuk lebih jelasnya, anda bisa lihat penggunaan komentar Admin tersebut di blog ini.
Berikut ini langkah-langkah dalam pembuatan Kotak Komentar Admin sebagai berikut :
Jangan lupa Backup terlebih dahulu template anda, bila ada kesalahan pengetikan, anda bisa mengembalikannya seperti semula.
Anda centang dulu pada 'Expand template widget'
Lalu anda Copy code berikut ini,
.comment-body-author {
background: #ebebeb;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}
Paste-kan diatas kode dibawah ini :
]]</b:skin>
Tulisan merah adalah warna background kotak komentar anda, sedangkan tulisan berwarna hijau adalah garis tepi kotak komentar anda.
Silahkan ganti background dan border sesuai dengan selera anda.
Selanjutnya, anda cari kode ini :
Bila sudah ketemu, anda bisa melihat kelanjutannya seperti dibawah ini :
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:else/>
</b:if>
</dt>
<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Anda tidak usah bingung, cukup perhatikan tulisan yang berwarna HITAMdiatas adalah kode original anda, sedangkan kode
warna MERAH adalah sebagai kode tambahan.
Jadi, anda tinggal copy kode-kode yang berwarna merah, kemudian paste ditempat sesuai seperti contoh diatas. bila sudah, coba preview
dan coba anda beri komentar Sebagai Admin.
Nah sekarang komentar anda sebagai pemilik blog akan berbeda dengan pengunjung blog Anda.
Membuat Kolom Komentar dibawah Postingan
Monday, June 15, 2009
Terkadang kita menemui masalah tentang kolom komentar yang tidak muncul, dan itu bisa disebabkan oleh beberapa faktor seperti :
 Anda menggunakan kolom komentar lain selain blogger
 Terhapusnya kode didalam Comment Script saat modifikasi Template
 Modifikasi Kolom Komentar
 dan lain sebagainya
Nah, bagaimana cara mengembalikan kolom komentar yang sudah berubah tersebut, yang meskipun tidak serupa dengan kolom komentar
semula, tetapi kita masih bisa menggunakannya seperti defaultnya blogger.
Ayo kita mulai, langkah-langkahnya sebagai berikut ini :
 Loginlah ke account blogger anda.
 Pilih Layout, lalu klik Edit HTML, jangan lupa centang "Expand Template Widget".
Tambahan : Sebelum anda melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan klik tulisan Download
Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan
kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
 Cari kode CSS berikut.
/* Comments
---------------*/
#comments h4 {
background:#EAE9E9;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
border:0px dotted #ccc;
}
#comments-block .comment-author {
color:#808080;
margin:.5em 0;
border-top:1px dotted #ccc;
}
#comments-block .comment-body {
text-align:justify;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
font-size:9px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
 Ganti dengan kode CSS di bawah ini.
/* Comments
----------------*/
#comments h4 {
background:#EAE9E9;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
border:0px dotted #ccc;
}
#comments-block .comment-author {
color:#808080;
margin:.5em 0;
}
#comments-block .comment-body {
text-align:justify;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
font-size:9px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.owner-Body {
background:#808080;
margin-left:20px;
color:#000000;
}
.owner-Body p {
text-align:justify;
margin:0 0 .75em;
padding-left:10px;
background:#E3F6CE;
border-left:3px dotted #6E6E6E;
}
 Cari kembali kode HTML berikut.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:else/>
</b:if>
</dt>
<b:else/>
</b:if>
</dd>
</b:if>
</a>
</span>
</dd>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
 Kemudian ganti dengan kode di bawah ini.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:else/>
</b:if>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
</dd>
<b:else/>
<b:else/>
</b:if>
</dd>
</b:if>
</a>
</span>
</dd>
</b:loop>
</dl>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
 Jangan lupa KLIK SAVE SETTINGS.
Trik Mempercepat Loading Blog anda
Sunday, June 14, 2009
Berbicara masalah kecepatan loading sebuah blog yang kita buka, itu menurut saya merupakan salah satu faktor penting yang menunjang
traffic pengunjung. Percuma saya blog kita sudah memiliki Pagerank yang tinggi, tapi saat blogwalking, prosesnya sangat lama dan
membuat pengunjung jadi bosan dan kesal, akhirnya tab tersebut di close atau search another blog.
Sungguh sangat disayangkan bukan, kita cape-cape membuat blog yang seindah mungkin, tapi saat dibuka blog kita memakan waktu
lama untuk me-load, dan akhirnya banyak pembaca/pengunjung yang meninggalkan blog kita sebelum mereka punya kesempatan untuk
membacanya.
Berikut ada beberapa tips dan trik untuk mempercepat Loading Blog Anda, dan akhirnya akan menarik lebih banyak pengunjung :
1. Posts
Waktu loading yang diperlukan oleh Blog Anda, dipengaruhi oleh besarnya posting atau widget berupa gambar (apalagi dalam bentuk
flash) yang kita buat dan ditampilkan pada halaman utama. Sebetulnya, anda dapat dengan mudah mengatur jumlah posting yang
ditampilkan di halaman utama dari Pengaturan Format tab jika anda menggunakan jasa Blogger.com. Kemudian anda dapat memilih
besarnya jumlah posting yang akan ditampilkan pada halaman utama. Saya menyarankan untuk menampilkan 10 atau lebih sedikit posting
di halaman utama atau menggunakan script seperti dalam blog saya ini (read more).
Bila anda menggunakan Pihak Ketiga berupa JavaScript dan Link Blog yang memuat kecepatan optimal, saya sarankan menggunakan
Javascript,widget dan link dari Google / Blogger. Namun menurut saya, blog Anda akan meload lebih cepat jika menaruh semua JavaScript
di bagian bawah blog Anda, atau jiga ingin menempatkannya di Sidebar, tempatkanlah itu di bagian bawah sidebar.
2. Foto dan Media
Semakin banyak video, gambar atau multi-media lainnya yang ada di blog Anda akan membuat proses loading semakin lama. Tapi
memang gambar atau multimedia lainnya cukup penting juga untuk menarik pengunjung dalam membaca blog Anda, jadi penting bagi
anda untuk mengoptimalkan kecepatan dalam memuat gambar ataupun media lainnya.
Berikut adalah beberapa tips untuk meningkatkan kecepatan anda dalam memuat media :
 Alangkah baiknya bila ukuran/size gambar Anda dikurangi atau gambar kecil yang menggunakan link ke image ukuran penuh.
 Jika anda menggunakan gambar dari pihak ketiga, coba meng-upload-nya lewat Picasa Web Album melalui editor posting
Blogger.
 Jika Anda memiliki sejumlah besar gambar untuk ditampilkan, Anda dapat meng-upload dahulu semua foto Anda ke Picasa Web
Album lalu link-kan ke album anda, baru di posting.
 Jika Anda telah menambahkan CSS custom untuk blog Anda, pastikan Anda letakkan di bagian atas halaman.
Untuk konten yang paling penting dari blog Anda, khususnya yang memberi perhatian buat pembaca, itu harus cepat loadingnya.
Pentingnya memasang Kolom Followers di Blog
Thursday, June 4, 2009
Hallo rekan-rekan blogger semua, Kembali lagi di postingan SEO Tips kali ini mengenai Pentingnya memasang Kolom Followers di Blog.
Munkin banyak sekali cara yang kita lakukan untuk menaikkan Performance / Page Rank blog kita diantaranya, tukeran link text atau link
banner, saling berkunjung ke blog teman ( blogwalking ), Tidak lupa memberi komentar postingan di kolom komentar, karena jika kita
meninggalkan komentar di ShoutMix atau sejenisnya, Google sama sekali tidak mengindeksnya.
Ternyata masih ada satu fasilitas yang diberikan Google untuk penggunablogspot untuk meningkatkan Page Rank, yaitu Followers.
Belum beberapa lama ini kolom Followers sudah dirubah penampilannya, anda bisa lihat ada tulisan Google Friend Connect. Itu
menandakan sekarang Google juga memperhatikan kolom tersebut untuk peningkatan Page Rank di blog kita.
Ada 1 hal yang kita harus tahu bahwa, Google juga memperhatikan tautan dari Followers tersebut, jadi jangan sampai isi kolom Followers
anda berjumlah ratusan bahkan ribuan Followers, tapi anda tidak membuat tautan dengan Followers dimana anda join didalamnya. Anda
juga harus membuat tautan tersebut dengan cara menjadi Followers di blog teman yang telah menjadi Followers di blog anda.
Untuk pengguna layanan blogspot, yang belum memasang kolom Followers di blognya, maka sekarang silahkan anda pasang untuk
meningkatkan Page Rank anda.
Untuk itu silahkan ikuti langkah-langkah seperti dibawah ini :
1. Klik Tab Layout
2. lalu Klik Tab Page Elements
3. Klik Add a Gadget, kemudian pilih Label Followers di kolom tsb
4. Simpan di sebelah kiri atau kanan Sidebar anda
5. Selesai
Lalu anda tinggal mengunjungi blog rekan-rekan anda yang memiliki layanan Followers, daftar disana dan katakan di ShoutMix bahwa
anda telah jadi Followers-nya dan minta Followers Balik.
Cara Memasang Recent Post & Comment
Wednesday, June 3, 2009
Hallo semuanya, dalam postingan Panduan Belajar Blog kali ini saya akan coba membahas tentang Recent Comment dan Recent Post.
Recent Comment ini adalah sebuah media yang menampilkan komentar-komentar terakhir yang telah masuk ke dalam blog kita.
Sedangkan Recent Post adalah sebuah media berupa data tentang artikel-artikel terakhir yang telah kita publish.
Kedua data ini sangat penting untuk kita pasang, karena akan sangat membantu sekali bagi kita sebagai Author dimana data yang
ditampilkan oleh Recent Comment bisa langsung kita respon dari komentar tersebut.
Kita juga tidak perlu direpotkan lagi harus membuka satu persatu artikel kita untuk memeriksa komentar yang masuk. Sedangkan
kegunaan dari Recent Post akan membantu bagi pengunjung yang masuk ke blog kita, dan mereka akan tahu artikel terbaru apa saja yang
ada di blog tersebut, sebenarnya bila anda sudah memiliki daftar postingan, Recent Post ini tidak perlu dipasang lagi.
Untuk rekan-rekan yang belum memiliki dan tertarik untuk memasang Recent Comment dan Recent Post di blognya, saya akan coba
menjelaskannya.
Untuk pemasangannya sangat mudah sekali dan untuk itu silahkan ikuti langkah-langkah berikut ini :
1. Masuklah ke Blog anda
2. Klik Layout
3. Klik Tab Page Elements
4. Klik Add a Gadget
5. Klik Menu Feed
6. Pada kolom URL Feed silahkan anda pastekan URL di bawah ini :
Contoh pengisian URL untuk data Recent Comment :
http://situsanda.blogspot.com/feeds/comments/default
Contoh pengisian URL untuk data Recent Post :
http://situsanda.blogspot.com/feeds/posts/default
7. Silahkan anda mengganti tulisan yang berwarna merah dengan alamat blog anda
8. Lalu Klik Save
9. Selesai
Cara Memasang Live Traffic Feed di Blog
Friday, May 29, 2009
Bagi anda yang ingin menambah/memasang live traffic feed seperti gambar dibawah ini, dalam artikel Belajar Blog kali ini, saya akan
memberikan langkah-langkah nya sebagai berikut :
 Buka link ini http://feedjit.com
 Setelah anda berada disitus tersebut, lalu anda klik Get Feedjit
 Klik salah satu pilihan Javascript Widget / Image Widget. Untuk lebih memudahkan, saya pilih Javascript Widget yang letaknya
diposisi pertama dengan judul :
Or Choose a FREE Widget using the guide below!
 Pada halaman berikutnya anda akan dihadapkan pada 4 tampilan Widget yaitu Live Traffic Feed, Live Traffic
Map, Recommended Reading, dan Page Popularity. Nah anda pilih salah satu saja yang ingin ditampilkan di website/blog anda.
 Untuk tampilan warna, bisa kita ubah dengan mengklik First Customize it. Setelah muncul kotak dialog, silahkan anda pilih warna
yang diinginkan.
 Lalu klik Add to your Blogger Blog / Typepad Blog
 Langkah selanjutnya adalah anda tinggal mengcopy paste Kode HTML yang diberikan kedalam blogger anda. Caranya adalah :
1. Klik Layout
2. Page Elements
3. Klik Add a Gadget
4. Pilih dan klik HTML/Javascript
5. Paste Kode HTML yang sudah dicopy tadi kedalamnya, lalu Save trus View Blog (Jangan lupa di Dashboard Page
Elements anda klik save juga)
Cara Pembuatan Tag Cloud Label
Monday, May 18, 2009
Hallo rekan-rekan Blogger, dalam PanduanBelajar Blog kali ini, Saya mempunyai informasi mengenai Tag Cloud Label, dimana Label
yang anda buat saat postingan akan muncul dengan animasi melayang.
Saya sudah coba caranya dan ingin membagikan buat anda yang belum pernah tahu dan ingin menambahkan di blognya.
Ingin tahu cara pembuatannya ? Saya mendapatkan cara ini dari seorang blogger profesional yaitu amanda, anda bisa klik dan melihatnya
langsung dalam bahasa inggris tapinya.
Untuk anda yang ingin tutorialnya dalam bahasa indonesia, bisa mengikuti cara-cara di bawah ini:
 Masuk ke LAYOUT-->EDIT HTML (beri tanda centang kotak kecil di expand text widget)
 Anda cari kode seperti di bawah ini:
<b:section class='sidebar' id='sidebar' preferred='yes'>
 Copy paste kode di bawah ini setelah kode di atas:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a
href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7",
"#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url'
style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
 Lalu Save, dan lihat hasilnya.
Jika anda ingin merubah ukuran tinggi dan lebar nya, tinggal rubah kode lebar yang '240' dan tinggi yang '300' sesuai dengan keinginan
kamu.
Untuk merubah warna nya, rubah kode warna nya yang di tulisan "#ffffff"
Cukup menarik bukan artikelnya ?

Tutor Blog

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutor Blog

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Setting Blog Blogspot

Thursday, June 11, 2009

<!-- *****************Related Articles by Labels - Take Two******************

<h3>Related Posts by Categories :</h3>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfLabels = 10;

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

for (var k = 0; k &lt; entry.link.length; k++) {

var txt = document.createTextNode(entry.title.$t);

for (var l = 0; l &lt; json.feed.link.length; l++) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var div1 = document.createElement(&#39;div&#39;);

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

var labelArray = new Array();

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

if (numLabel &lt; maxLabels) {

Oke, saya akan memberi tahu langkah-langkahnya berikut ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:section class='header' id='header' preferred='yes'>

7. Klik Save Template

Elemen Halaman anda sudah berubah bukan ?

Hallo para blogger…….

Oke, Langkah berikutnya adalah :

Pembahasan Artikel Panduan Belajar Blog kali ini adalah mengenai ShoutMix.

2. Lalu klik “Go to my control panel now”

4. Tentukan Width (Lebar) dan Height (Tinggi) yang diinginkan,

5. Blok Script (kode tulisan di bawah) dengan cara klik kanan

5. Masukan Judul yang diinginkan, contoh: Tinggalkan Pesan

Kekurangan Free Web Host/Hosting gratisan

Fasilitas yang bisa Anda dapatkan adalah :

- 1500 MB of Disk Space, 100 GB Bandwidth

Langkah-langkah untuk mendaftar di 000webhost.com

 Klik “Continue to Registration”

6. Klik “Create an account now.”

I. Apa arti Blog ?

II. Cara membuat blog

Lalu Lakukan langkah-langkah berikut :

Maka, hasilnya akan seperti dibawah ini :

Ketik teks Anda disini

Dan kode CSS biasanya berada diantara kode :

<b:skin><![CDATA[ ... ]]></b:skin>

Selanjutnya tinggal mengatur HTML-nya seperti ini :

<button id="buttonku" type="button">Tekan Disini !</button>

Hasilnya akan nampak seperti dibawah ini :

Contoh button yang menggunakan link :

Tentang Komputer Internet

Untuk membuatnya, ikuti langkah - langkah dibawah ini :

2. Lalu Anda copy kode dibawah ini :

4. Langkah selanjutnya, Anda copy kode dibawah ini :

#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}

.ads-sidebar ul{margin:0px; padding:0px}

5. Lalu paste kode tadi di atas ]]></b:skin>

<!-- *Related Articles by Labels - Take Two**

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

for (var i = 0; i < maxPosts; i++) {

for (var k = 0; k < entry.link.length; k++) {

for (var l = 0; l < json.feed.link.length; l++) {

for (k=0; k<20; k++) label = label.replace("%20", " ");

var div1 = document.createElement('div');

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

for (var i = 0; i < labelArray.length; i++)

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

if (numLabel < maxLabels) {

<b:include data='post' name='post'/>

<a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi»</a>