Sekilas Perjalanan Mengenai Blog dan Fungsi Menu Blog

Ane membuat postingan ini berniat untuk memberikan sedikit informasi tentang dunia blogger mulai dari awal sampe ending :D

Ane akan mulai dari : ( Ikutin terus gan )

1. Pengertian Blog

Blog atau yang biasa disebut Web Log merupakan sebuah catatan pribadi yang dimuat dalam sebuah posting dan disimpan dalam sebuah halaman web online dan biasanya bersifat terbuka bagi siapa saja yang mengunjungi dan membaca isi dari blog tersebut.

2. Sejarah Blog

Pada awalnya blog dipopulerkan oleh perusahaan Pyra Labs dengan produknya yang bernama blogger.com, kemudian pada akhir tahun 2002 perusahaan internet raksasa Google mengakusisi Pyra Labs, sejak saat itu perkembangan dari blog sangat pesat dan banyak didukung oleh aplikasi - aplikasi yang mempunyai sifat terbuka dan kesemuanya diperuntukan untuk perkembangan para Blogger diseluruh dunia.

3. Fungsi Blog

Fungsi dari sebuah blog bermacam - macam, hal ini tergantung dari keinginan para pembuatnya, kebanyakan blog banyak digunakan untuk catatan harian dan media publikasi untuk kampanye atau bisa juga untuk penyebaran program - program sebuah perusahaan. banyak dari blog yang juga menyediakan fasilitas interaksi dari para pengunjung blog tersebut misalnya, buku tamu dan komentar. sehingga dapat membuat blog tersebut hidup dan bisa sebagai ajang diskusi dan tanya jawab dan ada pula yang memanfaatkan blog sebagai lahan untuk meraup pundi - pundi uang.

Tampilan Umum Blog

Mungkin bagi agan yang belum mengetahui cara membuat blog silahkan baca Cara Mudah Daftar Blog

Mari kita lanjutkan ke perkenalan Menu - Menu yang ada di blog serta kegunaannya

1. Icon untuk membuat Entri / Postingan Baru

2. Lihat Blog / View Blog : Untuk melihat tampilan Blog agan di Browser. apabila sobat klik maka             akan membuka alamat agan sobat di tab baru pada Browser Sobat. 

3. Posts : Untuk melihat Postingan yang sudah di publikasikan ataupun yang masih dalam daftar atau       belum di publikasikan, melalui menu ini sobat dapat mengedit postingan-postingan lama ataupun           baru.

4. Ikhtisar / Overview : Tampilan Statistik blog Terbaru, untuk memantau pengunjung blog kita.

5. Laman / Pages : Seperti halnya Post. disini untuk membuat ataupun mengedit serta melihat Laman     atau Halaman yang akan maupun sudah kita Buat.

6. Komentar / Comments : Untuk melihat Komentar dari pengunjung yang masuk di blog kita, dimenu     ini ada 3 sub menu yaitu :

• Publised : Komentar yang sudah di Publikasikan
• Awaiting Moderation / menunggu moderasi : melihat Komentar yang antri menunggu di publikasikan
• Spam : Melihat Komentar Spam yang tidak berguna

7. Google + : Untuk mengkoneksikan Blog dengan akun Google+ Sobat. disini kita bisa                  

    mengaturOtomatis Postingan kita share di Google+ setiap kali kita Posting baru, atau Notifikasi 

    Untuk Share Postingan di Google + dan juga menggunankan / mengaktifkan Google + comment    

    pada Blog .

8. Statistik / Stats : Melihat Riwayat Blog kita sepanjang waktu dari awal blog di buat sampai saat ini,       ada 4 submenu di Statistik ini:

• Ikhtisar/Overviews : Tampilan awal statistik terbaru blog kita
• Post : Statistik setiap judul postingan kita, kita bisa mengetahui sudah berapa banyak yang melihat setiap judul postingan kita atau jumlah Page views masing-masing Judul.
• Sumber lalu lintas / traffic Source : Melihat Dari situs mana pengunjung blog kita datang. 
• Audience / pemirsa : Melihat dari negara mana yang mengunjungi situs kita serta menggunakan Browser apa dan juga Operating Sistem apa yang digunakan buat mengunjungi Blog kita

