Membuat website dan blog dengan HTML, PHP, Mysql, Flash

Membuat Menu Navigasi Dengan Subkategori Pada Blogger

noreply@blogger.com (Unknown) — Sat, 19 Sep 2015 15:36:00 -0700

Membuat Menu Navigasi Dengan Subkategori Pada Blogger

Membuat Menu Navigasi Dengan Subkategori diperlukan jika sobat ingin membuat menu yang bercabang-cabang. Misalnya Sobat mempunyai menu dengan kategori BERITA dan di dalamnya ada subkategori1 dan subkategori1.1 dan seterusnya. Contohnya seperti ini :

# Kategori :
- Berita

## Subkategori-1 :
- Olahraga
### Subkategori-1.1 :
- Sepakbola
### Subkategori-1.2 :
- Basket
### Subkategori-1.3 :
- Volley

## Subkategori-2 :
- selebritis
### Subkategori-2.1 :
- Selebritis Lokal
### Subkategori-2.2 :
- Selebritis Luar

## Subkategori-3 :
- Fashion
### Subkategori-3.1 :
- Mode Busana
### Subkategori-3.2 :
- Promo
### Subkategori-3.3 :
- Pagelaran Busana

Maka bentuk kode dasar HTML nya seperti ini (sebelum dibuat link) :

Dan dibawah ini adalah contoh kode HTML untuk Membuat Menu Navigasi Horizontal Dengan Subkategori yang sudah ditamabahi style CSS dan LINK.

<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Cek Kiriman</a></li>
<li><a href='#'>Cara Order</a></li>
<li><a href='#'>Katalog</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Produk</a>
<ul id='sub-custom-nav2'>
<li><a href='#'>Pengobatan</a></li>
<li><a href='#'>khusus anak</a></li>
<li><a href='#'>keharmonisan rumah tangga</a></li>
<li><a href='#'>peningkat kesuburan</a></li>
<li><a href='#'>suplemen ibu hamil</a></li>
<li><a href='#'>pelangsing herbal</a></li>
<li><a href='#'>Habbatussauda/jinten hitam</a></li>
<li><a href='#'>OBAT TETES MATA</a></li>
<li><a href='#'>ZAITUN</a></li>
<li><a href='#'>KOMBINASI (MADU+H.SAUDA+ZAITUN+HERBAL)</a></li>
<li><a href='#'>SARI KURMA</a></li>
<li><a href='#'>HERBAL LAIN-LAIN</a></li>
<li><a href='#'>AROMA TERAPI / MINYAK ANGIN</a></li>
<li><a href='#'>BUMBU HERBAL</a></li>
<li><a href='#'>PEMBALUT WANITA</a></li>
<li><a href='#'>CREAM KOSMETIK</a></li>
<li><a href='#'>MINYAK</a></li>
<li><a href='#'>aneka minuman instan</a></li>
<li><a href='#'>aneka teh</a></li>
</ul>
</li>
<li><a href='#'>Produsen</a>
<ul id='sub-custom-nav2'>
<li><a href='#'>al wadey</a></li>
<li><a href='#'>al mabruroh</a></li>
<li><a href='#'>AL QUBRO </a></li>
<li><a href='#'>GRIYA HERBA </a></li>
<li><a href='#'>HERBASYAM</a></li>
<li><a href='#'>HERBALINDO </a></li>
<li><a href='#'>VICOMAS INTERNATIONAL</a></li>
<li><a href='#'>HABBATUSSAUDA INT'L </a></li>
<li><a href='#'>TAZAKKA </a></li>
<li><a href='#'>HERBAL INDO UTAMA </a></li>
<li><a href='#'>MULTIVIT </a></li>
<li><a href='#'>FATMASARI </a></li>
<li><a href='#'>ANNABAWY </a></li>
<li><a href='#'>HERBALINDO UTAMA </a></li>
<li><a href='#'>HERBA NUSANTARA </a></li>
<li><a href='#'>AL BIRUNI / BANARI </a></li>
<li><a href='#'>GRIYA AN-NUR </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Ini adalah kode CSS nya

/* CSS Menu Navigasi Horizontal Dengan Subkategori */
#cat-nav {background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #BFBDBF),
color-stop(1, #EFEAEF)
);
background-image: -o-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -moz-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -webkit-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: -ms-linear-gradient(bottom, #BFBDBF 0%, #EFEAEF 100%);
background-image: linear-gradient(to bottom, #BFBDBF 0%, #EFEAEF 100%);
margin-top:20px;padding:0;height:39px; width: 100%; position: relative; text-transform: uppercase; border-bottom: 5px solid #999999;}

#cat-nav a { color:#666666; text-decoration:none; border-right: 1px solid #999999;}
#cat-nav a:hover { color:#fff;background:#333333;}
#secnav a:active, #secnav a.active {background:#999999; z-index:0;}
#cat-nav li:hover { background:#999999; height:39px; margin-top:0;}
#cat-nav a span { font-family: tahoma, verdana, arial,Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff;}
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:39px; background:#; }
#secnav a { font-family: arial, tahoma, Verdana,Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:15px; display:block; z-index:100; padding:0 15px; line-height:39px; text-decoration:none;}
#secnav li { float:left; width: auto; height:43px; margin:0; }
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:39px; border-top: 1px solid #000;}
#secnav li ul li a { font-family: Helvetica, Geneva, Verdana,Arial, "trebuchet MS", Tahoma, sans-serif; width:230px; line-height:39px; padding:0 10px; font-size:12px; font-style:normal; color:#000; background:#E0DCE0; text-spasing:1.5em;}
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em;}
#secnav li:hover ul, #secnav ul li a ul a:hover, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto;}
#secnav li:hover,#secnav li.hover { position:static;}
#cat-nav #secnav {width:100%;margin:0 auto;}
#secnav li ul li a:hover { background:#000; height:39px;}
#cat-nav li:active, #cat-nav li.active {background:#999999;}

Cara mengaplikasikannya pada blog :
1. Ubah kode HTML diatas sesuai dengan menu navigasi sobat.
2. Setelah selesai lalu buka template blogger sobat dan letakkan kode HTML tersebut tepat dibawah tag </header>
3. Ubah kode CSS diatas jika ingin tampilannya sesuai dgn keinginan sobat (ukuran, warna, teks dll). Jangan takut umtuk mencoba. Tp jangan lupa save dulu template sobat agar lebih aman
4. Letakkan kode CSS tsb diatas kode ]]></b:skin> yang ada pada template sobat.

Inilah tampilan dari Menu Navigasi Dengan Subkategori dengan menggunakan kode HTML dan CSS diatas. Ini menu navigasi toko online yang menjual produk-produk herbal

Demikian cara Membuat Menu Navigasi Horizontal Dengan Subkategori Pada Blogger. Jangan lupa memberikan komentar ya sob :)

Membuat nomer halaman pada blogger

noreply@blogger.com (Anonymous) — Sat, 19 Sep 2015 06:55:00 -0700

Membuat nomer halaman pada blogger

Membuat nomer halaman pada blog sebenarnya mudah (tapi bagi yang sudah tau, hehe..). Sobat hanya perlu menambahkan beberapa baris kode CSS dan HTML saja. Kode CSS ini dibuat dan diletakkan pada template blogger untuk mengganti tampilan "HOME", "NEXT" dan "PREV" yang merupakan bawaan dari template default blogger.

Contoh tampilan nomer halaman pada blogger seperti yang ada di blog ini ( gambar disamping), dan inilah cara membuatnya :

1. Letakkan kode css dibawah ini diatas tag </head> pada template blogger sobat.

/* CSS untuk Nomer Halaman */
#blog-pager {
clear: both;
margin: 30px auto;
text-align: center;
padding: 30px;
}

