Cara Membuat Menu Accordion Dengan CSS

Sebelumnya sobat mungkin ada yang bertanya-tanya Menu Accordion itu seperti apa sih?? 

Ok Menu Accordion yang bisa disebut juga tab view, tapi tampilannya tidak seperti pada artikel INI yang horisontal tp yang saya share sekarang adalah yang tampilannya vertikal. 

Cara Membuat Menu Accordion Dengan CSS 


1. Login blog
2. Rancangan -> Edit Html (centang "expand widget template")
3. Cari kode ]]></b:skin>
4. Lalu taruh kode dibawah ini diatas kode ]]></b:skin>
 

#acc{background:#ffffff;font:13px trebuchet ms; line-height:1.2em;padding:10px;margin:0;} #acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222; text-shadow:0px 1px 1px #fff; border-bottom:2px solid #444;} #acc h3 a{color:#555} #acc h3 a:hover{color: red} #acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none; border-bottom:2px solid #222;} #acc :target h3 + .post {display:block;height:150px;overflow:auto;} #acc :target h3 a{color:#aa5500}

5. Simpan
6. Lalu buka Rancangan -> tata letak -> add gadget (HTML/JavaScript)
7. Masukkan kode dibawah ini

<div id="acc"> <div id="isi1">

<h3><a href="#isi1"> Judul 1</a></h3> <div class="post"> Masukkan item sobat disini,bisa berupa teks atau widget </div> </div>

<div id="isi2"> <h3><a href="#isi2">Judul 2</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div>

<div id="isi3"> <h3><a href="#isi3">Judul 3</a></h3> <div class="post"> Masukkan item anda disini,bisa berupa teks atau widget </div> </div> </div>

8. Simpan dan lihat hasilnya

NB : tulisan yang berwarna merah ganti dengan judul tab view sobat
tulisan yang berwarna biru ganti dengan isi tab view sobat

Good LUCK ^_^

sumber : http://www.vikrymadz.web.id

 

Continue reading Cara Membuat Menu Accordion Dengan CSS

Cara Membuat Animasi Loading Blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/>

Selanjutnya masukkan kode berikut di atas kode </body>

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>

.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

Continue reading Cara Membuat Animasi Loading Blog

Cara Membuat Bubble Tooltips Dengan CSS Seri 2

Seperti pada umumnya bila hanya menggunakankode CSS, maka pembuatan Bubble Tooltips ini jadi lebih mudah. Lihatlah screenshots Bubble Tooltips yang dimaksud dalam tutorial ini.

Cara membuatnya adalah seperti berikut ini :

1. Pertama masuk ke Edit HTML.
2. Carilah tag </head>

3. Letakkan di atas tag </head> ini
kode css berikut lalu simpan template Anda.

<style type="text/css">

p {
margin: 15px 0;
padding: 5px;
}

p a {
position: relative;
color: #000;
text-decoration: none;
}

a span {
display: none;
}

a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */

a:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
opacity:1.0;
z-index:10;
top: 5px;
left: 40px;
width: 220px;
border: 2px solid #f00;
-moz-border-radius: 0px 8px 0px 8px;
background-color: #ffff00;
color: #f00;
padding: 10px;
font-size: 12px;
}

p.test a }

</style>

KETERANGAN :

Anda bisa sesuaikan warna border, warna background dan warna teksnya dengan warna yang Anda sukai.

4. Penggunakan kode pada linknya,
awali dengan kode <p class="test"> sebelum link yang Anda miliki.

Contohnya jadi seperti ini :

<p class="test">

<a target="_blank" href="URL link Anda">Judul link<span>Teks kalimat tooltips</span></a></p>

Selamat mencoba, good luck!

Continue reading Cara Membuat Bubble Tooltips Dengan CSS Seri 2

Cara Membuat Bubble Tooltips Dengan CSS Seri 1

Jalan-jalan menelusuri gemerlapnya dunet (dunia internet) tidak sia-sia. Buktinya pada hari ini Saya dapat " berbagi " kepada Sobat semua tentang Cara Membuat Bubble Tooltips Dengan CSS yang pembuatannya sangat simpel seperti pada umumnya bila kita menggunakan kode CSS. Sebelumnya, seperti biasa blog ini selalu menusahakan setiap tutorialnya disertai dengan contohnya. Tujuannya hanya satu agar tutorial ini benar adanya dan Anda bisa melihat terlebih dahulu sebelum membuatnya. Sorot atau arahkanlah cursor Anda pada link-link yang ada di blog ane :

Untuk membuatnya, langkahnya sebagai berikut :

1. Pertama masuk ke Edit HTML.
2. Carilah tag </head>
3. Letakkan di atas tag </head> ini
kode css berikut lalu simpan template Anda.

<style type="text/css">
body{font: 14px Arial,sans-serif; background: transparent; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg0Or8yU8PXfzcoA6jwqprxcMQIazCdj2RzPfaF1cNxjHnWczoLbYpW6tXEVtqsdK7QkY-evLTj-_BhAg7WQ3P9T-mMqSpEdf0D-CAA9alqZyeNL8CDoKdcETxLrGPXARefQHLzExSuo/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NQ5aKwqGzQKHFM8Jlch7HY0JhNZLvfUCFcvwXvCJkpK2FXr0jkmeBh7kJt9Rm5_g9EjDJjfp6taGcVUhcHAZuzQeoquKCB9jvk2HdeU73TNLLKBgVnWcb5rG2sZzePG5cZxysXxteFI/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPg0Or8yU8PXfzcoA6jwqprxcMQIazCdj2RzPfaF1cNxjHnWczoLbYpW6tXEVtqsdK7QkY-evLTj-_BhAg7WQ3P9T-mMqSpEdf0D-CAA9alqZyeNL8CDoKdcETxLrGPXARefQHLzExSuo/) no-repeat bottom;
}
</style>

4. Penggunakan kode pada linknya, sisipkan
kode class="tt", class="tooltip", class="top",
class="middle" dan class="bottom"
pada setiap link Anda.

Contohnya seperti ini :

<a href="URL Anda di sini" class="tt">Keterangan link<span class="tooltip"><span class="top"></span><span class="middle">Teks tooltipsnya di sini</span><span class="bottom"></span></span></a>

Selamat mencoba, good luck!

Continue reading Cara Membuat Bubble Tooltips Dengan CSS Seri 1