Cara Membuat Daftar Isi Blog / Sitemap Blog Otomatis

 Posting kali ini saya mencoba trik membuat daftar isi blog. Saya sharing tip ini sebenarnya ada hubungannya dengan pengalaman pribadi. Dulu tiap kali membuka sebuah blog dari sahabat kita, saya biasanya mencari topik tertentu yang saya sukai. Namun tidak semua blog menyertakan list dari artikel yang mereka buat, sehingga kadang kita agak kesulitan mencari topik yang akan dicari. Tip Daftar isi Blog merupakan solusi itu. Trik membuat Daftar Isi ini ternyata sangat simple, tidak seperti yang saya bayangkan sebelumnya, njilimet, pake kode HTML yang panjang. dan jika dipasang banyak errornya. Tapi trik ini dijamin maknyoos, udah di tes kok. Setelah masuk dalam halaman rancangan laman, silakan copy script daftar isi / sitemap blog ke dalam postingan halaman laman dan jangan lupa teman sebelumnya untuk memilih opsi HTML agar script daftar isi / sitemap blog ini bisa di parse. Berikut script daftar isi / sitemap blog :

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" /> <script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script> <script src="http://blog-iswandi.blogspot.com/feeds/posts/summary?max-results=999&alt=json-in-script&callback=loadtoc"></script>

Keterangan : 

Dalam memasang / membuat dafrar isi atau sitemap blog jangan lupa untuk memberi batasan jumlah posting yang dimunculkan. Usahakan jangan lebih dari 1000 posting sebab akan mengakibatkan Outbound link dalam halaman daftar isi / sitemap blog menjadi lebih besar yang mungkin bisa dianggap sebagai halaman spam oleh google. Untuk mengganti jumlah posting yang keluar dalam halaman halaman daftar isi / sitemap blog, teman semua bisa mengganti angka yang berwarna merah dengan angka yang teman inginkan.

dan http://blog-iswandi.blogspot.com  diganti dengan Blog Mas Bro.......

Read More

Tutorial Blog Bagian 3

Setelah dua posting saya sebelumnya menjelaskan Bangun Struktur  sebuah Blog (Tutorial Blog Bagian 1) lalu dilanjutkan dengan Kode-kode Penyusun sebuah Blog (Tutial Blog Bagian 2), Nah pada posting kali ini saya akan mencoba memaparkan fungsi dari kode-kode yang membangun sebuah blog.

Banyak sekali kode yang membentuk sebuah blog. Bila dijelaskan satu persatu akan panjang sekali pembahasannya. Tapi sebagai ilustrasi kita mulai dari "Header" atau judul blog.

Misalkan anda akan membuat sebuah Header sebuah Blog, lebarnya 600px, dan tingginya 160px (px singkatan dari pixel). kita menggunakan huruf "Arial" dengan ukuran 200px dan warna bacground biru dan warna huruf putih serta penulisan dari tepi kiri dengan jarak 20px, bagaimana ya kira-kira membuat kodenya:

Begini kodenya:

<div style="background: green; color: white; font-size: 200%; font: arial; height: 160px; padding-left: 20px; text-align: justify; wide: 600px;">

JUDUL BLOG ANDA

</div>

Dan ini hasilnya:

JUDUL BLOG ANDA