.blog-pager {
background: none;
}

.displaypageNum a, .showpage a, .pagecurrent {
padding: 5px 10px;
margin-right:5px;
color: #fff;
background-color: #800080;
border: 1px solid #404042;
}

.displaypageNum a:hover, .showpage a:hover, .pagecurrent {
background: #D01414;
text-decoration: none;
color: #000;
border: 1px solid #800080;
}

#blog-pager .showpage, #blog-pager, .pagecurrent {
font-weight: bold;
color: #000;
}
.showpageOf {
display: none!important
}

#blog-pager .pages {
border: none;
}

2. Letakkan kode HTML dibawah ini diatas tag </body> pada template blogger sobat

<div class='cleared'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>

/*<![CDATA[*/
var perPage=4;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Prev';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation2.js'/>
</b:if>
</b:if>
</div>

Penjelasan untuk kode CSS diatas:
Untuk mengganti warna latar belakang kotak-kotaknya, tinggal mengubah kode warna pada "background-color". Dan untuk mengganti warna teks/angka tinggal mengganti warna pada "Color".

CATATAN :
Hapus atau non aktifkan fungsi blog-pager bawaan dari blogger, jika sobat ingin menon aktifkan saja tanpa menghapus caranya seperti ini :

/*
#blog-pager-newer-link{float:left}
#blog-pager-newer-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqICVP0VL-IPJtd0a_H9Kz3g1TokB36MEmMLP9S-51obs6GXAFshhf3vANxrcSrp5s3oLLLb5nddlF73MQiy60-_o8f0lZeLcjJBr-bcln-XqxwN5S0nYgpDcmETyNYH_6MOE6UCj3IhP/s1600/arrow-leftpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
.home-link{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEsztky9Lmm7rJGm_kZTMVm6Nmsfd3OM9-Nghham5zuCPNFWv65EDvW-YwGeJRaWuJF463kQRn5ECHuAYPv2WxX-3VeeYehNSHC-t7AL2BMyswc5dzIcnDdhFZFxTZuWztM9FWdU9oKtH/s1600/homepink.png) no-repeat scroll center center; display:block; height:32px; margin:0 auto; text-indent:-9999px; width:32px}
#blog-pager-older-link{float:right}
#blog-pager-older-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinstlw5GVEO5RPVuUwhPSQXem0vbYZEf_2yxuM8BVFA60M0MNs_W-lQCmrY3Huy-W0qi1-3kt6qtwZoaJ3fIskLE-KvKMihcFEyOESVu5GB86JZAmILibrF6FVy5ndkK7MtLvvVYyXCHbw/s1600/arrow-rightpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
#blog-pager{padding:30px; clear:both; text-align:center}
feed-links{}
*/

tanda garis miring dan bintang pada kode diatas berfungsi untuk menon aktifkan kode tsb.

Penjelasan untuk kode HTML diatas:

var perPage=4; --> ini adalah kode untuk menampilkan jumlah postingan pada tiap halaman. Sobat tinggal menggantinya.

var numPages=6; --> ini kode untuk menampilkan jumlah maksimal kotak yang terlihat di halaman

CATATAN :

Sesuaikan jumlah pos per halaman yang ada pada "setelan" di template sobat. Silahkan lihat di "setelan" lalu klik "pos dan komentar"

Jangan lupa kasih komentar ya :)

Cara Mudah Membuat Animasi GIF 3D Menggunakan Aplikasi XARA

noreply@blogger.com (Anonymous) — Fri, 18 Sep 2015 11:09:00 -0700

Cara Mudah Membuat Animasi GIF 3D Menggunakan Aplikasi XARA 3D Maker

Membuat animasi 3D (3 Dimensi) baik berupa gambar animasi ataupun teks animasi saat ini semakin mudah. Jika sahabat lihat animasi teks disamping, berupa teks yang muter-muter (pusing deh itu teks hehe..) itu 90% yang mengerjakan bukan saya lho, tapi aplikasi animasi GIF 3D yang namanya XARA. ya nama aplikasinya XARA, bukan Sarah, apalagi Farah :) , jangan sampai salah sebut, nanti mereka GR.

Kembali ke XARA.
Aplikasi XARA 3D Maker ini sangat mudah digunakan. Contohnya adalah teks animasi "ciki-cikibung" yang sedang muter-muter itu. Saya cuma menuliskan teks, lalu selanjutnya memberikan efek-efek / design untuk tulisan tersebut, maka jadilah teks animasi tersebut.

Dibawah ini adalah tampilan XARA 3D Maker

Jika sahabat ingin membuat teks animasi 3D dengan mudah, maka gunakan saja aplikasi XARA 3D Maker ini. Sahabat tinggal mencoba-coba animasi seperti apa yang sobat mau. Dan dibawah ini saya berikan link untuk mendownload aplikasi XARA 3D ini.

DOWNLOAD

Happy Blogging and Design,
Selamat muter-muter :) , and jangan lupa kasih komentar ya.

Cara Membuat Efek Zoom pada Image

noreply@blogger.com (Unknown) — Sun, 6 Sep 2015 12:31:00 -0700

Cara Membuat Efek Zoom pada Gambar atau Image

Membuat efek zoom agar sebuah gambar terlihat lebih besar mungkin kita butuhkan bila tidak ingin gambar tersebut mengganggu tampilan awal dari halaman web atau blog.

Hal ini perlu diakukan karena ukuran gambar yang besar akan membuat perhatian pengunjung atau pembaca jadi lebih terfokus pada gambar, bukan pada artikel yang ditulis. Tapi masalahnya di sisi lain kita juga ingin agar setelah pembaca memahami apa yang kita tulis lalu kemudian melihat gambar yang kita pasang, agar pembaca lebih mengerti apa yang ingin kita sampaikan. Lalu bagaimana cara menyiasatinya

ya, kita harus memasang gambar dengan ukuran kecil tapi bisa diperbesar, atau istilahnya gambar atau image tersebut bisa di-zoom, agar perhatian pembaca jadi lebih terfokus pada tulisan, baru kemudian perhatiannya bisa beralih ke gambar atau image yang kita pasang pada artikel.

Dibawah ini saya memberikan contoh gambar yang akan di-zoom dengan 2 cara. Coba arahkan cursor anda diatas gambar, lalu lihat apa yang terjadi pada gambar tersebut. Sahabat jangan lupa memberikan komentar ya

Contoh penerapannya bisa dilihat disini : http://arlojimurah-original.blogspot.com

Bersambung... :)

Cara Membuat Recent Comment Pada Blogger

noreply@blogger.com (Unknown) — Thu, 15 Dec 2011 09:19:00 -0800

Cara Membuat Recent Comment Pada Blogger

Membuat recent comment pada blog berguna untuk mengetahui komentar - komentar yang baru ditulis oleh pegunjung blog. Pada saat jumlah postingan di sebuah blog sudah begitu banyak maka kita tidak mungkin mengetahui recent comment atau komentar baru dengan melihat setiap postingan yang kita buat,

karena hal itu akan membuang banyak waktu (dan mungkin juga uang, karena
online nya jadi lebih lama, hehe...).

Untuk mengatasi hal itu maka lebih baik kita membuat recent coment di halaman depan blog. Dengan adanya recent comment ini maka kita tinggal melihat komentar - komentar yang baru, dan bisa mngetahui dari postingan artikel yang manakah komentar itu berasal. Dan keuntungan lainnya kita jadi bisa merespon komentar tsb dengan cepat.