9.  Earnings : Untuk mendaftar googlde adsense dan memonitoringnya

10. Kampanye / Campaigns : untuk mempromosikan Blog kita melalui Iklan di google atau Google    

      adwords, tools ini baru saja di launcing bulan Juli.

11. Tata Letak atau Layouts : Melihat serta mengedit tata letak Blog kita, disini kita bisa    

      manmbahkan Widget pada blog kita maupun memindah posisi widget pada Blog kita.

12. Template : Untuk mengatur Template kita , membackup maupun restore template kita, mengubah       sesuaikan tampilan template blog, serta mengaktifkan maupun menonaktifkan tampilan mobile             template blog. dan Mengedit HTML template kita.

13. Setelan / Setting : Untuk mengatur blog Kita, disini ada beberapa sub menu

• Basic : mengatur Judul Blog, Deskripsi, privasi blog, Pengelola Blog , serta pembaca Blog kita.
• post dan Comments : mengatur jumlah Post yang akan kita tampilkan di laman utama, mensetting komentar yang masuk. dll
• Mobile and Email : mengatur email admin dan notifikasi
• Language and Formating : mengatur bahasa dan juga Format Waktu meliputi tanggal dan jam.
• Search Preference : mengatur meta tag blog kita, custom page dan redirect serta Indexing dan Crawl blog kita dengan custom robots.
• Other : tools tambahan untuk export atau import blog kita dan juga mengatur Url Open ID serta Konten dewasa dll.

Sekian dan Semoga bermanfaat !

› Read More

Cara Mendaftar Blog

Jika agan ingin mempunyai sebuah blog untuk tempat menumpahkan / membagikan segala ide dan pengalaman serta ilmu yang bisa dibagi dengan orang lain maka blog adalah tempat yang sangat cocok karena mudah diakses oleh semua orang karena bukan tidak mungkin agan akan bisa mendapatkan pundi - pundi rupiah dari blog yang agan punya.

Dari pada berlama lama langsung saja bagi yang ingin tahu cara membuat blog ikuti langkah - langkah berikut :

1. Untuk bisa mengakses dan membuat blog agan harus punya alamat email dan agan bisa daftar di www.gmail.com
2. Setelah email agan siap agan masuk ke www.blogger.com
Tampilan awal Blog

3. Setelah muncul agan klik New Blog / Buat Blog dan akan muncul tampilan seperti ini :

4. Isi Judul dan alamat blog serta tentukan template untuk tampilan blog agan nanti

Tara .... Blog agan telah siap dan agan bisa langsung memodifikasi untuk membuat tampilannya lebih cantik dan menarik agar pengunjung senang ketika berkunjung ke blog agan

NB : 

Untuk memudahkan agan mengelola blog ane sarankan untuk mengubah bahasanya menjadi bahasa Indonesia dan kalo agan bingung dimana letak pengaturan bahasa silahkan lihat gambar dibawah :

Perhatiakn lingkaran hitam !

Semoga Bermanfaat 

› Read More

Cara Membuat Label Singkat dan Simple

Bagi agan yang belum tau cara membuat label sederhana di blog simak langkah berikut :

1. Login ke blog agan
2. Buatlah sebuah postingan
3. Setelah selesai beri centang pada postingan yg akan di beri label. untuk lebih lengkapnya lihat gambar !

Dan akan muncul !

4. Jika agan ingin membuat label baru maka tinggal tinggal klik New Label  dan jika ingin memberi label pada postingan baru dengan label yang telah ada maka tinggal klik nama label tersebut

Sekian dari ane semoga bermanfaat !

› Read More

Sejarah Dan Perkembangan HTML

Sejarah Dan Perkembangan HTML ( Hyper Text Markup Language)

Selamat siang pemirsa setia blog saya hehehe……siang ini saya akan menjelaskan sedikit tentang HTML. Pasti kalian sudah pada tau HTML? Disini saya akan menjelaskan sedikit tentang sejarah dan perkembangan HTML. Semua pasti penasaran kan…..langsung saja yuk kita liat d TKP….

