SUNSET COMUNITY: Trik Blog

Untuk sementara gw mau ngebahas banner dengan format gif untuk yang format flash atau swf mungkin lain waktu karena gw masih bingung cari kode yang cocok untuk banner berbentuk swf klo ada teman-teman ada yang tau silahkan beritahu, aku sangat mengharapkan bantuan kalian semua

Mungkin ada teman-teman blogger yang belum tau cara bikin banner yang bisa bergerak dan tertarik untuk mencobanya. Sebenarnya ada berbagai macam cara untuk membuat banner bergerak atau kita sebut saja banner animasi.

Yang pertama melalui website penyedia banner. Dengan website tersebut bentuk banner sudah disediakan dengan bermacam-macam pilihan tinggal kita ganti text yang ingin di tampilkan pada banner tersebut. Memang sangat gampang membuat banner di website tersebut Tapi cendrung tampilannya jadi lebih sederhana dan akan menghambat kreatifitas teman-teman.

Yang kedua menggunakan software. Ada bermacam-macam software yang bisa digunakan untuk membuat banner animasi klo yang aku tau sih cuman dua yaitu Flash Banner Maker dari aleosoft.com sama Easy Gif Animator maklum pengetahuanku terbatas he…he..Software diatas merupakan software yang ada versi gratisnya jadi tenang aja yang lagi boke juga bisa menggunakan software ini Dengan mengunakan software tampilannya bisa jadi lebih beragam karena fiturnya cendrung lebih banyak.

Ok terserah mau pake yang mana aja klo sudah jadi tinggal di upload ke website yang bisa melayani upload-meupload. Soalnya klo ga di upload banner jadi ga bisa dipasang karena harus menggunakan HTMLnya. Klo ada yang bilang caranya berbelit-belit terserah setahu gw belum ada tuh teknologi canggih yang bisa masang banner tinggal browse di computer hee..he…. bercanda

Ada berbagai macam website yang melayani upload seperti imgeshack, photobucket. Tapi yang paling sering digunakan yaitu photobucket termasuk gw
Oleh karena itu saya akan menerangkan pemakaian jasa website photobucket
Yang belum punya akun di photobucket silahkan dafatr dulu di www.photobucket.com
Berikut langkah-langkahnya:
-Login ke photobucket dengan akun yang sudah kamu buat
-Terus paling samping di samping kanan ada pilihan browse file dari web atau dari computer pilih dari komputer klo filemu ada di computer
-Klo sudah nemu file yang mo di upload klik tulisan upload terus tinggal tunggu proses upload
-Nah tahap terakhir untuk m,emperoleh kode htmlnya klik kanan file yang sudah di upload pilih view terus copy htmlnya

Nah ko sudah tinggal cari kode untuk menampilkan banner tersebut….. tenang ga usah khawatir gw akan tuliskan kodenya disini

1. Log In dulu ke account blogger Anda
2. Setelah itu klik Layout > Edit HTML
3. Kemudian masukkan kode di bawah ini diatas ]]>skin

/************************************************
* Navbar *
************************************************/

#navbarmenu {
background: #1A4E88;
width: 960px;
height: 30px;
color: #FFFFFF;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
}

#navbarmenuleft {
width: 660px;
height: 30px;
float: left;
margin: 0px;
padding: 0px;
}

#navbarmenuright {
width: 300px;
height: 30px;
float: right;
margin: 0px;
padding: 0px;
text-align: right;
}

#nav {
margin: 0px;
padding: 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav ul li {
list-style: none;
margin: 0px 0px 0px -1px;
padding: 0px;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px 20px 0px 0px;
padding: 8px 10px 7px 10px;
}

#nav li a:hover, #nav li a:active {
background: #4A7EB8;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 20px 0px 0px;
padding: 8px 10px 7px 10px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #4A7EB8;
color: #FFFFFF;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #1A4E88;
color: #FFFFFF;
}

#nav li {
float: left;
padding: 0px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0px;
padding: 0px;
}

#nav li li {
}

#nav li ul a {
width: 160px;
}

#nav li ul a:hover, #nav li ul a:active {
}

#nav li ul ul {
margin: -27px 0 0 162px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#searchdiv {
margin: 0px;
padding: 0px;
}

#searchform {
margin: 0px;
padding: 4px 0px 0px 0px;
}

#s {
background: #FFFFFF;
width: 210px;
color: #333333;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
padding: 3px;
margin: 0px 0px 0px 0px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
}

#sbutt {
background: #1A4E88 url(images/submit.png);
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0px;
border: 1px solid #FFFFFF;
}

#name, #email, #url {
background: #EAEAEA !important;
color: #202020;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
4. Lalu Masukan kode di bawah ini di antara <body>
</div>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a>
<ul>
<li><a href='http://www.blogger.com'>BLOGGER</a></li>
<li><a href='http://www.facebook.com/sunardi.doank?ref=profile'> My Facebook</a></li>
<li><a href='http://stmik-kharisma.ac.id/stmik/'>My Kampuz</a></li>
</ul></li>