Untuk membuat sebuah recent comment sahabat bisa membuat script javascript seperti di bawah ini. Untuk var numcomments = 5 itu adalah jumlah comment yang akan ditampilkan. Sahabat bisa mengubah jumlahnya
sesuai dengan yang diinginkan. Dan untuk nama blognya (di script ini http://ciki-cikibung.blogspot.com) ganti dengan blog sahabat.

function showrecentcomments(json) {

for (var i = 0; i < numcomments; i++) {

var entry = json.feed.entry[i];

var alturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

alturl = alturl.replace("#", "#comment-");

var postlink = alturl.split("#");

postlink = postlink[0];

var linktext = postlink.split("/");

linktext = linktext[5];

linktext = linktext.split(".html");

linktext = linktext[0];

var posttitle = linktext.replace(/-/g," ");

posttitle = posttitle.link(postlink);

var commentdate = entry.published.$t;

var cdyear = commentdate.substring(0,4);

var cdmonth = commentdate.substring(5,7);

var cdday = commentdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

if ("content" in entry) {

var comment = entry.content.$t;}

else

if ("summary" in entry) {

var comment = entry.summary.$t;}

else var comment = "";

var re = /<\S[^>]*>/g;

comment = comment.replace(re, "");

if (!standardstyling) document.write('<div class="bbrecpost">');

if (standardstyling) document.write('<br/>');

if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');

document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');

if (showposttitle == true) document.write(' on ' + posttitle);

if (!standardstyling) document.write('</div><div class="bbrecpostsum">');

if (standardstyling) document.write('<br/>');

if (comment.length < numchars) {

if (standardstyling) document.write('<i>');

document.write(comment);

if (standardstyling) document.write('</i>');}

else

{

if (standardstyling) document.write('<i>');

comment = comment.substring(0, numchars);

var quoteEnd = comment.lastIndexOf(" ");

comment = comment.substring(0, quoteEnd);

document.write(comment + '...<a href="' + alturl + '">(more)</a>');

if (standardstyling) document.write('</i>');}

if (!standardstyling) document.write('</div>');

if (standardstyling) document.write('<br/>');

}

if (!standardstyling) document.write('<div class="bbwidgetfooter">');

if (standardstyling) document.write('<br/>');

}

var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://ciki-cikibung.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Lalu untuk memasangnyadi halaman blog caranya adalah seperti biasa:
1. Tulis atau biar lebih mudah copy saja script di atas
2. Login ke blog sahabat
3. Pada halaman dashboard klik "design/rancangan"
4. Klik "Tambah Gadget"
5. Pilih "HTML/Javascript"
6. Paste script tersebut
7. Save selesai
Selamat melihat - lihat komentar di blog sahabat. Jangan lupa untuk memberikan komentar yah :)

Cara Membuat Bayangan Image atau Box Shadow

noreply@blogger.com (Unknown) — Wed, 14 Dec 2011 00:10:00 -0800

Cara Membuat Bayangan Image atau Box Shadow

Membuat bayangan pada sebuah image atau yang lebih dikenal dengan istilah Box Shadow dilakukan untuk memperindah tampilan image pada halaman website atau blog.

Image yang diberi bayangan atau shadow akan terlihat seperti image 3

dimensi. bentuknya jadi terlihat seperti menggantung, atau seperti tidak menempel pada dasar halaman website/blog.
Pembuatan bayangan pada image ini bisa menjadi sesuatu yang sangat penting untuk dilakukan, manalkala seorang pemilik website/blog ingin menarik perhatian pengunjung pada image yang dipasangnya. Coba sahabat perhatikan kedua image dibawah ini, lalu bandingkan.Menurut sahabat image manakah yang lebih menarik perhatian pengunjung? Pasti jawaban sahabat sama seperti saya, yaitu image yang kedua yang sudah diberi bayangan, benar bukan?

Setelah kita mengetahui manfaat dari pembuatan bayangan pada image tsb, sekarang kita akan membahas cara pembuatannya. Caranya adalah sbb:
Pertama kita buat sebuah style css. Jika sahabat memakai template blogger, langkahnya seperti ini :
1. Login ke blogger sahabat
2. Pada halaman dashboard klik "design/rancangan"
3. Klik "Edit HTML"
4. Pada kotak pengeditan, sebelum "]]></b:skin>" tulis style seperti ini :