Sejarah HTML

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk menulis halaman web dan menampilkan berbagai informasi di dalam sebuat browser internet. HTML ini merupakan pengembangan dari standar pemformatan dokumen teks yaituStandard Generalized Markup Language (SGML). HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN (Conseil Europeene Pour La Recherche Nuclaire) dan dipopulerkan pertama kali oleh browser Mosaic pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Sebetulnya, tujuan awal dari web browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML. Namun, dua dekade kemudian browser sendiri telah menjadi sebuah portal ke dunia media online. Itulah sebabnya versi2 HTML yang selanjutnya tidak hanya sebagai revisi HTML, tetapi juga sebagai standar yang komprehensif untuk bagaimana halaman web bekerja.

Perkembangan HTML

1. 1.    HTML

HTML(Hyper Text Markup Language) atau yang populer disebut dengan HTML merupakan sebuah jenis teks dokumen khusus yang membuat sebuah halaman web yang digunakan oleh Web browser untuk mempresentasikan teks dan gambar . Dan didalam teks tersebut terdapat tag markup. File HTML adalah berisi beberapa instruksi atau perintah yang kemudian diterjemahkan oleh browser yang ada dikomputer user,  sehingga isi informasinya dapat ditampilkan secara visual dikomputer user. HTML dikenal sebagai standar bahasa yang digunakan untuk menampilkan dokumen web. Sedangkan dokumen HTML sering disebut sebagai ”Halaman Web”. Browser mengambil halaman Web dari Web server dan karena adanya Internet, Halaman tersebut bisa berada di manapun di dunia.

Cara Penulisan / Sintaks HTML sebagai berikut :

<html>

<title> teks <title>  sebagai judul page/ halaman

<h1> teks </h1>  sebagai header

<body>  teks </body> untuk isi dari web browser

</html>

Berikut ini merupakan kode – kode HTML yang biasa digunakan :

• <b> teks </b> = untuk membuat teks BOLD/ tebal.
• <i> teks </i> = untuk membuat teks Italic / teks miring.
• <u> teks </u> =  untuk membuat teks Underline/ garis bawah.
• <br> teks </br > =  untuk membuat teks memulai bais baru/ enter.
• <ol> teks </ol> =  untuk membuat penomeran.
• <ul> teks </ul> =  untuk membuat bullet.
• <center> teks </center> =  untuk membuat teks berada ditengah-tengah.
• <right> teks </right> =  untuk membuat teks rata kanan.
• < left> teks </left> =  untuk membuat teks rata kiri.
• < justify> teks </justify> =  untuk membuat teks rata kanan-kiri.
• <font color =” yellow”> teks </color> =  untuk membuat teks berwarna kuning.
• </hr> =  untuk membuat garis.
• <marquee> teks </marquee> =  untuk membuat teks berjalan.
• <strike> teks </strike> =  untuk membuat teks bergaris ditengahnya.

1. HTML +

HTML + merupakan HTML versi pertama yang mempunyai beberapa kemampuan diantaranya :

1. Heading.
2. Paragraph.
3. Hypertext.
4. List.
5. Cetak tebal dan miring pada teks.
6. Peletakan image pada dokumen tanpa teks disekelilingnya (wrapping).

1. HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif. Dengan menggunakan HTML 2.0, kita dapat membuat lembar halaman ciptaan yang dapat dilihat oleh semua orang.

1. 4.      HTML versi 3.2

HTML 3.2 berisi fitur2 baru seperti font, tabel, applet, superscripts, subscript,dll. Salah satu unsur yang ditambahkan ke standar HTML 3.2, adalah <tag> . Tag ini diperkenalkan kompleksitas yang tidak perlu untuk tugas penting dari memisahkan konten HTML (teks) dari presentasi (style).Selain itu pada HTML versi 3.2 ini, kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML  tersebut, seperti javascript dan Vbscript.

1. 5.      HTML versi 4.01

HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan. HTML versi 4.01 masih standart resmi sampai sekarang ini untuk memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi sebelumnya. HTML versi ini juga menjadi standardisasi untuk elemen dan atribut dari script XHTML 1.0.

