Cara Menciptakan Sajian Ala Blog
 |
| Menu Blog (closed) |
 |
| Menu Blog (opened) |
Untuk menciptakan sajian serupa intinya kita hanya memanfaatkan arahan javascript untuk mengubah style suatu objek. Baiklah untuk membuatnya silakan ikuti langkah demi langkah berikut, pertama-tama tambahkan arahan berikut ini pada pembuka tag body, biasanya
<body expr:class='"loading" + data:blog.mobileClass'>, letakkan kdoe berikut dibawahnya.<div id='menu-hadi'> <div class='sidenav' id='mySidenav'> <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i class='fa fa-close'/></a> <h3 class='paling-atas'>Blog</h3> <a href='/p/about.html'>About</a> <a href='/p/sitemap.html'>Sitemap</a> <a href='/p/contact.html'>Contact</a> <h3>Tools</h3> <a href='/p/html-editor.html'>HTML Editor</a> <a href='/p/recent-comments.html'>Recent Comments</a> <a href='/p/css-minifier.html'>CSS Minifier</a> <a href='/p/ad-converter.html'>Ads Converter</a> <a href='/p/color-picker.html'>Color Picker</a> <a href='/p/how-to-comment.html'>How to Comment</a> <h3>Other</h3> <a href='/p/quote.html'>Quote</a> <a class='paling-bawah' href='/2013/12/tetangga.html'>Tetangga</a> </div> <script> function openNav() { document.getElementById("mySidenav").style.left = "0"; } function closeNav() { document.getElementById("mySidenav").style.left = "-250px"; } </script> </div>Setelah itu tinggal letakkan tombol pembuka sajian ditempat yang teman inginkan, contohnya ibarat pada blog ini aku letakkan sempurna disamping judul blog. Kode untuk tombol pembuka sajian ialah sebagai berikut:
<div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>Kemudian untuk memperbaiki tampilan sajian yang telah dibentuk silakan teman tambahkan arahan CSS berikut pada blog sobat, silakan simpan dalam tag <style>kodeCSS</style> atau diatas arahan
]]></b:skin>./* Menu Blog */ .sidenav a{display:block;position:relative;color:#aaa;margin:1px 10px 0 20px;padding:0;font-size:1rem} .sidenav a:hover{color:#fff;padding-left:5px} .sidenav{position:fixed;height:100%;width:250px;background:#4d4d4d;z-index:999;top:0;left:-250px;overflow:auto;transition:all cubic-bezier(0.55, 0.06, 0.68, 0.19) .3s} .closebtn{position:absolute!important;top:10px;right:25px} .sidenav a.closebtn:hover{transform:rotate(90deg);-webkit-transform:rotate(90deg);padding-left:0;font-size:1.5rem} .menu-hadi{display:inline-block;cursor:pointer} .sidenav h3{margin:2px 0 2px 10px;color:#7b7b7b;font-size:2.5rem;border-bottom:1px solid #7b7b7b;width:70%;font-weight:900;line-height:normal} a.closebtn{margin:0;padding:0} h3.paling-atas{margin-top:20px} a.paling-bawah{margin-bottom:20px}Mungkin cukup sekian dari saya, agar dapat bermanfaat, jikalau ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau dapat juga melalui halaman contact blog ini. Terima kasih.
