Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Push Down Panel Dengan CSS3 di Blog

Push Down Panel
Membuat Push Down Panel Dengan CSS3 di Blog – ini merupakan fitur elegant untuk menggantikan fungsi tombol show hide pada blog. Jika kita perhatikan terkadang bagian dari konten posting di blog adalah terdapat tombol show hide yang berfungsi untuk menampilkan dan menyembunyikan konten yang berada didalamnya, dengan adanya Push Down Panel ini maka fungsi dari tombol show hide tersebut dapat digantikan atau dengan kata lain di ambil alih. Hasilnya adalah dengan menggunakan Push Down Panel ini maka konten akan menjadi variatif dan tentu saja lebih elegant. Dilain sisi, fitur dari Push Down Panel ini dapat menyesuaikan isi konten dengan mudah atau dengan kata lain apabila isi konten yang terdapat didalamnya sangat banyak maka konten tidak akan bergerak memanjang kebawah melainkan akan menampilkan fungsi scroll yang dapat meminimalis konten posting blog. Untuk melihat seperti apa lebih jelas dan detailnya maka bisa terlebih dahulu dilihat pada demo, dan untuk menerapkannya kedalam blog maka berikut adalah penyajiannya mengenai tutorial cara Membuat Push Down Panel Dengan CSS3 di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Push Down Panel
div.css3droppanel {
position: relative;
margin: 0;
margin-bottom: 1em;
}

div.css3droppanel > div {
height: 10px;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: #b5e5e0;
position: relative;
opacity: 0;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}

div.css3droppanel:after {
content: '';
display: block;
bottom: 0;
position: absolute;
width: 100%;
height: 10px;
box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
background: #5a1619;
background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
}

div.css3droppanel input[type="checkbox"] {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
z-index: 10;
cursor: pointer;
opacity: 0;
}

div.css3droppanel input[type="checkbox"]:checked ~ div {
height: 250px;
opacity: 1;
overflow: auto;
}

div.css3droppanel label {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
cursor: pointer;
z-index: 5;
background: #5a1619;
background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;
}

div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;
}

div.css3droppanel label:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: white transparent transparent transparent;
top: 18px;
left: 18px;
box-shadow: 0 0 7px gray inset;
}
3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Push Down Panel Dengan CSS3 di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="Click to open Panel"></label>
<div class="content">
<p> TULISKAN ISI KONTEN DISINI </p>
Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan teks yang di inginkan.

DEMO:

Faceblog Evolutions adalah situs blogging sederhana yang berisikan tentang tips-trik turorial blogger dan teknik maupun taktik seo serta berbagai informasi terkini yang mudah-mudahan memberikan solusi yang berguna dan bermanfaat bagi kita semua. Semoga Faceblog Evolutions dapat menjadi media informasi, solusi dan inspirasi. Faceblog Evolutions mempunyai menu navigasi yang lengkap dan tersusun rapi, yang tentunya akan mempermudah anda dalam memperoleh apa yang ada di sitemap/daftar isi menu Faceblog Evolutions dengan tepat sasaran. Saya juga berusaha menampilkan sebaik mungkin dari yang terbaik untuk selalu membuat dan menampilkan isi artikel yang SEO dan bermanfaat untuk visitor. Selalu semangat dalam mengarungi dunia maya, untuk menempuh perjalanan sejauh 1000 mil dimulai dengan 1 langkah.

Nama Admin Faceblog Evolutions adalah Andes Rizky Nugroho, pria berpostur tubuh kurus dan ganteng dunia akhirat (amin).

Demikian Selayang Pandang mengenai Faceblog Evolutions, semoga semoga bermanfaat dan bisa menjadi Media Informasi, Solusi dan Inspirasi dalam melaksanakan aktivitas sehari-hari dan dalam mengarungi Dunia Maya, untuk menempuh Perjalanan sejauh 1000 mil dimulai dengan 1 langkah. Saya berdoa untuk visitor Faceblog Evolutions semoga selalu diberikan rahmat, kesehatan, berkah. rejeki dan Sukses Dunia Akhirat (Amin).

Berlangganan artikel via email

19 Response to "Membuat Push Down Panel Dengan CSS3 di Blog"

SOLARRRR....
mantep sih gan.... nih... tapi klao kebanyak.. yang di pasang bikin bera blog ga sih gan?

Balas

Wah bagus juga nih gan infonya... makasih udah share :)

Balas

wah keren bgt setelah sya lihat demonya..
kayaknya mas andes ini lihai sekali bermain css ya..hehe
thanks sharingnya. lain kali saya coba terapkan :))

Balas

kerenn..ijin sedot sobat....

happy blogging !!

Balas

saya tuh heran, kok ndak kehabisan akal. kreatif banget sampeyan iki. huh....

Balas

Bisa jadi pengganti spoiler nih ceritanya! :D | Secara penampilan panel nya pun lebih menarik dibanding spoiler biasa. Mantab mas! :)

Balas

terimakasih tipsnya kawan...mamang izin pasang ya

Balas

makasih atas infonya gan :) nice tutorial css3

Balas

sweer dah, klo bukan bidangnya memang bikin pusing, rumit pastinya tu

Balas

pengaruh ke loding blognya ndak ya.... izin nyimak, terus pasang

Balas

bagus tutorialnya.. terima kasih.. :D

Balas

wah, soal ngedit html saya mundur deh. kagak berani euy....

Balas

asyik asyik nih tutornya dari mas andes....
selalu anget n' fresh...hehe :)

Balas

Keren banget mas tutorialnya. top banget dah

Balas

Harus banyak belajar dan menyimak terus nih tentang tutorial CSS3 nya, terima kasih telah berbagi.

Balas

keren nih .. cssnya bisa dikurangin gak :D

done followed ^^ #66 .update terus.

Balas

wah keren nih gan,,,, top markotop dah :)

Balas

Bisa ga' mas kalau pakai efek hover saja ? jadi tanda ujung panah mengarah ke bawah tidak perlu di klik. Saat mouse berada di atsnya, menunya terbuka otomatis. Trus, kalau mau mengganti tanda ujung panah yg warna putih itu dengan tulisn, bisa ga' ???

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Push Down Panel Dengan CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode