Cara Membuat Daftar Isi/Arsip Blog Otomatis dengan Scrool

Selamat bertemu kembali. Malam yang begitu indah untuk memposting ke blog Anak Pesisir...... Postingan ini akan membahas tentang cara membuat DAFTAR ISI atau ARSIP BLOG secara otomatis. Tidak perlu edit HTML, cukup copy paste saja. Beres deh.......!!!! Demonya, silahkan lihat bagian atas blog ini.

Ok!!! Kita langsung saja ke pokok permasalahan. Pertama, seperti biasa silahkan login ke akun blog Anda atau klik di sini. Klik RANCANGAN kemudian pada halaman ELEMEN LAMAN klik Add Gadget/Tambah Gadget. Untuk lebih jelas, lihat nih gambarnya!


Kalau sudah muncul, klik saja tanda plus pada HTML/JavaScript. Lihat gambar berikut.


Nah, kan muncul tuh kotaknya. Silahkan isi judul sesuai keinginan Anda lalu copy paste kode berikut ke dalam kolom yang kosong. Lihat gambar di bawahnya.




Setelah itu, klik SIMPAN dan beres deh!!!!

Keterangan:
  • Untuk kode width: 99%; height: 263px; silahkan sesuaikan dengan ukuran blog Anda.
  • Sedangkan kode HTTP://NAMA BLOG ANDA.BLOGSPOT.COM ganti dengan alamat url blog Anda.
  • Kalau ingin mengganti warna bordernya, silahkan ubah kode berikut: border-top: 2px groove #fff; border-left: 2px groove #fff; border-bottom: 2px groove #fff; border-right: 0px dashed #fff;. Jika tidak mau pake border, tinggal hapus saja kode tersebut. Oke!!!

Terima kasih telah berkunjung. Selamat belajar dan jangan lupa komentarnya ya!!!!!
Menambah Sidebar Tiga Kolom di Bawah Header

Menambah Sidebar Tiga Kolom di Bawah Header

Jika Anda ingin menambahkan sidebar di bawah header, silahkan ikuti petunjuk berikut. Pertama-tama yang harus diketahui, yaitu sidebar yang saya maksud adalah sidebar tiga kolom. Artinya, akan ada tiga sidebar yang akan muncul/terpasang nantinya (lihat tiga kolom di bawah menu blog ini).

Langsung saja untuk proses pemasangannya.
  • Log in ke akun BLOG Anda. Klik RANCANGAN lalu klik EDIT HTML.
  • DOWNLOAD template Anda terlebih dahulu kemudian centang EXPAND TEMPLATE WIDGET.
  • Letakkan kode berikut di atas ]]></b:skin>.

    #sidebar-atas {
    width:900px;
    clear:both;
    float:left;
    color:#fff;
    background: transparent;
    margin:0 auto;
    padding:0 0 10px;
    }

    #sidebar-atas a:visited {
    color:gray;
    text-decoration:none;
    }

    #sidebar-atas h2 {
    color: #fff;
    font-family: Comic Sans MS;
    font-size: 20px;
    font-weight: normal;
    text-shadow: 1px 1px 6px #fff;
    margin: 0 0 10px;
    padding: 10px;
    background: url(https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjbMaApXI/AAAAAAAAALo/ZV6xupKEs7w/backian.jpg);
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    }

    #left-sidebar-atas {
    width:360px;
    float:left;
    padding-left:15px;
    }

    #center-sidebar-atas {
    width:230px;
    float:left;
    padding:0 20px;
    }

    #right-sidebar-atas {
    width:260px;
    float:right;
    padding-right:15px;
    }
  • Kemudian cari kode berikut.

    <div id='header'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Anak Pesisir (Header)' type='Header'/>
    </b:section>
    </div>
  • Setelah ketemu, letakkan kode berikut di bawahnya.

    <div id='sidebar-atas'>
    <b:section class='sidebar-atas' id='left-sidebar-atas' preferred='yes'/>
    <b:section class='sidebar-atas' id='center-sidebar-atas' preferred='yes'/>
    <b:section class='sidebar-atas' id='right-sidebar-atas' preferred='yes'/>
    </div>
  • Jika Anda memiliki menu horizontal dan ingin menyimpannya di bawah menu blog Anda, simpan saja kodenya di bawah kode menu pada blog Anda.
  • Ganti tulisan berwarna merah dan sesuaikan dengan ukuran blog Anda. SIMPAN TEMPLATE dan selesai. Silahkan lihat hasilnya di ELEMEN LAMAN.

