Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Template Desain Sendiri (Bag. 4)

Selamat berjumpa kembali. Masih semangat membuat template blog desain sendiri? Oke!!! Kita lanjut ke tahap berikutnya. Saatnya kita membentuk bagian Area Postingan dan Sidebarnya. Langsung saja menuju TKP.

Silahkan buka kembali aplikasi phpDesign Anda, kemudian buka desain templatenya. Copy kode berikut dan letakkan di bawah kode Menu.

/*-----Untuk Postingan-----*/

#areapost {
Overflow:hidden;
margin-top:5px;
padding:10px;
width:445px;
border:1px solid #000;
float:left;
}

/*-----Untuk Sidebar-----*/

#sidebar {
margin-top:5px;
margin-left: 5px;
padding:10px;
width:430px;
border:1px solid #000;
float:right;
overflow: hidden;
}

Geser kursor ke bawah dan cari Area Post. Seperti biasa, tambahkan kode <div> dan </div> di depan kata tersebut. Perhatikan gambarnya.


Kemudian tambahkan kode id=”areapost” sebelum penutup kode <div>. Lihat gambarnya kalau bingung.


Setelah itu, pindahkan kode </div> dan letakkan di bawah Area Komentar, lalu hapus Area Post. Lihat gambar di bawah.


Untuk Area Post sudah selesai. Sekarang lakukan langkah tadi pada Area Sidebar. Hasilnya seperti gambar di bawah.


Selesai deh. Seperti biasa, klik RUN untuk preview-nya. Oke!!!! Hasilnya sudah mirip template blog bukan?, meskipun baru setengah jadi. Lihat gambar di bawah ya!


Gampang kan? Sudah dulu ya untuk postingan ini (Membuat Template Desain Sendiri Bag. 4). Tunggu postingan selanjutnya. Membuat Template Desain Sendiri Bag. 5.
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 3)

Selamat bertemu kembali. Sudah siap beraksi? Sekarang kita lanjutkan belajarnya. Dah bagian 3 kan? Kali ini, kita akan membuat bagian Header dan Menunya. Silahkan buka kembali desain template Anda dengan phpDesign.

Silahkan copy kode berikut dan letakkan di bawah kode #kotakblog (lihat gambar di bawahnya):

*/-----Untuk Header-----*/

#header {
padding-top: 15px;
width:930px;
height:150px; /*tinggi area header*/
border:1px solid #000;
background:transparent;
}

*/-----Untuk Menu-----*/

#menu {
overflow: hidden;
width: 100%; /*panjang menu*/
font-size: 16px; /*ukuran font*/
letter-spacing: 1px;
border-bottom: 1px inset;
border-bottom-width: thick;
padding-bottom: 5px;
}


Kalau sudah, tambahkan kode untuk Header dan Menunya. Caranya sama dengan postingan sebelumnya. Silahkan pindahkan kursor ke bawah, tempatnya di bawah kode <body>. Pertama, untuk Header silahkan Anda tambahkan kode seperti ini: <div>. Tekan SPASI setelah tanda (>) lalu akan muncul pilihan. Silahkan pilih kode id=”” lalu pilih Header. Nih, ada gambarnya di bawah supaya tidak bingung.


Setelah itu, pindahkan kode penutup </div> dan letakkan di bawah Deskripsi Blog. Maka hasilnya akan seperti gambar di bawah ini.


Kedua, silahkan lakukan hal yang sama untuk kode Menu. Sudah paham kan? Oke!!! Hasilnya akan seperti gambar di bawah ini.


Seperti biasa, silahkan klik RUN untuk lihat hasilnya. Kira-kira seperti gambar di bawah.


Untuk area Header dan Menu sudah terbentuk kan? Postingan Membuat Template Desain Sendiri (Bag. 3) sudah selesai. Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 4). Oke!!!
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 2)

