IKPPM ALAS BARAT PERIODE 2009-2011
Mengenai Saya
Waktu Indonesia Tengah
Category
- Kasanah Budaya Samawa (4)
- Lawas (1)
- PENDIDIKAN (1)
- Potensi Wisata (2)
- Puisi (1)
- Tutorial Blog (9)
Blog Archive
-
▼
2012
(17)
-
▼
September
(16)
- POTENSI WISATA DI GERBANG BULAENG
- Navigasi Nomor Halaman di Blog (2)
- Membuat Kategori di Blog
- Favicon Langsung di Dashboard Blogger
- Tombol Chatting Room di Blog
- Pasang Kalender di Blog
- Pasang Jam di Blog
- Navigasi Horizontal pada Blog
- Cara Membuat Navigasi Nomor Halaman di Blog
- Read More Otomatis di Blogspot
- Ai Kadewa
- Purnama itu pancaran bidadari
- TENTANG EMPAT BUAH SUNGAI YANG BERADA DI SURGA DAN...
- Upacara Tanak Juran
- Upacara Basaturin
- Prosesi Perkawinan Adat Samawa
-
▼
September
(16)
About
Minggu, 30 September 2012
POTENSI WISATA DI GERBANG BULAENG
Diposting oleh
Unknown
di
21.11
0
komentar
Label: Potensi Wisata
Jumat, 28 September 2012
Navigasi Nomor Halaman di Blog (2)
Lelah dengan lomba-lomba yang aku ikuti akhir-akhir ini, kali ini pun
aku akan membuat artikel tentang 'Membuat Navigasi Nomor Halaman Keren' ,
sedikit berbagi hal-hal kecil yang berguna untuk ke-keren-an blog.
Sudah tau apa itu navigasi nomor halaman ? Biasanya widget tersebut
dapat di temukan di bawah artikel, contoh yang sering kita lihat ada di
mbah google, yang ada nomor 1-10 ? Nah itu lah yang di sebut navigasi
nomor halaman.
Setiap blog kebanyakan sudah banyak yang menggunakan widget
seperti itu, tapi apa tidak bosan lihat yang itu itu aja ? Dalam
kesempatan ini aku akan berbagi navigasi nomor halaman yang keren-keren
daripada yang lain, dan gak hanya satu.. ada lima macam navigasi nomor
halaman untuk di gunakan di blog kalian agar lebih menarik untuk di
lihat dan bermanfaat juga pastinya.
Tertarik ? Salin dan Letakkan salah satu kode berikut ini, di atas kode </b:skin> ^_^

