Pengaturan Image/Gambar pada Artikel Blog

Setelah satu jam browsing dan liat-liat status Facebook,melihat respon temen2 FB terhadap blog ini,menambah semangatku untuk selalu posting artikel terbaru,meskipun bukan lagi barang baru,he.. Memang ya,Belajar di Pelajaran Blog,bukan untuk blogger-blogger tingakat menengah dan mahir,melainkan dikhususkan untuk pemula.Oleh sebab itu tutorial pada pelajaran-blog.blogspot.com sangatlah ringan,seperti pelajaran belajar menghias blog kali ini. Salah satu temen terbaik saya,menghubungi lewat email aku,dia mempunyai kendala masalah gambar/image. Mulai dari gimana caranya menghilangkan border pada Image,sampai tata letak gambar pada artikel blognya. Menghilangkan border Image Template asli blogger,menghias,mengatur image dengan sedemikian rupa,sehingga setiap posting dengan menggunakan gambar akan mempunyai sebuah garis tepi/border.Ada yang duka dan ada yang ingin menghilangkannya. Untuk yang belum tahu bagaimana meletakkan gambar pada Blog,anda bisa baca di "meletakkan object gambar pada blog" di blog ini. Tapi sekarang masalahnya bukan bagaimana meletakkan object gamabar,melainkan menghilangkan border pada gambar. Untuk menghilangkan border/garis tepi gambar,anda hanya disuruh menyisipkan beberapa kode.contoh : <img src="http://alamatURLgambar/" border="0"> Berarti daya harus menuliskan kode tersebut setiap hendak memposting sebuah gambar? ya..repot donk! Nah solusinya,jika anda ingin menampilkan gambar pada blog terutama di blogspot yang secara otomatis aka ter set tanpa garis tepi/border,bisa ikuti langkah berikut : Pergilah ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Tab Edit HTML. Cari kode seperti di bawah ini: .post img { jika sudah ketemu,dibawah kode tersebut khan ada beberapa baris kode yang kurang lebih seperti ini: border: 1px solid #E3E4E4; padding: 2px; background: #fff; Anda hanya mengganti angka "1px" diatas menjadi angka "0" sedangkan untuk menentukan jarak image dan text bisar tidak terlalu dekat,gantilah angka"2px" menjadi,misal "10px". Selanjutnya,Simpan Templates.Selesai,dan setiap anda hendak mempublikasikan sebuah gambar pada artikel tidak akan mempunyai border/garis tepi. Mengatur Tata Letak Gambar/Image Sekali lagi,untuk blogger pemula,biasanya gambar menjadi kendala,mulai dari border sampai tata letaknya. Sebenarnya sebuah gambar,dama halnya dengan text,dalam hal ini pengaturan untuk tata letaknya. Kendala teman saya,saat meletakkan gambar pada artikel,gambar akan menempati alinea baru dan tak bisa berbaur dengan text maupun disamping text selayaknya Drop Caps seperti pada gambar cewek di atas,xixixixi.. Untuk mengaturnya sangat mudah tinggal menyisipkan kode align="left" Contoh, <img src="http://alamatURLgambar/" align="left"> Untuk memperoleh penempatan gambar seperti gambar di atas,disamping text selayak Dropcaps,letakkan kode image pada awal artikel/alinea,dan tuliskan kode tadi. Penjelasannya njlimet! aku aja bingung mo nyampein gimana..yo wis yo! Baca Juga Yang Ini.. Membuat Drop Caps pada Artikel Blog Membuat Meta BlogCatalog Rangkuman Pelajaran Programming

Membuat Drop Cap pada Artikel Blog

Seperti yang aku pernah janjikan minggu lalu,kali ini kita akan bahas bagaimana ya caranya membuat Drop Caps pada Artikel Blog? Yup!jika anda membuat Drop Caps pada Ms Word hanya dengan pengaturan pada Format?lain halnya dengan blogger yang tidak menyediakan fitur tersebut. Makanya,untuk sekedar menghias blog,kita main-main sama yang namanya Drop Caps ini,aaaalah!Oh iya..tadi pagi-pagi sempet liat blognya temen di cepat-terindex-google.blogspot.com,dan makasih banget buat mbak ati yang sudah memuat artikel dan link saya,dan..udah!udah! koq malah curhat!mana topiknya!!@#$!12!! Ok! langsung aja ya.. Sebenarnya banyak cara yang bisa anda pilih untuk membuat Drop Caps ini,bisa dengan CSS,maupun yang lain. Drop caps-drop caps..,kaya apa sich? Misal saya akan menuliskan sebuah kalimat seperti ini: Saya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog. Jika saya ingin membuat Drop Caps dan memperbesar huruf "S" di atas,saya hanya menuliskan kode berikut : <span style="float: left; color: black; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: arial;">S</span>aya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog. Maka hasinya nanti akan menjadi seperti ini : Saya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog. Mudah khan? Anda hanya menisipkan kode seperti di atas,pada setiap anda menuliskan artikel pada blog. Untuk lebih efisien anda fokuskan menulis artikel pada halaman html bukan tulis/compose!. Baca Juga Yang Ini.. Menghilangkan Tulisan Subscribe To/Tulisan Langganan Posting Atom Menghilangkan Navbar pada Blog Membuat Navbar Blog Fleksible

Rangkuman Pelajaran Programming

CSS,PHP,HTML,JAVASCRIPT dan ASP Memanfaatkan situs penyedia ilmu programming dalam belajar cara membuat blog/web,pasti tidak lepas dari CSS,PHP,HTML,Javascript maupun yang lain,meskipun sekarang sudah sebagaian besar didukung oleh WYSWYG (what you see what you get) seperti pada blogger. Ya..paling tidak kita harus menguasai salah satunya khan? Jika sebelumnya Pelajaran Blog membahas tentang Apa itu CSS?,Apa itu Javascript?,Apa itu HTML? dan yang lain,tapi kali ini kita membahas situs-situs penyedia ilmu gratis tetang hal-hal tersebut di atas, Situs Penyedia Ilmu Programming Gratis Pelajaran Blog merekomendasikan situs-situs di bawah ini untuk media pembelajaran,karena mudah dipahami,akurat dan lengkap,terutama untuk pemula. #1 Belajar CSS Anda bisa kunjungi : http://www.w3schools.com/css/ http://www.learn-css-tutorial.com/ http://csseasy.com/ #2 Belajar PHP Anda bisa kunjungi : http://www.learnphp.org/ http://www.phpbuddy.com/ http://www.scripts.com/php-scripts/ #3 Belajar HTML Anda bisa kunjungi : http://www.w3schools.com/html/DEFAULT.asp http://www.davesite.com/webstation/html/ http://www.html.net/ #4 Belajar Javascript Anda bisa kunjungi : http://userscripts.org/ http://www.w3schools.com/JS/default.asp #5 Belajar ASP Anda bisa kunjungi : http://www.asp.net/ http://www.w3schools.com/asp/default.ASP http://www.learnasp.com/learnasp/ **uNTUK YaNg LaIn,gOOGLInG aJa Ya.. Semoga bermanfaat.. **bocoran artikel selanjutnya.."Membuat Dropcaps Pada Artikel di Blog",tapi rencana..khan bisa berubah,so..update truz yach.. Baca Juga Yang Ini.. Apa itu HTML? Apa itu Javascript? Apa itu CSS?

Membuat Meta BlogCatalog

Sekali lagi sebagus apapun blog,jika tak terindex mesin pencari sama saja bohong khan? itu sebabnya kali ini Pelajaran Blog membahas tentang membuat meta blogcatalog. Awalnya memang tidak bisa di pastikan bahwa meta ini bisa di jadikan referensi agar cepat terindex mesin pencari,Google pada khususnya. Tapi setelah beberapa hari,salah satu teman terbaik saya,yang menyebut dirinya "Cah Donorejo",seperti nama yang dia pakai saat berkomentar pada blog ini,memberi tahu saya bahwa meta yang diberikan BC,sangat efektif dan memang terbukti cepat terindex Google. Seberapa akuratkah meta BlogCatalog? Jika kurang yakin,ketikkan kata kunci "Supaya Cepat Terindex Google" pada www.google.com,inget ya bukan www.google.co.id(jika terset google.co.id,pilih tulisan "Google.com in English") dan ketikkan kata kunci di atas. Supaya cepat terindex google" di Google ,http://cepat-terindex-google.blogspot.com/,klik disini untuk melihat. menempati posisi pertama. Klik link tersebut untuk menuju halamannya dan klik kanan lalu "View Source",disitu dia meletakkan beberapa meta,dan meta blogcatalog salah satunya. **Tapi,jika sudah berubah wajar dunk,khan algoritma google juga selalu berubah-ubah. Ini membuktikan bahwa setelah dia meletakkan meta BC,bukan sesuatu yang sulit untuk cepat terindex mesin pencari. Bagaimana saya bisa mendapatkan Meta BlogCatalog? Contoh dari meta ini(saya ambil dari meta BC dari blog ini) seperti di bawah ini: <meta content='9BC9206xxx' name='blogcatalog'/> Untuk mendapatkannya cukup mudah,anda hanya kunjungi http://www.blogcatalog.com/,setelah itu Sign Up,di sebelah kanan bagian atas(jika belum berubah). Setelah itu,tulis dan isikan form seperti yang diinstruksikan,untuk username,biasanya BlogCatalog tidak mengizinkan 2 kata nama yang dipisahkan dengan spasi. Setelah anda mengisi semua form dan data dari blog anda,lalu klik tombol "Submit Blog". Tunggu beberapa saat dan akan muncul halaman link setelah anda memferivikasi email dari BC tentunya. Copy salah satu kode link BlogCatalog kedalam HTML anda. Lalu dimana Meta nya? Meta ini oleh BC,diletakkan paling bawah,copy kode tersebut dan letakkan pada halaman HTML anda di bawah kode <head> Simpan.Selesai. Baca Juga Yang Ini.. Membuat Meta y_key SEO,Mengatur / Mengubah Format Title Supaya Blog / Web TerIndex Google

Membuat Popup dengan Ukuran Tertentu

Membuat Popup? nggak ah! Tunggu dulu,pelajaran ini tidak ada kaitannya dengan Membuat Popup Iklan yang sering membuat orang jengkel dan bahkan tak jarang visitor enggan untuk berkunjung kembali. Tapi,kali ini kita mencoba iseng belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan. Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author,tapi disini kita hanya menawarkan visitor untuk melihatnya. **Ukh! beberapa hari terakhir,aku lagi nggak semangat memposting artikel tentang blog (lg ga enak badan dan ga ada bahan,he..)so,..#%#$! OK! Langsung ke topik,popup dengan ukuran yang kita tentukan sendiri,meskipun sekali lagi,ini berfungsi di Mozilla Firefox dan Opera :D. Saya ambil contoh dari blog saya yang lain, seperti di bawah ini (jika ada,bukalah di Mozilla): Siapkan mental untuk melihat photo orang ini.. Gimana,tertarik untuk membuatnya? (sekedar untuk fun aja..)tapi,efisien juga jika popup di atas untuk menampilkan preview suatu situs bahkan iklan. So,yang minat untuk membuat jendela munculan dengan ukuran yang kita inginkan,coba ikuti langkah berikut: Pertama,tentukan alamat URL yang ingin di tampilkan,selanjutnya anda bisa meletakkan kode ini pada halaman HTML anda maupun saat anda hendak mempublikasikan pada suatu artikel. Saya ambil contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget. Pilih HTML/Javascript,dan letakkan kode berikut: <center><form onsubmit="window.open('http://URLYANGDITAMPILKAN/','popupwindow','scrollbars=no, width=250,height=250');return true"><input type="submit" value="TEXT YANG TAMPIL PADA BUTTON"></form></center> Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda. Setelah kode di letakkan Simpan,dan Selesai. Baca Juga Yang Ini.. Menghias Text Area pada Blog Meletakkan Gambar sebelum Judul Posting Membuat Menu Navigasi CSS di E lement Baru

Menghias Text Area pada Blog

Setelah posting tentang membuat meta y_key dan meletakkan sebuah object gambar sebelum Judul post pada blog beberapa hari lalu,pelajaran kali ini kita akan membahas tentang bagaimana belajar tentang menghias text area pada blog. Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini. Maksudnya menghias text area? Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..). Contoh text area biasa seperti ini : Saya sedang belajar bagaimana cara menghias text area pada Blog,Ini adalah contoh text area yang biasa,tentunya sedang belajar di Pelajaran Blog:) dengan kode seperti ini : <form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form> **rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda. Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini: Menghias Text Area Contoh #1 Ini adalah jenis text area dengan garis tepi berbentuk dot berawarna biru,dan mempunyai background warna kuning,dengan text bergaris bawah. Text area di atas: Background berwarna kuning Border berwarna biru (dot) Warna Text Merah Text bergaris bawah Untuk kodenya copy kode di bawah ini : <form><textarea rows="3" cols="30" background-color="green" style="color: red; background-color: yellow; text-decoration: underline; border-style: dotted; border-color: blue">Text Anda Disini</textarea></form> Menghias Text Area Contoh #2 Ini adalah jenis text area dengan border solid berwarna kuning dengan background text berwarna hijau,jenis text Uppercase Text area di atas: Background berwarna Hijau Border berwarna Kuning (solid) Text Huruf Besar (Uppercase) Warna Text Putih Untuk kodenya copy kode di bawah ini : <form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form> Menghias Text Area Contoh #3 Ini adalah contoh text area dengan background berwarna biru dengan warna text kuning tanpa bergaris bawah,border solid berwarna merah Text area di atas: Background berwarna Biru Border berwarna Merah (solid) Text Tanpa bergaris bawah Warna Text Kuning Untuk kodenya copy kode di bawah ini : <form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >Text Anda Disini</textarea></form> Menghias Text Area Contoh #4 Ini adalah contoh text area dengan background berwarna hijau dengan text warna putih dan berhuruf tebal,juga terinstall otomatis. Text area di atas: Background berwarna Hijau Border berwarna gray/abu-abu(solid) Warna text Putih dan berhuruf tebal Kode terinstall/terblok otomatis Untuk kodenya copy kode di bawah ini : <form name="contohtextarea"><textarea name="txt" rows="3" cols="30" onmouseover="this.form.txt.select()" readonly ; style="color: white; background-color: green; font-weight: bold; border-color:gray">Text Anda Disini</textarea></form> Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:) Baca Juga Yang Ini.. Membuat meta y_key Meletakkan Object Gambar sebelum Judul Posting Supaya Tabel tidak Melorot