1. HTML versi 5.0

HTML versi 5.0 ini masih dikerjakan/dikembangkan mulai 4 Maret 2010 kemaren oleh W3C(World Wide Web Consortium),W3C sendiri adalah sebuah Organisasi yang menangani pengembangan web standar.

Beberapa fitur baru di HTML 5 sebagai berikut:

1. Unsur kanvas untuk menggambar.
2. Video dan elemen audio untuk media pemutara.
3. Element baru, seperti artikel, footer, header, dan navigasi.
4. Dukungan lebih baik untuk penyimpanan offline local.
5. Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan Search.

Saat ini HTML 5 belum menjadi standart resmi dan masih jarang ada browser memiliki fitur penuh terhadap HTML 5. HTML 5 ini mungkin akan menjadi standart baru untuk HTML dan XHTML.

HTML 5.0 merupakan sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap pengembangan.

Beberapa kelebihan yang dimiliki oleh HTML 5 :

1. Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.
2. Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.
3. Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footerdan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.
4. Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developerdapat membangun pemahaman yang lebih detil mengenai halaman web.
5. Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
6. Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
7. Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
8. Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)
9. Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.
   
   Sumber Artikel

› Read More

Cara Membuat Label Sesuai Tag Menu di Blog

Kategori / Label pada sebuah Blog dan website berfungsi untuk mengelompokkan setiap postingan disesuaikan dengan jenis kontenya. Namun pada blogspot kita tidak akan ditemui istilah kategori di-dalam dashboard admin, namun yang ada adalah Tag atau Label. Sebuah situs dengan kerangka website di-halaman dashboard admin biasanya terdapat menu khusus kategori dan tag/label secara terpisah. Dengan kategori pengelompokan postingan artikel atau produk untuk blog toko online akan memudahkan pengunjung mencari konten yang mereka inginkan.
Pada umumnya agan - agan yang baru berkecimpung di dunia Blogger mungkin akan kebingungan ketika agan mencoba membuat blog dan membuat postingan dan mencoba untuk mengelompokkannya sesuai dengan kontennya / menu yang ada di blog agan.

Sebagai gambaran kecil fungsi Label pada blog :

Agan membuat blog baru yang bertemakan tentang bola dan agan mendownload sebuah template yang bisa memuat banyak konten / kategori, misalnya berita bola liga champions, liga inggris, liga spanyol, dll.
Yang agan inginkan adalah ketika agan membuat sebuah postingan agan ingin menempatkan postingan tersebut sesuai dengan kontennya. contoh : agan membuat postingan tentang transfer - transfer yang terjadi di liga inggris dan agan ingin menempatkan postingan tersebut di dalam kategori liga inggris agar tidak bercampur aduk dan terlihat berantakan.

Dan jika agan kebingungan bagaimana cara melakukan hal tersebut marilah kita sama - sama menyimak langkah - langkah berikut :

1. Silahkan agan login terlebih dahulu ke dalam blog agan
2. Buatlah sebuah postingan dan setelah selesai pada bagian dashboard agan centang postingan tersebut dan klik tanda untuk memberi label di Blog. untuk selengkapnya lihat gambar !

Perhatikan yang ane bulatkan - itu adalah icon untuk membuat label / kategori

3. Nah, sekarang label telah siap dan bagaimana cara untuk membuatnya bergabung / sesuai dengan kategori yang ada diblog? 

Pada umumnya ketika agan memakai template yang mempunyai menu dan submenu untuk memudahkan pengunjung menjelajar di blog agan dan agan ingin postingan yang agan buat sesuai dengan menu / kategori yang ada diblog maka agan ikuti langkah berikut :

1. Status postingan yang agan buat sudah mempunyai kategori / Label. contoh : ane membuat sebuah postingan tentang Komputer dan agar tidak nyasar maka ane harus menempatkannya di menu komputer yang telah ane buat diblog jadi agan pergi ke Settingan Template ~ Edit HTML dan agan cari di script HTML nama menu yang ada di blog agan.

2. Terlebih dahulu agan copy link dari label postingan yang agan buar tadi.

