A. Menu HorizontalAda yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini : Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini: pertama-tama siapkan dulu gambarnya, contohnya seperti ini : dan kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh. blackleft.gifblackright.gifgreenleft.gifgreenright.gifredleft.gifredright.gifunguleft.gifunguright.gifyellowleft.gifyellowright.gifblueleft.gifblueright.gifwhiteleft.gifwhiteright.gif Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya: 1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu. 2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya /*credits : -tips.blogspot.com */ #tabshori float:left; width:100%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; #tabshori ul margin:0; padding:10px 10px 0 50px; list-style:none; #tabshori li display:inline; margin:0; padding:0; #tabshori a float:left; background: url(" blackleft.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; #tabshori a span float:left; display:block; background: url(" blackright.gif") no-repeat right top; padding:5px 14px 4px 4px; color:#fff; /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabshori a span float:none; /* End IE5-Mac hack */ #tabshori a:hover background-position:0% -42px; #tabshori a:hover span background-position:100% -42px; Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini; background: url(" redleft.gif") no-repeat left top; background: url(" redright.gif") no-repeat right top; 3. Copy script berikut ini Home
Trik-Tips
Free Template
Kamus
Profile
4. Ganti -tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox). Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu. 5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini cari kode berikut ini : caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya 6. Simpan hasil pengeditan. 7. Lihat hasilnya. 8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode . kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok. 9. Kalo masih belum berhasil juga coba cara ini: - Cari kode berikut ini : terus ganti text yang berwarna hijau sehingga menjadi seperti ini: terus di Save Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah dikit, terus simpan dan lihat hasilnya. hasilnya pasti akan berbeda-beda di setiap template.kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....
Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :1. Login ke blogger trus pilih "Layout-->Edit HTML"2. Masukkan kede berikut sebelum kode 3. Setelah itu masukkan kode berikut sebelum kode ]]> atau sebelum kode . Taruh di dalam Barisan kode CSS.
Cara Membuat Side Menu Pada Blog
Our website is made possible by displaying online advertisements to our visitors.Please consider supporting us by whitelisting our website.\n","overlay-color":"#000000","bg-color":"#FFFFFF","title-color":null,"text-color":"#000000","scope":"page","style":"modal"}};/* ]]> */var id = "048caecd398f89215a69473405ce9e8b1f7b786a";document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );.no-js img.lazyload display: none; figure.wp-block-image img.lazyloading min-width: 150px; .lazyload, .lazyloading opacity: 0; .lazyloaded opacity: 1;transition: opacity 400ms;transition-delay: 0ms;.wp-block-buttons margin-bottom: 20px;Lompat ke konten BahasaBahasaInfo BahasaKaidah BerbahasaSastraQuoteLinguistikSosiolinguistikPsikolinguistikCeritaCerita SejarahCerita HororFilsafatPhotographyTravellingJalur PendakianWisata BukitWisata SejarahWisata Air TerjunSouvenirPencarian untuk...Menu Navigasi Menu NavigasiPencarian untuk...BahasaBahasaInfo BahasaKaidah BerbahasaSastraQuoteLinguistikSosiolinguistikPsikolinguistikCeritaCerita SejarahCerita HororFilsafatPhotographyTravellingJalur PendakianWisata BukitWisata SejarahWisata Air TerjunSouvenirCara Membuat Menu Navigasi Sidebar Keren di Blogoleh albabbarrosaNovember 19, 2019Juli 30, 2020Halo sobat blogger semua, setelah kemarin saya memberikan tutorial cara membuat sticky nav, kali ini saya akan memberikan tutorial tentang menu navigasi lagi. Tapi bukan sticky nav ya, melainkan cara membuat menu navigasi sidebar. Menu navigasi sidebar adalah salah satu jenis tampilan untuk menu navigasi yang ada di blog. Sidebar menu biasanya hanya terlihat saat mode mobile saja. Letak sidebar menu biasanya ada yang muncul di kanan, muncul di kiri dan juga muncul rata kanan kiri. Perbedaan sidebar menu dengan menu dropdown biasa adalah pada bagian bentuk menu tersebut dan bagaimana menu tersebut muncul ketika tombol menunya diklik. Menu biasa akan muncul tepat dibawah tombol menunya, sedang sidebar menu muncul dari sisi kanan atau sisi kiri dengan ukuran yang beragam. Sidebar menu atau menu navigasi sidebar kebanyakan dipakai pada template wordpress yang premium atau berbayar, untuk template blogspot jarang sekali yang menggunakan menu navigasi sidebar, kebanyakan menggunakan menu dropdown biasa. Bagi kamu yang blognya tidak menggunakan sidebar menu dan kamu ingin memiliki tampilan sidebar menu, jangan kawatir! karena albabbarrosa punya solusinya. Simak tutorial cara membuat menu navigasi sidebar di blog berikut ini. Masuk ke pengaturan > pilih edit html. Dan pastekan kode dibawah ini tepat di atas kode ]]> /* Sidebar Menu */ .mline1, .mline2, .mline3 position: absolute; right: 0px; display: block; height: 3px; width: 22px; background: #111; content:''; border-radius: 5px; transition: all 0.2s; .mline1 top: 0; width : 13px; .mline2 height:15px; top: 7px; .mline3 top: 14px; #css-menuposition:fixed;top:0px;width:200PX;left:0;z-index:9999;background:#fff;height:100%;transition:all .4s ease-in-out;box-shadow:0 2px 5px 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.09)a.blanter-backposition:inherit!important;width:20px;height:20px;padding:13px;z-index:99#cssmenu,#cssmenu ulmargin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;font-family:'Roboto',sans-serif;font-size:14px;position:relative;text-align:left#cssmenu aline-height:1.3;padding:12px 15px#cssmenu ul licursor:pointer;background:#fff#cssmenu ul li afont-size:13.5px;display:block;color:#777;background:#fff;padding:12px 15px;margin:3px 10px 3px 0;font-weight:500;border-top-right-radius:20px;border-bottom-right-radius:20px#cssmenu ul li a:hovertext-decoration:none;background:#eee#cssmenu ul li.active,#cssmenu ul li.active abackground:#eee#cssmenu ul li.home a:hoverbackground:#fff#sidebar-css h2:hovercolor:#039be5#cssmenu ul li.homebackground:#fff;overflow:hidden;color:#444;font-size:18px;font-weight:700;padding:0;display:block;border-bottom:1px solid #eee#cssmenu ul li.has-sub > a:aftercontent:'f105';font-family:FontAwesome;float:right#cssmenu ul li.has-sub.active > a:aftercontent:'f107';font-family:FontAwesome;float:right#cssmenu ul ulpadding:0;display:none;background:#eee#cssmenu ul ul li acolor:#777;margin:0;border-radius:0;font-weight:400;padding:10px 10px 10px 48px;background:#eee#cssmenu ul ul li a:hoverbackground:#ddd#css-menu.slideleft:-340px#content-wrapper.slidepadding-left:0#css-menu.disableleft:0!important#css-menu h3,#css-menu ppadding:0;margin:0#css-menu .profilemenupadding:20px 15px 10px;height:105px;background:#eee url( -mSuNfO8orf4/WVT7CZ7s18I/AAAAAAAAGj0/sBqJmU0AQnovb-wtAO_ImWRN3dY45A50ACLcBGAs/s1600/MasignAlphaSteelcoders.png)repeat;color:#444;line-height:1.9;z-index:10;background-size:100%#css-menu h3font-size:13px;font-weight:700;color:#222#css-menu pfont-size:12px#css-menu imgwidth:50px;height:50px;border-radius:100%#info2float:right;border-radius:100%;padding:5px!important;height:24px;margin-top:-3px;color:#666transition:all .7s ease-in-out;z-index:9;overflow:hidden;left:-200px;opacity:0}#navmenu2 li ifloat:left;margin-right:10px;font-size:18px#navmenu2transition:all .4s ease-in-out#nav-menu1.showsvisibility:visible;height:auto;left:0;opacity:1#navmenu2.showsvisibility:hidden;margin-left:-20px;opacity:0/* End Sidebar Menu */Setelah itu, paste kode dibawah ini tepat di bawah kode atau di atas kode JUSTRYWOY.Home
AppsThemes
Layout
Settings
Sampai disitu, sidebar menu sudah bisa muncul di blog kamu hanya saja tidak bisa disembunyikan dan tidak bisa ditampilkan lagi. Untuk itu kita perlu tombol menunya. Paste kode di bawah ini, di bagian kode header menu kamu, atau kamu bisa letakkan dimana saja, namun saya sarankan di bagian header kamu.Punya saya, saya taruh di atas kode search, yang berada di rentetan kode hedaer menu. agar tombol menu bisa berada di bagian header menu blog. 2ff7e9595c
Comments