Keterangan :
background= warna latar belakang  ( green=hijau, red=merah black=hitam,  atau #E0ECF8 = biru muda dan warna lainnya)
color= warna huruf ( green=hijau, red=merah black=hitam,  atau #E0ECF8 = biru muda dan warna lainnya)
font-size= Ukuran huruf
font= Jenis huruf ( arial , Helevatica dll)
height= tinggi kotak Header
padding-left:= Jarak teks dari tepi kiri  (bisa menggunakan top,bottom dan right)
text-align=: justify (perataan teks bisa menggunakan left,center, right)
wide = Lebar kotak Header

Coba anda tambahkan kode dibawah ini dan lihat hasilnya:

border: 4px solid #B4045F (Membuat kotak border merah dengan ketebalan 2 px)
font-weight:800 (Ketebalan font)

JUDUL BLOG ANDA

Demikian  dulu yang dapat saya jelaskan dalam posting kali ini. Bila ada kritik dan saran silahkan komentar anda. Bye

Read More

Tutorial Blog Bagian 2

Jika kita kesulitan dalam mengedit template, mungkin karena kita belum mengenal bagian template Blogger. Berikut ini tutorial untuk mengenal bagian-bagian template Blogger

Pada Postingan saya sebelumnya tentang Kode Penyusun sebuah template Bagian I telah dijelaskan tentang struktur dari sebuah template Blog. Nah kali ini saya ingin menjelaskan bagian-bagian dari sebuah template. Sebenarnya sudah banyak sahabat kita mengupas masalah ini, tapi sebagai bahan referensi boleh doong saya ulas lagi, tentunya dengan versi saya.

Pada kesempatan ini saya akan mengupas bagian-bagian dari sebuah template Blog yang sangat simple agar mudah untuk dipahami. Disini saya akan menjelaskan lebih lanjut pengembangan struktur dari sebuah Blog.

Oke, tanpa berpanjang-panjang kita mulai saja. Sebelum itu Simpan dulu template anda untuk menjaga segala kemungkinan yang tidak diinginkan.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ini merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.

<head>
<b:include data="blog" name="all-head-content">
<title><data:blog.pageTitle/></title>
<b:skin>&lt;![CDATA[/* </b:skin></b:include>

Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a:link {
color:$linkcolor;
text-decoration:none;

Kode ini untuk mengubah tampilan link pada template blog Anda.

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

Ini untuk mengubah tampilan link yang pernah dikunjungi.

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Mengubah tampilan link jika pointer mouse berada di atas link.

a img {
border-width:0;
}

Mengubah tampilan link bergambar

# post
.post{margin-bottom:15px;}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:'Oswald',sans-serif;font-size:20px;line-height:20px;font-weight:normal;}

Semua pengaturan posting disini tempatnya. Jenis huruf dan ukuran serta pengaturan spasi dan warna dapat dilakukan sesuai kebutuhan.

.sidebar{margin:10px 0;font-family:Arial, Helvetica, Sans-serif;font-size:15px;color:#262626;}
.sidebar{font-family:Arial, Helvetica, Sans-serif;font-size:15px;color:#222;margin: 10px;}

Semua pengaturan sidebar dapat dilakukan disini sama halnya seperti pada kode pos diatas

.footer{margin-bottom:15px}
#copyrights{color:#FFF;background:#090909;text-align:center;padding:20px 0}

Kode ini digunakan untuk mengatur bagian bawah sebuah blog (footer)

Sebenarnya masih banyak kode-kode lain sebagai penunjang kode utama diatas, tapi kali ini sampai disini dulu ya, lain waktu disambung lagi. Bye.

Read More

Tutorial Blog Bagian 1

Sebagai pemula dalam memahami bahasa HTML, saya sangat tercengang ketika pertama kali membuka sebuah Script blog, bahasa dan susunannya begitu membingungkan. Saking ingin mengetahui kode-kode yang terdapat dalam sebuah script Blog, Semua halaman script itu saya cetak, waduh jumlahnya lumayan juga. Lalu saya bolak balik script tersebut sampai kepala saya puyeng tujuh keliling, namun saya belum mendapat sedikitpun gambaran tentang apa yang terdapt dalam script itu.


Berbekal semangat pantang menyerah saya mencoba mengurai susunan script blog itu dan saya akhirnya menemukan struktur dasarnya. Kira-kira bentuknya seperti ini :

<html --------------->
<head>
variable defenitian
body
header
post
sidebar
footer
New widget
]]></skin>
</head>
.
<body>

</body>
</html>

Setelah mengenal struktur sebuah blog saya lalu mulai mempelajari kode-kode penyusun sebuah script. Penjelasan tentang kode-kode berikut kegunaanya akan saya paparkan secara berseri pada postingan saya berikutnya.

Bagi pengunjung tolong komentarnya Ya.............Sampai Jumpa pada postingan saya berikutnya

Read More