Memanfaatkan Fungsi Scroll untuk Daftar Artikel

Beberapa hari nggak online/update blog,saat lihat komentar ada temen kita menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini. Kira-kira komentar itu seperti ini : mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak the most popular post, membuat blog di blogger yang ada di kanan postingan itu lho. mohon bimbingannya. Untuk itu mumpung lagi ada waktu,sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..:) Untuk lebih relevan,sebaiknya diletakkan pada sidebar.Untuk hasil contohnya seperti ini: TENTUKAN JUDUL KOLOM >> TEXT YANG AKAN TAMPIL >> TEXT YANG AKAN TAMPIL >> TEXT YANG AKAN TAMPIL >> TEXT YANG AKAN TAMPIL >> TEXT YANG AKAN TAMPIL Untuk langkah pertama,pergilah ke Dashboard---->Tata Letak----->Edit html. Selanjutnya cari kode : </head> Jika sudah ketemu,tepat diatasnya,letakkan kode ini: <style type='text/css'> #fungsiscroll { float: left; width: 100%; font-family:arial; font-size:12px; margin: 6px 0px 6px 0px; padding:0px; line-height: 18px; display:; } #fungsiscroll p { padding: 0px; margin: 0px; } #fungsiscroll a:hover { color: green; padding: 0px; } #fungsiscroll a { text-decoration:none; color:black; } #fungsiscroll a img { border: none; margin: 0px; padding: 0px 0px 15px 0px; } #fungsiscroll h2 { color: #000000; font-size: 14px; font-family: Arial; text-align:center; color:white; font-weight: bold; margin: 0px 0px 7px 0px; padding: 7px 5px 3px 13px; letter-spacing:0em; text-transform:normal; background: #222222; } #fungsiscroll ul { list-style-type:none; margin: 0px 0px 10px 0px; padding: 0px; } #fungsiscroll li { list-style-type: none; margin: 0px 0px 5px 0px; padding: 0px; border-bottom : 1px dashed #ccc; } #fungsiscroll ul ul { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; } #fungsiscroll ul li li { background: #FFFFFF url(images/icon.png) no-repeat top left; padding: 0px 0px 5px 18px; margin: 0px 0px 0px 0px; border-bottom:1px solid #ddd; } #fungsiscroll ul li ul li { background: #FFFFFF url(images/icon.png) no-repeat top left; padding: 0px 0px 5px 18px; margin: 0px 0px 0px 0px; border-bottom:1px solid #ddd; } #l_fungsiscroll { background: #FFFFFF; float: left; width: 135px; margin: 0px; padding: 9px 9px 0px 9px; line-height: 20px; display: inline; border: 1px solid #C0C0C0; } #l_fungsiscroll p { margin: 0px; padding: 0px 0px 15px 0px; } #l_fungsiscroll a img { border: none; margin: 0px; padding: 0px 0px 15px 0px; } #l_sidebar ul { list-style-type: none; margin: 0px 0px 10px 0px; padding: 0px; } #l_sidebar ul ul { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; } #l_fungsiscroll ul li li { background: #FFFFFF url(images/icon.png) no-repeat top left; padding: 0px 0px 5px 18px; margin: 0px 0px 0px 0px; } #l_fungsiscroll ul li ul li { background: #FFFFFF url(images/icon.png) no-repeat top left; padding: 0px 0px 5px 18px; margin: 0px 0px 0px 0px; } #r_fungsiscroll { background: #FFFFFF; float: right; width: 135px; margin: 0px; padding: 9px 9px 0px 9px; line-height: 20px; display: inline; border: 1px solid #C0C0C0; } #r_fungsiscroll p { padding: 0px 0px 15px 0px; margin: 0px; } #r_fungsiscroll a img { border: none; margin: 0px; padding: 0px 0px 15px 0px; } #r_fungsiscroll ul { list-style-type: none; margin: 0px 0px 10px 0px; padding: 0px; } #r_fungsiscroll ul ul { list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; } #r_fungsiscroll ul li li { background: #FFFFFF url(images/icon.png) no-repeat top left; padding: 0px 0px 5px 18px; margin: 0px 0px 0px 0px; } </style> Setelah itu simpan. Lalu pada Tata Letak blog,tambah element baru dan pilih HTML/Javascript,lalu letakkan kode berikut: <script type="text/javascript"></script> <div id="fungsiscroll" class="sidebar section"> <h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2> <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px"> <ul> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> </ul> </div> <div id="fungsiscroll" class="sidebar section"> <h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2> <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px"> <ul> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> </ul> </div> </div> </div> <div id="fungsiscroll" class="sidebar section"> <h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2> <div style="overflow:auto;width:95%;height:120px;"> <ul> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> <li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li> </ul> </div></div> Lalu Simpan. Selesai. **Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas. CSS,memang sangat membantu ya.. :) Baca Juga Yang Ini.. Membuat Meta y_key Meletakkan Gambar Sebelum Judul Posting Supaya Tabel tidak Melorot

