Banyak blogger yang biasa memampang photo profil mereka,meski banyak juga yang menyembunyikan identitas mereka.Untuk anda yang ingin memodifikasi border dari photo profil,cari kode berikut pada halaman html anda :
.profile-img img { Anda hanya disuruh merubah tebal bordernya (yang berwarna hijau ),setelah anda rubah,maka menjadi seperti di bawah ini :
.profile-img img { Ukuran,sesuai keinginan anda. Mudah khan ? |
Sabtu, 10 Desember 2011
Cara Membuat Bingkai Photo Profil pada Blog
Cara Menambahkan Iklan di bawah posting
Anda ingin meletakkan iklan Adsense,AdBrite,maupun kode iklan lain ke dalam blog persis di bawah posting? Tapi,sebelumnya,anda sudah menggunakan fitur Read more../Selengkapnya..atau yang sejenis dalam body posting ya..jika belum anda buat,buatlah dulu,baca panduannya disiniAda cara mudah meletakkan kode iklan seperti iklan AdSense tepat di bawah postingan,tapi inget ya,Untuk Adsense,ini berlaku untuk Adsense for Content. Jika body posting sudah di buat Read more../Selengkapnya..tinggal masuk permasalahanya.Jika anda mempunyai kode Adsense for Content,seperti contoh : <script Sebelum kode diletakkan,parse dulu kode tadi,misal penulisan tanda <,di ganti dengan < Lihat keterangan di bawah ini untuk membantu : < notasinya : < > notasinya : > & notasinya :& " notasinya :" ± notasinya : ± Spasi notasinya : Maka,dalam contoh disini,kode Adsense diatas,jika sudah di parse,akan menjadi seperti di bawah ini : <script Ingat ya,kode diatas ini hanya sebagai contoh saja.Yang anda harus parse adalah kode dari iklan Adsense,AdBrite atau kode iklan yang lain milik anda,yang akan di letakkan di bawah posting nantinya. Selain memparsekan kode secara manual,sekarang banyak kok software yang sudah menyediakan fitur untuk parse kode otomatis,seperti yang ini. Setelah di parse,buka Notepad,dan copy paste kode yang sudah di parse tadi ke dalam Notepad.(jangan disimpan,hanya numpang kode saja),biarkan,jangan ditutup dulu Notepadnya ya.. Sekarang pergi ke Dashboard---->Tata Letak----->Edit Html---->Centang Expand Template Widget Cari kode atau yang hampir sama dengan kode di bawah ini (kode untuk Read more..yang sudah anda buat) : <b:if cond='data:blog.pageType Jika sudah ketemu,copy paste kode iklan yang sudah anda parse tadi (yang ada di Notepad tadi),dan letakkan di bawah kode yang berwarna hijau di atas. Maka hasilnya kurang lebih akan seperti di bawah ini : <style>.fullpost{display:inline;}</style> Kode yang berwarna biru, <br /> <br /> ,fungsinya hanya memberi jarak saja.Simpan. Selesai! |
Cara Background berwarna / Image Background
Anda ingin merubah warna bakground atau mengganti background blog anda menjadi sebuah gambar? **Cara sederhana untuk mendapatkan kode warna,anda bisa ngutak-atik fitur dari blogger.di pengaturan Huruf dan Warna,disebelah kanan,tertera kode warna dari warna yang kita ingin pilih.Anda hanya merubah kode warna background pada halaman html anda. Mengingat hanya untuk keperluan utak-atik,bersihkan edit,untuk menyelamatkan warna blog anda. Maksud saya,cara praktis untuk mendapatkan kode warna. misal, kode warna Merah adalah #FF0000 kode warna Biru adalah Lalu yang dirubah untuk mengganti backgound blog kita,baris kode yang mana?#0000FF ,dsb.Nah!Pergi ke Dashboard blog anda,pilih Tata Letak.lalu pilih Edit html. Cari kode seperti di bawah ini : body { Nah!nah neh! nah neh !melulu,gmn sich !! :( Lihat khan,kode yang berwarna hijau?nah!kode itu yang anda rubah sesuai keinginan anda. Ada cara paling praktis,selain kode heksa anda juga bisa menuliskan warna dalam bahasa Inggris,seperti;Black,Yellow,Red,Green,dll tapi kelemahanya kita kurang bisa memaksimalkan warna yang benar-benar sesuai dengan warna blog kita. Lalu,jika mau merubah menjadi background gambar gimana? Untuk merubah background menjadi sebuah background bergambar,masih sama,kode yang anda rubah hanya kode yang berwarna hijau dalam contoh kode di atas. Perbedaanya anda hanya menambahkan alamat gambar yang anda inginkan.Untuk lebih jelasnya,lihat kode di bawah ini : body { Sekali lagi,Nah! anda hanya cukup mengganti alamat http://www.geocities.com/mohdrazali_2006/Pemandangan2.jpg di atas,menjadi alamat gambar yang ingin anda kehendaki. |
Cara Membuat Search Engine sendiri pada Blog
Ada cara praktis untuk menemukan artikel pada blog secara singkat.Bagi yang sudah tergabung dalam Google Adsense,pasti sudah tahu ya masalah ini. Tapi bagi anda yang belum tergabung,tapi ingin menampilkan form pencari untuk blog anda sendiri,ada kode praktis yang ga ada salahnya anda coba. Hasilnya nanti akan seperti di bawah ini : Sedangkan kodenya,copy paste kode di bawah ini : <form id="searchform" Kode yang berwarna hijau; http://pelajaran-blog.blogspot.com/search, gantilah dengan halaman blog anda sendiri,tapi jangan lupa tambahin kode /search ya..Sedangkan Value "Search"anda bisa ganti menjadi "Go" atau "Cari" atau yang lain. |
Cara Membuat Disable Right Click / Anti Klik Kanan
Membuat fungsi klik kanan nonactive/disable right click,sangat cocok memang untuk menjaga document atau memproteksi gambar yang ada di blog kita,agar tidak disalah gunakan oleh pihak lain. Meski ada shortcut tertentu yang mewakili perintah-perintah right click,nggak ada salahnya anda mencoba kode di bawah ini : <script> Cukup menempatkan kode di atas diantara <body> dan </body> Untuk tes melihat hasilnya,Pilih Folder Option pada komputer anda,pilih View,kosongkan check box pada Hide Extensions For Known Filetypes pilih Ok. Copy kode diatas kedalam Notepad,Save beri nama "coba"yang hasil filenya menjadi "coba.txt". Ganti nama file tersebut menjadi "coba.htm",selanjutnya klik kanan. Siip khan ? Kode ini berfungsi baik,jika di akses di IE dengan Javascript posisi Enable. |
Cara Membuat Link berupa Gambar Animasi (*gif)
Jika anda harus bersusah payah memasukkan object flash kedalam blog karena harus menambahkan beberapa kode,lebih prakstis memakai animasi gambar (*.gif). Gambar ini nantinya akan menjadi sebuah link,yang mempunyai tooltips / keterangan link. Untuk contohnya lihat seperti di bawah ini: Sebenarnya,untuk memasang gambar pada blog dalam kasus kali ini meletakkan file/gambar berextention *gif,sama halnya dengan cara meletakkan gambar berformat *jpg. Nah!Untuk kodenya copy di bawah ini:
<a href="http://geliat-bisnis.blogspot.com/"target="_self" title="Cari duit"> Untuk http://geliat-bisnis.blogspot.com/ gantilah nama URL tujuan.Untuk http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif gantilah alamat URL Gambar animasi yang ingin anda tampilkan.Untuk Cari duit adalah keterangan / tooltips / keterangan yang muncul ketika mouse berada di atas area.Untuk menambahkan/memasang file berextention *swf alias flash,akan saya posting di artikel selanjutnya,jadi keep stay ya(aalah..) Selamat mencoba ya..:) |
Cara Meletakkan Video kedalam Blog
Meskipun blogger sudah menyediakan upload untuk video,ga ada salahnya ya kita mencoba ngulik kode buat menempatkan sebuah video. Jika anda ingin meletakkan video dari Youtube,anda hanya mengisi alamat/URL video tersebut,pada kode. Untuk kode,copy di bawah ini:
Nah! Tulisan yang berwarna Hijau,gantilah dengan URL alamat video yang ingin anda tampilkan. misal alamat pada browser video tersebut adalah: http://www.youtube.com/watch?v=sLLCAmr8vjs maka alamat URL dalam kode ganti menjadi: http://www.youtube.com/v/sLLCAmr8vjs Apabila anda malah pusing alias bingung,tinggal buka halaman Youtube,dan copy embed kode di sebelah kanan atas,dan paste kode tersebut kedalam halaman HTML anda. Kenapa ga bilang dari Tadi!!!! ! Untuk ukuran,anda tentukan sendiri dengan mengatur width="246" height="171" .Jika ingin memasang video pribadi,tinggal membuat Account di Youtube dan Upload Video anda disana. Tidak susah khan? **Cara ini bekerja baik jika komputer anda sudah mensupport Flash Player |
Cara Membuat Daftar Isi pada Blog
judul artikel pelajaran kali ini,kita akan membuat Daftar Isi Pada Blog,contohnya anda sudah bisa melihat Daftar Isi pada Blog ini. Sebelumnya,dari mana saya dapat artikel ini? ya..dari senior kita semua tentunya, Kang Rohman di Blog Tutorialnyanya. Siapa sich yang belum pernah berkunjung ke Blog nya? Meskipun demikian,Pelajaran Blog,tanpa mengurangi etika sopan santun Blogging,akan menjabarkan lagi,bagaimana sich membuat Daftar Isi pada Blog. Langkah pertama,Pergi Dashboard lalu pilih Tata Letak,selanjutnya pillih Edit HTML. Selanjutnya,beri contreng Partai pilihan kamu,.. Hus ! bukan maksudnya,contreng tulisan Expand Widget Template,seperti di bawah ini : Selanjutnnya,cari kode di bawah ini: <b:include data='post' name='post'/> Untuk mempermudah pencarian,tekan Ctrl+F pada Keyboard anda,pakai keyboard khan? Setelah ketemu kode diatas,Hapus kode tersebut,lalu ganti dengan kode di bawah ini : <b:if cond='data:blog.homepageUrl != Lalu Simpan Template. Apakah dah selesai?Ya belum dong! Kalau dah selesai,gimana caranya bisa ngliat daftar isi blog?Nah! Untuk melihat Daftar Isi Blog,kita harus membuat Link terlebih dahulu,yang mana saat link di klik akan menuntun kita ke halaman khusus Daftar Isi tersebut. Anda bisa menggunakan seperti contoh di bawah ini: Untuk link berupa text: Anda bisa gunakan kode berikut : <a href="http:// NAMABLOGANDA.blogspot.com/search?max-results=100">Daftar Isi Blog</a>Untuk Link berupa form: Anda bisa gnakan kode berikut : <form action="http:// NAMABLOGANDA .blogspot.com/search?max-results=100" target="_blank"><input value="Daftar Isi Blog" type="submit"></form> Jangan lupa! kode yang berwarna merah,tuliskan alamat Blog anda sendiri. Sebenarnya,masih banyak pilihan yang bisa anda buat link untuk Daftar Isi Blog,caranya hanya dengan menambahkan Element Baru/Add New Widget dan pilih HTML/Javascript lalu tuliskan kode link pilihan anda (anda bisa memakai contoh di atas). Lalu apa arti tulisan "100" yang berwarna hijau di atas ? Angka "100" pada kode diatas,menentukan berapa jumlah judul yang akan di tampilkan untuk Daftar Isi tiap halaman,klo saya menuliskan "50",ya nantinya akan ada "50" judul yang akan di tampilkan pada setiap halamannya. Udah jelas khan? |
Cara Disable Copy dan Paste pada IE
Sebelumnya,saya juga pernah memposting tentang Disable Right Click,nah kali ini kita akan membahas Disable Copy dan Paste,suatu halaman Blog,meskipun ini hanya bekerja baik pada Browser Internet Explorer (IE) Jika kita sedang membutuhkan suatu artikel dari sebuah Blog,dan ingin mengcopy artikel tersebut,tapi !!234@! Kok nggak bisa ya..?? Nah sebenarnya teknik semacam itu hanya menyelipkan beberapa kode pada : <body> Maksudnya? Coba anda pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML. Cari kode berikut: <body> Jika sudah ketemu,hapus kode tersebut dan ganti menjadi seperti di bawah ini: <body ondragstart="return false;" onselectstart="return false;" oncontextmenu="return false;"> Lalu Simpan. Untuk melihat hasilnya,silahkan buka halaman blog anda pada browser IE,dan coba blok artikel anda,apa yang terjadi? http://pelajaran-blog.blogspot.com/2009/03/disable-copy-dan-paste-pada-ie.html |
Cara Menampilkan kode pada artikel
http://pelajaran-blog.blogspot.com/2009/03/menampilkan-kode-pada-artikel.html
Hallo! Update lagi nih! Lagi musim naikin Page Rank maupun Traffic,kita harus rajin mosting..betul ga? Meskipun postingan banyak yang Tong kosong nyaring bunyinya yang penting bermanfaat. Meletakkan kode di dalam postingan,sebenarnya hanya masalah penyesuaian saja,maksudnya,agar sang blog tidak dibikin bingung,makanya kode yang ingin kita tampilkan pada postingan harus di parse dulu. Apa jadinya kalau tidak di Parse?Jika kode yang ingin kita tampilkan tidak di parse terlebih dahulu,maka saat kita akan mempublikasikan,akan ada peringatan kesalahan format dan bahkan kode tidak tampil,sekalipun berhasil di publikasikan,betul ga?Untuk mengantisipasinya ya hanya memparse kodenya. Parse ! Parse ! apaan sich ?Parse menurut saya pribadi,ya hanya mengganti karakter kode menjadi notasi lain,misal :Untuk tanda-tanda di bawah ini :
Contoh: Saya ingin menampilkan kode <body> pada posting,maka saya saat memosting harus menuliskan <body> .Jelas khan ?Contoh lain,saya ingin pembaca mengcopy kode berikut : <html> Maka,saya dalam memposting harus menuliskan sebagai berikut : <html> Parse kode,..bener ga sich artinya kaya' gitu ? Gubrak ! |
Cara Membuat Area Text Serasa 3 Dimensi
http://pelajaran-blog.blogspot.com/2009/04/membuat-area-text-serasa-3-dimensi.html
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. 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 { 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 Simpan,dan lihat Hasilnya ! |
Cara Menghias Text Area pada Blog
http://pelajaran-blog.blogspot.com/2009/04/menghias-text-area-pda-blog.html
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 : 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 #1Text area di atas: Background berwarna kuning Untuk kodenya copy kode di bawah ini : <form><textarea rows="3" cols="30" background-color="green" </form> Menghias Text Area Contoh #2Text area di atas: Background berwarna Hijau <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 #3Text area di atas: Background berwarna Biru <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 #4Text area di atas: Background berwarna Hijau <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:) |
Cara Memanfaatkan Fungsi Scroll untuk Daftar Artikel
http://pelajaran-blog.blogspot.com/2009/04/memanfaatkan-fungsi-scroll-untuk-daftar.html
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 KOLOMUntuk 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'> 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"> < ul> < 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>
< ul> < 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"> <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> **Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas. CSS,memang sangat membantu ya.. :) |
Cara Membuat Tabel Untuk Kolom Navigasi
Tabel Kolom Navigasi
http://pelajaran-blog.blogspot.com/2009/07/membuat-tabel-untuk-kolom-navigasi.htmlMeskipun sebelumnya saya pernah memposting tentang bagaimana membuat menu navigasi dengan css tidak ada kapoknya saya masih memposting tentang hal dan tutorial yang sama,hanya saja kali ini berbeda sedikit.
Ya,memanfaatkan tabel untuk navigasi berkolom pada blog,oleh sebab itu dari pada saya bingung ngasih judulnya,saya tulis aja ’Membuat Tabel untuk Kolom Navigasi’,nyambung khan?
Nah untuk contohnya,anda bisa lihat menu navigasi pada www.indowebster.com.
untuk lebih jelasnya bagi pengguna blogger/blogspot,simak langkah-langkah di bawah ini:
Ya,memanfaatkan tabel untuk navigasi berkolom pada blog,oleh sebab itu dari pada saya bingung ngasih judulnya,saya tulis aja ’Membuat Tabel untuk Kolom Navigasi’,nyambung khan?
Nah untuk contohnya,anda bisa lihat menu navigasi pada www.indowebster.com.
untuk lebih jelasnya bagi pengguna blogger/blogspot,simak langkah-langkah di bawah ini:
Pertama,pergilah ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates,lalu cari kode berikut:
</head>
Setelah ketemu,letakkan kode di bawah ini tepat di atas kode tersebut.
<script type="text/javascript" src=""></script>
<style type="text/css">
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 240px;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 12px;
}
#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 224px; /*185px minus all left/right paddings and margins*/
color: white;
font: bold 70% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 11px;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}
* html #ddblueblockmenu li a{ /*IE only */
width: 230px; /*IE 5*/
width: 224px; /*185px minus all left/right paddings and margins*/
}
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}
#ddblueblockmenu li a:visited {
background-color: #2586d7;
border-left-color: #1c64d1;
}
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 13px;
}
</style>
<style>
.thumb {
padding: 2px;
height: 85px;
width: 100px;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 0px;
margin-left: 0px;
}
a {
color: #0033CC;
text-decoration: none;
}
a:hover {
color: #011e42;
text-decoration: none;
}
</style>
Setelah itu Simpan Template.
Langkah selanjutnya,Pergi ke Dashboard,lalu pilih Tata Letak,kemudian Tambahkan Gidget Baru/Add New Widget,pilih HTML/Javascript,lalu letakkan kode berikut:
<script type="text/javascript"></script><table bordercolor="#000000" width="100" bordercolorlight="#00FF00" bordercolordark="#006600" bgcolor="#006600"><tr><td valign="top" width="230" bordercolorlight="#008000" bordercolordark="#00FF00" height="313"><div id="ddblueblockmenu" style="width: 100; height: 20"><font face="Verdana" color="#FFFFFF" font size="2"><marquee width="211" height="22" align="middle">Disini Tulisan Yang Nanti Akan Berjalan</marquee></font><div style="width: 223; height: 20" class="menutitle"><li>JUDUL KOLOM KE 1</li></div><ul><li><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a></li></ul><div style="width: 223; height: 18" class="menutitle"><li>JUDUL KOLOM KE 2</li></div><ul><li><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a></li></ul><div style="width: 223; height: 19" class="menutitle"><li>JUDUL KOLOM KE 3</li></div><ul><li><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a><ul><li><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a></li></ul></li></ul></div><center><a href="http://Alamat_Blog_Anda.blogspot.com/" title="Home"><font face="Verdana" color="#FFFFFF" font size="2">HOME</font></a></center></td></tr></table>
Setelah itu Simpan dan Selesai.
Agar blog lebih rapi tempatkan widget tersebut pada sidebar blog anda.
’Sengaja kode diatas saya jadikan satu(jadi kesannya berantakan ya :D),agar hasil dari copynya sesuai dengan harapan.’
Ket:
- Untuk tulisan "Disini Tulisan Yang Nanti Akan Berjalan" adalah tulisan yang nantinya akan berjalan,gantilah sesuai keinginan,meskipun tulisan ini hanya bekerja pada IE/Internet Explorer
- Untuk tulisan "JUDUL KOLOM KE 1,2,3" adalah Judul pada stiap kolom,ganti dan rubah sesuai kebutuhan.
- Untuk tulisan "Tooltip Yang Nanti Akan Muncul" adalah tulisan/tooltip yang akan mucul saat event mouse diatasnya.
- Untuk tulisan "#" adalah URL yang anda ingin letakkan untuk setiap event kliknya,rubah sesuai keinginan.
- Untuk tulisan _blank atau _self,pakailah sesuka anda,_self jika ingin dibuka pada halaman yang sama,dan _blank jika anda ingin hasil muncul pada halaman baru.
- Untuk tulisan "http://alamat_blog_anda.blogspot.com/" tulis alamat blog anda sendiri
Untuk lebih jelasnya,hasil dari kode diatas akan menjadi seperti dibawah ini:
Cara membuat Popup
Membuat Popup? nggak ah!http://pelajaran-blog.blogspot.com/2009/04/membuat-popup-dengan-ukuran-tertentu.htmlTunggu 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 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. |
Cara Form Praktis untuk Pengunjung Blog
http://pelajaran-blog.blogspot.com/2009/05/form-widget-untuk-pengunjung.html
Sekiranya sudah maksud khan? :D
Nah! sekarang saatnya kita menuju langkah pertama membuat form ini.
Adalah www.freedback.com,suatu situs yang menyediakan jasa ini.Ok! langsung aja..
Semoga bermanfaat ya.. :D
Sering kita alami,ketika ingin mengirimkan pesan kepada pemilik suatu blog/web lewat email.
Kendalanya biasanya,kita harus repot-repot untuk masuk ke account mail kita,baik itu Yahoo mail maupun Gmail.
Akibatnya,respon pengunjung menjadi kurang.
Yang akan kita bahas kali ini,yaitu tentang membuat form untuk pengunjung/visitor blog,yang berfungsi untuk memudahkan pengunjung mengirimkan pesan langsung ke email kita,tanpa pengunjung harus login dulu ke account mail mereka,gimana? praktis khan?
Kendalanya biasanya,kita harus repot-repot untuk masuk ke account mail kita,baik itu Yahoo mail maupun Gmail.
Akibatnya,respon pengunjung menjadi kurang.
Yang akan kita bahas kali ini,yaitu tentang membuat form untuk pengunjung/visitor blog,yang berfungsi untuk memudahkan pengunjung mengirimkan pesan langsung ke email kita,tanpa pengunjung harus login dulu ke account mail mereka,gimana? praktis khan?
Untuk contohnya anada bisa lihat form ini,di blog temen saya,Mbak Ati di ’cepat-terindex-google.blogspot.com’,atau anda bisa lihat contoh form yang telah berhasil Pelajaran Blog buat di bawah ini :
Sekiranya sudah maksud khan? :D
Nah! sekarang saatnya kita menuju langkah pertama membuat form ini.
Adalah www.freedback.com,suatu situs yang menyediakan jasa ini.Ok! langsung aja..
- Pertama,kunjungi situs ’www.freedback.com’
- Klik Tulisan ’Create a Form’
- Selanjutnya,isi form sesuai status anda
- Klik ’Sign Up’
- Pergilah ke email dan cek inbox,aktivasi mail dari ’www.freedback.com’
- Lalu anda akan dihadapkan halaman ’Edit Form’ dari ’www.freedback.com’
- Klik tulisan Add question,jika anda menginginkan form tambahan,anda bisa tulis "Pesan:","Message",maupun sebuah pertanyaan.
- Ikuti dan dapatkan ’Kode HTML’ nya
- Copy kode tersebut,dan letakkan pada halaman HTML Anda.
- Test! dengan email anda sendiri dan Selesai !
Semoga bermanfaat ya.. :D
Jumat, 09 Desember 2011
Cara Memasang/Menampilkan Object Gambar Animasi Flash (*swf) pada Blog
Menghias Blog Dengan Gambar Flashhttp://pelajaran-blog.blogspot.com/2009/12/cara-memasangmenampilkan-object-gambar.htmlJika anda pernah mengunjungi beberapa situ berita seperti detik,okezone,dll pasti sering menjumpai iklan yang berextention swf. Untuk memasang file swf flash pada blog lain dengan meletakkan atau memasang gambar berformat jpg. Oleh karena itu kali ini,pelajaran menghias blog kali ini saya dengan senang hati ingin berbagi bagaimana cara memasang gambar flash di blog. Langkah Mudah cara memasang gambar animasi pada blogGambar animasi flash (*swf) mempunyai banyak kelebihan diantaranya,file justru mempunyai ukuran yang lebih kecil dan gambar cenderung lebih menarik juga merangsang pengunjung mengekliknya. Memasang gambar animasi terlalu banyak juga kurang bagus,alangkah baiknya sesuai dengan kebutuhan dan seadanya saja. Membuat file animasi berformat swf (shock wave file),saya kira sudah banyak yang memberikan tutorial bagaimana cara membuat file usil ini. Namun disini saya hanya ingin berbagi bagaimana cara memasang atau menampilkan obyek gambar animasi (*swf). Untuk langkah menampilkan gambar animasi flash swf pada blog bisa ikuti trik di bawah ini: Memasang Flash pada Blog Blogspot
Setelah semua anda persiapkan,kemudian ikuti instruktur(aaalah-red)cara menambahkan gambar animasi ke blog dibawah ini:
Untuk: http://pelajaran-blog.blogspot.com/ gantilah link tujuan anda. Gimana,keren khan? selamat mencoba dan semoga bermanfaat :D |
Cara Membuat Halaman 123 / Page Number Navigation Berurut di Blogspot (karya ariawijaya.com)
123 Page Number Navigation for BloggerBaru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari. Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot. Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Bp.Wijaya di ariawijaya.com Anda bisa mengunjungi website dan tutorial 123 page navigation ini di situsnya langsung dalam tutorialnya 'Membuat Navigasi Page Number Blogspot',atau anda bisa langsung klik disini. Untuk hasilnya akan seperti gambar dibawah ini: Sedangkan contoh hasil kode navigasi berurut ini,anda bisa lihat di sini. Bagaimana? Ingin membuatnya? Biar pelajaran blog menjabarkan kembali cara membuat halaman 123 berurut ini. Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html. Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut: ]]></b:skin> Setelah ketemu,letakkan persis diatasnya kode css dibawah ini: .showpageArea a { Lalu,cari lagi kode seperti ini: </body> Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini: <b:if cond='data:blog.pageType != "item"'> Langkah terakhir,carilah kode berikut: 'data:label.url' Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut: 'data:label.url + "?&max-results=5"' Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang :D http://pelajaran-blog.blogspot.com/2010/02/membuat-halaman-123-page-number.html |
Langganan:
Postingan (Atom)