Selamat belajar dan jangan lupa komentarnya ya!!!
Cara Membuat Text/Tulisan Berjalan

Cara Membuat Text/Tulisan Berjalan

TERIMA KASIH TELAH BERKUNUNG KE BLOG INI. JANGAN LUPA KOMENTARNYA YA!

Selamat malam. Seperti postingan saya sebelumnya, membuat tulisan berjalan dengan efek pelangi, tulisan ini masih membahas dengan model yang lebih banyak lagi. Silahkan praktekkan postingan berikut karena menurut saya menarik. Membuat tulisan berjalan dengan beberapa variasi. Bisa dipasang di mana saja sesuai dengan keinginan Anda.

Lihat kode-kode berikut:
  • Untuk tulisan berjalan standarnya ialah berjalan ke kanan. Lihat tulisan berikut.
    TULISAN BERJALAN

    Kodenya seperti di bawah ini.
  • Yang kedua adalah tulisan berjalan ke kanan seperti di bawah ini.
    TULISAN BERJALAN KE KANAN

    Kodenya adalah seperti berikut.
  • Yang ketiga tulisan berjalan ke atas.
    TULISAN BERJALAN KE ATAS

  • Yang keempat, tulisan berjalan ke bawah.
    TULISAN BERJALAN KE BAWAH

    Kodenya seperti di bawah ini.
  • Yang kelima, tulisan berjalan bolak-balik seperti contoh di bawah ini.
    TULISAN BERJALAN BOLAK-BALIK

    Kodenya seperti di bawah ini.
  • Yang keenam, tulisan berjalan zig-zag ke atas lalu ke bawah.
    TULISAN BERJALAN BOLAK-BALIK KE ATAS LALU KE BAWAH

    Kodenya adalah:
  • Yang ketujuh, tulisan zig-zag ke bawah lalu ke atas.
    TULISAN BERJALAN BOLAK-BALIK KE BAWAH LALU KE ATAS

    Kodenya seperti berikut.
  • Selanjutnya adalah tulisan berjalan memantul tembus ke kanan.
    TULISAN BERJALAN MEMANTUL TEMBUS KE KANAN

    Kodenya sebagai berikut:
  • Kemudian tulisan memantul tembus ke kiri.
    TULISAN BERJALAN MEMANTUL TEMBUS KE KIRI

    Kodenya adalah:
  • Selanjutnya lihat di bawah ini. Tulisan berjalan memantul.
    TULISAN BERJALAN MEMANTUL

    Kodenya adalah:

Demikian model-model tulisan berjalan. Sebenarnya masih banyak lagi. Tulisan di atas hanya contoh saja. Tulisan berjalan berwarna pelangi bisa juga dipraktekkan seperti yang sudah daya posting sebelumnya. Kalau belum baca, silahkan baca artikel sebelumnya berjudul cara membuat tulisan berjalan (pelangi) di sini. Untuk model yang lain bisa Anda buat sendiri. Silahkan bereksperimen.

Selamat belajar dan jangan lupa komentarnya ya!!!
Cara Membuat Tulisan Berjalan ( Pelangi)

Cara Membuat Tulisan Berjalan ( Pelangi)


Di sini tulisan yang ingin di beri efek pelangi berjalan



Efek tulisan pelangi ini saya ambil dari blog Aku Punya dot Com, kemudian saya tambahkan sedikit kode agar bisa berjalan dan muncullah tulisan pelangi berjalan ini. Langsung saja praktekkan. Caranya sangat mudah.
  • Login ke blog Anda dan pilih RANCANGAN. Kemudian pilih EDIT HTML.
  • Jangan lupa download template blog Anda terlebih dahulu. Centang EXPAND TEMPLATE WIDGET.
  • Copy dan letakkan kode berikut sebelum kode </head>.
  • Klik SAVE.
  • Langkah selanjutnya adalah memasukkan kode berikut ke dalam text/tulisan yang ingin diberi efek pelangi berjalan.
Selesai dan lihat hasilnya.
Selamat belajar dan jangan lupa komentarnya ya!!

Sumber: http://aku-punya.com/cara-membuat-text-tulisan-pelangi.html

Mengganti Read More dengan Gambar