Ini adalah contoh script menu yang ada diblog ane

            <li><a href='http://home-informan.blogspot.com/search/label/Komputer'>Komputer</a></li>

          

          Ket :  warna merah adalah link dari label postingan yang agan buat

                    warna hijau adalah nama menu yang ada diblog agan

                    ganti tulisan warna merah dengan link Label / kategori yang agan copy tadi

3. Setelah itu coba save dan Voilla

NB : 

Cara di atas adalah cara agan membuat label untuk postingan pertama dari 1 label yang akan agan buat dan jika didalam blog agan tidak menggunakan menu agan tidak perlu repot  - repot mengcopas link Label dan meletakkannya didalam HTML

Untuk postingan yang akan agan beri label sama  tidak perlu lagi repot - repot mengcopy linknya

Harap dibedakan antara link Label dan link Postingan agar agan tidak salah 

Jika agan mencopy paste link postingan bukan link label dan agan meletakknya di dalam HTML maka hanya 1 postingan saja yang akan tercantum didalam menu blog agan dan postingan berikutnya tidak akan masuk dalam menu.

Sekian dari ane, semoga bermanfaat

› Read More

Cara Menghilangkan NavBar di Blog

Apa sih itu Navbar?

Mungkin masih ada yang tidak tahu maka ane paparkan sedikit :D

Navbar adalah kependekan dari Navigation Bar, yaitu suatu bar panjang berbentuk frame yang berisi berbagai menu navigasi yang memiliki fungsi-fungsi tertentu. Jika sobat saat ini menggunakan blog berflatform Blogger dan menggunakan template bawaan bloggernya, maka biasanya navbar tersebut akan muncul di tampilan blog bagian atas.

Fitur navbar ini tentunya disediakan oleh Google bukan tanpa tujuan. Navbar ini memiliki beragam fungsi untuk mempermudah kegiatan blogging kita. Namun kebanyakan orang, termasuk saya kadang kurang menyukai hadirnya tampilan ini nangkring di bagian atas di blog mereka, karena mungkin agak sedikit mengganggu pemandangan dan jadi kelihatan blog gratisannya..hehe (mungkin), sehingga banyak yang menghilangkan atau menyembunyikan navbar tersebut. dan berikut ane bagi - bagi tips menghilangkan Navigation Bar di Blog. Cekidot :D

1. Login ke blog agan terus masuk ke setting Layout dan  dan cari tulisan NavBar yang biasanya terletak pada bagian atas pojok kanan akan tetapi tidak semua blog penempatan NavBar sama tergantung dari template yang agan gunakan. contohnya seperti ini !

2. Untuk menghilangkan Navigation Bar di Blog agan cukup Klik Edit dan akan muncul banyak pilihan NavBar, agan lihat bagian paling bawah dari pilihan - pilihan NavBar akan ada tulisan Off. Selengkapnya lihat gambar !

3. Setelah itu jangan lupa di save.

Sekian semoga bermanfaat !

› Read More

Cara Transfer Blog Lama ke Blog Baru

Agan mempunyai sebuah blog dan ingin memindahkan semua isinya kedalam blog baru agan?

Berikut ane bagi - bagi tipsnya, cekidot :D

1. Silahkan login kedalam akun blog yg ingin agan pindahkan ke blog baru
2. Setelah login agan pergi Pengaturan / Setting dan pilih Other
3. Cari tulisan Blog Tools dan agan akan disediakan 3 pilihan

    Import  Blog - Export Blog - Delete Blog 
- Import Blog gunanya untuk memasukkan / memindahkan / mengupload data blog lama ke blog baru
- Export Blog gunanya untuk tempat men-Download data - data blog yang akan dipindahkan
- Delete Blog gunanya untuk menghapus Blog

4. Sesuai judul artikel ini agan klik Export untuk mendowload data - data blog yang akan agan pindahkan keblog baru. Lihat Gambar !