Meletakkan Gambar Sebelum Judul Posting

Pelajaran Blog,beberapa hari setelah Pesta Demokrasi Pemilihan Wakil Rakyat untuk 2009,pada setiap artikel,sebelum judul posting,dihiasi dengan gambar,(ganti suasana,he..) Bagi temen-temen yang ingin meletakkan gambar sebelum judul artikel,seperti pada blog ini,bisa ikuti langkah-langkah berikut ini: Sebelumnya,siapkan bahan yang akan digunakan,bawang merah,telur,..Hus! maksudnya gambar yang ingin anda letakkan. Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut. Contoh,alamat URL gambar yang saya punya: http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif Rubahlah menjadi seperti ini: <img src="http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif"></img> Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi. Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah! Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Contreng Expand Widget Templates,lalu cari kode berikut : <a expr:href='data:post.url'><data:post.title/></a> Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis! Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut. Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini : <a expr:href='data:post.url'> <imgsrc="http://iklandenpasar.cn/images/1398_Loggo-pelajaran-Blog.gif"></img> <data:post.title/></a> Setelah itu klik Preview/Pratinjau untuk melihat hasil contohnya,jika sudah merasa OK,klik Simpan Templates. **Untuk membuat jarak antara gambar dan Judul,anda bisa menuliskan tanda &nbsp;&nbsp; sebelum kode <img src="http://... Baca Juga Yang Ini.. Membuat Area Text Serasa 3 Dimensi Supaya Tabel tidak Melorot SEO,Mengatur/Mengganti Format pada Title

