Membuat Tag Cloud Di Blogger

Cara simple/singkat membuat tag cloud pada blogger Pertama saya mengenal blog,banyak sekali istilah-istilah widget blogger yang ingin saya ketahui. Seperti halnya ‘Tag Cloud’yang akan kita bahas kali ini. Dulu,saya mengerti dan pernah menjumpai widget seperti ini,namun karena tidak mengerti apa namanya,maka saya googling dengan berbagai kata kunci. Seperti;'cara membuat tulisan besar dan kecil pada blogger',atau 'cara membuat widget tulisan tebal dan tipis',dll. Bahkan saya sempat bertanya langsung pada masternya,sampai saya tahu itu namanya Tag Cloud. Beberapa waktu lalu saya sempat memposting juga tentang cara membuat tag clouds untuk blogspot,namun masih manual bukan wyswyg seperti fitur blogger saat ini. Karena,seiring berkembangnya fitur instant blogger,blogger sudah memberikan langkah mudah untuk membuat label berbentuk awan ini. Nah,untuk contoh tag cloud,anda bisa lihat ilustrasi gambar di atas,atau bisa kunjungi langsung blog teman saya di mendengarkan musik mp3 gratis. Langkah Sederhana Membuat Tag Cloud Untuk Blogger Seperti biasa,untuk membuat tag cloud ini,pertama pergilah ke Tata Letak,lalu add new widget atau klik tulisan Tambah Gadget untuk blog berbahasa indonesia. Setelah itu muncul dialog box,pilih Label. Kemudian akan muncul jendela baru lagi,lalu pada option pilihlah Tag Cloud,lalu klik tulisan Simpan. Selesai,anda sudah berhasil membuat tag cloud di blogger,dan silakan lihat hasilnya. Semoga bermanfaat ya :D Baca Juga Yang Ini.. Membuat Tag Clouds di Blogspot Membuat Label / Kategori Menghilangkan Angkan Pada Label Blog

Read more > Membuat Tag Cloud Di Blogger

Belajar Latihan Seo Untuk Para Pemula

Latihan Seo Di Pelajaran Blog Pada dasarnya saya sendiri kurang begitu paham apa itu seo. Namun di pelajaran blog ini,ingin saya bagi-bagi info seo (search engine optimization) yang saya ketahui. Jika bicara masalah belajar seo,sebenarnya sudah banyak bertebaran di internet blog-blog yang mengulas tentang seo. Disana kita bisa mengkombinasikan trik-trik seo yang diberikan. Tapi kadang tempat belajar seo hanya untuk ajang adu tembak bukan memberikan tips seo yang akurat,betul? Nah,kali ini seperti yang saya ketahui,kita mencoba belajar latihan seo meskipun hanya untuk para pemula. Salah Satu Latihan Dasar Seo Pemula Seperti yang sudah kita ketahui,banyak cara untuk optimasi,antara lain: Penggunaan <h1>,<h2>,<h3>,<h4>,<h5> pada postingan. Contoh penggunaan; Sebelum anda posting atau setelah pergantian paragraf anda buat subtitle seperti: <h2>Latihan Seo Untuk Pemula</h2> Nah,anda bisa juga menyisipkan suatu kata kuci untuk latihan seo awal,seperti: <h2 name="Latihan Seo Untuk Pemula">Latihan Seo Untuk Pemula</h2> Mengganti format pada judul blog. Contoh penggunaan; Sebelumnya,jika template masih bawaan blogger asli,cobalah cari kode: <title><data:blog.pageTitle/></title> Setelah ketemu,hapus kode tersebut dan gantilah dengan kode berikut: <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/></title> </b:if> Setelah itu simpan. Nah untuk latihan seo selanjutnya,anda bisa menyisipkan kata kuci yang ingin anda optimasi,seperti kode dibawah ini: <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> | Kata Kunci Anda | Kata Kunci 2 | Kata Kunci 3</title> </b:if> Nah,contoh yang pelajaran blog pakai,seperti ini: <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> | Pelajaran Blog</title> </b:if> Untuk latihan-latihan seo yang lain,anda bisa mengkombinasi dan kembangkan sendiri. Bisa dari eksperiment2 kecil yang nantinya anda sadari itu sebuah trik seo yang anda bisa jadikan patokan. Mungkin setelah artikel ini,kedepannya akan lebih rajin posting tentang seo,tapi tanpa meninggalkan belajar membuat blog yang memang tema pada blog ini. Baca Juga Yang Ini.. Apa Itu Seo? SEO,Mengatur / Mengubah Format Title Cara Paling Cepat Terindex Google

Read more > Belajar Latihan Seo Untuk Para Pemula

Belajar Membuat Navigasi Bar [Navbar Blogger] Menu Sederhana

