Post Game

Cara Membuat Table dengan HTML bagian 2

 
<table border="1">
 <tr>
 <th rowspan="2">NPM</th>
 <th rowspan="2">Nama</th>
 <th colspan="2">Mata Kuliah</th>
 </tr>
 <tr>
 <th>Nilai Bahasa Indonesia</th>
 <th>Nilai PBO</th>
 </tr>
 <tr>
 <td>1920133</td>
 <td>roy purbo</td>
 <td align="center">A</td>
 <td align="center">A</td>
 </tr>
</table>

 
<table border="1" cellpadding="1" cellspacing="0">
 <tr bgcolor="#3785ee">
 <th rowspan="2">NPM</th>
 <th rowspan="2">Nama</th>
 <th colspan="2">Mata Kuliah</th>
 </tr>
 <tr bgcolor="#3785ee">
 <th>Nilai Bahasa Indonesia</th>
 <th>Nilai PBO</th>
 </tr>
 <tr bgcolor="a9c9f4">
 <td>1920133</td>
 <td>roy purbo</td>
 <td align="center">A</td>
 <td align="center">A</td>
 </tr>
</table>

Go to link Download

Cara membuat tabel dengan HTML bagian 1

 
 <table border="1">
 <tr>
 <th>NPM</th>
 <th>Nama</th>
 </tr>
 <tr>
 <td>1920133</td>
 <td>roy purbo</td>
 </tr>
</table> 

Go to link Download

Cara membuat Komik Bagian 1 Pengembangan Komik

Bagian 1 : Pengembangan Komik

 

1. Tulis dasar-dasarnya. Sebuah komik adalah, dasarnya, sebuah narasi yang diceritakan melalui gambar yang berurutan, disebut frame atau panel. Bahkan komik “single frame” harus memiliki sensasi bergerak ke depan. Dengan begitu, sebuah komik tidak jauh berbeda dari bentuk cerita lainnya, dan mengikutidhshmengikutidhshjmengikuti ketentuan tertentu.

• Latar belakang. Sebuah cerita berlatar belakang di suatu tempat. Bahkan jika dasarnya hanya putih polos, itu tetap suatu latar. Latar belakang merupakan dasar pergerakan karakter Anda, dan bergantung pada cerita Anda bisa menjadi bagian pelengkap dalam narasi.
• Karakter. Anda membutuhkan karakter untuk cerita Anda. Karakter Anda menggerakkan aksi, membicarakan dialog, dan merekalah yang membina hubungan dengan pembaca. Kembangkan karakter dengan waktu; ini sangat penting terutama untuk komik yang membentuk narasi panjang.
• Konflik. Tiap cerita membutuhkan konflik untuk mendorongnya. Ini bisa menjadi dasar cerita, alasan dari apa yang dilakukan karakter Anda. Ini bisa sederhana seperti memeriksa kotak surat atau rumit seperti menyelamatkan alam semesta.
• Tema. Tema dari komik Anda adalah yang mendorong kreasi tiap harinya. Tema Anda juga akan menentukan pembaca. Jika Anda menulis komik komedi, bagaimana pembawaan leluconnya? Jika Anda menulis cerita romantis, apa pelajaran yang bisa diambil?
• Nada. Ini adalah suasana dalam komik Anda. Apakah Anda menulis suatu komedi? Apakah cerita Anda lebih mendekati drama? Mungkin Anda berniat membuat kartun politik. Kemungkinannya tidak terbatas. Kombinasikan komedi dengan drama, buat cerita yang gelap, atau ringan. Tulis cerita romantis, atau thriller politik menyeramkan.
• Nada Anda akan diekspresikan melalui dialog, teks naratif, dan visual.

 

2. Tulis mengenai apa yang Anda ketahui. Salah satu cara membuat komik Anda terasa realistis adalah dengan menulis apa yang Anda ketahui. Ini juga akan membantu Anda menguasai tulisan, dan mencegah Anda meniru komik lain.

 

3.Tentukan gaya. Karena Anda membuat komik, gaya visual Anda aka menjadi aspek pertama yang ditemui pembaca. Pilih gaya yang cocok dengan nada dan juga cerita Anda, serta gambaran dalam pikiran Anda.

• Cobalah beberapa gaya yang berbeda sampai Anda menemukan yang paling mudah Anda gambar dan tulis. Ada beberapa variasi gaya populer yang bisa Anda latih lalu sesuaikan dengan kebutuhan Anda. Berikut beberapa contoh:
  • Anime/Manga
  • American Superhero
  • Sprites/Clip art
  • Noir
  • Stick figures
  • Sunday funnies