Membuat Meta y_key

Apakah anda sudah mempunyai meta y_key? Meskipun saat ini meta sudah tidak begitu vital diterapkan sebagai langkah untuk Search Engine Optimation(SEO),tapi masih banyak blogger-blogger papan atas menggunakan langkah ini. Selain meta diskripsi dan keyword yang sering diterapkan (meta ini di letakkan di antara <head> dan </head>)seperti: Contoh meta untuk diskripsi di pelajaran-blog.blogspot.com: <meta content='Pelajaran tentang cara membuat blog di blogspot,juga belajar tentang menghias blog,membuat sambil blogging belajar menghias blogger khusus untuk pemula' name='description'/> **Untuk menjelaskan diskripsi dari blog tersebut Contoh meta untuk keyword di pelajaran-blog.blogspot.com: <meta content='pelajaran blog,cara membuat blog,belajar menghias blog,untuk pemula,blogspot,blogger,blogging' name='keywords'/> **Untuk menjeaskan kata kunci untuk menuju blog tersebut Nah!yang akan kita bahas kali ini,adalah meta y_key. Bagaimana saya bisa mendapatkan meta y_key? Meta y_key adalah meta yang dimiliki oleh Yahoo,maka kita harus mempunyai account di Yahoo,sebelum mensubmit blog kita ke directory mereka. Contoh bentuk meta yang di berikan,nantinya akan seperti ini : <meta content='32bf6291ec6ec61f' name='y_key'/> Langkah pertama,masuk Yahoo dengan ID Yahoo anda yang masih valid tentunya,untuk lebih cepat anda bisa kunjungi di https://siteexplorer.search.yahoo.com/. Selanjutnya,masukkan alamat URL blog anda,lalu klik Add My Site. Setelah itu,anda di hadapkan halaman bahwa anda telah mensubmit URL blog anda,pada tabel keterangan nya disitu ada kolom Sites,Feeds,Action dan Status pada kolom terakhir. Nah! pada kolom Status,hanya diperlihatkan sebuah object berbentuk bulat,klik tanda bulat tersebut untuk melihat status. Selanjutnya anda akan di hadapkan 2 pilihan. By uploading a verification file to my site. By adding a META tag to my home page Pilih tanda segitiga pada tulisan "By adding a META tag to my home page" dan copy kode y_key nya,yang mana ya? Yang mirip seperti ini: <META name="y_key" content="xxxxxxxxxxxxxxxx"> Kode diatas hanya contoh kodenya,tulisan "x" diatas adalah nomor key blog anda. Copy kode tersebut dan letakkan di bawah kode <head> pada halaman HTML anda lalu Simpan Template anda. Setelah anda berhasil meletakkan kodenya,kembali ke halaman account Yahoo dimana anda baru saja mengcopy kode tadi,setelah itu klik Tombol "Ready to Authenticate",dan tunggu sampai muncul halaman yang memberi tahu bahwa y_key anda telah berhasil untuk difungsikan. Contoh tulisan jika sudah berhasil kurang lebih seperti ini : Your site has been authenticated If you have added the META tag <META name="y_key" content="<meta name="y_key" content="xxxxxxxxxxxxxxxx" >, please keep the tag in your site's home page. We will revalidate your site ownership by checking this META tag regularly. If you have uploaded the verification file, please keep the file y_key_xxxxxxxxxxxxxxxx.html on your site root http://alamat-blog-anda.com and do not change the content (xxxxxxxxxxxxxxx). We will revalidate your site ownership by checking this file regularly. Saat saya meletakkan y_key, koq Error ya? Error,mungkin hanya disebabkan kode yang tidak ditutup dengan benar.Memang dari Yahoo sendiri,memberikan kode yang seperti ini: <META name="y_key" content="xxxxxxxxxxxxxxxx"> Anda tinggal disuruh menyisipkan tanda "/" pada akhir kode,yang nantinya menjadi seperti ini: <META name="y_key" content="xxxxxxxxxxxxxxxx"/> Dalam waktu kurang lebih 24 jam,Bibi Yahoo akan segera mengindex anda. :) Baca Juga Yang Ini.. Supaya Blog/Web terindex Google SEO,Mengatur/Mengubah Format Judul pada Title Apa Itu SEO?