display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.pagenavi span:hover,.pagenavi a:hover {
background: #fefefe;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.pagenavi a.current {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #32373b;
background: #3e4347;
box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #feffff;
text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}
.pagenavi span:hover,.pagenavi a:hover {
background: #3d4f5d;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}
.pagenavi a.current {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

width:300px;
margin: 50px auto;
}
.pagenavi span, .pagenavi a {
background: #f7f7f7;
background: -webkit-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -moz-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -o-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -ms-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
padding: 5px 10px;
text-decoration: none;
color: #7e7e7e;
border: 1px solid #c6c6c6;
-webkit-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
font-weight: bold;
border-radius:3px;
}
.pagenavi span:hover,.pagenavi a:hover, .pagenavi a.current {
background: #9ad6fb;
background: -webkit-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -moz-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -o-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -ms-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
border: 1px solid #72ade4;
color: #4879a6;
-webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-moz-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-webkit-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
}
.pagenavi { border:none; }

width:300px;
margin: 50px auto;
}
.pagenavi span, .pagenavi a {
display: block;
text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:hover,.pagenavi a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
border:none;
color:#575757;
}
.pagenavi a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}
display: block;
text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:hover,.pagenavi a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:active,.pagenavi a:active, .pagenavi a.current:hover {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}
.pagenavi a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}
Ingat ! Cuma pasang satu dari ke lima macam kode navigasi nomor halaman di atas yaa.. Sudah tau kan letak </b:skin> dimana ? Letaknya di Blogger ke Template ke Edit HTML dan cari kode yang tadi dengan menggunakan 'ctrl + f' , di tunggu komentar dan sarannya juga ! Semoga bermanfaat yaaa~ ^^
Referensi : http://bloggerbin.com/5-cool-numbered-page-navigation-widgets/
Diposting oleh
Unknown
di
20.18
0
komentar
Label: Tutorial Blog
Membuat Kategori di Blog
Kategori atau yang biasa disebut oleh seorang blogger pengguna blogspot label, merupakan hal yang terpenting dalam sebuah blog untuk lebih mudah di jelajahi oleh para pengunjung. Fungsi dari sebuah widget kategori ini tidak akan pernah lepas dari sebuah tampilan website/blog, maka dari itu alangkah baiknya widget kategori ini terdapat di blog mu. Bagaimana caranya mamen? oooohhhh itu mudah sekali sobat, tinggal ikuti saja cara di bawah ini :
- Login ke blogger
- masuk ke Rancangan >> Elemen halaman
- setelah itu tambahkan sebuah gadget dimana saja
- lalu akan muncul pop-up window, kamu pilih yang LabelsKeterangan :
- Title atau judul : isi dengan judul widget itu, misalnya "Kategori di blog oketrik"
- Show menandakan kategori apasaja yang akan muncul, semua atau tertentu
- Sorting : mengurutkan kategori berdasarkan Alpabet atau kategori yang paling banyak
- Display : bentuk susunan dari widget kategori tersebut, apakah berbentuk daftar (List) atau paragraf (cloud) terserah kamu mau pilih yang mana, recomended List
- Setelah mengikuti langkah diatas, simpan deh
sumber :
http://oketrik.blogspot.com/2008/05/cara-membuat-widget-kategorilabel-di.html
Diposting oleh
Unknown
di
20.09
0
komentar
Label: Tutorial Blog
Favicon Langsung di Dashboard Blogger
posting tentang blogging lag nich,, yang saya share ini adalah tentang favicon, dulu saya juga pernah mengeshare tentang cara mengganti favicon,
kali ini yang saya share masih berhubungan dengan favicon lagi. yang
kemarin kan dengan cara manual, tapi kali ini dengan cara yang sangat
instan. tidak perlu ribet kaya kemarin. cara ini masih saya anggap baru,
karena saya baru mengetahuinya tadi pagi, mungkin ada sobat blogger
yang udah tau dari kemarin-kemarin.caranya tinggal menggunkan tool dari
blogger.
itulah tool baru yang di berikan oleh blogger, anda tinggal klik edit dan muncul gambar di bawah ini.
muncullah gambar seperti di atas, caranya seperti uploud foto biasa sobat blogger,, seperti layaknya fb dan twitter. nah itulah yang saya ketahui,,, semoga bermanfaat bagi sobat blogger semua.
untuk membuat/mengganti gambar dalam bentuk favicon .. silahkan beliau meluncur ke http://favicon.cc
sumber :
http://www.threex-hans.com/2011/07/cara-ganti-favicon-langsung-dari.html
Diposting oleh
Unknown
di
20.07
0
komentar
Label: Tutorial Blog
Tombol Chatting Room di Blog
Mau pasang fasilitas chatting diblogmu ??? Gampang kok dan sangat mudah.
Fasilitas chatting ini agar kamu bisa berinteraksi lebih dinamis
dengan para pengunjung blogmu. Jika ada pengunjung blogmu untuk
memasuki chat diblogmu tidak perlu untuk Sign Up, hanya memasukkan nama
yang diinginkan dan bisa memulai chatting. Chat yang kita akan pasang
dari Chatroll, chat ini sangatlah ringan. Kamu bisa memasang chat ini
sebagai widget.
Berikut langkah-langkahnya:
1. Buka www.chatroll.com
2. Klik Sign Up
3. Isi data-data yang diperlukan: Username, Password, Email dan Verification Code
4. Nah, sekarang kamu sudah buat ID. Untuk membuat chatnya, klik create a chatroll
5. Isi kolom Name untuk memberikan nama chatmu.
6. Lalu klik Blogger
7. Nah, kamu pilih satu satu script yang diberikan. Add Chatroll to your Blogger Sidebar untuk dipasang diwidget disamping dan Add Chatroll to a Blogger Post untuk dipasang di postinganmu maupun di laman.
8. Untuk mengganti ukuran, angka width (lebar) dan height (tinggi) dapat dirubah sesuai ukuran untuk blogmu.
9. Siap untuk dicopy-paste
Saatnya Memasang Di Sidebar:
1. Login ke www.blogger.com
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Lalu pastekan kode script yang diberikan tadi
6. Jika sudah disesuaikan ukurannya, klik Simpan
Saatnya memasang di Postingan:
1. Login ke www.blogger.com
2. Klik Entri Baru
3. Lalu pastekan kode script yang diberikan tadi.
4. Jika sudah disesuaikan ukurannya, klik Terbitkan Entri
sumber :
http://naxzapram.blogspot.com/2011/06/cara-memasang-chatroll.html
Diposting oleh
Unknown
di
20.01
0
komentar
Label: Tutorial Blog
Pasang Kalender di Blog
Memasang sebuah kalender kita bisa memanfaatkan berbagai situs
penyedia kalender gratisan. Situs seperti ini sangatlah banyak, agar
tidak terlalu bingung mencarinya, saya berikan contoh satu saja yaitu
http://free-blog-content.com.
Silahkan kunjungi situs tersebut ! kalender yang di sediakan sangat beragam.
Langkah-langkah memasang kalender di blog :
1. Login ke blogger
2. Pilih rancangan / tata letak
3. Tambah Widget baru
4. Pilih HTML/Javascript ( copy kode di bawah ini )
Hasilnya :
M | S | S | R | K | J | S |
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | ||||||
Khusus bagi yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah, kalender ini di dapat dari http://mfr.jentayu.com. Bentuk kalendernya seperti ini :
Untuk mendapatkannya copy kode di bawah ini ke Widget
<script src="http://hijriah.jentayu.com/hijriah.php"> </script>
Pasang Jam di Blog Klick disini
sumber :
http://gratistutoriallengkap.blogspot.com/2010/08/pasang-kalender-di-blog.html
Diposting oleh
Unknown
di
19.58
0
komentar
Label: Tutorial Blog
Pasang Jam di Blog
Pasang Jam di Blog
Langkah - langkah sebagai berikut :
- Klik alamat www.clocklink.com
- Cari tulisan Want a clock on your Website ? lalu kamu klik.
- Pilih Gallery sesuai selera atau tema blog, mulai dari yang berbentuk analog, animal, animation dan seterusnya.
- Setelah itu pilih model yang ingin temen - temen gunakan, lalu klik "view html tag " .
- Klik tombol yang bertuliskan Accept.
- Agar waktu sesuai dengan tempat anda, seting dulu waktu di samping
tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00 dan set ukuran jam yang anda sukai di samping tulisan size.
- Pada halaman box selanjutnya temen - temen dapat memilih salah satu code, sebaiknya pilih kode yang atas.
- Copy kode HTML yang di berikan pada notepad atau sejenisnya untuk sementara waktu.
Langkah yang terakhir :
- Login dulu
- Klik Tata Letak
- Tambahkan sebuah Elemen Halaman
- Pilih HTML/JavaScript
- Lalu Copy/Paste code tersebut,
Silahkan di coba.... :)
sumber :
http://putroweb.blogspot.com/2009/04/pasang-jam-di-blog.html
Diposting oleh
Unknown
di
19.56
0
komentar
Label: Tutorial Blog
Navigasi Horizontal pada Blog
Haaa... mungkin diantara sobat ada yang masih belum tau apa yang dimaksud navigasi blog yang saya tulis di artikel ini ? Lihat aja deh gambar dibawah ini :
Apa Manfaat dan Fungsi Navigasi Blog ?
Manfaat dan Fungsi Navigasi blog adalah untuk memudahkan pengunjung blog mencari artikel atau konten yang dibutuhkannya. Navigasi blog juga menjadi salah satu point penting dalam SEO ( Search engine Optimisation )Langkah Membuat Navigasi Blog
Ada dua cara membuat tab navigasi horisontal dibawah header.Cara satu dengan fitur membuat tab halaman page dariblogger , yang caranya bisa lihat disini : Tab navigasi Horisontal Halaman Page Blogger
Cara kedua adalah cara manual yang lebih fleksibel untuk pengaturan tampilan sesuai kehendak kita.
Untuk membuat Navigasi blog Horisontal ini , saya menggunakan contoh template SIMPLE Josh Peterson .
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
1. Buka dashbor blogger anda pada tampilan blogger lama, dengan pengaturan bahasa umum ke bahasa Indonesia.Lihat disini cara mengatur tampilan dashbor blogger .
2. Klik Tab "Rancangan".
3.Pilih Tab EDIT HTML
4. Kemudian untuk jaga-jaga, silahkan klik link Download Template Lengkap , lalu simpan di hardisk komputer .
5. Setelah membackup template lama, lalu centang kotak Expand Template Widget
6. Klik CTRL + F pada keyboard anda utk mencari kode </header>
gambar dibawah ini screenshot saat saya berada di browser mozilla Firefox.
7. Setelah ketemu tag </header> , copy kode dibawah ini , dan pastekan dibawah tag header tsb.
<!-- univmenucontainer -->
<div id='univmenucontainer'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#' title='ganti'>About Us</a></li>
<li><a href='#' title='ganti'>Download</a>
<ul class='subnav-2'>
<li><a href='#' title='Ebook'>Ebook</a>
</li>
<li><a href='#' title='ganti'>Software</a>
</li>
</ul>
</li>
<li><a href='#' title='ganti'>Sitemap</a></li>
<li><a href='#' title='ganti'>Produk</a></li>
<li><a href='#' title='ganti'>Belum Ada</a></li>
</ul>
</div>
</div>
<!-- /univmenucontainer -->
Ganti tanda " # " pada kode diatas dengan URL link lengkap , misalnya URL halaman Page , atau URL postingan blog yang ingin ditampilkan di Tab navigasi blog anda.
Contoh URL lengkap : http://templatepertama1.blogspot.com/p/about.html
Ganti title nya sesuai dengan Link yg anda tampilkan
Ganti keterangan TEXT : About ; Ebook,SOftware dll dgn Text sesuai dengan link yg ingin ditampilkan.
Contoh lengkap : misalnya pada navigasi About Us :
<li><a href='http://templatepertama1.blogspot.com/p/about.html' title="Kenalan dulu yuk">About Us</a></li>
8. Setelah anda mem paste kode HTML utk navigasi ,lalu cari lagi dengan tekan CTRL+F pada keybord anda kode tag : ]]></b:skin>
9. Setelah ketemu, lalu copy kode CSS dibawah ini , dan pastekan diatas kode ]]></b:skin> tadi .
Kode CSS pengatur Navigasi Horisontal :
/* Navigasi horrisontal --*/
#univmenucontainer{
height:26px;
display:block;
margin:5px 0;padding:2px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;background:#000444;
}
#menu ,#menu ul {
height:24px;
margin: 0 1px;
padding: 0;
list-style: none;
height:24px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 5px;
background:#000222;
border-left:1px solid #666;
}
#menu a:hover {
background:#999;
color: #222;
display: block;
text-decoration: none;
background:#0fffff;
border:0.5px solid #666;
}
#menu li {
float: left;
margin:0;
padding: 0;
}
#menu li li {
float: left;
margin: 0px 0px 0px 5px;
padding: 0px;
width: 130px;
background:#aaa;
border:1px solid #666;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#0fffff;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#000;
}
#menu li li a:hover, #menu li li a:active {
background:#0fffff;
border:0.5px solid #666;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
10. Kalau sudah di paste, langkah terakhir adalah tekan SAVE template
Nahhh demikiaanlah artikel Cara Membuat Navigasi Horisontal ini saya berikan yang semoga berguna untuk anda..
Sumber
http://universityofbloggers.blogspot.com/2012/03/cara-membuat-navigasi-horisontal.html
Diposting oleh
Unknown
di
19.55
0
komentar
Label: Tutorial Blog
Cara Membuat Navigasi Nomor Halaman di Blog