• Drama biasanya mengharuskan gaya visual yang lebih terperinci dibandingkan komedi. Namun, ada beberapa pengecualian, sama halnya dengan semua peraturan saat menciptakan sesuatu.

 

 

4.Pilih format. Tidak ada ketentuan untuk menentukan format, namun komik biasanya jatuh ke dalam 3 kategori: Single frame, Strip, dan Page length (buku koik). Cobalah format yang berbeda sampai Anda menemukan yang sesuai dengan cerita, karakter, dan latar belakang Anda.

• Komik single frame biasanya hanya untuk komedi. Komik ini tidak memerlukan pengaturan yang banyak, dan bergantung pada visual lucu serta satu atau dua baris dialog. Anda bisa kesulitan dalam membentuk narasi menggunakan single frame, jadi kebanyakan bisa dibaca pada urutan apapun. Komik politik juga biasanya satu atau dua frame.
• Komik strip merupakan suatu urutan frame. Tidak ada ukuran panjang tertentu untuk sebuah strip, walaupun kebanyakan terdiri dari satu atau dua baris yang masing-masing memiliki 2-4 frame. Ini merupakan salah satu format yang paling populer untuk kebanyakn komik web dan lelucon harian, karena format ini membolehkan perkembangan naratif namun masih cukup pendek untuk di produksi secara rutin.
• Comic page lebih besar dari membuat strip. Memiliki satu lembar penuh untuk membuatnya memberikan lebih banyak kebebasan untuk memanipulasi frame, namun juga berarti Anda membutuhkan lebih banyak konten per lembar. Membuat lembar komik penuh biasanya dilakukan untuk itu gambar membuam

Sumber : Wiki How

Go to link Download

Cara Membuat Efek Fadeout Di Bagian Bawah Blog CSS

 Sebenarnya saya sudah tau cara ini dari dulu tapi karena sekarang-sekarang banyak yang make jadi tidak ada salahnya juga saya postingin Cara Membuat Efek Fadeout Di Bagian Bawah Blog, Efek ini di bilang cukup keren juga buat saya karena kalo diliat liat serasa gimana gitu hahaha

#bottom_fade {
    position:fixed;
    bottom: 0;
    height:100px;
    width: 100%;
    background: linear-gradient(bottom, white, transparent);
    background:-o-linear-gradient(bottom, white, transparent);
    background:-moz-linear-gradient(bottom, white, transparent);
    background:-ms-linear-gradient(bottom, white, rgba(0, 0, 0, 0));
    background:-webkit-linear-gradient(bottom, white, transparent);
    background:-webkit-gradient(linear, left bottom, left top, from(white), to(transparent));
    z-index: 999;
}

<div id=bottom_fade/></div>

Go to link Download

Cara membuat website dengan HTML bagian 2

 
<table width="960" height="814" border="1" align="center" cellpadding="0" cellspacing="0" style="border:thin">
 <tr>
 <td height="118" colspan="4"><img src="blog/header-mana1.jpg" width="960" height="200" /></td>
 </tr>
 <tr bgcolor="#006699" bordercolor="#CCCCCC">
 <td width="214" height="25"><div align="center"><strong>Home</strong></div></td>
 <td width="222"><div align="center"><strong>Artikel</strong></div></td>
 <td width="284"><div align="center"><strong>Buku Tamu </strong></div></td>
 <td width="234"><div align="center"><strong>About</strong></div></td>
 </tr>
 <tr>
 <td colspan="3" rowspan="2"><div align="left">
 <p><strong><em>Judul Artikel</em></strong></p>
 <div align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam. Heading H1Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae.
 </div>
 </div></td>
 <td height="28" bgcolor="#999999"><div align="center" class="style1">Kategori</div></td>
 </tr>
 <tr>
 <td rowspan="2"> </td>
 </tr>
 
 <tr>
 <td height="196" colspan="3"><table width="725" height="467" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td height="21" colspan="3" bgcolor="#006699"><div align="center">Galleri</div></td>
 </tr>
 <tr>
 <td width="235"><img src="blog/sponge.jpeg" width="235" height="214" /></td>
 <td width="235"><img src="blog/Spongebob Squarepants.jpg" width="235" height="214" /></td>
 <td width="470"><img src="blog/SpongeBob-SquarePants-p78.jpg" width="235" height="214" /></td>
 </tr>
 <tr>
 <td><img src="blog/images12.jpeg" width="188" height="171" /></td>
 <td><img src="blog/casper.jpg" width="235" height="214" /></td>
 <td><img src="blog/sosialisasi.jpg" width="235" height="214" /></td>
 </tr>
 </table></td>
 </tr>
 <tr bgcolor="#006666">
 <td height="1" colspan="4"><div align="center">Footer</div></td>
 </tr>
 </table>