Membuat Area Text Serasa 3 Dimensi

Membuat area text,bukan membuat text area,text area anda bisa baca disini. Tapi yanhg akan kita bicarakan pada topik kali ini adalah membuat bidang/tempat area text seolah 3 Dimensi. Contohnya anda bisa lihat di bawah ini : Saya lagi belajar Membuat Area Text Serasa 3 Dimensi Caranya sangat mudah sekali,ya..kita memerlukan bantuan CSS.Maksudnya? Pertama,anda pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML. Setelah itu cari kode: <head> jika sudah ketemu,letakkan kode berikut persis di bawah kode tersebut : <style type='text/css'> #tigadimensi{ background: #E8E8E8; margin: 15px; font-family:arial; font-size:13px; text-align:justify; padding: 10px 15px 10px 15px; border-top: 1px solid #DDDDDD; border-right: 1px solid #666666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666666; } #post tigadimensi{ margin:.75em 0; } </style> Setelah itu Simpan Template. Selanjutnya,pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya tambah element baru,atau bisa juga langsung posting ke posting area,tuliskan kata yang ingin anda tampilkan nanti,gunakan kode berikut : <div id='tigadimensi'>Text Anda Disini </div> Simpan,dan lihat Hasilnya ! Baca Juga Yang Ini.. Membuat Sidebar Diantara Posting SEO,Mengatur / Mengubah Format Title Menyembunyikan Profil di Blogspot