Selamat bertemu kembali. Kita lanjutkan membuat template sendiri. Masih bersemangat dan fit kan hari ini? Oke!!! Kita lanjutkan ke tahap selanjutnya. Silahkan buka kembali desain template yang sudat Anda buat.

Setelah itu, silahkan arahkan kursor Anda diantara kode </head> dan <body>. Pada menu phpDesign, klik CSS lalu klik Style Block. Kalau bingung lihat saja gambarnya.


Akan muncul kode Style CSS seperti gambar berikut:


Silahkan copy kode berikut di antara Style CSS tersebut:

body {
padding:0;
background: #cccccc;
font-family:'Georgia', Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
margin:auto;
}

#kotakblog {
margin:5px;
padding:3px;
width:930px;
background: #804040;
background-attachment: fixed;
margin:0 auto;
}

Jadi, akan seperti ini:


Langkah selanjutnya adalah membuat kode untuk Kotak Blog. Arahkan kursor ke bawah dan cari Kotak Blog yang telah Anda buat. Tulis kode ini: <div>. Tekan spasi sebelum kode (>), akan muncul seperti gambar berikut:


Klik ganda id=””, akan muncul nama kotakblog. Langsung klik ganda saja dan hapus tulisan Kotak Blog setelah kodenya.


Tambahkan kode penutup </div> di atas kode </body>. Tempatnya paling bawah. Kurang jelas? lihat gambarnya.


Untuk tahap ini selesai. Kalau ingin lihat hasilnya, klik RUN pada menu bar. Hasilnya akan seperti gambar di bawah.


Sudah terbentuk kan templatenya? Sekian dulu yah, tunggu postingan lanjutan Membuat Template Desain Sendiri (Bag. 3).
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 1)

Selamat berjumpa kembali. Postingan ini adalah lanjutan dari postingan sebelumnya. Seperti yang saya jelaskan pada postingan kemarin, membuat template bisa memakai aplikasi seperti phpDesign, Kit HTML, Notepad, dan masih banyak yang lain. Sekarang kita akan memulai membuat template sendiri dengan menggunakan software phpDesign versi 7. Silahkan download di sini lalu instal dulu kalau belum punya, hehehe...!!!

Ok! Kita langsung saja mulai. Silahkan buka aplikasi phpDesign Anda, kemudian klik ganda tulisan HTML. Lihat gambar di bawah.



Kemudian akan tebuka file baru berisi kode HTML template secara garis besar (Lihat gambar kedua di atas). Di sana kita akan memulai membuat desainnya. Yang pertama harus dilakukan adalah membuat susunan/gambaran untuk template yang akan dibuat diantara kode <body> dan </body> (lihat gambar di bawah). Susunannya seperti di bawah ini.

Kotak Blog

Content

Header
Judul Blog
Deskripsi Blog

Menu
Menukiri
Search

Area Post
Judul Postingan
Isi Postingan
Post Footer
Area Komentar

Area Sidebar
Sidebar Left
Sidebar Right

Footer
Copyright
Info


Sampai di sini dulu Membuat Template Desain Sendiri (Bag. 1). Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 2).

Selamat belajar dan jangan lupa komentarnya ya!!!
Baca Lengkap....

Membuat Template Blog Desain Sendiri

Salam berjumpa kembali. Lama juga tidak buat postingan gara-gara kurang sehat...... heehehehehe, jadi curhat nih!

Oke. Postingan kali ini akan membahasa tentang template. Pasti ada kebanggaan tersendiri jika template yang kita gunakan adalah template hasil desain kita sendiri. Saya membuat postingan ini setelah lama mempelajari kode-kode HTML. Kalau masih kurang paham tentang kode HTML, silahkan klik baca postingan saya di sini.

Berbekal sedikit pengetahuan tentang kode HTML tersebut, saya mencoba membuat desain template sendiri. Setelah mencobanya dan belajar secara otodidak selama kurang lebih tiga bulan, akhirnya saya berhasil membuat desain template sendiri. Demonya bisa Anda lihat di sini dan di sini.