Selamat Malam. Setelah lama tidak membuat postingan, saya berinisiatif saja memberikan tips ini kepada para blogger. Masih tentang modifikasi blog. Posting kali ini pun masih membahas tentang tutorial yang sudah umum, yaitu mengganti tulisan Read More/Baca Selengkapnya dengan sebuah gambar.

Yang pertama Anda lakukan adalah membuat gambar read more yang akan kita gunakan nanti. Silahkan buka situs Supalogo.com atau klik di sini. Di sana Anda bisa memodifikasi tulisan read more seperti yang kita sukai. Tampilannya seperti ini:

Selanjutnya, masukkan kata-kata di kolom yang tersedia. Klik GENERATE dan lihat preview-nya di bawah. Untuk mengganti jenis huruf/font, text size, shadow text, dan warna yang lain, klik saja OPTION. Setelah sesuai dengan selera Anda, download kemudian upload di tempat penyimpanan gambar Anda. Kalau yang saya pakai di sini adalah PICASA. Copy link gambar Anda ke notepad.

Langkah selanjutnya adalah mencari kode berikut:



Setelah ketemu, download dulu template Anda dan centang Expand Widget. Ganti kode + "#more"'><data:post.jumpText/> dengan kode berikut.



Hasilnya seperti ini.



Ganti tulisan berwarna merah dengan URL gambar Anda. Untuk width dan height bisa Anda ganti sesuai dengan template blog Anda. Klik Save Template dam lihat hasilnya.

Selamat belajar. Sukses dan jangan lupa komentarnya ya.....!!!!
Cara Membuat Menu Horisontal

Cara Membuat Menu Horisontal

Selamat bertemu kembali. Posting kali ini merupakan pembahasan yang sebenarnya sudah tidah baru lagi. Tapi untuk lebih memahaminya, saya mencoba untuk mempostingnya kembali......

Langsung saja ke pokok bahasannya. Menu horizontal. Menu ini adalah menu mendatar dan bertingkat ke bawah. Lihat aja contohnya di bagian menu blog ini. Kalau masih ada yang belum paham, silahkan baca tulisan ini sampai akhir.

  1. Langkah pertama yang haru dilakukan adalah. Login ke blog Anda seperti biasa.
  2. Klik Rancangan kemudian Edit HTML.
  3. Jangan lupa download dulu template Anda untuk menjaga kemungkinan gagal.
  4. Centang Expand Template Widget.
  5. Letakkan kode berikut di atas ]]></b:skin>. Untuk memudahkan mencari kodenya, tekan control F.

    #menublog {
    width:919px;
    float:left;
    margin:0;
    padding: 10px;
    background: aqua;
    }
    #menu {
    margin:0;
    padding:0;
    }
    #menu a {
    font-family: Comic Sans MS;
    color: black;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    padding: 10px;
    }
    #menu a:hover {
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    background: black;
    }
  6. Selanjutnya, cari kode berikut:

    <div id='header'>
    ...............
    ...............
    </div>
  7. Kemudian letakkan kode berikut di bawah kode tadi.

    <div id="menublog">
    <div id="menu">
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Halaman Utama Anak Pesisir">Home</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Template Galeri">Template Galeri</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Belajar">Belajar</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Profil">Profil</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Kontak">Kontak</a>
    </div>
    </div>
  8. Silahkan ganti tulisan berwarna hijau sesuai dengan selera dan ukuran blog Anda. Untuk kesesuaian selera, silahkan ubah jenis huruf, ukuran huruf dan lainnya. Okey!
  9. Langkah terakhir adalah Save Template. Selesai

Terima kasih. Selamat belajar. Jangan lupa komentarnya ya.......!!!!

Damai Dalam Sukmaku


Bantimurung,
Kelak kisah ini jadi puncak
Di antara kebahagiaan kita
Tersenyum
Tertawa
Hanya kau dan aku di sana
Telah kuberikan indahnya padamu
Yang kau mau
Yang kau impikan
Yang lahir dari hatimu

Melihatmu tertawa dan bahagia
Adalah semangat dan tanda kasih untukku
Yang terindah
Kau hati
Seperti damai yang menyusup ke dalam relung sukmaku
Antarkanku pada satu waktu yang tak terlupa
Beribu kesan
Kaulah satu untukku
Di dalam sanubari
Pada semua sisi hatiku
Hanya namamu

Makassar, 2 Februari 2011