Membuat Sidebar Diantara Posting

Sering saya jumpai situs-situs yang mempunyai sidebar di sebelah kanan dan kiri .Atau lebih gampang nyebutnya Posting terletak diantara sidebar ,berarti posting berada di tengah-tengah. Sedangkan dari blogger tak menyediakan template yang seperti itu.Untuk memodifikasi template anda,cobalah langkah-langkah seperti di bawah ini : Pergi ke Dashboard------>Tata Letak----->Edit Html . Cari kode / yang hampir sama dengan kode di bawah ini : #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ Jika sudah ketemu,letakkan kode di bawah ini tepat dibawah kode tersebut : #newsidebar-wrapper { width: 180px; float: left; padding-right:10px; word-wrap: break-word; overflow: hidden; } Selanjutnya,cari kode seperti di bawah ini : <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section> </div> Jika sudah ketemu,letakkan kode di bawah ini,tepat diatas kode tersebut : <div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'/> </div> Simpan Template .Lihat Hasilnya!!! Kode yang berwarna hijau,menunjukkan ukuran lebar sidebar nantinya,anda bisa merubahnya sendiri,sampai anda mendapatkan ukuran yang anda inginkan. Untuk lebih jelasnya baca artikel Kang rohman di sini Baca Juga Yang Ini.. Supaya Tabel Tidak Melorot SEO,Mengatur/Mengubah Format Title Membuat Menu Navigasi CSS di Element Baru

SEO,Mengatur / Mengubah Format Title