Tenyata membuat desain template sendiri sangatlah mudah dan tidak sesulit ketika kita hanya duduk membayangkannya. Asal kita sudah tahu dan memahami kode-kode dasar dari HTML itu. Ada beberapa program yang bisa Anda gunakan seperti phpDesign, Kit HTML, Notepad, dan masih banyak lagi!

Saya akan mencoba berbagi sedikit ilmu yang saya dapat dari hasil begadang selama kurung waktu yang saya sebutkan tadi. Hehehehehehehe..........! Mau belajar? Silahkan tunggu postingan tentang proses Membuat Template Desain Sendiri (Bag. 1).

Selamat belajar dan jangan lupa komentarnya ya!!!
Baca Lengkap....

Cara Mengganti Huruf/Font pada Judul Postingan

Hay.... ketemu lagi.......... Pernah jalan-jalan ke GOOGLE WEB FONTS? Kalau belum, buruan kunjungi. Di sana banyak model/jenis huruf yang keren-keren untuk blog Anda. Silahkan Anda pilih sendiri model yang Anda sukai. Karena di google web font ini sudah dilengkapi dengan kode CSS, jadi Anda tinggal copy paste saja ke blognya. Gampangkan? Oke!!!

Trus, gimana cara pasangnya? Hehehehehe..... Kita langsung saja ke situs utamanya atau klik langsung di sini. Pada halaman ini, silahkan klik jenis font yang disukai kemudian klik USE THIS FONT. Untuk lebih jelasnya, silahkan lihat gambar di bawah.


Misalnya, Anda ingin menggunakan model font TERMINAL DOSIS LIGHT, langsung klik saja. Kemudian akan muncul halaman seperti gambar berikut.


Selanjutnya, klik USE THIS FONT (lihat gambar di atas). Akan muncul kode CSSnya (lihat gambarnya di bawah). Copy kode tersebut ke notepad dan jangan lupa tambahkan tanda garis miring (/) pada akhir kode sebelum tanda (>). Jadi, akan seperti ini hasilnya:





Setelah itu, kita beralih ke cara memasangnya pada blog. Caranya seperti ini:
  1. LOGIN ke blog Anda.
  2. Klik RANCANGAN, kemudian EDIT HTML.
  3. Letakkan kode CSS tadi di bawah kode <head>. Tempatnya di bagian atas, jadi tidak perlu cari jauh-jauh ke bawah. Kemudian cari kode berikut. Caranya klik CTRL + F.

  4. Tambahkan kode berikut di bawahnya.



    Hasilnya kira-kira akan seperti ini.



    Catatan: Jika post h3 blog Anda terdapat kode font-family, tinggal tambahkan saja nama fontnya ("Terminal Dosis Light")
  5. Silahkan SAVE TEMPLATE dan lihat hasilnya!!!
  6. Selesai. Gampang kan!!!

Selamat belajar dan jangan lupa komentarnya ya!!!!
Baca Lengkap....

Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

Selamat bertemu kembali. Postingan ini akan membahas tentang cara membuat DAFTAR ISI atau ARSIP BLOG secara otomatis. Tidak perlu edit HTML, cukup copy paste saja. Beres deh..!

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.
Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

Kalau sudah muncul, klik saja tanda plus pada HTML/JavaScript.
Cara Membuat Daftar Isi Atau Arsip Blog Otomatis dengan Scrool

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!!!!!
Baca Lengkap....

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!!!
Baca Lengkap....

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!!!
Baca Lengkap....

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
Baca Lengkap....

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.....!!!!
Baca Lengkap....

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.......!!!!
Baca Lengkap....

Menu Tab View Tanpa Edit HTML 2