1. Login ke akun blog sobat.
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
5. Cari kode </body> dan letakkan script di bawah tepat di atas kode berikut.
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
6. Simpan template sobat dan lihat hasilnya.
Oke, sekian tutorial dari saya mengenai cara membuat pages number navigation di blog. Semoga bermanfaat..
Diposting oleh
Unknown
di
19.52
0
komentar
Label: Tutorial Blog
Read More Otomatis di Blogspot
Cara membuat read more pada blog, blogspot, Blogger
ini sangat mudah sekali, karena hanya tinggal mengcopykan script code
yang ada ke template blogspot anda, dan Berikut ini cara yang mudah
untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti
halnya yang digunakan pada Blog. sebelum anda memulai membuat read more pada blog, blogspot, blogger yang harus anda lakukan adalah sebagai berikut :
► Silahkan Login dan masuk di akun blogger anda
► lalu klik Rancangan dan klik Edit HTML
► Centang Expand Template Widget
► Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
► Cari kode </head> dan kalau sudah ketemu
► Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode </head>
Bila anda ingin merubah ukuran Read More Pada Blog, Blogspot, Blogger anda, ubah aja di bagian-bagian kode di bawah ini, dan Ubah angka nya sesuai kebutuhan:
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail
► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
► dan untuk kata " READ MORE " bisa diganti sesuai dengan selera anda.
Diposting oleh
Unknown
di
19.49
0
komentar
Label: Tutorial Blog
Ai Kadewa
Diposting oleh
Unknown
di
04.39
0
komentar
Label: Kasanah Budaya Samawa