tag:blogger.com,1999:blog-90807800495383962302024-03-13T10:24:04.368-07:00Dimas Abi GalogaMempelajari apa yang bisa di pelajariDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.comBlogger167125tag:blogger.com,1999:blog-9080780049538396230.post-37148131147944749062011-02-12T08:44:00.000-08:002011-02-12T08:45:16.141-08:00Tutorial | Font Baru Dari Blog<div dir="ltr" style="text-align: left;" trbidi="on">Saya bingung harus bicara apa? Blogger benar-benar tau yang di inginkan para penggunanya. Kali ini font keren siap di gunakan untuk untuk para Blogger . Tanpa harus menggunakan font dari luar, para Blogger sudah bisa menggunakannya langsung dari <i>Templates Designer</i>.<br />
Tapi maaf, ini hanya berfungsi untuk pengguna templates aka <i>templates designer</i>. Dan itulah alasan mengapa saya tidak menggunakan font baru ini, karena saya menggunakan templates buatan saya sendiri.<br />
Untuk menerapkan Font baru ini di blog anda cukup mudah.<br />
<br />
1. Anda hanya perlu menggunakan templates yang sudah di sediakan oleh blogger di<i> templates designer</i>.<br />
2. Pada templates designer silahkan pilih menu Advanced untuk mengatur Font anda.<br />
<br />
<img height="146" src="http://1-www-accel-opensocial.googleusercontent.com/gadgets/proxy?container=accel&gadget=http%3A%2F%2Fbuzz.blogger.com%2F&debug=0&nocache=0&rooe=1&html_tag_context=img&url=http%3A%2F%2F1.bp.blogspot.com%2F_UUTay7LUoq0%2FTTev5VVQGOI%2FAAAAAAAAAB8%2FVpnxH8XUakY%2FPicture%25203.png" width="400" /><br />
<br />
Sudah. mudah sekali ya? ya sudah sekian posting dari saya yang singkat ini, semoga bermanfaat saya akhiri Wassalam.<br />
<br />
*<span style="font-family: "Courier New",Courier,monospace;">Untuk Link Exchange akan saya tangani secepatnya, maaf terabaikan akibat lama tidak blogging.</span></div>Dimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com17tag:blogger.com,1999:blog-9080780049538396230.post-60549276781309099822010-12-09T06:47:00.000-08:002010-12-09T06:47:23.368-08:00Tutorial | Fungsi Scroll Pada Komentar<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TQDpLrKPFjI/AAAAAAAAAY4/2-uxzCdhMvw/s1600/Untitled-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TQDpLrKPFjI/AAAAAAAAAY4/2-uxzCdhMvw/s320/Untitled-2.jpg" width="320" /></a></div><br />
Posting kedua saya untuk hari ini setelah sekian lama tidak posting yaitu tentang <b>Cara Membuat Fungsi Scroll Pada Komentar Blog</b>. Sebuah trik sederhana dengan langkah yang sangat simple. <br />
<br />
Langsung saja ke Step.By.Step !!!<br />
<br />
1. Log in ke blog anda<br />
2. Masuk ke Design > Edit HTML<br />
3. Cari kode berikut. Kode mungkin berbeda, fokuskan pencarian pada kode warna merah<br />
<blockquote><span style="color: red;">#comments-block</span> {<br />
border-left: 1px solid #c9c9c0;<br />
margin : 1em 0 1.5em;<br />
line-height : 1.6em;<br />
padding:0 0 0 13px;<br />
}</blockquote>4. Sisipkan atau masukan kode berwarna merah berikut. Kurang lebih akan jadi seperti ini<br />
<blockquote>#comments-block {<br />
<div style="color: red;">overflow:auto;</div><div style="color: red;">height:400px; <span style="color: black;">*/ ganti 400px sesuai dengan tinggi yang di inignkan */</span></div>border-left: 1px solid #c9c9c0;<br />
margin : 1em 0 1.5em;<br />
line-height : 1.6em;<br />
padding:0 0 0 13px;<br />
}</blockquote>5. Save Templates<br />
<br />
Lihat hasilnya pada posting anda yang sudah memiliki komentar. Oke sekian posting dari saya, saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com21tag:blogger.com,1999:blog-9080780049538396230.post-52411639782049276392010-12-09T05:35:00.000-08:002010-12-09T05:36:18.393-08:00CSS3 | Membuat Menu Accordion<a href="http://3.bp.blogspot.com/_E-rRqwMnFnQ/TQDY4ngLVII/AAAAAAAAAY0/n3ESBOWgZwU/s1600/Untitled-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_E-rRqwMnFnQ/TQDY4ngLVII/AAAAAAAAAY0/n3ESBOWgZwU/s1600/Untitled-2.jpg" /></a><br />
<br />
Akhirnya saya kembali di sini membawa posting baru bertemakan <b>CSS3</b> dan <b>Accordion</b>, yaitu tentang <b>Cara Membuat Menu Accordion Dengan CSS3</b>. Jika sebelum-sebelumnya saya pernah memposting tentang efek Accordion maka kali ini agak berbeda, kenapa? itu di karenakan jika yang sebelumnya menggunkan JavaScript maka kali ini hanya menggunakan CSS3 saja. Berikut ini adalah <a href="http://template-galoga.blogspot.com/2010/12/accbackground666font13px-trebuchet.html#isi1" target="_blank">DEMO</a>-nya. Langsung saja ke Step.By.Step !!!<br />
<br />
1. Login ke blog anda<br />
2. Masuk ke <i>Deisgn</i> > <i>Edit HTM</i>L<br />
3. Cari kode <b>]]></b:skin></b><br />
4. Masukan kode berikut sebelum kode <b>]]></b:skin></b><br />
<blockquote>#acc{background:#666;font:13px trebuchet ms;<br />
line-height:1.2em;padding:10px;margin:0;}<br />
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;<br />
text-shadow:0px 1px 1px #fff;<br />
border-bottom:2px solid #444;}<br />
#acc h3 a{color:#555}<br />
#acc h3 a:hover{color:#000}<br />
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;<br />
border-bottom:2px solid #222;}<br />
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}<br />
#acc :target h3 a{color:#aa5500}</blockquote>5. Save Templates.<br />
<br />
Eitsss tunggu tunggu dulu. Proses belum selesai. Setelah anda mengesave templates anda, sekarang masuk ke Page Elements<br />
<br />
6. Sekarang tambahkan tambah gadget dengan klik <i>Add a Gadget</i><br />
7. Pilih <i>HTML/JavaScript</i><br />
8. Masukan kode berikut di dalamnya<br />
<blockquote><div id="acc"><br />
<div id="isi1"><br />
<h3><a href="#isi1"><span style="color: red;">Judul 1</span></a></h3><br />
<div class="post"><br />
<div style="color: red;">Masukkan item anda disini,bisa berupa teks atau widget</div></div><br />
</div><br />
<div id="isi2"><br />
<h3><a href="#isi2"><span style="color: red;">Judul 2</span></a></h3><br />
<div class="post"><br />
<div style="color: red;">Masukkan item anda disini,bisa berupa teks atau widget</div></div><br />
</div><br />
<div id="isi3"><br />
<h3><a href="#isi3"><span style="color: red;">Judul 3</span></a></h3><br />
<div class="post"><br />
<div style="color: red;">Masukkan item anda disini,bisa berupa teks atau widget</div></div><br />
</div><br />
</div></blockquote>8. Save<br />
<br />
Nah sekarang baru selesai sudah main-main kita hahaha. Jangan lupa comment share and likenya ya makasih heheDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com10tag:blogger.com,1999:blog-9080780049538396230.post-49972658358034873562010-12-03T23:15:00.000-08:002010-12-03T23:15:14.276-08:00Pemalsuan Admin Pada Komentar BlogAkhirnya bisa posting juga setelah seminggu lamanya saya menjalankan Ulangan Akhir Semester 1 hehe, sebenarnya besok senin masih sekali lagi. Nah posting kali ini saya terinspirasi setelah saya melihat sebuah blog yang Adminnya berkomentar kasar sekali, padahal blog itu tergolong blog master. Tapi ternyata setelah selidik punya selidik itu bukan Admin yang berkomentar. Walau blog itu menggunakan tampilan komentar Admin berbeda, ternyata itu tidak berpengaruh. Anda mau tau bagaimana caranya menjadi Admin blog palsu? kejadian ini terjadi di blognya Mas Doyok.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TPnn-wNMiPI/AAAAAAAAAYw/zxRhU7XzHRI/s1600/Untitled-2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Ternyata gampang sekali nyamar jadi mas doyok...
Tinggal pilih Name/URl...
Name diisi Mas Doyok...
URL copas url mas doyok asli atau yang palsu...
Sialan tuh mas doyok palsu yang bukan saya....
Selengkapnya di www.MasDoyok.co.cc Pemenang Kontes SEO Menjadi Blogger Yang Bahagia " border="0" height="99" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TPnn-wNMiPI/AAAAAAAAAYw/zxRhU7XzHRI/s320/Untitled-2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Preview</td></tr>
</tbody></table>Klik saja untuk memperbesar gambar dan lihat komentarnya itu.<br />
<br />
Pemalsuan Admin pada komentar blog dilakukan dengan cara mengisi komentar dengan Name/URL, Nama di isi dengan Nama Admin URL di isi dengan Alamat Blog Admin. Bagaimana cara mencegahnya? Mudah saja, caranya tinggal mengatur pengaturan pada komentar blog. Caranya?<br />
<br />
1. Log in ke Blog anda<br />
2. Pilih menu <i>Settings/Pengaturan</i><br />
3. Lalu pilih lagi menu Comments/Komentar<br />
4. Lihat pada bagian "<b>Who Can Comment?</b>" lalu pilih "<b>Registered Users</b>" atau "<b>Pengguna Terdaftar</b>"<br />
5. Save Settings<br />
<br />
Nah dengan menggunakan cara ini orang yang berkomentar di blog anda hanyalah orang yang memiliki Account email saja dan mencegah pemalsuan komentar Admin. Terserah anda mau menggunakan cara ini atau tidak. Sekian dari saya saya ucapkan terima kasih wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com5tag:blogger.com,1999:blog-9080780049538396230.post-2612858530379708282010-11-27T02:41:00.000-08:002010-11-27T02:46:14.464-08:00SEO | Optimasi Judul Posting di BlogMasih dalam Label yang sama, yaitu SEO hahaha, sebenarnya sekilas saya sudah pernah posting ini di <a href="http://abi-galoga.blogspot.com/2010/11/tips-cara-membuat-templates-seo.html">Cara Membuat Templates SEO Friendly</a>, tapi itu hanya sekilas yaitu dengan mengganti tag h3 menjadi h1. Kali ini saya mencoba membahasnya lebih detail. Pertanyaan yang mungkin muncul adalah kenapa judul Post harus di optimasi? bagaimana caranya? oke akan saya jelaskan.<br />
<div class="separator" style="clear: both; text-align: center;"><img alt="Optimasi Judul Posting di Blog" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TM_5ekiNtnI/AAAAAAAAAWc/tQTJrbAhMUQ/s1600/Untitled-2.jpg" /></div>Search Engine sangat menyukai tag h1, h2, dll (begitu katanya), tapi tidak h3. Nah di Blogger ini sudah menjadi dafult bahwa judul post memiliki tag h3. Itulah kenapa kita haru mengoptimasikanya. Cara mengoptimasinya cukup mudah.<br />
<br />
Masuk ke Blogger > <i>Design </i>> <i>Edit HTML</i> ><i> Centang Expand Widget Templates</i><br />
<br />
<ul><li>Sekarang cari kode CSS berikut (Mungkin isi berbeda, fokuskan pencarian pada yang berwarna <span style="color: red;">merah</span>) dan ganti yang berwarna <span style="color: red;">merah</span> h3 menjadi h1</li>
</ul><blockquote><b>.post <span style="color: red;">h3</span> {</b><br />
margin:.25em 0 0;<br />
padding:0 0 4px;<br />
font-size:140%;<br />
font-weight:normal;<br />
line-height:1.4em;<br />
color:$titlecolor;<br />
}<br />
<b>.post <span style="color: red;">h3</span> a, .post <span style="color: red;">h3</span> a:visited, .post <span style="color: red;">h3</span> strong {</b><br />
display:block;<br />
text-decoration:none;<br />
color:$titlecolor;<br />
font-weight:normal;<br />
}<br />
<b>.post <span style="color: red;">h3</span> strong, .post <span style="color: red;">h3</span> a:hover {</b><br />
color:$textcolor;<br />
} </blockquote><ul><li>Masih belum selesai, sekarang cari lagi koe yang berwarna <span style="color: red;">merah</span> h3 menjadi h1 </li>
</ul><blockquote><<span style="color: red;">h3</span> class='post-title entry-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</<span style="color: red;">h3</span>></blockquote><ul><li>Sekarang Save Templates</li>
</ul>Saya rasa sekian posting saya ini. Saya mengharapkan komentar dari anda untuk kritik dan saran, juga menerima ucapan lainya. Saya akhiri terima kasih WassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com18tag:blogger.com,1999:blog-9080780049538396230.post-64475657360711467002010-11-26T23:25:00.000-08:002010-11-27T06:20:06.344-08:00SEO | Optimasi Image di BlogLagi lagi dan lagi. Memang jika kita membahas tantang <b>SEO</b> tidak akan ada habisnya, sebab setiap harinya selalu saja ada <b>tips dan trik</b> baru tentang <b>SEO.</b> Kali ini saya akan membahas tentang tips dan trik SEO yang berhubungan dengan gambar. Iyap, <b>cara mengoptimasi Image pada blog.</b> Kenapa images harus di optimasi? iya itu agar blog kitapun teroptimasi dengan baik, sebab semakin bagus kualitas blog kita makan semakin baik jua reputasi blog kita di <b>Search Engine</b>. Lalu bagimana cara mengoptimasi image tersebut? mudah saja, berikut tips dan trik seputar <b>SEO</b> untuk optimasi Images :<br />
<div class="separator" style="clear: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Tips Seo optimasi image pada blog" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TM_5ekiNtnI/AAAAAAAAAWc/tQTJrbAhMUQ/s1600/Untitled-2.jpg" /></div><b>1. Memberi nama gambar sebelum di Upload.</b><br />
Sesuaikan nama gambar yang akan anda upload sesuai dengan kebutuhan. Misal gambar doraemon, berarti sebelum di Upload beri nama gambar doraemon anda doraemon. Karena dengan ini ketika orang-orang yang sedang browsing tentang doraemon terutama pada bagian gambar maka gambar kita jugaakan termasuk ke dalamnya dan jika gambar kita masuk maka otomatis blog kita tempat gabar itupun akan masuk, walaupun ini tergantu rateing anda di Searh Engine.<br />
<br />
<b>2. Jangan memaksa ukuran gambar.</b><br />
Jangan memaksa ukuran gambar di sini maksudnya adalah jika anda memiliki gambar yang berukuran lebar x tinggi 500px x 400px (contoh) jangan di paksa menjadi 400px x 300px. Hal ini dapat memperlambat loading gambar itu. Jadi biarlah gambar apa adanya (original size)<br />
<br />
<b>3. Memberi tag Alt. </b><br />
Ini dia yang paling penting, pertama, dan terutama jika berhubungan dengan optimasi images. Alt sendiri bisa di artikan sebagai deskripsi gambar anda, dan jika seandainya gambar anda tidak terload (tidak muncul) maka Alt inilah yang akan muncul. Hal lainya adalah jika anda menggunakan gambar di awal paragraf posting anda, jika anda menggunakan Alt yang cocok maka posting anda akan terindeks oleh Search Engine sesuai Alt anda. Untuk peletakan Alt bagi yang tidak tau<br />
<blockquote><img src='<span style="color: red;">gambar anda</span>' alt='<span style="color: red;">alt / deskripsi gambar anda</span>'/></blockquote>Hanya ini yang bisa saya sampaikan, atas kekurangannya saya mohon maaf di mohon komentarnya sebagi kritik dan saran atau ucapan lain yang ingin anda sampaikan terimakasih wassalam.Dimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com4tag:blogger.com,1999:blog-9080780049538396230.post-80000142450639207882010-11-25T05:40:00.000-08:002010-11-25T05:42:49.828-08:00HTML5 | Unsur Baru HTML5Jujur saya sendiri juga belum mengerti betul, apa lagi menguasai yang namanya HTML5, yang XHTML saja masih harus banyak belajar. Tapi saya di sini hanya sekedar sharing ilmu aja. Berikut ini unsur-unsur baru yang ada di HTML5. Kalau teman-teman mengerti kan kita jadi bisa saling sharing iya ga?. langsung aja nih unsur baru yang saya dapat dari http://hendro-prayitno.blogspot.com/ sebuah blog yang lumayan buat belajar hehehe.<br />
<br />
<b>1.Markup Elements</b><br />
<article> untuk eksternal konten seperti berita,forum,blog dan lain sebagainya.<br />
<br />
<aside> Konten yang berisi konten yang berhubungan pada satu dokumen<br />
<br />
<command> Untuk tombol atau radio button<br />
<br />
<details> Untuk mendeskripsikan perincian tentang suatu dokumen, atau bagian dari satu dokumen<br />
<br />
<summary> Satu teks, atau rangkuman, di dalam elemen detil<br />
<br />
<figure> Untuk menggolongkan satu bagian dengan konten yang berdiri sendiri<br />
<br />
<figcaption>Teks dari bagian figur<br />
<br />
<footer> Untuk satu footer dari satu dokumen atau bagian, termasuk nama dari pengarang, tanggal dokumen, hubungi keterangan, atau keterangan hak cipta<br />
<br />
<header> Untuk pengenalan bagian dokumen<br />
<br />
<hgroup>Untuk section heading <h1></h1> juga bisa membuat section dan sub-heading<br />
(kalau salah mohon di koreksi)<br />
<br />
<br />
<mark> Untuk teks yang sudah di tandai atau di highlighted<br />
<br />
<meter> Untuk mengukur nilai maksimum dan minimum<br />
<br />
<nav> Untuk navigasi<br />
<br />
<progress>Untuk bagian tag yang sedang bekerja<br />
<br />
<ruby> Nah... yang ini unik, gunanya untuk bahasa cina atau karakter yang lainnya<br />
<br />
<rt> ini untuk keterangan dari ruby itu sendiri<br />
<br />
<rp> Yang dilihatkan di browser yang tidak suport element ruby<br />
<br />
<section> Untuk satu bagian pada satu dokumen. seperti headers,footers,atau bagian lainnya.<br />
<br />
<time> Untuk mendefinisikan satu waktu atau satu tanggal, atau keduanya<br />
<br />
<b>2. Element Media</b><br />
<audio> Untuk konten multimedia, bunyi, musik atau audioyang di tambahkan<br />
<br />
<video> Untuk konten video<br />
<br />
<source>Untuk sumber daya media di dalam tag video atau audio<br />
<br />
<embed>Untuk melekatkan konten, seperti menambahkan satu fitur<br />
<br />
<b>3. Element kanvas</b><br />
<canvas> Untuk membuat grafik dengan satu script<br />
<br />
<b>4.Form element</b><br />
<datalist>Untuk daftar list<br />
<br />
<keygen>Menghasilkan kunci untuk membuktikan keaslian pengguna<br />
<br />
<output>Untuk keluaran yang berbeda yang keluar dengan kode script<br />
<br />
Hanya itu yang bisa saya sampaikan. sekian dan terima kasih wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com19tag:blogger.com,1999:blog-9080780049538396230.post-51121214965548618452010-11-24T06:06:00.000-08:002010-11-27T22:29:56.849-08:00HTML5 | Menerapkan HTML5 di BlogMenerapkan HTML5 pada Blog di Blogspot. Yap, itulah topik kita hari ini. Sebelumnya coba anda pergi ke <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a> dan masukan alamat blog anda. Jangan kaget dengan banyaknya pesan error dan warning yang ada di blog anda. Itu karena anda masih menggunakan XHTML1. Untuk mengurangi error dan warning itu coba terapkan HTML5 di blog anda. Caranya <b>Step.By.Step!!!</b><br />
<br />
<br />
1. Log in ke Blog anda > Masuk ke Design > Edit HTML<br />
2.lihat kode HTML dari yang <span style="font-size: large;">paling atas</span> hingga <span style="font-size: large;"><title><data:blog.pageTitle/></title> </span><br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="168" src="http://3.bp.blogspot.com/_E-rRqwMnFnQ/TO0Zd1wu1pI/AAAAAAAAAYs/vMU91MoXHq8/s320/html5.jpg" width="320" /></div><br />
3.Hapus dan ganti (replace) semua kode itu dengan kode ini<br />
<blockquote><?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset='utf-8'/><br />
<b:include data='blog' name='all-head-content'/><br />
<title><data:blog.pageTitle/></title></blockquote>4. Letakan kode berikut di atas (sebelum) kode </head><br />
<blockquote><!--[if IE]><br />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><br />
<!--[if lte IE 7]><br />
<script src="js/IE8.js" type="text/javascript"></script><![endif]--><br />
<!--[if lt IE 7]><br />
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]--></blockquote>5. Di bawah kode tadi (no.4) letakan kode berikut<br />
<blockquote><!-- <body><div></div> --></blockquote>6. Save Templates. Jika ada peringatan navbar terhapus pilih delete.<br />
<br />
Selesai. Sekarang anda kunjungi <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a> dan bandingkan dengan yang tadi pertama anda cek.<br />
<br />
Sekian posting dari saya. Semoga bermanfaat saya ucapkan terima kasih wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com8tag:blogger.com,1999:blog-9080780049538396230.post-34953279588116898172010-11-23T06:53:00.000-08:002010-11-23T07:23:44.861-08:00Sofware | Suara Lagu PlayerKetemu lagi di posting ane , kali ini ane mau share music player ala Abi-Indra . Nama music player nya ialah <b>"Suara Lagu Player</b>" . Music Player ini di buat dengan menggunakan Visual Basic 2008 . Tentunya sebagai software yang baru dirilis , masih memiliki banyak kekurangan , oleh karenanya ane meminta kritik dan saran sobat melalui <strike>komeng</strike> komen . Music player ini akan terus dikembangakan melalui kritik dan saran sobat . Untuk password nya :<br />
<blockquote>suaralaguplayer </blockquote>Nih buat link downloadnya :<br />
<br />
<div class="fullpost"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.mediafire.com/?du4srx2ns7ujom9" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/_CVlS0yMv654/TOvRm6V67FI/AAAAAAAAAHM/warvDNQ9218/s1600/Proggram.jpg" /> </a></td><td style="text-align: center;"></td><td style="text-align: center;"><br />
</td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.mediafire.com/?du4srx2ns7ujom9">SuaraLaguPlayer.zip</a><br />
<br />
<br />
For ScreenShot :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="165" src="http://2.bp.blogspot.com/_CVlS0yMv654/TOvUmj0ef6I/AAAAAAAAAHQ/JC-Hkv4TdYg/s320/1.png" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan</td></tr>
</tbody></table><br />
</td></tr>
</tbody></table></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="165" src="http://3.bp.blogspot.com/_CVlS0yMv654/TOvUpR6PxbI/AAAAAAAAAHU/LZ10uJDWxcc/s320/2.png" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Code</td></tr>
</tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" height="195" src="http://1.bp.blogspot.com/_CVlS0yMv654/TOvUr3UURoI/AAAAAAAAAHY/9I-psVX-lGU/s320/3.png" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Splash Screen</td></tr>
</tbody></table><div class="fullpost"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption" style="text-align: center;"><br />
Tunggu Versi berikutnya .</td></tr>
</tbody></table></div>DanIndBashttp://www.blogger.com/profile/17596619285982530464noreply@blogger.com2tag:blogger.com,1999:blog-9080780049538396230.post-73309373020588868052010-11-23T04:48:00.000-08:002010-11-23T04:48:35.621-08:00Tutorial | Pasang Reply di Komentar Blog<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TOu3q5A_5iI/AAAAAAAAAYo/0g4bfM4oUwo/s1600/reply+untuk+komentar.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="93" src="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TOu3q5A_5iI/AAAAAAAAAYo/0g4bfM4oUwo/s320/reply+untuk+komentar.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">reply for comment</td></tr>
</tbody></table><b>Cara Memasang Tombol Reply di Komentar Blog</b>. Iyap itu adalah pembahasan kita pada posting kali ini. Seperti yang terlihat pada gambar di atas dan yang ada di komentar blog ini, terdapat tulisan <b>reply</b>. <b>Reply</b> itu berarti membalas, seperti yang ada di SMS atau di Twitter hehehe. Jadi setiap ada yang<b> komentar</b> di posting blog anda, anda bisa me-<b>reply</b>-nya tanpa haru mengetik sendiri, mantab. Oke agar tidak bertambah panjang dan lebar langsung saja ke <b>Step.By.Step !!!</b><br />
<br />
1. Log in ke blog anda. Masuk ke <i>Design</i> > <i>Edit HTML</i> > Centang di <i>Expand Widget Templates</i><br />
2. Cari kode <data:commentPostedByMsg/><br />
<data:commentpostedbymsg>3. Letakan kode berikut di bawah kode tadi </data:commentpostedbymsg><br />
<blockquote><data:commentpostedbymsg><span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<span style="color: red;">NOMOR-BLOG-ID-ANDA</span>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span></data:commentpostedbymsg></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOu2suAnozI/AAAAAAAAAYk/2kTs-wv8mac/s1600/Blog+id.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="58" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOu2suAnozI/AAAAAAAAAYk/2kTs-wv8mac/s320/Blog+id.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">blog id</td></tr>
</tbody></table>4. Save Templates dan lihat di posting anda yang sudah ada komentarnya<br />
<br />
Sekian dari saya, saya akhiri. WassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com10tag:blogger.com,1999:blog-9080780049538396230.post-42073907407838732692010-11-22T05:16:00.000-08:002010-11-23T04:19:13.114-08:00Tutorial | Tambah Title Link Pada Judul PostApa itu <b>title link</b>? <b>title link</b> adalah judul link saat link di sorot mouse.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TOpotke6P7I/AAAAAAAAAYc/43OpklzmuPI/s1600/title+post.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="181" src="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TOpotke6P7I/AAAAAAAAAYc/43OpklzmuPI/s320/title+post.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Post Title</td></tr>
</tbody></table>Nah yang di tunjuk panah merah itulah yang disebut <b>title link</b>. Link title itu tidak serta merta muncul begitu saja secara otomatis. Untuk memunculkanya di butuhkan sedikit <b>Tutorial</b>, <b>Tips</b> dan <b>Trik</b> yang <strike>hanya</strike> anda dapatkan di blog <b><a href="http://abi-galoga.blogspot.com">Dimas Abi Galoga</a></b> ini. Langsung saja ke <b>Step.By.Step !!!</b><br />
<br />
1. Login ke blog anda<br />
2. Masuk ke <i>Design</i> > <i>Layout</i> > <i>Edit HTML</i><br />
3. beri tanda centang pada <i>Expand Template Widget</i><br />
4. Cari kode berikut<br />
<blockquote><a expr:href='data:post.link'><data:post.title/></a></blockquote>5. Hapus kode itu lalu ganti (replace) dengan<br />
<blockquote><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a></blockquote>Jika ingin menambah kata-kata sendiri ganti dengan<br />
<blockquote><a expr:href='data:post.link' expr:title='&quot;Tutorial blog : &quot; + data:post.title'><data:post.title/></a> </blockquote>6. Cari lagi kode ini<br />
<blockquote><a expr:href='data:post.url'><data:post.title/></a></blockquote>7. Hapus kode itu lalu ganti (replace) dengan<br />
<blockquote><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></blockquote>Jika ingin menambah kata-kata sendiri ganti dengan<br />
<blockquote><a expr:href='data:post.url' expr:title='&quot;<span style="color: red;">Galoga</span> : &quot; + data:post.title'><data:post.title/></a></blockquote>8. Save Templates<br />
<br />
Selesai. Mudah sekali bukan? kalau begitu langsung praktekan !!!!Dimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com3tag:blogger.com,1999:blog-9080780049538396230.post-51111961968003411082010-11-22T04:48:00.000-08:002010-11-22T04:48:49.803-08:00SEO | Website Speed Check<div class="fullpost">Salah satu yang merupakan pendukung SEO ialah kecepatan loading blog/web , oleh karena itu ane mau share mengenai kecepatan loading blog . Jadi gini ya sob , ane baru aja ngetest kecepatan blog ane , dan hasil rata-rata kecepatan nya ialah 5.4 untuk blog <a href="http://abi-galoga.blogspot.com/">Dimas Abi Galog</a>a dan 1.4 untuk <a href="http://suaralagu.blogspot.com/">Suara Lagu</a> . Untuk yang 1.4 itu wajar karena tampilan nya yang sangat minimalis . Kecepatan blog sangat tergantung pada banyaknya JavaScript/Gambar yang ada . Kalo mau blognya secepet angin yang berhembus di angkasa*matabelo* , usahakan menggunakan sedikit gambar dan javascript . Oiya ane hampir lupa ngasih web yang bisa ngetest kecepatan blog kita . nih Link nya : <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.blogger.com/goog_1946758553" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://rapid.searchmetrics.com/img/icons/website_speed.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://rapid.searchmetrics.com/en/seo-tools/site-analysis/website-speed-test,46.html">^^Speed Check ^^</a></td></tr>
</tbody></table>See you next post<br />
<br />
</div>DanIndBashttp://www.blogger.com/profile/17596619285982530464noreply@blogger.com0tag:blogger.com,1999:blog-9080780049538396230.post-21292130721279756582010-11-21T06:32:00.000-08:002010-11-27T05:34:15.946-08:00Tutorial | Navigasi Horizontal ala Galoga<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_E-rRqwMnFnQ/TOktOumCLXI/AAAAAAAAAYU/o849GacMxUw/s1600/navigasi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="15" src="http://2.bp.blogspot.com/_E-rRqwMnFnQ/TOktOumCLXI/AAAAAAAAAYU/o849GacMxUw/s400/navigasi.jpg" width="400" /></a></div>Sepertinya banyak sekali yang bertanya tentang cara membuat Navigasi Horizontal seperti milik saya. Sebenarnya gampang saja membuat sperti ini. Tapi yang ribet adalah mempostingnya karena saya bingung bagaimana menjelaskannya hehehe. Oke langsung saja tanpa panjang lebar <b>Step.By.Step !!!</b><br />
<br />
1. Log in ke blog anda<br />
2. Masuk ke <i>Design</i> > <i>Edit HTML</i> <br />
3. Cari kode <b>]]></b:skin></b><br />
4. Letakan kode berikut di atas kode tadi<br />
<blockquote>#navigasi {<br />
text-transform : uppercase;<br />
background : <span style="color: red;">#3b5998</span>; <---- Warna background navigasi<br />
font : bold 12px Verdana;<br />
float : left;<br />
width : 100%;<br />
height : 41px;<br />
}<br />
#navigasi ul {<br />
margin : 0 10px;<br />
padding : 0;<br />
list-style : none;<br />
}<br />
#navigasi li {<br />
display : inline;<br />
margin : 0;<br />
padding : 0;<br />
}<br />
#navigasi a {<br />
float : left;<br />
margin : 5px;<br />
padding : 0;<br />
}<br />
#navigasi a span {<br />
-moz-border-radius:8px 8px 8px 8px;<br />
background:<span style="color: red;">#627aad</span>; <---- Warna background tulisan<br />
color:white;<br />
display:block;<br />
float:left;<br />
padding:8px;<br />
}<br />
#navigasi a:hover span {<br />
-moz-border-radius:8px 8px 8px 8px;<br />
-moz-box-shadow:0 0 10px red inset;<br />
background:<span style="color: red;">#6d86b7</span>; <---- background tulisan saat di sentuh <br />
color:white;<br />
display:block;<br />
float:left;<br />
padding:8px;<br />
}<br />
#navigasi a:hover {<br />
color : #fff;<br />
text-decoration : none;<br />
}<br />
#navigasi a:hover span {<br />
background : #d8d8d8;<br />
color : #fff;<br />
text-decoration : none;<br />
}<br />
#searchbox {<br />
float : right;<br />
background : #fff url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2-4.jpg) no-repeat left center;<br />
width : 220px;<br />
height : 20px;<br />
color : #333;<br />
font-size : 12px;<br />
font-family : Verdana, Arial, Helvetica, sans-serif;<br />
margin : 7px 0 8px 3px;<br />
padding : 2px 2px 3px 25px;<br />
border : 1px solid #111;<br />
display : inline;<br />
}</blockquote>5. Letakan kode berikut di bawah kode <b><body></b> atau bisa juga dengan ditambahkan ke gadget baru<br />
<blockquote><div id='navigasi'><br />
<ul><br />
<li><a class='current' expr:href='data:blog.homepageUrl'><span>Home</span></a></li><br />
<b><li><a class='current' href='<span style="color: red;">#</span>'><span><span style="color: red;">Edit Me</span></span></a></li></b><br />
<b><li><a class='current' href='<span style="color: red;">#</span>'><span><span style="color: red;">Edit Me</span></span></a></li></b><br />
<b><li><a class='current' href='<span style="color: red;">#</span>'><span><span style="color: red;">Edit Me</span></span></a></li></b><br />
<div id='nav-right'><br />
<form action='/search' id='searchform' method='get' style='display:inline;'><br />
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/><br />
</form><br />
</div><br />
</ul><br />
</div></blockquote>Keterangan : Ganti <span style="color: red;">#</span> dengan alamat URL anda <span style="color: red;">Edit Me</span> ganti dengan judul URL anda. Kode yang bercetak tebal bisa di tambahkan sesuai banyak link yang anda inginkan. <br />
<br />
6. Save Templates.<br />
Sekian dari saya, saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com5tag:blogger.com,1999:blog-9080780049538396230.post-73082777237388815762010-11-21T02:23:00.000-08:002010-11-21T02:43:28.778-08:00CSS3 | Efek Scale (Perbesaran)<style type="text/css">
.scale {
background: #d3cfb8;
padding:5px;
}
.scale:hover {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
}
</style><br />
<b>CSS3 | Efek Scale (Perbesaran)</b>. Dari judulnya saja perbesaran, berarti menghasilkan perbesaran. Perbesaran seperti apa yang di hasilkan? seperti ini.<br />
<div class="separator" style="clear: both; text-align: center;"><span class="scale"><img border="0" src="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TOjtizwWmKI/AAAAAAAAAYM/0M6KUl55ybQ/s1600/SCALE.jpg" /></span></div><br />
Bukan cuma gambar, tapi text juga bisa. Seperti ini<br />
<br />
<span class="scale">Arahkan Mouse ke sini</span><br />
<br />
Bukan cuma itu saja, bahkan kotak post juga bisa. Arahkan mouse di kotak post <a href="http://dd-double.blogspot.com/">di sini</a><br />
Bisa di pasang di mana saja di dalam tag CSS anda. Sekarang yang di pertanyakan caranya? bagaimana? <b>Step.By.Step !!!</b><br />
<br />
Kode Scale yang digunakan seperti ini<br />
<blockquote>-moz-transform: scale(<span style="color: red;">1.05</span>);<br />
-webkit-transform: scale(<span style="color: red;">1.05</span>);</blockquote><ul><li>-moz- di situ berfungsi untuk menampilkan scale pada browser mozzila firefox</li>
<li>-webkit- berfungsi untuk browser webkit seperti chrome, safari, dll</li>
<li>1.05 mengartikan perbesaran hingga 1.05 dari ukuran aslinya</li>
</ul>Dimana kita harus meletakan kode scale? di dalam tag CSS hover tentunya. Jika tidak ada tag hover yang anda inginkan maka buat sendiri. Misalnya, kotak post tidak memiliki hover maka kita harus menambahnya sendiri. Cari kode ]]></b:skin> lalu tambahkan kode ini di atasnya<br />
<blockquote>.post:hover {<br />
-moz-transform: scale(<span style="color: red;">1.05</span>);<br />
-webkit-transform: scale(<span style="color: red;">1.05</span>);<br />
} </blockquote>Nah begitu contoh sederhananya. Jika ada yang bingung atau ingin bertanya silahkan berkomentar di bawah ini saja. Terima kasih, saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com9tag:blogger.com,1999:blog-9080780049538396230.post-81850423818525511792010-11-20T09:32:00.000-08:002010-11-20T20:16:13.461-08:00Tutorial | Sedikit Hacking BloggerSetiap tutorial dibawah wajib mencentang "expand widget template" . Selamat munaikan Hacking Blog .<br />
<br />
<div style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0pt 0pt black; padding: 10px;"><a href="http://abi-galoga.blogspot.com/2010/11/sedikit-hacking-blogger.html#atom">Melenyapkan Tulisan "Subscribe to : post (atom)"</a><br />
<a href="http://abi-galoga.blogspot.com/2010/11/sedikit-hacking-blogger.html#ADL">Melenyapkan Angka Dalam Label</a><br />
<a href="http://abi-galoga.blogspot.com/2010/11/sedikit-hacking-blogger.html#PPB"> Melenyapkan Pesan Pencarian Blogger</a><br />
<a href="http://abi-galoga.blogspot.com/2010/11/sedikit-hacking-blogger.html#LB">Melenyapkan Logo Blogger di 'Comment'</a></div><br />
<br />
<div id="atom" style="color: #444444;"><span style="font-size: large;"><b>Melenyapkan Tulisan "Subscribe to : post (atom)"</b></span></div><br />
caranya hapus code berikut:<br />
<blockquote><span class="code"> <div class="feed-links"><br />
<data:feedlinksmsg><br />
<b:loop values="data:links" var="f"><br />
<a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a><br />
</b:loop><br />
</data:feedlinksmsg></div></span></blockquote><br />
dan Save<br />
<br />
<br />
<div id="ADL" style="color: #444444;"><span style="font-size: large;">Melenyapkan Angka Dalam Label</span></div><br />
caranya hapus kode berikut:<br />
<br />
<blockquote>(<data:label.count/>)</blockquote><br />
dan Save<br />
<br />
<br />
<div id="PPB" style="color: #444444;"><span style="font-size: large;"><b>Melenyapkan Pesan Pencarian Blogger"</b></span></div><br />
caranya masukan kode dibawah ini setelah ]]></b:skin><br />
<blockquote><span class="code">.status-msg-wrap{<br />
display:none;<br />
} </span></blockquote>dan Save<br />
<br />
<br />
<div id="LB" style="color: #444444;"><span style="font-size: large;"><b>Melenyapkan Logo Blogger di 'Comment'</b></span></div><br />
cari code ini :<br />
<blockquote><span class="code"><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'></span> </blockquote><strike>Letakan</strike> Ganti dengan code :<br />
<blockquote><span class="code"><dt expr:class='&quot;comment-author &quot; + data:comment.anchorName' expr:id='data:comment.anchorName'></span></blockquote>dan Save<br />
<br />
Segini aja deh Hacking nya , lanjut di post berikutnya . Tinggal kan jejak dengan <strike>berkomeng </strike>bercomment .<br />
<div style="text-align: center;">Salam Hack </div><div style="text-align: center;"><img height="200" src="http://lh4.ggpht.com/_CVlS0yMv654/TOicTy00NRI/AAAAAAAAAHI/1BOpJGrGIe0/Hack-Blog.gif" width="150" /></div>DanIndBashttp://www.blogger.com/profile/17596619285982530464noreply@blogger.com9tag:blogger.com,1999:blog-9080780049538396230.post-77123798300829257692010-11-20T07:54:00.000-08:002010-11-20T08:05:28.390-08:00CSS3 | Efek Gradient Pada Blog<div class="separator" style="clear: both; text-align: left;"></div><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img height="150" src="http://www.bluechillies.com/graphics/screens/gradient_screensaver-18433.gif" width="200" />Sepertinya posting kali ini menarik, kenapa? karena tentang CSS3 lagi hahaha. Kali ini tentang cara membuat <b>Efek Gradient Pada Blog</b>. Iyap, sekarang <b>gradient</b> saja sudah bisa di buat dengan <b>CSS</b>, betapa majunya teknologi sekarang. Nah tanpa basa basi dan agar tidak terlalu panjang dan lebar langsung saja ke <b>Step.By.Step!!!</b></div><br />
Kode <b>CSS</b> yang di gunakan untuk efek <b>gradient</b> adalah seperti ini<br />
<blockquote>background: #ffa45a;<br />
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');<br />
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));<br />
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);</blockquote>Berikut keterangan kode di atas :<br />
<blockquote><b>background: #ffa45a;</b><br />
warna background yang akan muncul apabila browser tidak mendukung<br />
<br />
<b>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');</b><br />
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi<br />
<br />
<b>background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));</b><br />
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.<br />
<br />
<b>background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);</b><br />
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.</blockquote>Untuk peletakan anda bisa memasukannya ke dalam tag CSS anda. Misalnya untuk background blog anda, maka kode yang haru di cari adalah <b>body {</b>. Cara meletakan<br />
<blockquote>body {<br />
<div style="color: red;">background: #ffa45a;</div><div style="color: red;">filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');</div><div style="color: red;">background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));</div><div style="color: red;">background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);</div>}</blockquote>Untuk <a href="http://template-galoga.blogspot.com/">DEMO</a><br />
Sekian posting dari saya kali ini, saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com4tag:blogger.com,1999:blog-9080780049538396230.post-19434814632118372212010-11-20T00:29:00.000-08:002010-11-20T01:02:53.093-08:00Tutorial | Membuat Link RedupLink redup yang akan kita buat menggunakan MooTools . Pertanyaannya adalah gimana cara menerapkannya di Template Blogger ? Mau bisa ? Makanya baca .<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_CVlS0yMv654/TOeL9GtgO_I/AAAAAAAAAHA/BHY0WNYYXg4/s1600/Dan-Ind-Bas-link-redup.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/_CVlS0yMv654/TOeL9GtgO_I/AAAAAAAAAHA/BHY0WNYYXg4/s1600/Dan-Ind-Bas-link-redup.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Before</td></tr>
</tbody></table><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_CVlS0yMv654/TOeL-Y7WGvI/AAAAAAAAAHE/2PLIAUZJBPo/s1600/Dan-Ind-Bas-link-redup1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/_CVlS0yMv654/TOeL-Y7WGvI/AAAAAAAAAHE/2PLIAUZJBPo/s1600/Dan-Ind-Bas-link-redup1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">After</td></tr>
</tbody></table><br />
Contoh Demo : <br />
<div style="text-align: left;"><b>Before</b> : </div><div style="text-align: center;"><span style="font-size: large;">Link Demo</span></div><br />
<b>After</b> : <br />
<div style="opacity: 0.2; text-align: center;"><span style="font-size: large;">Link Demo</span></div><br />
Cara Pertama <strike>Menghapus</strike> Menerapkan Link Redup Pada Template Blogger :<br />
<br />
Letakan script MooTools dibawah </head> :<br />
<br />
<blockquote><span class="code"><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/></span></blockquote>Masukan script berikut setelah script MooTools tadi :<br />
<br />
<blockquote><span class="code"><script type='text/javascript'></span><br />
<span class="code">window.addEvent(&#39;domready&#39;,function() {</span><br />
<span class="code">$each($(&#39;<span style="color: red;">a</span>&#39;), function(el) {</span><br />
<span class="code">var original = el.getStyle(&#39;color&#39;);</span><br />
<span class="code">var morph = new Fx.Morph(el,{ &#39;duration&#39;:&#39;1000&#39;, link:&#39;cancel&#39; });</span><br />
<span class="code">el.addEvents({</span><br />
<span class="code">&#39;mouseenter&#39; : function() { morph.start({ &#39;color&#39;:&#39;#<span style="color: #00cccc;">ccc</span>&#39; }) },</span><br />
<span class="code">&#39;mouseleave&#39; : function() { morph.start({ &#39;color&#39;: original }) }</span><br />
<span class="code">});</span><br />
<span class="code">});</span><br />
<span class="code">});</span><br />
<span class="code"></script></span></blockquote><blockquote>code <i>a</i> yang berwanra merah bisa diganti dengan <i>body </i>/ <i>.post-title</i> , body untuk membuat semua link pada blog menjadi redup ketika di sorot dan <i>.post-title</i> untuk membuat semua Judul Post menjadi redup ketika di sorot .</blockquote><blockquote> code ccc yang berwarna biru bisa diganti dengan code-code warna lainnya , code tersebut merupakan code warna link saat di sorot .</blockquote><br />
Cara Kedua <strike>Menghapus</strike> Menerapkan Link Redup Pada Template Blogger :<br />
<br />
Cari code css berikut jika ingin untuk manjadikan semua link menjadi redup ketika di sorot :<br />
<blockquote>a:hover </blockquote>Jika hanya ingin menerapkannya pada Judul Post cari code berikut :<br />
<blockquote>.post h3 a:hover</blockquote> dan masukan code CSS berikut didalamnya :<br />
<blockquote>opacity:0.2;</blockquote><br />
dan SaveDanIndBashttp://www.blogger.com/profile/17596619285982530464noreply@blogger.com6tag:blogger.com,1999:blog-9080780049538396230.post-72968492342341835742010-11-19T08:11:00.000-08:002010-11-20T09:32:54.977-08:00Plugin | Paling Guna Buat Ngoding<div style="text-align: center;"><img border="0" height="142" src="http://t1.gstatic.com/images?q=tbn:ANd9GcR3Q4uohLuC5RFgLxrnwt5avVIHkFNZpbGAbX6TMT8582yG9p6l1g" width="200" /></div>Hello sob , ane mau <i>share</i> plugin yang <strike>belum</strike> pasti berguna buat sobat sekalian . Oke , nama plugin nya "Firebug" , merupakan plugin yang dipasang pada browser mozilla(flock, firefox, dll) . Plugin ini ane bilang pasti <strike>tidak</strike> berguna karena Firebug membuat kita bisa mengetahui code HTML maupun CSS yang dipakai oleh suatu halaman web . Selain itu cara liat code nya juga gampang kok , cuma tinggal klik inspect/kotak(bagian kiri) aja . Ini dia Pict.nya :<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="192" src="http://t3.gstatic.com/images?q=tbn:ANd9GcSVmf-k2PRCdfpPcq4WEJjNBq-bjfrpcpBS-AGgHv5-Yq7RUmUCeg" width="320" /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="153" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ8kBLYGPmIjcwZAxTTTpwTgvyhklDcJ-JLFxR48rEQx6xjaERU2w" width="320" /></div>Nah kalo sobat udah tertarik buat memilikinya silahkan <a href="http://cektkp.com/firebug">http://cektkp.com/firebug</a><br />
Kalo ada yang bingung , <strike>komeng</strike> comment dibawah ini .<br />
<span style="font-size: xx-small;"><a href="http://suaralagu.blogspot.com/">SuaraLagu</a></span>DanIndBashttp://www.blogger.com/profile/17596619285982530464noreply@blogger.com2tag:blogger.com,1999:blog-9080780049538396230.post-54618089736848112232010-11-19T05:12:00.000-08:002010-11-19T05:12:59.951-08:00Tutorial | Membuat Avatar di Comment Blog<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOZ1snUGbKI/AAAAAAAAAYE/-c3FscfKLuQ/s1600/Avatar+Comment.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOZ1snUGbKI/AAAAAAAAAYE/-c3FscfKLuQ/s1600/Avatar+Comment.jpg" /></a></div>Terkadang ada komentator di posting blog kita yang tidak memiliki <b>avatar / profil picture</b> di blognya. Nah di sini saya memilki <b>Tutorial</b> agar komentator yang tadi tidak memiliki avatar itu menjadi memiliki <b>avatar</b>, tapi avatarnya dari anda atau dafult <b>avatar</b>. Jadi bagi mereka yang tidak memilki <b>avatar</b> maka <b>avatar</b> dari anda yang akan muncul. Langsung saja tidak perlu semakin panjang dan lebar lagi kita ke <b>Step.By.Step</b><br />
<br />
<b>Membuat Avatar di Comment Blog</b><br />
<br />
1. Login ke blog anda<br />
2. Masuk ke <i>Design</i> > <i>Edit HTML</i><br />
3. Cari kode <span style="color: red;">]]></b:skin></span><br />
4. Letakan kode berikut sebelum kode tadi<br />
<blockquote>.avatar-image-container {<br />
background:url(<span style="color: blue;">http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg</span>);<br />
<div style="color: red;">width:48px;</div><div style="color: red;">height:48px;</div>float:right;<br />
margin:5px 10px 5px 5px;<br />
}<br />
.avatar-image-container img {<br />
border: 1px solid white;<br />
<div style="color: red;">width:48px;</div><div style="color: red;">height:48px;</div>}</blockquote>Keterangan : Kode yang berwarna <span style="color: blue;">biru</span> ganti sesuai gambar yang anda inginkan. Kode yang berwarna <span style="color: red;">merah</span> berarti lebar x tinggi avatar anda<br />
<br />
Sekian posting yang singkat ini, semoga bermanfaat saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com6tag:blogger.com,1999:blog-9080780049538396230.post-49383482091581780242010-11-18T03:35:00.000-08:002010-11-19T04:18:21.089-08:00CSS3 | Macam-macam Border<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_E-rRqwMnFnQ/TOUJq7PWiqI/AAAAAAAAAYA/OLcrmnW1p8w/s1600/Border.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_E-rRqwMnFnQ/TOUJq7PWiqI/AAAAAAAAAYA/OLcrmnW1p8w/s1600/Border.png" /></a></div>Bagi anda yang suka atau bahkan sering bermain dengan templates anda terutama bagian <b>CSS</b> pasti sudah tidak asing lagi dengan istilah <b>border</b>. Bahkan sebagian dari anda yang jarang bermain <b>CSS</b> tentu tau <b>border</b>. Yap, <b>border</b> sebuah istilah di dalam <b>CSS</b> yang berarti garis dan berfungsi membuat garis tentunya. Dalam <b>CSS</b> ada berbagai macam <b>border</b>, di tambah lagi border baru dengan <b>CSS3</b>. Nah di sini saya membuat daftar <b>Macam-macam Border</b> yang lengkap, setidaknya samapi posting ini di buat.<br />
<br />
Langsung saja jangan kepanjangan basa-basi. Inilah daftar bordernya :<br />
<br />
<br />
<div style="border: 5px solid rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">solid</span> #<span style="color: blue;">000000</span>;</tt></span></div><br />
<div style="border: 5px dotted rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">dotted</span> #<span style="color: blue;">000000</span>;</tt></span></div><br />
<div style="border: 5px dashed rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">dashed</span> #<span style="color: blue;">000000</span>;</tt></span><span class="fullpost"><tt> </tt></span><span class="fullpost"><tt> </tt></span></div><br />
<br />
<div style="border: 5px inset rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">inset</span> #<span style="color: blue;">000000</span>;</tt></span></div><br />
<div style="border: 5px outset rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">outset</span> #<span style="color: blue;">000000</span>;</tt></span></div><br />
<div style="border: 5px double rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">double</span> #<span style="color: blue;">000000</span>;</tt></span><span class="fullpost"><tt> </tt></span></div><br />
<div style="border: 5px groove rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">groove</span> #<span style="color: blue;">000000</span>;</tt></span></div><br />
<div style="border: 5px ridge rgb(0, 0, 0); padding: 20px 0pt; text-align: center;"><span class="fullpost"><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">ridge</span> #<span style="color: blue;">000000</span>;</tt></span><span class="fullpost"><tt> </tt></span><span class="fullpost"><tt> </tt></span></div><br />
<b>Border CSS3</b><br />
<br />
<span class="fullpost"><b>CSS3</b> Border Radius (<i>Collectively</i>)</span><br />
<span class="fullpost">Border ini memungkinkan untuk membuat sudut border melengkung </span><br />
<br />
<span class="fullpost"><div class="alert" style="-moz-border-radius: 10px 10px 10px 10px; border: 5px solid rgb(0, 0, 0); color: red;"><tt><span style="color: black;">#contoh {</span><br />
</tt><span class="fullpost"><tt> </tt></span><tt>border: <span style="color: blue;">5</span>px <span style="color: blue;">solid</span> #<span style="color: blue;">000000</span>;<br />
-moz-border-<span style="color: blue;">radius</span>: <span style="color: blue;">10</span>px;<br />
-webkit-border-<span style="color: blue;">radius</span>: <span style="color: blue;">10</span>px;</tt><br />
<tt style="color: black;">}</tt></div></span><span class="fullpost"> </span><br />
<br />
<span class="fullpost"><b>CSS3</b> Border Radius (<i>Individually</i>)</span><br />
<span class="fullpost">Border ini memungkinkan untuk membuat sudut tertentu border melengkung</span><span class="fullpost"> </span><br />
<br />
<span class="fullpost"><div class="alert" style="-moz-border-radius: 15px 0px 15px 0px; border: 5px solid rgb(0, 0, 0); color: red;"><tt><span style="color: black;">#contoh {</span><br />
border: <span style="color: blue;">5</span>px <span style="color: blue;">solid</span> #<span style="color: blue;">000000</span>;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-<span style="color: blue;">radius</span>-<span style="color: blue;">topleft</span>: <span style="color: blue;">15</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-<span style="color: blue;">radius</span>-<span style="color: blue;">toprigh</span>t: <span style="color: blue;">0</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-<span style="color: blue;">radius</span>-<span style="color: blue;">bottomright</span>: <span style="color: blue;">15</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-<span style="color: blue;">radius</span>-<span style="color: blue;">bottomleft</span>: <span style="color: blue;">0</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-webkit-border-<span style="color: blue;">top</span>-<span style="color: blue;">left-radius</span>: <span style="color: blue;">15</span>px; <br />
</tt><span class="fullpost"><tt> </tt></span><tt>-webkit-border-<span style="color: blue;">top</span>-<span style="color: blue;">right-radius</span>: <span style="color: blue;">0</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-webkit-border-<span style="color: blue;">bottom</span>-<span style="color: blue;">left-radius</span>: <span style="color: blue;">0</span>px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-webkit-border-<span style="color: blue;">bottom</span>-<span style="color: blue;">right-radius</span>: <span style="color: blue;">15</span>px;<br />
<span style="color: black;">}</span></tt></div><div class="alert" style="color: red;"></div></span><br />
<br />
<span class="fullpost"><b>CSS3</b> Border (<i>Multipel</i>)</span><span class="fullpost"> </span><br />
<span class="fullpost">Border ini memungkinkan untuk membuat border memiliki banyak warna</span><span class="fullpost"> </span><br />
<br />
<span class="fullpost"><div class="alert" style="-moz-border-bottom-colors: blue red orange green purple yellow; -moz-border-left-colors: blue red orange green purple yellow; -moz-border-right-colors: blue red orange green purple yellow; -moz-border-top-colors: blue red orange green purple yellow; border-style: solid; border-width: 5px; color: red;"><tt><span style="color: black;">#contoh {</span><br />
border-width:5px;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>border-style:solid;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-top-colors:<span style="color: blue;">blue red orange green purple yellow</span>;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-right-colors:<span style="color: blue;">blue red orange green purple yellow</span>;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-bottom-colors:<span style="color: blue;">blue red orange green purple yellow</span>;<br />
</tt><span class="fullpost"><tt> </tt></span><tt>-moz-border-left-colors:<span style="color: blue;">blue red orange green purple yellow</span>;<br />
<span style="color: black;">}</span></tt></div></span><span class="fullpost"> </span><br />
<span class="fullpost">Sekian yang bisa saya ajarkan, semoga bermanfaat saya akhiri wassalam. </span><span class="fullpost"> </span>Dimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com4tag:blogger.com,1999:blog-9080780049538396230.post-81012266659188806042010-11-17T02:58:00.000-08:002010-12-03T23:22:51.832-08:00CSS3 | Efek Text Menyala<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOO7qF5V9pI/AAAAAAAAAX8/tqR7ZNjWTNA/s1600/menyala.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOO7qF5V9pI/AAAAAAAAAX8/tqR7ZNjWTNA/s1600/menyala.jpg" /></a></div><b>Cara Membuat Text Efek Menyala</b>. Perhatikan text di bawah. Terlihat seperti menyalakan? Jika tidak mungkin faktor browser anda, karena efek ini hanya terlihat di browser tertentu saja seperti <b>Firefox</b>, <b>Google Chrome</b>, dan <b>Safari</b> Terbaru.<br />
<br />
<span style="font-size: large;"><b><span style="color: red; text-shadow: 0px 0px 8px rgb(255, 150, 220);">LINK MENYALA</span></b></span><br />
<br />
Secara teknis sebenarnya efek ini menggunakan efek <b><a href="http://abi-galoga.blogspot.com/2010/08/membuat-efek-shadow-bayangan-pada.html">text shadow</a></b> dengan <b>CSS3</b>. Dan dengan sedikit modifikasi RGBA jadilah efek <b>text menyala</b> ini. Langsung saja ke cara pembuatan texk menyala ini.<br />
<br />
Kode yang saya gunakan untuk membuat <b>text menyala</b> di atas adalah seperti ini<br />
<blockquote>text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;<br />
<br />
yang artinya kurang lebih seperti ini :<br />
<br />
<ul><li>text-shadow = buatlah bayangan pada text</li>
<li>rgba(255, 150, 220, 1) = Warna dengan komposisi RGB dan Alpha (R, G, B, Alpha). Ganti sesuai warna cahaya yang anda inginkan --untuk mencari komposisi warna RGB, kamu bisa menggunakan photoshop--</li>
<li>0 0 8px = 0(ofset x) 0(ofset y) 8px(lebar/blur bayangan)</li>
</ul></blockquote><br />
Sekarang untuk penerapan di Blog.<br />
<br />
1. Login ke blog anda<br />
2. Masuk ke <i>Design</i> > <i>Edit HTML</i><br />
3. Cari kode yang anda inginkan untuk di buat menyala. Contoh Link menyala maka yang di cari adalah kode <b>a:link {</b>. Maka tambahkan kode <b>Text menyala</b> di dalamnya. Contoh :<br />
<blockquote>a:link {<br />
<div style="color: red;">text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;</div>color : #3778cd;<br />
text-decoration : none;<br />
}</blockquote>4. Save Templates dan lihat apa yang terjadi pada link anda? Menyalakan? Bagus. Jika tidak berarti Seperti yang saya bilang tadi. Faktor Browser.<br />
<br />
Text lain yang bisa di beri efek menyala. <b>h1{</b> , <b>h2 {</b> ,<b> h3 {</b> , <b>.post {</b> , dll<br />
<br />
Sekian posting dari saya, semoga bermanfaat saya akhiri WassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com19tag:blogger.com,1999:blog-9080780049538396230.post-77602830378845022382010-11-14T04:31:00.000-08:002010-11-14T04:34:15.323-08:00Cara Menghilangkan Link Pada Judul PostingApakah anda ingin menghilangkan link pada blog anda? Jika iya silahkan baca posting saya kali ini yaitu <b>Cara Menghilangkan Link Pada Judul Posting</b>. Untuk demonya coba anda arahkan ke mouse anda ke judul postingan milik saya. Tidak ada link bukan? yap saya menghilangkan linknya. Bagaimana caranya? Yuk kita bahas <b>Step.By.Step !!!</b><br />
<br />
1. Langkah Pertama silahkan Log in ke blog anda<br />
2. Masuk ke <i>Design</i> > <i>Edit HTML</i> > Centang di <i><span class="fullpost">Expand Widget Template </span></i><br />
3. Cari kode seperti berikut<br />
<blockquote><b><h3 class='post-title'></b><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</h3><br />
</b:if></blockquote>Jika anda pernah mengganti tag heading kode di atas tidak akan di temukan. Coba cari seperti berikut<br />
<blockquote><h1 class='post-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</h1><br />
</b:if> </blockquote>4. Selanjutnya ganti kode di atas dengan kode berikut. Bagi yang pernah mengganti tag heading ganti <b>h3</b> menjadi <b>h1</b><br />
<blockquote><h3 class='post-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<data:post.title/><br />
</b:if><br />
</h3><br />
</b:if></blockquote>Selesai. Save templates.<br />
Cara di atas akan menghilangkan link judul posting anda secara keseluruhan. Bagi anda yang ingin menghilangkan hanya di halaman posting berarti ganti kodenya dengan yang ini<br />
<blockquote><h3 class='post-title entry-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<data:post.title/><br />
</b:if><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</h3><br />
</b:if></blockquote>Bagi yang pernah mengganti tag heading ganti <b>h3</b> menjadi <b>h1</b> <br />
<br />
Sekian posting saya kali ini. Semoga bermanfaat saya akhiri wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com4tag:blogger.com,1999:blog-9080780049538396230.post-5754943725479215392010-11-13T22:17:00.000-08:002010-11-26T07:55:42.283-08:00Cara Membuat Form Komentar Klasik di Blog<div class="fullpost">Menggunakan 2 jenis kotak komentar sekaligus yaitu kotak komentar klasik/pop up dan kotak komentar yang ada di bawah posting. Saya bingung ingin mendeskripsikannya bagaimana lagi hahaha, lihat saja demonya langsung di blog saya (lihat bagian komentar).</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_E-rRqwMnFnQ/TN99vPcc0zI/AAAAAAAAAXQ/mZrnEOcmWq0/s1600/klasik+Komentar.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="268" src="http://3.bp.blogspot.com/_E-rRqwMnFnQ/TN99vPcc0zI/AAAAAAAAAXQ/mZrnEOcmWq0/s320/klasik+Komentar.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Preview</td></tr>
</tbody></table><div class="fullpost">Nah cara pembuatannya langsung saja ke <b>Step.By.Step !!!</b></div><div class="fullpost"><br />
</div><div class="fullpost">1. Log in ke blog anda</div><div class="fullpost">2. Klik Design > Edit HTML > Centang di <span class="fullpost"><b>Expand Template Widge</b>t (BackUp dulu templates anda)</span></div><div class="fullpost"><span class="fullpost">3. Cari kode berikut (gunakan F3/Ctrl+F untuk pencarian)</span></div><blockquote><div class="fullpost"><span class="fullpost"><b><div class='comment-form'></b><br />
<a name='comment-form'/><br />
<h4 id='comment-post-message'><data:postCommentMsg/></h4><br />
<p><data:blogCommentMessage/></p><br />
<data:blogTeamBlogMessage/> </span></div></blockquote>4. Tambahkan kode berikut di bawah kode Di atas<br />
<blockquote><a expr:href='&quot; http://www.blogger.com/comment.g?blogID=<span style="color: red;">6634386433859994495</span>&amp;amp;postID=&quot; +data:post.id+ &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' rel='nofollow'><b>Form Komentar Klasik</b></a></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOu2suAnozI/AAAAAAAAAYk/2kTs-wv8mac/s1600/Blog+id.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="http://4.bp.blogspot.com/_E-rRqwMnFnQ/TOu2suAnozI/AAAAAAAAAYk/2kTs-wv8mac/s320/Blog+id.jpg" width="320" /></a></div><br />
5. Save Templates.<br />
<br />
Sekian posting dari saya, terima kasih wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com8tag:blogger.com,1999:blog-9080780049538396230.post-6479640597663547342010-11-13T21:09:00.000-08:002010-11-13T21:09:57.825-08:00Cara Optimasi Blog Dengan Google Page Speed dan Yahoo! YSlowOke di hari minggu yang cerah ini saya akan memposting tentang <b>Cara Optimasi Blog Dengan Google Page Speed dan Yahoo! YSlow</b>. Setelah saya keliling dunia melalui Google haha, akhirnya saya menemukan sesuatu yang mungkin akan sedikit banyaknya berguna bagi para blogger yang suka mengoptimasikan blognya. Seperti yang kita ketahui bahwa <b>Optimasi</b> blog bagian dari <b>SEO</b><br />
Cara yang akan kita gunakan kali ini dengan menggunakan tools atau alat bantu langsung dari Google sendiri dan juga Yahoo. Oke karena pembahasan agak panjang mari langsung saja kita mulai. Sebagai tambahan siapkan kopi agar tidak ngantuk haha.<b>Step.By.Step!!!</b><br />
<br />
<b>Google Page Speed</b><br />
Jujur saya sendiri lebih menyukai Tools ini karena lebih detail mengupas kekurangan dari blog kita dan juga memberikan saran apa yang harus kita lakukan. Selain itu Tools ini juga langsung dari Google yang mempunyai Blogger. Tools ini juga memberi nilai pada blog kita. Nilai terbaik adalah 100. Tapi akan sangat sulit mendapat nilai 100, jadi jangan memaksakan karena takutnya nanti malah merusak tampilan blog. Nilai 80-90 itu sudah sangat cukup dan 100 sempurna.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TN9qRKhoUxI/AAAAAAAAAXI/cVqRcWmjV-g/s1600/abi-galoga+google+page.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="237" src="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TN9qRKhoUxI/AAAAAAAAAXI/cVqRcWmjV-g/s320/abi-galoga+google+page.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Preview my Page Speed</td></tr>
</tbody></table><br />
Pertanyaannya adalah bagaimana cara memperbaiki kesalahannya? cukup mudah. Anda tinggal mengklik bagian yang di anggap error. Contohnya <b><i>"Remove unused CSS</i>"</b> yang berarti kita di sarankan untuk menghapus CSS yang tidak di perlukan. Cukup klik linknya maka anda akan di perlihat saran CSS yang harus di hapuskan. Bagi yang tertarik silahkan Download Plug-in nya <a href="http://code.google.com/speed/page-speed/" target="_blank">Google Page Speed</a><br />
<br />
<b>Yahoo! YSlow</b><br />
Tools kali ini dari Yahoo yang tidak kalah keren dari Google. Karena Ke dua tools langusng dari Search Engine yang sangat ternama tentu sudah tidak di ragukan lagi keampuhannya. Cara kerja Yahoo! YSlow hampir sama dengan Google Page Speed. Jadi saya rasa saya tidak perlu menjelaskan secara detail untuk Tools ini. Perbedaan yang paling mencolok antara kedua Tools ini adalah, Yahoo! YSlow memberikan nilai menggunakan huruf dari A-F dimana A adalah yang terbaik. Seperti yang saya jelaskan di atas bahwa tidak mudah mendapatkan nilai sempurna A, jadi cukup dengan B/C.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TN9ttI6GK3I/AAAAAAAAAXM/70A2V0_ne7E/s1600/Yahoo+YSlow.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/_E-rRqwMnFnQ/TN9ttI6GK3I/AAAAAAAAAXM/70A2V0_ne7E/s1600/Yahoo+YSlow.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Preview my YSlow</td></tr>
</tbody></table> Langsung saja untuk download Plug-in nya <a href="http://developer.yahoo.com/yslow/" target="_blank">Yahoo! YSlow</a><br />
<br />
<b>Cara Penggunaan</b> :<br />
Untuk menggunakan Tools di atas di butuh Tools <a href="http://www.getfirebug.com/" target="_blank">Firebug</a> untuk Firefox. Lalu silahkan download kedua Tools yang saya berikan tadi. Jika sudah, pada halaman blog anda di browser klik Tools > Firebug > Open Firebug atau langsung klik F12. Setelah itu silahkan lakukan analisis dengan Google Page/YSlow. Biasanya setiap halaman memiliki nilai berbeda. Dan jika ingin memperbaiki kode yang salah saya sarankan BackUp Templates anda untuk mencegah hancurnya blog anda.<br />
<br />
Sekian dari saya, wassalamDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com6tag:blogger.com,1999:blog-9080780049538396230.post-19207201291269175652010-11-12T21:40:00.000-08:002010-11-12T21:40:29.619-08:00Tips Menggunakan Image Pada Templates<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img src="http://lh4.ggpht.com/_dfnTVAxeWMI/S3aLWn7fKSI/AAAAAAAADNo/8ZO1gDjSkCU/logo_chirp_small.png" /></div>Posting saya kali ini membahasa tentang <b>tips dan trik</b> menggunakan <b>Image (gambar)</b> pada templates. Di sini saya akan mengajarkan 3 cara menggunakan gambar pada templates. Cara ini saya dapatkan dari blog <a href="http://deconstructioncode.blogspot.com/" target="_blank">code-code-an</a>. Dan cara ini di gunakan apabila anda menggunakan gambar untuk header anda. Oke langsung saja.<br />
<br />
<b><span style="font-size: large;">Tips 1</span></b><br />
Tips pertama ini yang paling familiar dan sering di gunakan, yaitu langsung memasangnya pada HTML.<br />
<blockquote><h1><a href="#"><img width="300" height="75" alt="<span style="color: red;">Judul Blog Anda</span>" src="<span style="color: red;">logo.jpg</span>" /></a></h1></blockquote>Apabila anda menggunakan cara ini, penggunaan <i>Alt</i> sangatlah penting. Mengapa? karena <i>Alt</i> akan menjadi pengganti gambar bila gambar disable. Dengan menggunakan cara ini anda tidak dapat menggunaka efek :hover pada gambar karena tidak menggunakan CSS<br />
<br />
<span style="font-size: large;"><b>Tips 2</b></span><br />
Cara ke dua ini menggunakan CSS dan mengganti text dengan gambar. Dengan cara ini anda juga bisa menggunakan efek :hover pada image. Kode yang di gunakan seperti berikut.<br />
<br />
<b>KODE HTML</b><br />
<blockquote><h1 id="logo"><a href="<span style="color: red;">#</span>"><span></span><span style="color: red;">Judul Blog</span></a></h1></blockquote><b>CSS</b><br />
<blockquote><pre><code>/* repeated code per header */
#logo, #logo span {
width: 300px; height: 75px;
}
#logo a, #logo a span {
background-image: url(<span style="color: red;">gambar.jpg</span>);
background-repeat: no-repeat;
}
#logo a:hover, #logo a:hover span {
background-image: url(<span style="color: red;">gambar2.jpg</span>);
}
/* This is what moves the text under the span */
#logo a span { margin-bottom: -75px; }
/* code for all styled headers */
h1 a span {
display: block;
/* place the span on top */
position: relative;
z-index: 1;
}</code></pre></blockquote>Dengan cara ini anda telah menyembunyikan text dan menggantinya dengan gambar. Tapi jika gambar di disable maka text akan muncul kembali menggantikan gambar. Kode utama dari trik ini adalah penggunaan <i>span</i>. Cara ini juga sepertinya lebih baik dari pada harus menyembunyikan text dengan <i>text-indent</i> karena jika gambar disable text tidak akan muncul.<br />
<br />
<span style="font-size: large;"><b>Tips 3</b></span><br />
Jika cara pertama menggunakan gambar pada HTML dan yang kedua menggunakan gambar pada CSS, maka tips 3 ini menggunakan gambar pada CSS dan HTML sekaligus. Kode yang di gunakan<br />
<br />
<b>KODE HTML</b> <br />
<blockquote><h1><a class="chirp" href="<span style="color: red;">#</span>"><img alt="<span style="color: red;">Judul Blog Anda</span>" src="<span style="color: red;">logo_chirp_small.png</span>"/></a></h1></blockquote><b>CSS</b> <br />
<blockquote><pre><code>a.chirp {
background:url("<span style="color: red;">gambar 1</span>") no-repeat left top;
display:block;
height:249px;
width:324px;
}
a:hover.chirp {
background:url("<span style="color: red;">gambar 2</span>") no-repeat left bottom;
}
a.chirp img {
height:0;
}</code></pre></blockquote>Pada kode HTML dan CSS menggunakan gambar dan pada CSS di tambah juga efek :hover untuk gambar dan pada HTML menggunakan <i>Alt</i> sebagai keterangan gambar.<br />
<blockquote><pre><code>a.chirp img {
height:0;
}</code></pre></blockquote>Penggunaan kode height di atas bertujuan menyembunyikan gambar pada HTML dan gambar CSS lah yang akan muncul. Dan penggunaan <i>Alt</i> bertujuan apabila gambar pada CSS disable maka keterengan gambar lah yang akan muncul.<br />
<br />
<b><span style="font-size: large;">Terakhir</span></b><br />
Keterangan :<br />
<ul><li>disable berarti mati/di nonaktifkan</li>
<li>kode CSS letakan di atas ]]></b:skin></li>
<li>Kode HTML gabungkan ke dalam kode h1 header anda</li>
<li>Untuk <a href="http://template-galoga.blogspot.com/">DEMO</a> </li>
</ul>Saya rasa cukup untuk posting kali ini. Semoga bermanfaat. terima kasih untuk choenDimas Abi Galogahttp://www.blogger.com/profile/16626063670054005508noreply@blogger.com6