Selamat Bertemu Kembali!!! Postingan ini adalah update dari postingan saya sebelumnya. Postingan ini saya buat karena style menu tab view sebelumnya, terkesang sangat sederhana dan itu-itu saja. Jadi, saya membuat dua style baru yang. Langkahnya sudah tau kan? Kalau belum, gampang kok. tidak terlalu susah. Oke, kita mulai saja.

Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.

  • Copy kode berikut untuk Menu Tab View dengan border yang melengkung.


    Hasilnya seperti gambar di bawah.

  • Copy kode berikut untuk Menu Tab View biasa.




    • Hasilnya akan seperti ini.
    Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.


Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.
Baca Lengkap....

Membuat Menu Tab View tanpa Edit HTML

Para blogger mungkin sudah pernah mencoba membuat tab view menu atau menu dengan tab (lihat gambar di atas) yang tentu saja dalam pembuatan tab view menunya kita harus mengedit HTML template. Bagi yang belum dan ingin mencobanya, tidak perlu takut. Tulisan kali ini akan membahas cara membuat tab view menu tanpa mengedit kode HTML template.

Caranya sangatlah gampang, tidak perlu susah-susah. Sobat blogger tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.
Silahkan login ke Blogger, pilih RANCANGAN, kemudian pada Elemen Halaman, klik Tambah Gadget. Silahkan pilih HTML/Javascript. Copy paste kode di bawah ini ke dalamnya:

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Tulisan warna kuning adalah judul dari menu Anda, sedangkan tulisan warna merah adalah isi dari menunya. Untuk lebar, huruf (font), dan tingginya, silahkan sesuaikan dengan lebar sidebar blog Anda. Hasilnya bisa Anda lihat di sini!

Kalau belum jelas, silahkan berkomentar. Ditunggu ya???
Selamat Belajar!!!
Baca Lengkap....

Mengenal Kode HTML

Bagi teman-teman yang baru belajar dan ingin tahu tentang kode-kode HTML, silahkan pelajari kode-kode dasar berikut.

HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa dari World Wide Web (WWW) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser

Tag-tag dasar HTML:
<html>           : Definisi sebuah dokumen HTML
<title>            : Definisi judul dalam dokumen
<body>          : Definisi body dokumen
<h1> - <h6>  : Definisi heading 1 s/d 6
<p>                : Definisi sebuah paragraf
<br>               : Sisipan line break
<!-- >             : Definisi kompentar dalam source code

Tag-tag pemformatan:
<b>         : Teks yang ditebalkan
<big>       : Teks dengan ukuran yang besar
<em>       : Teks yang diberi tekanan
<i>           : Teks yang dimiringkan
<small>    : Teks yang kecil ukurannya
<strong>  : Teks yang ditebalkan
<sub>      : Subscipt
<sup>      : Superscript
<ins>        : Teks yang disisipkan
<del>       : Teks yang dihapus
<u>          : Teks yang diberi garis bawah

Tag-tag Link dan List:
<a>       : Definisi untuk ancor
<link>    : untuk warna text sebelum diklik
<vlink>  : untuk mengubah warna text link setelah diklik
<alink>  : akan mengubah warna link aktif
<ol>      : Ordered list / untuk penomoran
<ul>      : Unordered List / bullet
<li>       : List item
<dl>      : Definition term
<dd>     : Definition description