.boxshadow {

-webkit-box-shadow: 5px 5px 5px 0px #191a1c;

-moz-box-shadow: 5px 5px 5px 0px #191a1c;

box-shadow: 10px 10px 5px #999999;}

5. Lalu cari kode image sahabat, tambahkan "class". Kode imagenya jadi seperti ini :

6. Simpan template sahabat
7. Selesai
Jika sahabat menulis kodenya dengan benar maka sekarang akan terlihat bayangan pada image yang sahabat pasang

Membuat Form pada blogger

noreply@blogger.com (Unknown) — Sun, 4 Dec 2011 04:15:00 -0800

Membuat Form pada blogger

Membuat sebuah form dinamis, baik itu untuk buku tamu, utk order barang atau untuk tujuan apapun, di halaman blog ternyata bisa dilakukan. Sekarang ini banyak situs-situs yang menyediakan formulir online, salah satunya adalah emailmeform.com. Mungkin banyak diantara sahabat yang sudah tahu

mengenai cara memasang form di blog, tapi untuk yang belum tahu akan saya jelaskan caranya secara singkat. Sebagai contoh disini saya menggunakan form online dari emailmeform. Inilah langkah-langkahnya

1. Sign up (daftar) di situs emailmeform.com
2. Anda akan mendapatkan link konfrmasi melalui email. Klik link tsb
3. Login
4. Di halaman berikutnya klik tulisan "+ add form" yang ada di pojok kanan atas
5. Setelah itu ada 2 pilihan, untuk saat ini pilih saja yang nomer 1 (anda bisa memilih option nomer 2 jika nanti sudah mengerti)
6. Customize atau atur form sesuai yang anda inginkan lalu save
7. Kembali ke halaman depan, klik tulisan "code", ini adalah kode dari form yang tadi anda buat, lalu copy kode tsb.

Selanjutnya bagaimana memasang kode form tsb di halaman blogger anda?Inilah caranya
1. Login ke blog anda
2. Pada halaman dashboard klik "design/rancangan"
3. Klik "tambah gadget" pilih "html/javascript" lalu paste kode form yang tadi anda copy
4. Selesai
lihatlah sekarang halaman blog anda sudah terpasangi form. Semua data yang masuk melalui form tsb akan dikirim ke email anda. Untuk itu saya sarankan sebaiknya gunakan atau buat email baru untuk membuat form anda ini.
Contoh blog yang sudah dipasangi form ini silahkan lihat di blog ini : iklanbloggeratis.blogspot.com

Baca juga :
Membuat Nomer Halaman Pada Blogger
Membuat Menu Navigasi Dengan Subkategori Pada Blogger

Membuat Banner Blog dengan Flash

noreply@blogger.com (Unknown) — Mon, 2 Nov 2009 07:47:00 -0800

Membuat Banner Blog dengan Flash

Banner blog bisa menjadi identitas sebuah blog.

Sebagian besar sahabat blogger mungkin sudah tahu cara membuat banner pribadi untuk blognya. Tapi bagaimana jika sahabat belum

mengetahui cara membuat dan menaruhnya di blog sahabat? Inilah sedikit informasi yang mudah-mudahan bisa membantu.

Untuk membuat sebuah banner blog sahabat bisa menggunakan program flash dan menyimpannya dengan ekstensi .gif. Cara menyimpan file flash ke dalam format .gif lihat artikel Menyimpan File Flash Ke Dalam Format GIF (animation GIF)
Jika sudah maka uploadlah gambar banner tersebut ke blogger sahabat (yang lebih mudah adalah menyimpan nya di hosting gratis seperti photobucket.com). Belum tahu cara upload image ke blogger? Inilah caranya :
-Login ke blogger. Pada halaman dashboard klik"Tata Letak"
-klik "Tambah Gadget
-Pilih "Gambar" (dengan klik tanda +)
-Upload file gambar yang telah sahabat simpan di komputer dan save
-Lihat Blog sahabat lalu klik kanan
-Klik "View page Source"
-Cari alamat url yang diberikan oleh google untuk file gambar yang sahabat upload, seperti ini : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtJL1t9ibCL-QkwSr-l46qPSQQlZBJTXw67qSTl9Ts_X77J0WO9-czwyqg-tvywqb0NwQ5ULqoQTaVqR4TPaab82bWIk18MHoib-4RGl_2hXFB7BK_7QuCMxxmqdkilMcD0O4nhPfDzc/s860-r/cur3.gif"
-Copy alamat tersebut
-Lalu buat tag seperti dibawah ini (sahabat bisa meng copy nya dan merubahnya nanti):

</div></center>

-Copy seluruh tag tersebut
-Masuk kembali ke halaman pengeditaan blog sahabat
-klik "Tambah Gadget"
-Pilih "HTML/JavaScript" (dengan klik tanda +)
-Paste tag yang telah sahabat copy
-Simpan, selesai
Cobalah lihat hasilnya.
Selamat mencoba. Bagi sahabat blogger yang lebih mahir dalam program flash dan utak-atik blog saya mohon untuk memberikan masukkannya dan jangan lupa memberikan komentar yah. Terima kasih

Menyimpan File Flash Ke Dalam Format GIF (animation GIF)

noreply@blogger.com (Unknown) — Mon, 5 Oct 2009 23:00:00 -0700

Menyimpan File Flash Ke Dalam Format GIF (animation GIF)

Pada artikel saya sebelumnya saya membahas tentang cara memasang gambar flash swf pada blogger.Bagi sahabat-sahabat yang sudah malang-melintang di dunia persilatan (hehe.. maksud saya di dunia internet) pasti sudah paham benar kalau gambar yang berformat .swf

ini bisa memperlambat proses pengaksesan sebuah halaman website, karena file dengan format ini mempunyai file size yang lumayan besar dibandingkan dengan gambar berformat jpeg, gif atau png. Lagipula untuk seorang blogger mania yang senang mengupload gambar ke halaman blognya, file dengan format swf ini menjadi tidak praktis. Mengapa demikian?

karena gambar berformat swf ini tidak bisa diupload ke blogger kita. Lalu bagaimana jika kita ingin tetap bisa memasang gambar dari hasil program flash tapi juga tidak ingin pengaksesan terhadap halaman website kita menjadi lambat? Sebenarnya caranya sangat mudah. Bagi sahabat-sahabat yang sudah mahir dengan program flash ini pasti sudah tahu caranya. Tapi buat yang belum tahu saya mencoba untuk menjelaskannya.
begini caranya...
Pada saat sahabat selesai membuat sebuah gambar/teks animasi dengan program flash pasti dong sahabat menyimpan file gambar tsb (hihi..buat apa juga bikin gambar kalau gak disimpan). Pada defaultnya hasil dari pembuatan gambar/teks dengan program flash mempunyai format dengan ekstensi .fla (jika sahabat menyimpan gambar/teks animasi dengan format ini maka suatu saat jika sahabat ingin sahabat bisa mengubah/mengedit gambar tsb). Tapi jika ingin gambar sahabat tsb bisa dipublish di internet maka sahabat harus mengekspornya, caranya :
-Klik "File" pada menu bar
-Lalu klik "Publish Setting" maka akan keluar halaman publish setting

-Hilangkan tanda centang pada "Flash (.swf)" dan "HTML (.html)" dengan mengklik tanda kotak di depannya.
-Beri tanda centang pada "GIF Image (.gif)"
-Beri nama file pada kotak file. Misalnya : gambarku.gif
-Klik gambar folder disamping kotak file. Simpan file gambar sahabat dimana sahabat mau. Misalnya di My document
-Klik tombol "GIF" pada menu bar

-Pilih "animated" pada radio buttton

-Jika sahabat ingin gambar animasinya tnpa warna latar belakang maka pada pilihan transparent pilih "transparent"

-Setelah itu klik "publish" dan "Ok"

-Selesai. Sahabat tinggal mengupload gambar animasi Flash yang telah sahabat simpan ke halaman blooger.

Jika ada saran dari para sahabat yang lebih mahir dalam program Flash saya mohon kesediannya untuk memberikan masukkan ataupun saran. Jangan lupa berikan komentar yah.

Menyimpan File Flash SWF pada blogger

noreply@blogger.com (Unknown) — Mon, 28 Sep 2009 10:53:00 -0700

Menyimpan File Flash SWF pada blogger

Flash adalah sebuah program pengolah gambar animasi yang sangat populer di dunia web design. Dan salah satu ektensi dari program flash ini adalah .swf atau Shock Wave Flash.

Tujuan seorang pemilik website/blog memasang gambar ber-extension .swf ini pada website atau blognya adalah agar penampilan web/blog tsb bisa jauh lebih menarik.

Mengapa demikian? karena gambar atau teks yang dibuat dengan program ini bisa bergerak dengan sangat atraktif. Misalnya sebuah gambar bisa berubah bentuk menjadi gambar yang lain atau sebuah teks bisa bergerak berputar-putar dll, sehingga dengan adanya penampilan website atau blog yang seperti itu seorang pemilik berharap para pengunjung akan tertarik melihatnya dan berharap website atau blog miliknya akan terus dikunjungi.
Bagi seorang pemula, memasangi blognya dengan gambar flash ini mungkin akan mengalami sedikit kesulitan karena sebuah situs penyedia blog seperti blogger.com tidak menyediakan fasilitas untuk meng-upload gambar dengan ektensi .swf. Lalu bagaimana caranya jika ingin memasang gambar atau teks dari program Flash tersebut di website atau blog kita? Ini mungkin sedikit trik yang bisa saya berikan bagi yang belum tahu caranya. Bagi yang sudah mahir mengutak-atik template blogger saya mohon saran dan masukannya yang akan sangat berarti buat saya khususnya dan buat sahabat-sahabat yang lain.
-Jika anda ingin ingin memasangi blogspot anda dengan file program flash .swf pertama-tama ya anda buat dulu gambar atau teksnya. Lalu setelah gambar atau teks tsb jadi anda harus menyimpannya di sebuah situs/web yang menyediakan jasa penitipan file agar gambar anda bisa dipublish atau diperlihatkan di jaringan internet di seluruh dunia. Apakah ada biaya yang harus dikeluarkan? Bagi sebagian besar situs penyedia jasa tsb - yang disebut webhosting - memang mengenakan sewa bulanan atau tahunan untuk file-file yang kita simpan. Tapi jika anda ingin menitipkan file gambar secara gratis ada beberapa situs yang menyediakannya, salah satunya adalah ziddu.com. Uploadlah file swf anda disana lalu tunggu proses konfirmasi melalui email dari ziddu.com. Anda akan mendapatkan sebuah alamat url dimana file gambar anda berada. Alamat itulah yang akan anda pakai untuk memasang gambar/teks anda pada blogger.com (agar lebih mudah copy saja alamat tsb).
-Setelah anda mendapatkan alamat tsb login ke blogger. Di halaman dashboard klik "Tata Letak" lalu tempatkan file gambar anda di tempat yang anda inginkan misalnya di bagian sidebar dengan mengklik "Tambah Gadget". Tunggu beberapa saat setelah keluar halaman menu-menu untuk memilih gadget, pilihlah "HTML/JavaScipt" (klik tanda +)
-Setelah anda berada di halaman konfigurasi tulislah tag berikut :
<embed src="paste alamat url yang tadi anda copy disini"></embed> lalu klik tombol simpan
-Selesai
Begitulah caranya. Saya harap artikel ini bisa berguna. Bagi sahabat-sahabat silahkan berikan saran, masukan untuk memperluas pengetahuan saya dan sahabat-sahabat yang lain.

Membatasi Besarnya File Gambar yang dapat diupload

noreply@blogger.com (Unknown) — Sat, 26 Sep 2009 11:32:00 -0700

Membatasi Besarnya File Gambar yang dapat diupload

Jika anda seorang pengelola sebuah situs atau website, tentu anda tidak ingin seorang user atau member dari situs anda mengupload gambar dengan file size yang terlalu besar, karena akan banyak mengurangi disk space di webhosting anda. Untuk itu ada cara untuk mencegahnya yaitu dengan cara membuat batasan pada formulir yang anda buat. Misalnya user hanya boleh mengupload gambar maksimal berukuran 100 kb. Dan juga tentunya anda tidak ingin ada orang yang mengupload gambar dengan tujuan menyisipkan virus. Untuk itu buatlah script seperti di bawah ini (anda bisa mengubah batasan file sizenya sesuai kebutuhan) :

<html>

<head>

<title>Membatasi Besarnya File Gambar yang dapat diupload</title>

</head>

<body>

<?php.

define("MAX_SIZE, "100") //membatasi file size gambar yang dapat diupload maksimal 100 kb

define("WIDTH", "400") //membatasi ukuran lebar gambar sebesar 400px

define("HEIGHT", "200") //membatasi ukuran tinggi gambar sebesar 200px

<input type="file" name="image"> <strong>Besar maksimal file gambar yang bisa anda upload : 100 kb. dimensi : 400px x 200px.</strong><br>

</form>

</body>

</html>

Lalu anda bisa membuat script php untuk memproses pemasukan file gambar :

<?php

if(isset($_POST['upload'] //jika ada file gambar yang diupload

{

$gambar=$_FILES['image']['name'] //memberikan nama variabel gambar

if($gambar!==' ') //jika ada nama file gambar

{

$namafile=stripslashes($_FILES['image']['name'] //

$ektensi=getExtention($namafile); //menentukan ektensi dari file gambar yang diupload

$ektensi=strtolower($ektensi); //setelah ektensi didapat maka hurufnya dirubah ke format huruf kecil

if(($ektensi!="jpg") or ($ektensi!="jpeg") or ($ektensi!="gif") or ($ektensi!="png")

{

echo"Gambar yang anda upload tidak diperbolehkan !";

exit;}

else

{

$ukuran=filesize($_FILES['image']['tmp_name']); //menentukan dimensi gambar yang ada di direktori sementara di server

list($file_width, $file_height) = getimagesize($_FILES['image']['tmp_name']);

if (($file_width > WIDTH) or ($file_height > HEIGHT)) //jika dimensi gambar melebihi maksimal

{

echo "Ukuran gambar tidak sesuai yang kami minta !";

exit;

}

else

{

$copy=copy($_FILES['image']['tmp_name'], "image/$image_name" ); //mengkopi file gambar dari direktori server ke folder image anda

if (!$copy)

{

echo"Proses upload gagal, silahkan ulangi lagi...";

exit;

}

else

{

echo "File gambar belum diisi !";

exit;

}

if($copy) //jika berhasil mengkopi gambar

{

echo "Gambar anda berhasil diupload. Terima kasih..";

}

Demikianlah cara yang dapat saya berikan. Ada bisa memodifikasi script di atas. Dan jika ada yang mau berbagi ilmu tentang trik-trik lain saya sangat berterima kasih....Jangan lupa berikan komentar ya

menyembunyikan bar navigasi blogger

noreply@blogger.com (Unknown) — Thu, 24 Sep 2009 15:30:00 -0700

Menyembunyikan Bar Navigasi Blogger

Jika anda ingin menyembunyikan bar navigasi blogger tanpa ingin menghilangkannya, inilah caranya :
-Login ke blog anda
-Pada halaman dasbor klik “Tata Letak”
-Lali klik “Edit HTML”
-Cari tag dibawah ini :
<b:include data="blog" name="all-head-content"></b:include> (untuk mempermudah pencariab kata anda bisa menggunakan keyboard ctrl + F)
-Setelah dapat lalu tulis style dibawah ini diatas tag tadi:
<style type="text/css">#navbar-iframe {

display:block } </style>

-Cari tulisan : /* Variable definitions (lagi-lagi untuk mempermudah pencariab kata anda bisa menggunakan keyboard ctrl + F)
-Di atas tulisan tsb tuliskan style berikut :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

-Simpan (save) template anda dan lihat hasilnya dengan klik “Lihat Blog”

Menghilangkan Garis Link

noreply@blogger.com (Unknown) — Tue, 15 Sep 2009 12:50:00 -0700

Menghilangkan Garis Link

Untuk memperindah suatu halaman website atau blog kadang kita harus menghilangkan garis-garis link. Jika menggunakan program HTML maka tag-nya seperti di bawah ini :
<a href="#">Klik link ini</a>
Kita tinggal menambahkan tulisan "style=text-decoration:none"
Jadi tag nya sperti ini:
<a href="#" style="text-decoration:none;" >Klik link ini</a>

Menghilangkan header navigasi pada blogger...

noreply@blogger.com (Unknown) — Mon, 14 Sep 2009 12:51:00 -0700

Menghilangkan header navigasi pada blogger

Untuk menghilangkan header navigation pada blogger sangat mudah, caranya adalah :
- Klik menu "Tata Letak" di dalam halaman pengeditan blog
- Lalu klik menu "Edit HTML"
- Setelah itu cari style "Body {.....}" (untuk mempermudah pencarian kata anda bisa menggunakan ctrl + F)
-Jika sudah ketemu tambahkan script di bawah ini sebelum body :
.quickedit,#navbar { visibility:hidden;display:none; }
Tapi saya sarankan anda tetap memakai header navigasi dari blogger. Karena blogger sudah baik hati menyediakan blog secara gratis. Jika header navigasinya tidak serasi dengan tampilan blog anda lebih baik mengganti warnanya.

Menampilkan teks berjalan

noreply@blogger.com (Unknown) — Fri, 28 Aug 2009 12:55:00 -0700

Menampilkan teks berjalan

Jika ingin menampilkan teks yang bisa berjalan inilah tag-nya :
<marquee>Teks ini bisa berjalan dari kanan ke kiri </marquee>
dan dibawah ini adalah hasilnya :

Teks ini bisa berjalan dari kanan ke kiri

Jika ingin teksnya berjalan dari kiri ke kanan inilah tag-nya :
<marquee direction="right">Teks ini bisa berjalan dari kiri ke kanan</marquee>
dan dibawah ini adalah hasilnya :
Teks ini bisa berjalan dari kiri ke kanan

Jika ingin teksnya berjalan dari atas ke bawah inilah tag-nya :
<marquee direction="down">Teks ini bisa berjalan dari atas ke bawah</marquee>
dan dibawah ini adalah hasilnya :
Teks ini bisa berjalan dari atas ke bawah

Jika ingin teksnya berjalan dari bawah ke atas tinggal mengganti "down" dengan "up" :

Membuat teks berkedip

noreply@blogger.com (Unknown) — Thu, 27 Aug 2009 12:55:00 -0700

Inilah tag-nya jika ingin membuat teks berkedip :
<blink>Teks ini bisa berkedip</blink>
dan dibawah ini adalah hasilnya :

Membuat sisa karakter pada formulir

noreply@blogger.com (Unknown) — Tue, 11 Aug 2009 12:25:00 -0700

Jika kita mengisi sebuah formulir yang disediakan oleh pengelola suatu website, misalnya ketika mengisi judul sebuah iklan kadang apa yang kita tulis terpotong atau judul yang kita tulis tidak semuanya bisa tampil. Hal tersebut terjadi karena pengelola website tersebut membatasi jumlah karakter yang dapat kita tulis untuk judul iklan, tapi tidak memberitahukan berapa jumlah karakter yang tersisa ketika kita mengisi judul iklan kita. Untuk masalah tersebut kita bisa menambahkan keterangan sisa karakter pada formulir yang kita buat. Di bawah ini adalah contoh scriptnya :

Pertama-tama Formnya kita beri nama. Misalnya "myform". Untuk judul iklan kita batasi hanya 30 karakter dan untuk teks iklan kita batasi sampai 255 karakter.

<html>
<head>
<script type="text/javascript">
var maxChar1 = 30;
var maxChar2 = 255;

function initial()
{
document.myform.counter1.value = maxChar1;
document.myform.counter2.value = maxChar2;
}

function count()
{
document.myform.counter1.value = maxChar1 - document.myform.judul.value.length;
document.myform.counter2.value = maxChar2 - document.myform.teks.value.length;
}

</script>
</head>
<body onload="initial()">
<font face=verdana size=2 color=yellow>Perhatikan sisa karakter!!!</font><br>
<form name=myform action="" method=post>
<table align=center bgcolor=#333366>
<tr>
<td valign=top><font face=verdana size=2 color=white>Judul</td>
<td><input type=text name='judul' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter1" size="1"> <blink><-</blink></td></tr>
<tr><td><font face=verdana size=2 color=white>Teks Iklan</td>
<td><input type=text name='teks' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter2" size="1"> <blink><-</blink></td></tr>
<tr><td colspan=2 align=center><input type=submit value=Kirim></td></tr>
</table>
</body>
</html>

Membuat button (tombol) dengan Flash movie clip

noreply@blogger.com (Unknown) — Tue, 11 Aug 2009 10:19:00 -0700

Seperti yang saya jelaskan pada tutorial sebelumnya bahwa saya akan memberikan keterangan mengenai cara pembuatan tombol (button) di bawah ini. Jika kursor berada di atas tombol maka tombol jadi mengecil, warnamya berubah merah dan tampak bola-bola yang bergerak beraturan. Jika diklik maka warna tombol akn berubah menjadi hijau.

Cara membuat tombol di atas adalah :

Buka program Flash anda
Klik insert pada menu bar - new symbol - beri nama "bola" - Pilih "movie clip"
Buat sebuah lingkaran gradien berwarna biru berukuran width=20px dan height=20px. Caranya : Klik "oval tool" - klik "stroke color" - Pilih Kotak persegi di atas yang disilang (agar lingkaran tidak mempunyai garis border) - klik "Fill Color" - Pilih warna biru (kode:#0000ff) - Klik "Color Mixer" - klik tombol dropdown - Pilih linear - Buat lingkaran gradien berwarna biru tepat di tengah tanda "+" pada halaman - Klik kursor (panah) hitam - Klik lingkaran - Rubah ukuran lingkaran (bola) di dalam properties menjadi width=20px dan height=20px.
Klik kanan bola - copy - klik kanan frame2 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Gambar bola sudah tercopy ke frame 2 tapi masih bertumpuk. Geser bola ke arah kanan menggunakan anak panah kanan pada keyboard.
Klik kanan bola kedua - copy - klik kanan frame3 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
Klik kanan bola ketiga - copy - klik kanan frame4 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
Klik kanan bola keempat- copy - klik kanan frame5 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
Klik kanan bola kelima- copy - klik kanan frame6 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
Klik kanan bola keenam- copy - klik kanan frame7 - insert key frame - klik Edit pada menu bar - Pilih paste in place. Geser bola ke arah kanan
Sekarang buat file baru (file - new)
Pada properties rubah ukuran halaman menjadi width=125px dan height=40px
Buat kotak sembarang berwarna biru. Caranya : Klik rectangle tool - klik "stroke color" - Pilih Kotak persegi di atas yang disilang (agar kotak tidak mempunyai garis border) - klik "Fill Color" - Pilih warna biru (kode:#0000ff)
Pada properties ubah ukuran kotak sesuai dengan ukuran halaman yaitu width=125px dan height=40px. Di dalam koordinat x dan y masukkan angka 0
Klik modify pada menu bar - pilih convert to symbol - beri nama kotak - pada behavior pilih button - ok
Klik kotak biru dua kali (doubleclick). Sekarang anda berada di halaman pengeditan simbol. Perhatikan bagian frame. Disitu terdapat empat buah frame, yaitu : up, over, down dan hit
klik kanan pada frame over lalu pilih "insert key frame"
Rubah warna kotak menjadi merah. Perkecil ukuran kotak merah. pada properties height=20px koordinat y=20
Klik library - drag gambar bola dan tempatkan diatas kotak merah. Sesuaikan ukuran bola dengan kotak
klik kanan pada frame down lalu pilih "insert key frame"
rubah warna kotak menjadi hijau
klik kanan pada frame hit lalu pilih "insert key frame"
pilih seluruh area kotak hijau
Jika sudah selesai cobalah anda test button (tombol) yang telah anda buat. Klik "control" pada menu bar lalu pilih "test movie". Tempatkan kursor diatas kotak. Jika warna kotaknya berubah menjadi merah dan jika kotak tsb diklik menjadi hijau berarti anda telah berhasill membuat tombol atau button tsb.
Sekarang buat teks "HOME" sesuaikan ukurannya dengan besar kotak lalu tempatkan di bawah kotak biru. Lalu pilih teks dan Copy teks Home tsb
Klik frame over - klik menu Edit pada menu bar - pilih paste in place
Klik frame down - klik menu Edit pada menu bar - pilih paste in place
Klik frame area - klik menu Edit pada menu bar - pilih paste in place
Selesai. Sekarang cobalah anda test lagi button yang telah anda buat Jika berhasil maka akan terlihat seperti button atau tombol di atas.

Membuat Button (tombol) sederhana dengan Flash

noreply@blogger.com (Unknown) — Fri, 7 Aug 2009 13:37:00 -0700

Program Flash sering digunakan oleh para webmaster atau web programer di dalam pembuatan sebuah website atau blog. Hal tersebut dilakukan karena Flash bisa menciptakan gerakan animasi yang atraktif pada gambar dan teks. Sehingga website atau blog yang mereka buat bisa menjadi lebih menarik. Salah satu contoh kehandalan Flash adalah bisa membuat button atau tombol yang dapat berubah warna. Dibawah ini saya berikan contoh tombol yang dibuat dengan program Flash.
Jika tombol tsb tidak mendapat aksi apapun maka Tombol tersebut berwarna biru. Jika kita mengarahkan kursor di atas tombol tsb maka warna tombol tersebut akan berubah menjadi merah. Dan jika tombol tsb kita klik warnanya akan berubah lagi menjadi hitam.

Cara membuat tombol di atas adalah :

Buka program Flash anda
Pada bagian properties rubah ukuran halaman (page) menjadi width=95px dan height=40px
Buat sembarang kotak dan beri warna biru
di bagian properties rubah sizenya menjadi seukuran halaman yaitu width=95px dan height=40px
Masih di bagian properties, Masukkan angka 0 di kotak x dan y agar kotak yang anda buat berada pas di tengah halaman
Pilih kotak berwarna biru
pada menu bar klik modyfi - convert to symbol - pilih "Button" - ok
Klik kotak biru dua kali (doubleclick). Sekarang anda berada di halaman pengeditan simbol. Perhatikan bagian frame. Disitu terdapat empat buah frame, yaitu : up, over, down dan hit
klik kanan pada frame over lalu pilih "insert key frame"
Rubah warna kotak menjadi merah
klik kanan pada frame down lalu pilih "insert key frame"
rubah warna kotak menjadi hitam
klik kanan pada frame hit lalu pilih "insert key frame"
pilih seluruh area kotak hitam
Jika sudah selesai cobalah anda test button (tombol) yang telah anda buat. Klik "control" pada menu bar lalu pilih "test movie". Tempatkan kursor diatas kotak. Jika warna kotaknya berubah menjadi merah dan jika kotak tsb diklik menjadi hitam berarti anda telah berhasill membuat tombol atau button tsb.
Sekarang buat teks "HOME" sesuaikan ukurannya dengan besar kotak lalu tempatkan di tengah-tengah kotak biru. Lalu pilih teks dan Copy teks Home tsb
Klik frame over - klik menu Edit pada menu bar - pilih paste in place
Klik frame down - klik menu Edit pada menu bar - pilih paste in place
Klik frame area - klik menu Edit pada menu bar - pilih paste in place
Selesai. Sekarang cobalah anda test lagi button yang telah anda buat Jika berhasil maka akan terlihat seperti button atau tombol di atas.

Tulisan berikutnya saya akan membahas tentang button atau tombol di bawah ini

Merubah bentuk kursor pada blogger

noreply@blogger.com (Unknown) — Sun, 28 Jun 2009 22:22:00 -0700

Tips untuk merubah bentuk kursor :

-Klik kanan image yang anda inginkan lalu pilih "save image as"

-simpan di komputer anda

-Login ke blogger. Pada halaman dashboard klik "Tata Letak"

-klik "Tambah Gadget"

-Pilih "Gambar" (dengan klik tanda +)

-Upload file gambar yang telah anda simpan di komputer dan save

-Lihat Blog anda lalu klik kanan

-Klik "View page Source"

-Cari alamat url yang diberikan oleh google untuk file gambar yang anda upload, seperti ini : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtJL1t9ibCL-QkwSr-l46qPSQQlZBJTXw67qSTl9Ts_X77J0WO9-czwyqg-tvywqb0NwQ5ULqoQTaVqR4TPaab82bWIk18MHoib-4RGl_2hXFB7BK_7QuCMxxmqdkilMcD0O4nhPfDzc/s860-r/cur3.gif"

-Copy alamat tersebut

-Masuk kembali ke halaman pengeditaan blog anda

-Klik "Edit HTML"

-Cari style body{ } (untuk mempermudah pencarian kata anda bisa menggunakan keyboard ctr + F)

-Tuliskan teks seperti ini : "cursor:url('paste alamat url yang tadi anda copy disini'), default;

-save tempalate

-Selesai. Cobalah anda lihat lihat perubahan kursor anda dengan mengklik "Lihat Blog"

Membuat form buku tamu

noreply@blogger.com (Unknown) — Fri, 19 Jun 2009 14:47:00 -0700

Di dalam dunia internet seringkali kita menemukan berbagai macam form. Mulai dari yang sederhana sampai yang rumit.
Form-form tersebut disediakan oleh seorang admin atau pemilik website dengan tujuan untuk mendapatkan informasi. Contohnya pada Formulir Buku Tamu, dimana pengunjung sebuah website biasanya diminta untuk mengisikan nama, email, hobby, alamat websitenya
dll. Anda pun bisa membuat form buku tamu seperti itu. Tapi sebelumnya mari kita bahas terlebih dahulu mengenai apa saja
informasi yang ingin kita dapatkan dari pengunjung website kita.
1.Informasi mengenai nama lengkap atau nama panggilan pengunjung.
2.Nama Panggilan
3.Sapaan
4.emailnya
5.alamat websitenya jika punya
6.Pesan dan kesannya terhadap website kita.
Untuk membuat form buku tamu seperti itu kita bisa membuat script seperti di bawah ini :

<html>
<head>
<title> Membuat Buku Tamu </title>
</head>
<body>
<center><font face="verdana" size=3><strong>Formulir Buku Tamu</strong></font>style="color: rgb(51, 102, 255);font-family:verdana;" ><head>
<form action="proses_bukutamu.php" method="post">
<font face="verdana" size=2>
<table>
<tr>
<td>Nama lengkap</td>
<td><input type="text" name="nama_lkp"></td></tr>
<tr>
<td>Nama panggilan</td>
<td><input type="text" name="panggilan"></td></tr>
<tr>
<td>Sapaan</td>
<td><select name="sapaan">
<option value=0 selected>Sapaan
<option value="Bapak">Bapak
<option value="Ibu">Ibu
<option value="Sdr">Sdr.
<option value="Sdri">Sdri.
<option value="Mas">Mas
<option value="Mbak">Mbak
<option value="Bang">Bang
<option value="Non">Non
<option value="Om">Om
<option value="Tante">Tante</td></tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td></tr>
<tr>
<td>website</td>
<td><input type="text" name="website"></td></tr>
<tr>
<td>Pesan dan kesan</td>
<td><textarea name="pesan" rows=8 cols=35></textarea></td></tr>
<tr>
<td colspan=2 align="center"><input type="submit" name="submit" value="Kirim">
</td> </tr>
</td> </tr> </table>
</td> </tr> </table>
</form>
</body>
</html>

simpan script diatas dengan nama "bukutamu.html" dan selanjutnya kita akan membuat script PHP yang akan melakukan proses terhadap pemasukan data-data dari form bukutamu.html tsb,tapi sebelumnya kita harus membuat sebuah database dan sebuah tabel untuk menyimpan data-data tsb.
Misalnya kita buat sebuah database pada MySql dengan nama "databaseku" dan buat sebuah tabel di dalam databaseku dengan nama "bukutamu" seperti ini :

create table bukutamu (
nama_lengkap varchar(50) not null,
nama_panggilan varchar(15) not null,
sapaan varchar(10) not null,
email varchar(30) not null,
website varchar(30) not null,
pesan varchar(255) not null);

lalu buat script PHPnya seperti dibawah dan simpan dengan nama proses_bukutamu.php :

<?php
if (empty($panggilan) or empty($sapaan) or empty($email) or empty($website) or empty($pesan))
{$msg="Ada data yang belum diisi...";
$alamat="bukutamu.html";
header("location:$alamat?msg=$msg");
exit();}

$host="localhost";
$user="";
$pass="";
$db="databaseku";

//Koneksi ke MySql
$koneksi=mysql_connect("$host", "$user", "$pass");

if(!koneksi) //jika tidak terkoneksi
{echo"Gagal melakukan koneksi";
exit;}

//memilih database
$pilihdb=mysql_select_db("$db");

if(!pilihdb) //jika tidak bisa memilih database
{echo"Gagal memilih database";
exit;}

//memasukkan data ke dalam tabel bukutamu
$query="insert into bukutamu(nama_lengkap, nama_panggilan, sapaan, email, website, pesan)values
('$nama_lkp', '$panggilan', '$sapaan', '$email', '$website', '$pesan')";
$result=mysql_query($query, $koneksi);

if($result) //jika berhasil memasukkan data
{echo"<center>
<font face=verdana size=2>Terima kasih atas kesediaan $sapaan $panggilan mengisi buku tamu saya";}

?>

Membuat form registrasi dan login

noreply@blogger.com (Unknown) — Fri, 19 Jun 2009 14:43:00 -0700

Membuat form registrasi dan login

Form registrasi atau pendaftaran dibuat

oleh seorang web programmer untuk mengajak visitor/pengunjung menjadi member atau anggota websitenya. Dan setelah menjadi member maka untuk mendapatka hak akses yang lebih istimewa dibanding pengunjung lain yang belum menjadi member maka ia harus mengisi Form login.
Pada Form registrasi biasanya seorang pengunjung diminta untuk mengisikan bermacam keterangan, sedangkan form login untuk otentikasi bahwa pengunjung tersebut adalah benar seorang member.
Form login umumnya hanya terdiri dari 2 input text, yaitu : username dan password. Untuk lebih jelasnya mari kita bahas setahap demi setahap mengenai cara pembuatan form registrasi dan form login beserta proses otentikasinya.

Sebelum kita membuat form registrasi, terlebih dahulu kita membuat database. Misal namanya "databaseku". Lalu kita buat tabel di dalam database tsb. Misal namanya "table_member" dan untuk mempermudah pembahasan, kita hanya membuat 2 buah kolom untuk tabel tsb :

create table table_member (

username varchar(20) not null,

password varchar(20) not null,

email varchar(50) not null);

Anda bisa menambah atau mengurangi kolom-kolom di atas sesuai kebutuhan. Lalu buat script dibawah untuk membuat form registrasi. Simpan dengan nama "registrasi.html" :
<html>
<head>
<title>Form Registrasi</title>
</head>

<form action="proses_registrasi.php" method="post">
<table align="center">

<tr>
<td> <font face=verdana size=2>Username</td>
<td><input type=text name=username></td></tr>
<tr>
<td> <font face=verdana size=2> Password</td>
<td><input type=password name=password></td></tr>
<tr>
<td colspan=2 align=center><input type=submit value=Kirim></td></tr>
<tr><td></td></tr>
<tr><td>></td></tr>
<tr<td></td</tr>
</table>
</form>
<font color=red size=3><blink><?echo"$msg1";?></blink>

</html>

Lalu kita buat script untuk memproses pemasukan data dari form registrasi tsb. Simpan dengan nama proses_registrasi.php

<?php
if(empty($username) or empty($password) or empty($email)) {$msg="Ada data yang belum diisi..."; $alamat="registrasi.html"; header("location:$alamat?msg=$msg"); exit();}

$host="localhost";
$user="";
$pass="";
$db="databaseku";

//koneksi ke MySql
$koneksi=mysql_connect("$host", "$user", "$pass");

if(!$koneksi) //jika tidak bisa koneksi
{echo"Gagal melakukan koneksi"; exit;}

//memilih database
$pilih_db=mysql_select_db("$db");

if(!$pilih_db) //jika tidak bisa memilih database
{echo"Gagal memilih database"; exit;}

//memasukkan data ke dalam table_member
$query="insert into table_member(username, password, email)values( '$username', '$password', '$email')";
$result=mysql_query($query, $koneksi);

if($result) //jika berhasil
{echo"Terima kasih atas pendaftaran anda"}

?>

Untuk membuat form login buatlah script dibawah ini dan simpan dengan nama "login.html"
<html>
<head>
<title>Proses Login</title>
</head>
<form method=post action=proses_login.php>
<table align=center>
<tr>
<td>
<table align=center cellpading=0 cellspacing=0>
<tr>
<td align=center colspan=3>
Login Member</td>
<tr><center>
<td width=60>Username</td>
<td width=5>:</td>
<td><input type=text name=username size=15></td>
</tr>
<tr><center>
<td width=60>Password</td>
<td width=5>:</td>
<td><input type=password name=password size=15></td>
</tr>
<table>
<tr>
<td><input type=submit value=Submit></td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</form>
</body>
</htm>

Sekarang kita buat script untuk otentikasi login. Simpan script ini dengan nama "proses_login.php"

<?php
$host="localhost";
$user=""; $pass="";
$db="databaseku";

//koneksi ke MySql
$koneksi=mysql_connect("$host", "$user", "$pass");

if(!$koneksi) //jika tidak bisa koneksi
{echo"Gagal melakukan koneksi"; exit;}

//memilih database
$pilih_db=mysql_select_db("$db");

if(!$pilih_db) //jika tidak bisa memilih database
{echo"Gagal memilih database"; exit;}

$query="select password from table_member where username='$username'"; $result=mysql_query($query,$koneksi);
$row=mysql_fetch_row($result);
$kode=md5($password);

if($kode!==$row[0]) /*jika tidak ada password di dalam table_member yang sesuai dengan password yang dimasukkan di dalam form login*/ {$msg="username atau password tidak sesuai. Silahkan ulangi.."; $alamat="login.html"; header("location:$alamat?msg=$msg"); exit();}
else {echo"Selamat datang di website kami...";}

?>

Lihat artikel terkait:
Membuat Form Pada Blogger
Cara Membuat Efek Zoom pada Gambar atau Image
Cara Membuat Template Blog Statis Menjadi Blog Responsif

Membuat counter pengunjung

noreply@blogger.com (Unknown) — Fri, 19 Jun 2009 14:37:00 -0700

Counter pengunjung berguna untuk mengetahui berapa banyak jumlah pengunjung website kita
Untuk membuat counter pengunjung seperti terlebih dulu kita buat tabel pada database "databaseku". Misal kita beri nama tabel "counter"

create table counter(
digit varchar(3) not null);

Buat script PHP dibawah ini dan simpan dengan nama "counter.php";

<?php
$host="localhost";
$user="";
$pass="";
$db="databaseku";

//Koneksi ke MySql
$koneksi=mysql_connect("$host", "$user", "$pass");

if(!koneksi) //jika tidak terkoneksi
{echo"Gagal melakukan koneksi";
exit;}

//memilih database
$pilihdb=mysql_select_db("$db");

if(!pilihdb) //jika tidak bisa memilih database
{echo"Gagal memilih database";
exit;}

$query="select * from counter";
$result=mysql_query($query, $koneksi);
$row=mysql_fetch_row($result);
$hasil=$row[0];
$hasil++;
$query1="update counter set digit='$hasil'";
$result1=mysql_query($query1, $id_mysql);

?>

Setiap script counter.php kita panggil maka nilanya akan bertambah 1

Membuat tampilan waktu/jam

noreply@blogger.com (Unknown) — Fri, 19 Jun 2009 14:36:00 -0700

Untuk membuat tampilan waktu atau jam buatlah script PHP di bawah ini. Simpan dengan nama waktu.php

<?php
$hari["Monday"]="Minggu";
$hari["Sunday"]="Senin";
$hari["Tuesday"]="Rabu";
$hari["Wednesday"]="Rabu";
$hari["Thursday"]="Kamis";
$hari["Friday"]="Jumat";
$hari["Saturday"]="Sabtu";
$hari_inggris=date("l");
$hari_ini=$hari[$hari_inggris];
$tgl_skrg=date(d);

$bulan["January"]="Jan";
$bulan["February"]="Feb";
$bulan["March"]="Mar";
$bulan["April"]="Apr";
$bulan["May"]="Mei";
$bulan["June"]="Juni";
$bulan["July"]="Juli";
$bulan["August"]="Agus";
$bulan["September"]="Sept";
$bulan["October"]="Okt";
$bulan["November"]="Nop";
$bulan["December"]="Des";
$bulan_inggris=date("F");
$bln_skrg=$bulan[$bulan_inggris];
$tahun=date(Y);

$waktu="$hari_ini, $tgl_skrg $bln_skrg $tahun";
echo"$waktu";
?>

Cobalah uji script di atas maka anda akan melihat tampilan : Hari, Tgl Bulan Tahun