5. Setelah selesai mendownload data - data blog yang akan agan pindahkan mari kita lanjut ke tahap selanjutnya
6. Login ke blog tempat agan akan memindahkan blog lama agan
7. Setelah login agan pergi Pengaturan / Setting dan pilih Other
8. Cari tulisan Blog Tools dan agan akan disediakan 3 pilihan lagi
9. Pilih Import Blog. Lihat Gambar !

10. Klik Choose File dan temukan dimana agan menyimpan hasil download data - data blog lama yang telah agan download tadi

11. Tunggu proses Upload sampai selesai dan tara data - data blog lama agan telah berhasil agan pindahkan ke blog baru

Sekian semoga bermanfaat 

NB : 

Pada saat melakukan proses Import Blog jangan lupa agan centang I'm Not Robot dan lakukan verifikasi keamanan agar agan tidak dikira robot yang sedang menghack akun blog agan sendiri.

› Read More

Cara Memasang Menu Bar dan Sub Menu Bar di Halaman Blog

Menu dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu . Memberi sub menu bar juga membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan mata; blog kita tampak lebih ilmiah, teratur, dan simpel.
Jika anda berminat memasangnya di blog, artinya anda orang yang berfikir sistimatis dan menyukai keteraturan.Selamat mencoba.

Langkah Pemasangan

- Klik  Desain
- Pilih  Template lalu pilih  Edit HTML
- Pilih/klik  Lanjutkan
- Pilih/klik  Expand Template Widget

Cari scrip berikut :

<div class='main-outer'>  atau
<div id='main-wrapper'> atau
<div id='main'>

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>

Bisa jadi beda dengan template yang lain…
Setelah dapat, copas [ copy paste ] scrip berikut tepat diatas scrip yang dicari tadi :

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='URL'>Beranda</a></li>
<li><a href='URL'>Menu 1</a></li>
<li><a href='URL'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='URL'>Sub Menu2 a</a></li>
<li><a href='URL'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='URL'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='URL'>Sub Menu3a</a></li>
<li><a href='URL'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='URL'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='URL'>Sub Menu4a</a></li>
<li><a href='URL'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='URL'>Menu5</a></li>
</ul>
</div>

PENJELASAN :

1. Cara memasukkan alamat URL:
Ganti tulisan URL dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

2. Cara menuliskan judul menu atau judul postingan: 
Ganti Tulisan warna merah dengan nama menu dan nama sub menu yang anda inginkan.

3. Cara merubah lebar menu: silakan  cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. 

Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :

#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;} 

Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.

4. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau. 

5. Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.

6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>   
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........  
  
A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai.

B. Mengganti warna tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beri warna hijau dengan warna yang anda sukai (ganti kodenya saja).

C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna ungu dengan jenis font kesukaan anda,

[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 
- Lalu simpanlah/save. 

Saran 

* back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas. 

*  Untuk menghilangkan tampilan tampilan dobel dengan Laman Utama, 
- Maka ikutilah saran berikut :
- Masuk ke Menu Laman 
- Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"

- Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Semoga Bermanfaat

› Read More

Melihat Rating, Nilai SEO, dan Pagerank suatu Blog/Website

Untuk para Blogger pemula pasti masih pada bingung kenapa Blog yang kita buat tidak terdaftar di Search Engine. Hal ini mungkin disebabkan karena nilai SEO-nya yang masih sangat rendah.

Lantas bagaimana cara mengetahui nilai rating, SEO, dan pagerank suatu Blog atau website?

Yuk kita mulai tutorial sederhana ini:

1. Klik link ini DI SINI.
2. Masukkan Website atau Blog kita pada kolom pencarian,
3. Tunggu beberapa saat,
4. Sekarang kita bisa melihat semua tentang informasi Blog atau website-nya,

Lihat saya beri contoh Rating, nilai SEO dan Pagerank pada www.facebook.com

Selamat Mencoba :)

Sumber : http://bocah-alus.blogspot.com

› Read More

Cara Membuat Read More di Blog

Ga usah lama lama langsung aja disimak cara - caranya !

1. Masuk ke Template dan klik Edit Template

2. Klik CTRL + F, dan cari kode html </head>

3. Letakan kode dibawah ini, tepat diatas kode html </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</script> 
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML 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>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )

6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti gambar dibawah ini.

› Read More