Menu Navigasi Dalam Navigasi Bar (Navbar) Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll? Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas. Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri. Bingung? Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]: Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI. Bagaimana? tertarik untuk membuatnya? Langkah Membuat Navbar Blogger Sederhana Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali. Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML. Selanjutnya,contreng tulisan Expand Widget Templates. Lalu cari kode berikut: </head> [untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F] Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut. <style type="text/css"> #pelajaranblognav img { margin: 0px 0px -8px 0px; vertical-align: middle; } #pelajaranblognav { background-color: #222222; width: 100%; left: 0px; text-align: center; font-family: Arial, Tahoma, Verdana; font-size: 12px; z-index:10000; bottom:0; } #pelajaranblognav ul { margin: 0px; padding: 0px; list-style: none; color:white; font-family:arial; font-size:11px; } #pelajaranblognav a { background: #222222; color: #FFFFFF; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav a:visited { background: #222222; color: #FFFFFF; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav a:hover { background: #222222; color: green; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav li { float: left; margin: 0px; padding: 0px; } #copyright a { text-decoration: none; font-family:arial; font-size:11px; } #copyright { color: black; text-decoration: none; float:right; font-family:arial; font-size:11px; } </style> Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut: <body> Jika sudah ketemu,letakkan kode berikut persis di bawahnya. <div id="pelajaranblognav"> <table border="0" bgcolor="#222222"> <tr> <br/><ul><li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Daftar Isi</a></li> <li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li> <li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li> <li><a href="#">Links</a></li></ul> <td> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a> </td> <td> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> </td> <td> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> </td> </tr> </table> </div> <div id="copyright"> Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a> | Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a> | Buat <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"><b>Navbar</b></a> Ini Di Blog Kamu </div> Setelah itu Simpan Template,dan lihat hasilnya sekarang :D Keterangan: Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju. Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda. Untuk http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda. Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda. Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing. Goosd Luck Ya! Baca Juga Yang Ini.. Menghilangkan Navbar pada Blog Membuat Menu Navigasi CSS Di Element Baru Cara Membuat ToolTip Sederhana

Read more > Belajar Membuat Navigasi Bar [Navbar Blogger] Menu Sederhana

Cara Membuat ToolTip Sederhana

★ Membuat Tooltip Original Disini,pelajaran blog sekali lagi hanya untuk tutorial blog pemula saja. Jadi,inti dari isi artikel pada blog ini,hanya ditujukan bagi yang awam akan dunia blog. Salah satunya,seperti yang saya alami sebelumnya akan ketidak tahuan suatu event. Misal,saat saya ingin tahu bagamana membuat tulisan nongol saat mouse diatasnya sebagai media keterangan. Saya tidak tahu bahwa itu adalah tooltip,jika anda sudah mengenal Microsoft Word,anda pasti sudah tak jarang menjumpai ToolTip ini. Untuk penjelasan lebih detail masalah tooltip,anda bisa baca di sini. Nah,kali ini saya hanya ingin share masalah tooltip ini. Jika anda sudah mengerti soal tooltip ini,anda boleh membaca artikel yang lain,namun bagi anda yang belum tahu cara membuat tooltip,saya akan membagikan info ini disamping juga untuk mengisi kekosongan pada blog ini. ★Cara Membuat Tooltip Pada Gambar/Image Anda sudah tahu khan cara meletakkan gambar pada blog? jika belum tahu anda bisa baca tutorialnya disini. Nah,untuk membuat tooltip pada gambar alias Image,anda hanya menyisipkan kode: Title="Text Tooltip Yang Kan Muncul" Contoh pemakaian kodenya,anda bisa lihat barisan kode berikut: <img src="http://1.bp.blogspot.com/_n7xseT2-HDU/SveGmH-vRcI/AAAAAAAAAbo/T-xpQB1BHC0/s200/cara+membuat+tooltip.jpg" title="Saya Sedang Belajar Membuat Tooltip"> **Untuk http://1.bp.blogspot.com/_n7xseT2-HDU/SveGmH-vRcI/AAAAAAAAAbo/T-xpQB1BHC0/s200/cara+membuat+tooltip.jpg,anda ganti sesuai alamat/url gambar yang ingin anda pasang. Sedangkan tulisan Saya Sedang Belajar Membuat Tooltip,rubahlah sesuai keinginan anda. Dari kode diatas,akan menghasilkan seperti dibawah ini [coba anda letakkan mouse diatas gambar ini]: Semoga,gambar diatas tidak mirip dengan seseorang yang sedang membaca artikel blog ini,xixixixi.. ★Cara Membuat Tooltip Pada Link/Anchor Sama seperti langkah membuat tooltip pada gambar diatas,hanya menyisipkan kode Title="Text Tooltip Yang Kan Muncul" Contoh pemakaiannya,seperti barisan kode berikut ini: <a href="http://pelajaran-blog.blogspot.com/" title="Cara Membuat Tooltip Bro!">Cara Menghias Tooltip</a> **Untuk Cara Membuat Tooltip Bro!,anda ganti sesuai keinginan. Sedangkan http://pelajaran-blog.blogspot.com/,adalah link yang ingin anda tuju. Hasilnya akan sepertiu dibawah ini [letakkan mouse diatas link dibawah ini]: Cara Menghias Tooltip Baca Juga Yang Ini.. Belajar Membuat Sitemap Tips Cara Membuat Blog Ringan Saat Loading

Read more > Cara Membuat ToolTip Sederhana