Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Buat Menu Tersembunyi dg CSS3: Animated Slide Menu - Box Using CSS3

Mungkin yang ini belum pernah sampeyan lihat karena barangnya benar-benar weton pabrik (keluaran pabrik). Masih kinyis-kinyis dan belom ada goresan sama sekali. Jika sampeyan sudah membuka Hidden Menu yang terpostingkan beberapa waktu yang lalu (menggunakan javascript), kini cobalah bandingkan dengan yang satu ini. Ho ... ho ... pasti sampeyan akan geleng kepala. Ya ..., karena yang satu ini biar tanpa secuilpun javascript akan tetapi mampu menampilkan sebuah bentuk slide menu dengan animasi yang sangat cantik. Secara keseluruhan tampilannya cukup jauh dengan yang pakai script tersebut. Yah ... ini memang kelebihan yang saat ini dimiliki CSS3. Banyak hal yang dulu nggak mungkin, kini bisa kita lakukan dengan amat baik. Sayangnya di IE semua animasi yang ada tak dapat tertampilkan sesuai harapan, yah ..., meski secara umum slide menu/box ini tetap mampu menjalankan peran utamanya sebagai sebuah box/menu tersembunyi. Tak apalah, toh ... tak lama lagi IE-pun pasti akan meluncurkan produk terbarunya yang mampu mengakomidir semua fungsi CSS3. Lhoh ... jelas, toh! Pastinya mereka nggak akan mau kehilangan daya saing dan pasar bisnis yang selama ini mereka raih dan sekaligus banyak menggelemmbungkan kantong mereka. Eman-eman kata wong Jowo.

Untuk membuat CSS3 Animated Slide Menu/Box yang tersembunyi di samping blog ini, kita dapat menyimpan seluruh kode CSS dan xHTML melalui penambahan widget (Add Gadget/Tambah Gadget), atau dengan cara menyimpan kode CSS-nya di template, sedang xHTML melalui penambahan widget. Sangat mudah dan pasti tak akan membutuhkan waktu lama. (He ... he ... yang lama membuatnya, ya , bung! He ... he ... ngabisin 7 piring nasi plus sambal sama tempe bacem 2 biji!).

Silahkan lihat dulu DEMO CSS3 Animated Slide Menu dengan KLIK link demo di bawah ini.

Cara Membuat Menu/Box Tersembunyi (CSS3 Animated Slide Menu)

  1. Login :Login to BloGGeR (Login ke BloGGeR).
    • Tuliskan User Name (Nama Pengguna) atau gunakan Email Address
    • Tuliskan juga Password (Sandi)
    • Setelah pengisian dilakukan dengan benar, KLIK "Login".
    • Tunggu beberapa saat hingga sebuah halaman baru terbuka. Halaman ini adalah "Halaman Dasboard (Dasbor).
  2. Dasboard : Setelah masuk di halaman ini, carilah link "Design (Rancangan)". Silahkan KLIK untuk membukanya.
  3. Design (Rancangan) : Di sini akan sampeyan jumpai "Page Element/Elemen Laman" yang merupakan bagian dari "Design/Rancangan". KLIK "Edit HTML"
  4. Edit HTML : Di bagian inilah semua kode CSS akan di simpan. Carilah kode ]]></b:skin>, kemudian Copy-Paste kode CSS tepat di atasnya. Untuk kode CSS yang dikhususkan bagi Internet Explorer (IE) letakkan di bawahnya. Untuk mencari kode ]]></b:skin> gunakan Ctrl+F dengan cara di KLIK bareng. Dengan menggunakan Ctrl+F, maka pencarian kode menjadi lebih mudah dan cepat.
  5. KLIK "SAVE Template (Simpan Template)".

Kode CSS "CSS3 Animated Slide Menu"