Karakter khusus dalam file HTML :
& quot ;   ( " ) 
& amp ;   ( & ) 
& frasl ;    ( ⁄ ) 
& lt ;         ( < )
& gt ;        ( > ) 
& nbsp ;    ( spasi )
& copy ;    ( © )

Selamat belajar dan sukses selalu!!!
Baca Lengkap....

Cara Membuat Akun Blog dan Blog di Blogger

Postingan ini masih lanjutan dari postingan saya sebelumnya, yaitu cara membuat blog di blogspot dot com. Kalau belum baca silahkan klik CARA MENDAFTAR BLOG DI BLOGGER DOT COM. Membuat blog di blogspot sangatlah mudah. Caranya, ikuti saja petunjuk di bawah ini.

  1. Silahkan ketik https://www.google.com atau klik di sini. Anda akan dibawa ke tab seperti gambar berikut:
  2. Silahkan klik Get started. Selanjutnya akan terbuka seperti gambar berikut.
  3. Isikan biodata Anda ke dalam kotak-kotak yang tersedia. Mulai dari alamat email dan seterusnya. Jangan lupa centang persetujuan Persyaratan dan Layanan, lalu klik Lanjutkan.
  4. Setelah terbuka halaman baru, isikan lokasi negara (Indonesia) dan nomor telepon Anda untuk verifikasi akun. Silahkan klik “Kirim kode verifikasi ke ponsel saya” untuk memperoleh kode verifikasinya. Lihat gambar di bawah ini.
  5. Kemudian Anda akan dibawah ke tahap selanjutnya, yaitu tempat memasukkan kode verifikasi akun google Anda. Setelah menerima pesan via SMS, masukkan kodenya kemudian klik verifikasi. Lihat gambar berikut:
    Catatan: “Jika Anda tidak menerima pesan kode verifikasi, silahkan klik “Coba kirim ulang” (lihat gambar di atas).”
  6. Sedikit lagi blog Anda akan selesai dibuat. Setelah itu, Anda akan diarahkan ke tahap selanjutnya, yaitu nama dan alamat url blog Anda. Lihat gambar di bawah ini.
  7. Silahkan isi “Judul blog”. Ini adalah judul blog Anda yang nantinya akan muncul pada publikasi blog, dasbor, dan profil Anda. Anda bisa menggantinya nanti ketika ingin mengubah namanya. Selanjutnya, klik Cek Ketersediaan atau isi kolom setelah http:// dengan alamat url yang Anda inginkan (lihat gambar). Misalnya, Anda tulis blog-percobaan. Jika tersedia, maka alamat blog Anda nantinya adalah http://www.blog-percobaan.blogspot.com. Kemudian klik “Lanjutkan”.
  8. Sekarang Anda sampai pada proses terakhir dari proses pembuata akun blog, yaitu memilih template dasar untuk blog Anda. Silahkan pilih template yang Anda sukai kemudian klik lanjutkan. Lihat gambar.
  9. Kini blog Anda sudah jadi. Anda akan dibawa ke jendela pemberitahuan bahwa blog Anda sudah jadi. Lihat gambar berikut.
  10. Silahkan klik mulai blogging untuk memulai membuat postingan pertama Anda. Klik publish dan selesai.

Selamat belajar dan sukses selalu. Jangan lupa komentarnya.
Baca Lengkap....

Cara Mendaftar Blog di Blogger dot Com

Mari belajar membuat blog di BLOGSPOT.COM. Untuk pemula, bisa membaca sedikit tips di bawah ini. Ada tiga cara yang saya tampilkan pada postingan kali ini. Silahkan pelajari.

  1. Bagaimana cara membuat account Blogger?

    Silahkan masuk di http://blogspot.com/ atau klik di sini. Pada homepage Blogger, klik tombol "Buatlah Blog Anda Sekarang". Pada halaman berikut, Anda akan diminta untuk membuat Google Account. Anda dapat menggunakan Google Account pada layanan Google lainnya. Jika Anda sudah memiliki Google Account mungkin dari Gmail, Google Group, atau Orkut, silakan sign in terlebih dahulu. Setelah Anda sign in, Anda harus memasukkan nama layar dan menerima Syarat Layanan Blogger. Setelah selesai, Anda akan diminta untuk membuat blog dan memulainya!
  2. Bagaimana cara membuat blog Blogger?

    Sebelum membuat blog gratis di Blogspot, yaitu layanan hosting Blogger, Anda harus telah membuat account pada blogger.com. Setelah Anda login ke blogger.com, klik link "Buat Blog". Pada Langkah 2, masukkan judul dan alamat (URL). Anda juga harus mengetikkan kata verifikasi yang ditampilkan di halaman ini. Setelah selesai, klik "lanjutkan". Pada langkah 3, Anda dapat memilih template untuk blog Anda; itulah tampilan yang akan muncul ketika Anda mempublikasikannya. Selanjutnya, Blogger akan membuat blog baru Anda dan mencadangkan spot Anda di BlogSpot. Segera setelah Anda membuat posting pertama, halaman Anda akan muncul di alamat yang Anda pilih.
  3. Bagaimana cara posting ke blog saya?

    Pada Dashboard Anda, klik link "Posting Baru" di sebelah blog yang ingin Anda kirimi. Berikutnya, Anda akan melihat halaman Buat Posting Baru. Awali dengan memberikan judul pada posting Anda (opsional), kemudian masukkan posting-nya. Setelah selesai, klik link "Pratinjau" untuk memastikan bahwa posting sudah siap. Setelah Anda puas dengan posting Anda, klik tombol "Publikasikan". Ini akan mempublikasikan posting baru Anda.
  4. Tunggu postingan berikutnya yang akan membahas satu persatu pembahasan di atas

Semoga postingan ini bermanfaat. Terima kasih telah berkunjung dan jangan lupa komentarnya ya!!!
Baca Lengkap....

Apa Itu Blog?

Bagi seorang blogger kata blog tentu sudah kerap didengar. Bahkan saking familiarnya dengan kata ini sampai-sampai website statis pun disebut sebagai blog.

Nah agar tidak ada lagi yang salah mengartikan blog. Maka disini saya akan menjelaskan sedikit mengenai pengertian blog dan apa perbedaan antara website biasa (statis) dengan blog.

Secara ringkas, blog adalah singkatan dari Weblog yaitu sebuah aplikasi berbasis web yang disusun secara kronologis dimana posting terbaru akan tampil pada halaman teratas dan diikuti posting-posting sebelumnya.

Blog pertama kali muncul pada tahun 1990-an. Awalnya disebut weblog dan diperkenalkan oleh John Barger pada tanggal 17 Desember 1997. Istilah ini kemudian dipersingkat menjadi blog oleh Peter Merholz.

Perbedaan antara blog dengan website biasa adalah blog lebih mudah untuk mengupdate informasi sedangkan website biasa, halamannya cenderung tetap dan yang diupdate hanya isi dari halaman tersebut.

Website biasa umumnya digunakan untuk menjual sedangkan blog lebih mengutamakan interaksi antara pemilik blog dengan pembaca blog dimana pembaca blog dapat memberikan tanggapan atau komentar terhadap artikel yang diposting pemilik blog. Perbedaan blog dengan website biasa adalah blog lebih dinamis dan mudah digunakan.

Pada awalnya blog digunakan oleh seorang blogger sebagai bentuk catatan (diary) online mereka, sehingga bebas dibaca oleh siapapun di internet. Namun seiring dengan berjalannya waktu, blog telah berkembang menjadi bentuk yang lebih kompleks baik dari segi isi (konten), tampilan maupun kegunaannya.

Secara umum, blog dapat dibagi menjadi 2 yaitu blog gratis dan blog berbayar. Blog gratis adalah blog yang dibuat melalui situs penyedia blog gratis seperti blogger.com, wordpress.com, blogsome.com, blogdetik.com, dan lain-lain.

Sedangkan blog berbayar adalah blog yang dibuat menggunakan nama domain dan hosting sendiri. Disebut blog berbayar karena untuk membuat blog tersebut, anda harus beli domain dan hosting melalui situs penyedia domain dan hosting. Kemudian menginstal platform blog seperti Wordpress (yang biasanya disediakan secara gratis).

Apa beda blog gratis dan blog berbayar?
Dari segi kinerja tidak jauh berbeda. Hanya untuk blog gratisan terlihat kurang profesional karena menggunakan sub domain. Contoh alamatnya, bloganda.blogspot.com atau bloganda.wordpress.com dan kelangsungan blog jenis ini sangat bergantung pada situs penyedianya. Jika suatu saat situs penyedia blog menghentikan layanannya maka blog anda akan hilang.

Sedangkan blog berbayar menggunakan top level domain (TLD) yang menggunakan akhiran .com, .net, .org, contoh bloganda.com atau bloganda.net sehingga terlihat lebih profesional. Dan blog berbayar tidak akan hilang selama anda tetap memperpanjangkannya setiap tahun.

Jika anda ingin serius berbisnis online tentu lebih baik menggunakan blog berbayar. Tapi untuk pemula, tidak masalah membuat blog gratis dulu toh dengan blog gratis pun anda sudah bisa menghasilkan uang di internet dan anda juga bisa mengupgradenya menjadi blog berbayar di kemudian hari. (Dari berbagai sumber).

Selamat Belajar!!!
Baca Lengkap....

Membuat Postingan Otomatis Rata Kanan Kiri/Justify

Tulisan standar pada penulisan postingan yang diberikan oleh blogger terkadang membuat tampilan blog kurang enak dipandang karena penulisan standarnya hanya rata kiri saja. Dalam penulisan postingan di blog, terbagi atas empat jenis: align left, align right, align center dan justify. Untuk lebih jelasnya, lihat gambar berikut.



Jika ingin postingan pada blog sobat rata kanan dan kiri, kita harus menekan yang ada di pojok atas halaman postingan (lihat gambar). Agak repot juga karena terkadang kita lupa menekannya. Buat sobat yang ingin membuat postingan otomatis rata kanan kiri pada blog, silahkan ikuti langkah berikut.

Pertama, Login dulu di BLOGGER dengan akun sobat. Kemudian masuk ke "Tata Letak" lalu klik "Edit HTML". Jangan lupa centang Expand Widget. Cari kode .post {. Kode berikut hanya contoh saja karena kode setiap template bisa bervariasi.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ff0000;
padding-bottom:1.5em;
}

Tambahkan kode “text-align: justify;” di dalamnya sehingga hasilnya menjadi seperti di bawah ini:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ff0000;
padding-bottom:1.5em;
text-align: justify;
}