• Saya menggunakkan header dengan ukuran 960x200.
• <img ... > gunanya untuk menampilkan gambar di website.

Go to link Download

Cara Membuat Bagian Posting Blog Tidak Bisa di Copas Kecuali Blockquote

Cara Membuat Bagian Posting Blog Tidak Bisa di Copas Kecuali Blockquote. Trik yang satu ini akan saya berikan tanpa kode script. Tetapi dengan CSS. Lebih tepatnya kita akan membuat hanya elemen blog yang dipilih saja yang tidak dapat di blok dan copy paste. Misalkan kita akan membuat anti copas pada posting kecuali blockquote. Jadi, pengunjung akan tetap bisa mengcopy bagian blockquote / kode kode nya saja tetapi artikel atau kalimat kalimatnya tidak bisa.

Trik ini memiliki fungsi yang sama dengan Membuat Seluruh Blog Tidak Bisa Di Copas dan Membuat Blog Anti Klik Kanan yaitu sama sama memproteksi blog dari tangan tangan jahil yang senang copas artikel sembarangan. Mungkin inilah yang sering saya jumpai. Banyak blogger blogger yang tidak niat membuat postingan, ia akan copas dari blog lain.

Dengan memasang CSS anti copy paste pada salah satu elemen kita dapat memilih pada bagian mana pada blog yang ingin di buat anti blok atau copas. Mau tahu cara lengkapnya? Simak dan terapkan tutorial dibawah ini.

Cara Membuat Bagian Posting Blog Tidak Bisa di Copas Kecuali Blockquote

1. Login ke Blogger
2. Pada dashboard, pilih blog anda lalu masuk ke Template, Edit HTML
3. Selanjutnya, silahkan cari css dari bagian blog anda yang ingin dibuat anti copas.
Contoh, halaman posting.
4. Cari kode .post lalu isikan kode berikut ini didalam CSS tersebut.

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-moz-user-select:none}

Jadi, rangkaian kode CSS post anda menjadi

.post {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-moz-user-select:none;
}

5. Nah, sekarang pertanyaannya "Bagaimana membuat Kode dalam Postingan Bisa di Copas?" Tadi kita membuat dokumen posting menjadi anti blok semua jadi, blockquote atau semacamnya pun tak dapat di copas. Untuk mengaktifkannya, kita perlu mencari kode css blockquote. Caranya cukup menambahkan kode berikut ini

.post blockquote{


-webkit-touch-callout:text;


-webkit-user-select:text;


-khtml-user-select:text;


-ms-user-select:text;


-moz-user-select:text;


}

Di dekat kode CSS posting atau dibawah kode .post

6. Sekarang tinggal terserah anda saja bagian mana yang ingin anda buat tidak bisa di copas.

Jadi, apabila anda ingin membuat elemen menjadi tidak dapat di blok / copas isikan kode nomer 4
Dan kalau ingin supaya elemen yang dibuat tidak dapat dicopas tapi ingin diaktifkan agar bisa di copas, pakai kode nomer 5. Diubah none sama text nya saja

7. Jika sudah, klik Simpan Template dan blog sudah tidak bisa di drag, blok dan copas kecuali blockquote.

Tutorial ini memang memang membutuhkan pemahaman lebih lanjut mengenai HTML dan CSS. Untuk itu, anda yang belum tahu banyak tentang kode tersebut, silahkan baca di Definisi HTML & CSS + Tutorial. Sekian postingan dari Jona Rendra yang berjudul Cara Membuat Bagian Posting Blog Tidak Bisa di Copas Kecuali Blockquote, semoga berguna untuk anda. Apabila ada kesulitan saat mempraktekkannya, silahkan tanyakan melalui komentar dibawah.

Go to link Download

Cara Membuat Slot Banner Slider Menjadi 2 Bagian