#sidemnu {
background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueKilatH77V82.png) right top no-repeat;
padding: 0;
position: absolute;
left: 0;
width: 480px;
margin-left: -400px;
margin-top: 150px;
-o-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
opacity: 0.4;
}
#sidemnu:hover {
opacity: 1.0;
-o-transform: translate(400px);
-moz-transform: translate(400px);
-webkit-transform: translate(400px);
}
.GRmouseover {
font: 19px Arial Narrrow;
font-weight: bold;
float: right;
margin: 30px 10px 0 0;
color: #FF0000;
text-shadow: 0.01em 0.01em 0.2em #fff;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.GRmouseover:hover {
-o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);
color: #0000FF;
text-shadow: 1px 1px 2px #000;
background: #d3020c; padding: 0 8px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #777;
}
#sidemnu .boxdalam {
padding:10px 5px;
border: 1px solid #333;
background: #bbdce9;
width: 380px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
}
#sidemnu .boxdalam2 {
width: 355px;
color: #000066;
font: 12px Arial;
padding: 20px 10px;
}
#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
#sidemnu .boxdalam h3 {
font: 18px Droid Serif;
font-weight: bold;
color: #914c03;
text-shadow: 0 1px 1px #fff;
border-bottom: 1px dotted #555;
border-top: 1px dotted #555;
background: #a0cbdc;
text-align: center;
}
#sidemnu .boxdalam li {
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/RedArrowH12V10.png) top left no-repeat;
background-position: 0px 3px;
border-bottom: 1px dotted #666;
}
#sidemnu .boxdalam li:hover {
background: none;
}
#sidemnu .boxdalam li a{
padding-left: 20px;
font: 12px Arial Narrow;
color: #000;
text-shadow: 0px 1px 1px #fff;
text-decoration: none;
}
#sidemnu .boxdalam li a:hover{
color: #eee;
background: #222;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 0px 1px red;
line-height: 20px;
margin:0 10px;
}
#sidemnu .boxdalam img {
padding: 2px;
border: 6px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 3s ease;
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
opacity: 0.5;
}
#sidemnu .boxdalam img:hover {
opacity: 1.0;
}

]]></b:skin>

<!--[if IE]>
<style type="text/css">
#sidemnu{filter: alpha(opacity=50);}
#sidemnu:hover {filter: alpha(opacity=100);margin-left:0px;}
</style>
<![endif]-->

x HTML "CSS3 Animated Slide Menu"

<div id="sidemnu">
<div class="GRmouseover">MENU</div>
<div class="boxdalam">
<div class="boxdalam2" style="height:370px;overflow-y:auto;">

<h3>Tutorial Blogger</h3>

<ul>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-2" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-3" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-4" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-5" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-6" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-7" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Tips - Trik Blogger</h3>

<ul>
<li><a href="Link-8" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! </a></li>
<li><a href="Link-9" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-10" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-11" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-12" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-13" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-14" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Buat perjaka yang masih Jomblo</h3>

<img src="http://img.theomegaproject.org/thumbs/2010/04/100.jpg" style="margin:15px auto; width:300px;" />

<h3>Berita Terbaru Sehangat Tahi Ayam</h3>

Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.

</div>
</div>
</div>
xHTML disimpan melalui penambahan widget pada "Page Element (Elemen Laman)". Coba perhatikan langkah yang di atas, di sana ada langkah hingga "Page Element". Setelah sampai pada tahap tersebut, KLIK "Add Gadget (Tambah Gadget)" yang terdapat dalam box bergaris putus-putus. Sampeyan boleh pilih di sembarang Add Gadget. Setelah terlihat berbagai pilihan widget, KLIK "HTML/Javascript", kemudian tunggu beberapa saat. Setelah box penambahan widget terlihat, copy dan pastekan xHTML. Lanjutkan dengan KLIK "SAVE/Simpan".

Keterangan/Catatan :

  1. Ganti Link-1 s/d Link-14 dengan link sesungguhnya, kemudian tuliskan nama/judul setiap menu untuk menggantikan teks yang bertuliskan "Tuliskan Link Title di sini!".
    contoh Link : http://gubhugreyot.blogspot.com/..../SlideMenu.html
  2. Apabila kode CSS akan di simpan melalui penambahan widget, maka kode CSS yang harusnya diletakkan di atas kode ]]></b:skin> di tambahkan tag pembuka dan penutup "style", sehingga bentuknya menjadi seperti di bawah ini :
    <style type="text/css">

    Kode CSS yang di atas ]]></b:skin>

    </style>

    Kode yang harusnya diletakkan di bawah ]]></b:skin> juga diletakkan di bawah kode CSS yang pertama, sehingga bentuknya menjadi :
  3. <style type="text/css">

    Kode CSS yang di atas ]]></b:skin>

    </style>
    <!--[if IE]>
    <style type="text/css">
    #sidemnu{filter: alpha(opacity=50);}
    #sidemnu:hover {filter: alpha(opacity=100);margin-left:0px;}
    </style>
    <![endif]-->

    Di sini xHTML di letakkan

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

3 komentar:

  1. sumpah...
    keren banget blog u..

    BalasHapus
  2. hehe boleh juga nih mas punya sampean.. aku sring baca2 artikel bloger. tp yg paling kren punya mas ....

    BalasHapus

 
GR | Edited by | gubhug reyot