<li><a href='http://sunsetcom.blogspot.com'>Ilmu Komputer</a>

<ul>
<li><a href='#'>Desain Grafis</a>

<ul>
<li><a href='#'>Tutorial Autocad</a></li>
</ul>
</li>

<li><a href='#'>Tips Bermain Games</a>

<ul>
<li><a href='#'>Games Strategy</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Handphone</a>

<ul>
<li><a href='#'>Tutorial Software Handphone</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Internet</a>

<ul>
<li><a href='#'>Tips Internet</a></li>
<li><a href='#'>Tips SEO</a></li>
<li><a href='#'>Tutorial Blog</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Komputer</a>

<ul>
<li><a href='#'>Belajar Membuat Virus</a></li>
<li><a href='#'>Belajar Memperbaiki Komputer</a></li>
<li><a href='#'>Belajar Menjadi Hacker</a></li>
<li><a href='#'>Belajar Merakit Komputer</a></li>
<li><a href='#'>Istilah-istilah Komputer</a></li>
<li><a href='#'>Mempercepat Kinerja PC</a></li>
<li><a href='#'>Tutorial Anti Virus</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Linux</a>

<ul>
<li><a href='#'>Linux Berbasis Text</a></li>
</ul>
</li>

</ul>
</li>

<li><a href='#'>My Friend's</a>

<ul>
<li><a href='http://www.septian-gusonela.blogspot.com'>Septian</a>
</li>

<li><a href='http://ainuamri.wordpress.com'>Kumpulan Cerita Lucu</a>
</li>

<li><a href='#'>Paid To Click</a>
<ul>
<li><a href='#'>Bukti Pembayaran Paid To Click</a></li>
<li><a href='#'>Macam-macam Paid To Click</a></li>
<li><a href='#'>Tutorial Paid To Click</a></li>
</ul>
</li>

<li><a href='#'>Paid To Surf</a>
<ul>
<li><a href='#'>Macam-macam Paid To Surf</a></li>
<li><a href='#'>Tutorial Paid To Surf</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Affiliate</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Affiliate</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Click</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Click</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Download</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Download</a></li>
<li><a href='#'>Tutorial Pay Per Download</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Review</a>
<ul>
<li><a href='#'>Bukti Pembayaran Pay Per Review</a></li>
<li><a href='#'>Macam-macam Pay Per Review</a></li>
<li><a href='#'>Tutorial Pay Per Review</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Sell</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Sell</a></li>
<li><a href='#'>Tutorial Pay Per Sell</a></li>
</ul>
</li>

<li><a href='#'>Pay Per SignUp</a>
<ul>
<li><a href='#'>Macam-macam Pay Per SignUp</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Survey</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Survey</a></li>
</ul>
</li>

</ul>
</li>

<li><a href='#'>Materi</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Materi%20Islam'>Materi Islami</a>
</li>
</ul>
</li>

<li><a href='#'>Bisnis</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Pulsa%20Murah'>Bisnis Pulsa</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Pendaftaran'>Pendaftaran</a></li>
<li><a href='http://sunsetcom.blogspot.com/search/label/Cara%20Deposit'>Cara Deposit</a></li>
<li><a href='http://sunsetcom.blogspot.com/search/label/Cara%20Transaksi'>Cara Transaksi</a></li>
</ul>
</li>
<li><a href='http://www.kartuajaib.com/?id=kakashu'>Bisnis Pulsa Juga</a></li>
<li><a href='http://www.paypalbisnis.com/?ref=kakashu'>Paypal Bisnis</a></li>
<li><a href='#'>Free Download Music</a></li>
<li><a href='#'>Free Download Software</a></li>
<li><a href='#'>Free Download Template</a></li>
<li><a href='#'>Free Download Video</a></li>
<li><a href='#'>Free Download Virus</a></li>
</ul>
</li>

<li><a href='http://sunsetcom.blogspot.com/search/label/Free%20Download'>Free Download</a>
<ul>
<li><a href='http://www.blogger.com'>BLOGGER</a></li>
<li><a href='http://www.facebook.com/sunardi.doank?ref=profile'> My Facebook</a></li>
</ul></li>

</ul>
</div>

5. Lalu Ganti tanda '#' sesuai dengan link yang di inginkan
6. Simpan dan hasil akan tampak seperti gambar di bawah ini

SUNSET COMUNITY

Rabu, 06 Januari 2010

Membuat Link Banner

Selasa, 05 Januari 2010

Cara Membuat Banner Bergerak

Senin, 14 September 2009

Membuat Menu DropDown

CONTENT ISLAM

TRANSLATE

Blog Archive

FOLLOWERS

FRIENDS BANNERS

TUKERAN LINK

LABELS

Kurs Mata Uang

Boleh di Klik....................

I AM BLOGGER

FEEDJIT Live Traffic Feed

MY STATIK