Salah satu langkah SEO(Search Engine Optimation),adalah mengubah format pada Judul Blog. Sebelumnya,Pelajaran Blog,minta maaf karena tidak adanya Ilustrasi berupa Gambar/Image pada setiap artikelnya. Ya,benar,hanya penalaran saja,klo baca khan lebih Fokus.. (ngomong aja ga ada gambar yang bisa dipostingin,he..) Langsung ke Topik.Maksud mengubah Format Judul pada Blog,misal Judul Blog saya: Pelajaran Blog|Belajar Membuat Blog Biasanya,nanti setelah membuka halaman,contoh tentang artikel : "SEO,Mengatur / Mengubah Format Title" Judul pada Menu bar akan menjadi seperti ini : Pelajaran Blog|Belajar Membuat Blog:SEO,Mengatur / Mengubah Format Title Ya,khan? Nah,agar SEO Friendly,kita ubah susunan Judul menjadi hanya seperti ini: SEO,Mengatur / Mengubah Format Title Maka,jika berhasil diindex sama paman Google ya..akan terindex seperti itu. Untuk kodenya,sebenarnya anda tinggal merubah format Title nya. Pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML. Cari kode seperti di bawah ini: <title><data:blog.pageTitle/></title> Setelah ketemu,hapus kode tadi,dan ganti dengan kode dibawah ini <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/></title> </b:if> Lalu Simpan Template. Dan,baca salah satu artikel anda sekarang,dan lihat tampilan Judul Bar atas. Berhasil khan? Baca Juga Yang Ini.. Supaya Tabel Tidak Melorot Membuat Favicons Disable Copy Paste pada IE

Menyembunyikan Profil di Blogspot

Menyembunyikan Profil Sekali lagi ya,ini untuk pemula,dan bagi yang belum tahu bagaimana menyembunyikan profil pribadi pada Blog. Seperti yang pernah saya lakukan sebelumnya,menyembunyikan profil pada blog ini,tapi setelah di pikir lagi,gimana bisa dapet temen klo profil kita tidak tersedia. Untuk melihat profil yang saya maksud,adalah seperti ini,klik disini. Untuk blogspot,yang masih asli biasanya,anda tinggal ke Bagian "Mengenai Saya" dan klik "Lihat Profil Lengkapku" (Untuk blogspot berbahasa Indonesia). Nah,jika sudah tahu yang dimaksud,sekarang ke topiknya,ya,menyembunyikan profil,atau pasnya tidak mengaktifkan profil. Anda tinggal disuruh pergi ke Dashboard,pilih disebelah kiri atas tulisan "Edit Profil". Setelah itu,akan muncul jendela baru bertuliskan "Edit Profil Pengguna". Contreng checkbox pertama "Bagi-pakai profil saya",untuk menyembunyikan Profil,dan Kosongkan jika anda ingin menyembunyikannya.Lalu Simpan. Menyembunyikan Daftar "Blog Saya" Maksudnya,saat anda melihat profil,baik profil sendiri atau orang lain,(profil yang saya maksud profil seperti diatas),disitu akan terlihat deretan daftar blog yang anda buat. Nah dalam hal ini,kita akan menyembunyikan daftar blog yang tidak ingin kita tampilkan. Sebenarnya saya mempunyai banyak blog,tapi saya hanya menampilkan Daftar Blog dari Blog ini,anda bisa lihat sendiri tadi khan? Nah untuk menyembunyikannya,sama dengan langkah di atas. Pergilah ke Dashboard,lalu pilih Edit Profil,selanjutnya contreng check box "Bagi-pakai profil saya",dan cari tulisan "Tampilkan blog saya" dan klik tulisan bergaris bawah "Pilih blog untuk ditampilkan". Selanjutnya contreng partai pilihan kamu,Hus !!salah lagi,maksudnya contreng blog yang ingin di tampilkan. Lalu Simpan. Dan selanjutnya lihat Profil Anda,meskipun anda telah membuat banyak blog,tapi pada profil hanya akan muncul blog yang anda contreng tadi. Baca Juga Yang Ini.. Menghilangkan Navbar Blogger Membuat Read More../Selengkapnya Menghilangkan Angka Pada Blog

Supaya Tabel tidak Melorot