/*ARSlider*/
#slider4 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask4 {
overflow:hidden;
}
#slider4:hover #pause {
opacity:1;
}
#slider4:hover #progress {
background-color:#DDD;
}
#slider4:hover ul, #slider4:hover #progress, #slider4:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause4 {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress4 {
width:1px;
height:1px;
background-color:transparent;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay4 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider4 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider4 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider4 li:last-of-type {
background-color:#362c30;
}
#slider4 li a {
display:block;
text-decoration:none;
}
#slider4 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #000000;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider4 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:Communist-Regular;
text-shadow:1px 1px 1px #362c30;
}
/*ARSlider*/
#slider3 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask1 {
overflow:hidden;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover #progress1 {
background-color:#DDD;
}
#slider3:hover ul, #slider:hover #progress1, #slider:hover #overlay1 {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:transparent;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider3 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider3 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #000000;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:Communist-Regular;
text-shadow:1px 1px 1px #362c30;
}

<div id=slider3>
<div id=mask1>
<ul><li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
</ul>
</div>
<div id=progress1/>
<div id=overlay1/>
<div id=pause1/>
</div>
  </div>
<div style=float:right;margin-right:50px;>
<div id=slider4>
<div id=mask4>
<ul><li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
<li>
<a href=http://anonymous-revenge.blogspot.com/> <img alt=AR src=http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png title=Anonymous Revenge/></a></li>
</ul>
</div>
<div id=progress4/>
<div id=overlay4/>
<div id=pause4/>
</div>
  </div>

Go to link Download

Cara membuat menu Dropdown menambah bagian bawah menu laman dengan mudah

Cara Membuat Dropdown Menu di Blogspot - Belakangan banyak teman-teman yang menanyakan kepada saya, bagaimana cara membuat menu tapi dengan tampilan ke bawah. Walaupun sudah terjawab satu-persatu tapi ada baiknya sekalian saya post disini. Mungkin teman-teman blogger sekalian ada yang membutuhkannya.

#DropdownMenu {
 background:#ff6803;
border-radius:6px;
 width: 880px;
 height: 35px;
 font-size: 12px;
 font-family: Arial, Tahoma, Verdana;
 color:#FFFFFF;
 font-weight: bold;
 margin-bottom: 30px;
 padding: 2px;


} 
#Dropdownbox {
 width: 875px;
border-radius:6px;
 float: left;
 margin: 0;
 padding: 0;
}

#strike { 
border-radius:6px;
 margin: 0;
 padding: 0;
}
#strike ul {
border-radius:6px;
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
}
#strike li {
border-radius:6px;
 list-style: none;
 margin: 0;
 padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
 color:#FFFFFF;
 display: block;
 font-size: 16px;
 font-family: Georgia, Times New Roman;
 font-weight: normal;
 margin: 0;
 padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
 background:#FFFFFF;
 color:#ff6803;
 margin: 0;
 padding: 9px 15px 8px;
 text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
 background:#ff6803;
 width: 150px;
 color:#FFFFFF;
 font-size: 14px;
 font-family: Georgia, Times New Roman;
 font-weight: normal;
 float: none;
 margin: 0;
 padding: 7px 10px;
 border-bottom: 1px solid #FFF;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
 background:#FFFFFF;
 color:#ff6803;
 padding: 7px 10px;
}
#strike li {
border-radius:6px;
 float: left;
 padding: 0;
}
#strike li ul {
border-radius:6px;
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 170px;
 margin: 0;
 padding: 0;
}
#strike li ul a {
border-radius:6px;
 width: 140px;
}
#strike li ul ul {
border-radius:6px;
 margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
 left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
 left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
 position: static;
}

<div id="DropdownMenu">
 <div id="Dropdownbox">
 <ul id="strike">
 <li><a href="#">Menu1</a></li>
 <li>
 <a href="#">Menu2</a>
 <ul>
 <li>
 <a href="#">Sub Menu 2</a>
 <ul>
 <li><a href="#">Sub Sub Menu 2</a></li>
 <li><a href="#">Sub Sub Menu 2</a></li>
 <li><a href="#">Sub Sub Menu 2</a></li>
 </ul>
 </li>
 <li><a href="#">Sub Menu 3</a></li>
 <li><a href="#">Sub Menu 4</a></li>
 <li><a href="#">Sub Menu 5</a></li>
 <li><a href="#">Sub Menu 6</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a></li>
 </ul>
 </div>
 </div>

Go to link Download