Setelah selesai, klik "Save Template" dan lihat hasilnya.
Selamat mencoba!!!
Baca Lengkap....

Menambah Elemen Baru di Header Blog

Melihat beberapa blog yang telah saya buka, saya tertarik dengan tampilan di bawah hearder blog. Sebuah sidebar berada di bawahnya. Karena pada tampilan blog saya belum ada dan saya ingin menambahkannya, maka saya berusaha mencari ke sana sini untuk bisa menambahkannya.

Akhirnya, setelah berusaha beberapa hari, saya berhasil menemukannya. Mungkin Sobat juga ingin menambahkan sebuah elemen baru di bagian header blog Sobat. Silahkan saja Sobat ikuti langkah-langkah di bawah ini karena pasti banyak gunanya. Dengan penambahan elemen baru ini, kita bisa memanfaatkannya untuk menempatkan kode html atau javascript guna membentuk sebuah fungsi yang baru. Silahkan Sobat gunakan di blog Sobat untuk memuat sesuatu sesuai dengan keinginan Sobat. Untuk melihat hasilnya, silahkan lihat di halaman "Elemen Laman (Page Element)".

Langsung saja ke prakteknya. Perhatikan baik-baik langkah berikut:

 Silahkan Login ke Akun BLOGGER sobat atau klik DI SINI.
 Klik Layout (Tata Letak).
 Cari kode di bawah ini.

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

Karena kode HTML sebuah template pasti sangat banyak, Sobat bisa menggunakan Ctrl +F untuk pencarian cepat.

 Silahkan ganti kode bercetak tebal menjadi “2” dan “yes” sehingga menjadi seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

 Langkah terakhir, silahkan klik Save Template (Simpan Template).
 Selanjutnya, buka Elemen Laman (Page Element) untuk melihat hasilnya.

Selamat mencoba!!!!
Baca Lengkap....
Langganan: Postingan (Atom)