Beberapa kali,saat mau memposting sebuah artikel yang sarat akan tabel,sering saya mengalami kesulitan,karena tabel akan melorot jauh ke bawah. Saya suda mencoba untuk menyelipkan kode agar jarak judul posting dengan tabelnya tak begitu jauh,tapi belum juga berhasil. Apakah anda salah satu yang mengalami kesulitan seperti saya? Pada pelajaran kali ini,kita akan mengakali supaya tabel tidak terlalu ke bawah.Untuk lebih jelas ,lihat ilustrasi di bawah ini. Saat saya hendak membuat tabel dengan kode : <table align="center" border="1" cellpadding="5" cellspacing="0" width="64%"> <tr> <td width="50%"> <center> Halo,saya belajar membuat tabel supaya tidak terlalu kebawah! </center> </tr> </td> </tabel> Hasilnya akan seperti di bawah ini : Disini jarak yang menjengkelkan itu! Halo,saya belajar membuat tabel supaya tidak terlalu kebawah! Tapi,saat saya mengakalinya,yaitu dengan cara menuliskan kode seperti di bawah ini : <table align="center" border="1" cellpadding="5" cellspacing="0" width="64%"> <tr> <td width="50%"> <center>Halo,saya belajar membuat tabel supaya tidak terlalu kebawah!</center> </tr> </td></tabel> Akan menghasilkan Tabel yang nggak ada jaraknya,seperti di bawah ini : Halo,saya belajar membuat tabel supaya tidak terlalu kebawah! Berhasil khan cara saya, :) Baca Juga Yang Ini.. Apa saja Kode-kode pada HTML? Menghilangkan Navbar Blogger Disable Right Click

Apa itu CSS?

Untuk kesekian kalinya,Pelajaran Blog,akan merepotkan lagi Bapak Supono. Ya,karena mungkin pusing akan penjabaranya,CSS,pengertian CSS,anda bisa baca disini. Tapi,Pelajaran Blog,nggak mau dong dibilang nggak modal lagi,he..he.. Contoh simple sebuah CSS,anda bisa lihat ilustrasi di bawah ini: Jika dengan HTML,saya menuliskan sebuah kalimat: Apa Itu CSS? Maka saya akan menuliskan kode: <font-size="12px";font-family="arial"><b>Apa itu CSS?</b></font> Tapi dengan CSS,kita bisa menghemat penerapan kode,hanya dengan mengatur atribut kalimat yang akan kita tulis,di bagian atas kode <HEAD>,pada halaman HTML anda. Contoh,tulisan Apa itu CSS? di atas,akan saya tulis memakai CSS. Pertama,saya meletakkan kode ini di atas kode <Head> pada halaman HTML saya. <style type='text/css'> #Contoh { color:black; font-size:12px; font-weight: bold; font-family: arial; } </style> Setelah itu,saya menuliskan kode di bawah ini sesudah kode <Head> <script type='text/javascript'/> <div id="Contoh"> Apa Itu CSS? </div> Hasilnya akan seperti ini : Apa Itu CSS? Sama khan ?Nah itu penjelasan dikit tentang CSS. Kurang Jelas,anda bisa pelajari CSS di http://learn-css-tutorial.com/. Baca Juga Yang Ini.. Apa Itu Javascript? Apa Itu HTML? Apa Itu Blog?

Cara Membuat Blog Itulah keyword yang mempunyai result tinggi di Google.Anda bisa membuat Blog di Blogspot,dengan panduan lengkap bagaimana cara membuat blog di blogspot,disini. Memang sudah banyak blogger yang mempublikasikan blog mereka,yang memuat tentang Tutorial Blog. Memang benar,Blogging merupakan aktivitas sekaligus hobi yang menarik. Dan banyak cara-cara untuk membuat suatu Blog,bisa dari blogspot maupun wordpress,bisa juga di multiply ataupun blogsome,blogdetik,dll. Oleh sebab itu keyword "Cara Membuat Blog" begitu ramai di optimalkan,ya..SEOlah peran utamanya. Untuk SEO tingkat awal/supaya blog terindex Google,anda bisa baca disini. Mungkin itu saja sekilas renungan singkat tentang keyword "Cara Membuat Blog". Baca Juga Yang Ini.. Membuat Blog di Blogspot Meletakkan Gambar pada Blog Meletakkan Video pada Blog

Tentang Blog Sebuah Artikel Yang Kosong Akhir-akhir ini,memang lagi demam ngomongin Blog,di Pelajaran Blog,memang di khususkan cara membuat blog dengan Blogspot Jika anda belum mempunyainya,anda bisa baca panduan lengkapnya disini. Untuk sementara dalam kasus Tutorial Blog Ini,di bahas 3x(sekalian buat pengoptimalan kata kunci,he..he..) Memang kesan nya jadi kaya' nggak ada topik lain ya.. Memang seharusnya begitu,tidak selamanya setiap artikel berisi Turorial Blog,khan penulis sekali-kali ingin curhat juga,he..:) Curhat Masalah apa nich? Blogging,bisa juga ngomongin blogger-blogger yang lain,meskipun nggak ada yang mo dengerin curhat aku ini,huh! Ok! Next,bukan sebuah artikel kosong lagi,kita bener-bener mo serius dan Fokus ke Pelajaran-pelajaran selanjutnya. So,thank you very much! aaaaalah! Baca Juga Yang Ini.. Membuat Blog di Blogspot Meletakkan Gambar pada Blog Meletakkan Video pada Blog