Tab menu vertikal, cocok untuk all device

Berbicara tentang tab menu, memang tidak akan pernah ada habisnya. ediTEMP sendiri sudah beberapa kali mencoba membuat berbagai jenis, dan secara kebetulan, yang kini sedang disukai ediTEMP adalah jenis Tab menu vertikal. Plus scrollbar, bisa digeser ke atas bawah demi memilih menu blog yang sedang dicari.

ediTEMP sedang percaya bila jenis ini cukup cocok pada sekian banyak device, tanpa harus menambah css query mobile, sebab tampilan list menu akan muncul sebagai pita yang memanjang ke bawah apabila pengunjung mengarahkan cursor pada tombol menu.

Tab menu jenis ini sangat cocok bila di aplikasikan pada blog yang memilih header fixed, karena dasarnya hanya menampilkan satu tombol menu saja dengan lebar sekitar 100px dan tinggi sekitar 36px.

ediTEMP memang bukan ahli coding ataupun ahli template, Tab menu ini juga hanyalah sebuah hasil uji coba yang telah dilakukan sekian kali, dan akhirnya menghasilkan tampilan bila tidak terkena cursor seperti ini saja :



dan akan muncul pita pilihan list menu bila cursor diarahkan pada tombol menu tersebut, seperti ini :



Seperti biasa, ediTEMP masih menggandrungi Tab menu non-script, hanya mengandalkan HTML dan CSS saja. Tentunya dengan tujuan agar lebih fresh sekaligus fast serta tidak mengganggu loading blog.

Bagi yang ingin mencoba, silakan copas HTML berikut :

<--PITA-->

<div class='pita' id='pita'>
<ul>
<li><span>MENU</span>
<ul>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/OTOMOTIF'>OTOMOTIF</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/KOMPUTER'>KOMPUTER</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/montirKATRO'>MONTIR</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/EMIS'>EMIS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/SIMPATIKA'>SIMPATIKA</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/AL-MADRASAH'>MADRASAH</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/dasarMAT'>dasarMAT</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/SOSBUD'>SOSBUD</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/BTQ%20MI'>BTQ MI</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/METODA%20PEMBELAJARAN'>METODA</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/HIDUP%20SEHAT'>HIDUP SEHAT</a></li>
<li><a href='http://www.kemenag.go.id/'>KEMENAG</a></li>
<li><a href='http://www.kemdikbud.go.id/'>KEMDIKNAS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/ASN'>A S N</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/K13-KEMENAG'>K-13 KEMENAG</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/K13-KEMDIKBUD'>K-13 KEMDIKNAS</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/search/label/bukanDUNIAKU'>BUkan Duniaku</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/tentang-blog-gurukatro.html'>ABOUT ME</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/hubungikami.html'>CONTACT ME</a></li>
<li><a href='http://gurukatrondeso.blogspot.co.id/p/daftar-isi.html'>SITEMAPS</a></li>
</ul>
</li>
</ul>
</div>
<!--PITA-->

karena diatur dengan kondisi fixed, maka bisa diletakkan di bagian manapun, yang penting masih dalam area body.

NB : mohon maaf, itu HTML pita masih dengan alamat blog guruKATRO, soalnya lagi malas ambil waktu untuk menghapusnya.......

silakan ganti link link tersebut sesuai kebutuhan anda. Bila yang anda butuhkan lebih sedikit, silakan hapus sisanya, dan bila ternyata yang anda butuhkan lebih banyak dari itu, silakan tambah saja barisan link sebanyak banyaknya juga gak apa apa, toh tampilannya kebawahnya dibatasi scroll bar inih!

Untuk mengatur tampilan Tab menu vertikal tersebut, silakan ambil ini CSS :

====================================
#pita {position:fixed;top:0;right:0}
#pita ul {display:block;margin:0 auto;margin-top:37px;padding:0;margin-right:0;z-index:2}
 /* margin-top 37px silakan sesuaikan dengan tinggi header */
#pita span{
position:fixed; /* buang baris ini bila ingin menu ikut scrool blog */
top:1px;
right:1px; /* right diganti left bila ingin meletakkan tombol menu di sebelah kiri */
width:96px;
height:36px;/* sesuaikan dengan tinggi header */
text-align:center;
background:#166;
color:beige;
font-size:18px;
transition:all .1s ease-in-out;
border:1px solid beige;
line-height:36px;
}
#pita li {list-style:none;margin:0}
#pita li ul{padding:0 0 0 40px;width:100px;height:400px;background:#133;overflow:scroll;display:none;border-bottom-left-radius:40%}
#pita a{
display:block;
padding:20px 1px;
margin:2px 1px;
background:#369;
color:beige;
text-align:center;
font-size:12px;
border:1px solid beige;
transition:all .5s ease-in-out;
text-decoration:none;
}
#pita li:hover > span {background-color:transparent;color:transparent;border:transparent}
#pita li:hover > a,#pita a:hover{background-color:#133;color:gold;border:1px solid #133}
#pita li:hover > ul {position:relative;display:block;z-index:999999}

::-webkit-scrollbar {height:40px;width: .01px;background: transparent;} /* buang baris ini bila ingin chrome dan opera tetap menampilkan alur scrollbar */
====================================
 begitulah .... tidak memerluka n pengatura khusus untuk tampilam mobile.....



atau silakan atur ulang sendirilah...... tampilan tepi, background text dan lain lainnya... sesuai selera karena sesungguhnya .... dan pada dasarnya .... anda lebih bisa dari pada admin blog ini


Cara mengembalikan letak share button pada template brosense v2 mas sugeng

Anda pengguna free template alias template gratisan yang bernama Brosense buatan Mas Sugeng???,
dan apakah akhir akhir ini anda merasakan ada salah satu tampilan yang aneh ???.
serta hingga saat ini anda belum mampu mengatasinya ???

Kebanyakan di forum adalah keluhan atas hal bahwa beberapa hari terakhir tiba tiba tampilan share-buttons yang biasanya dan seharusnya berada di bawah posting, kini bertengger tepat diatas postingan ,pula dengan hamparan menutupi Judul Posting, bahkan sebagian atas awalan kata isi posting!!!!.

Mohon maaf ini blog http://kangadsense.blogspot.co.id yang secara kebetulan ediTEMP ambil image nya, ceritanya sebenarnya perihal diatas sudah agak lama ediTEMP lupakan, tapi ketika ediTEMP mampir ke blog tersebut sempat melihat keadaan share-button itu, jadi yang pikir punya pikir hal ini dijadikan posting saja, itung itung menambah pengharapan agar pengunjung blog yang supersepi ini bisa menjadi tambah sepi.




Tuh kan !!!, punya Kang Adsense contohnya, share-buttons bisa nangkring disitu, nutupin Judul dan sedikit bagian atas isi postingan. Jadi gak bagus kan ???

Banyak yang menanyakan via forum forum tentang bagaimana cara mengembalikan letak share-buttons tersebut ke posisi semula, dan banyak pula yang hingga kini masih tetap dalam kondisi mengharapkan jawaban dari para master.

Kemungkinan besar itu permasalahannya adalah terpengaruh oleh nama pembungkusnya, yaitu kata "share-buttons" yang terkena inherit css dari https:// www.blogger.com/ static/v1/widgets/ 434580396-css_ bundle_v2.css. Secara default disana tersetting "position:absolute"

Agar tidak terkena imbas inherit tersebut, sebenarnya cukup mudah, ubah saja ketikan "share-buttons" menjadi "shares-button" (huruf s dipindah) kata share menjadi shares dan kata buttons menjadi button, itu saja sudah cukup untuk melepaskan diri dari inherit css tersebut. Namun masalah lain pasti akan mengikuti langkah anda itu, karena beberapa setting css inherit diambil dari sana, sehingga tampilan juga akan berubah drastis. Disamping itu anda juga harus mengubah share-buttons menjadi share-button pada html nya. Mengubah nama pada css tanpa diikuti penyamaan nama pada html nya sudah jelas akan membuat tampilan akan semakin acakadut.

Apalagi bila hanya membuang huruf s pada (share-buttons menjadi share-button), maka akan terkena imbas html shareButton default blogger, yang muncul bukan yang diinginkan, melainkan share button default blogger dengan tampilan yang tidak karuan.

Solusi ringan adalah jangan rubah dan biarkan ia punya nama "share-buttons", tinggal kita menambahkan elemen css saja, css yang asalnya :




Tambah elemen "position:relative;" seperti ini :




Save template, dan lihat hasilnya .... tarararaaaa, pasti itu share-buttons sudah terjun bebas menuju tempat yang sebenarnya.

Sudah selesai ???
Bisa saja anda berkeputusan begitu, namun bila ingin bagian atas tampilan share button tidak terpotong, maka ubahlah nilai height yang asalnya "67px" menjadi "87px", baik yang pada share-button-box maupun yang pada share-buttons. dan jangan lupa tambah elemen "padding:10px;", yaaaah seperti ini laaaah


maaf pada image terteranya padding:6px, heheheheh lupa gak edit dulu langsung screenshot,

Dan bila ingin membuang garis tepi yang kayaknya mengurangi enaknya pandangan dimata, tambahkan saja elemen "box-shadow:none;"




Cukup sampai disitu saja kayaknya, kalau nasib lagi mujur pasti tampilan share-buttons tersebut akan sangat enak dinikmati....

Memperbagus tampilan image popular pos

Walaupun beberapa diantara para master blogger banyak yang menganggap bahwa popular post juga bisa merugikan si pemilik blog, dengan penjelasan bahwa akan meningkatkan pencurian materi oleh blogger nakal yang suka copas materi laris, namun pada kenyataannya tetap saja masih banyak blogger yang menampilkan widget Popular Post.

Alasan para blogger yang tetap memasang widget Popular Post adalah bahwa widget ini dianggap cukup penting untuk ditampilkan, karena berfungsi untuk menunjukkan kepada pengunjung, tentang posting blog yang paling sering dibaca oleh pengunjung, disertai harapan bila akan menarik perhatian pengunjung untuk betah datang kembali ke blog tersebut.

ediTEMP sendiri tergolong yang lebih memilih menampilkan widget ini. walaupun dengan pilihan hanya menampilkan judul posting saja tanpa item-thumbnail dan tanpa pula item-snippet. Ini semua tentunya karena ediTEMP mengutamanakan pemilihan performances dari pada appearances.

Untuk blogger yang lebih memilih keseimbangan antara performances dan appearances, pasti akan memasang widget Popular Post dengan menampilkan item-thumbnail + snippet, dengan pengaturan tampilan secara default blogger. Untuk memperoleh tampilan image yang bagus, maka pengaturan item-thumbnail img tidak boleh melebihi width:72px dan height:72px.

Sedang yang akan di bahas dibawah ini adalah pengaturan tampilan image popular post, bagi blogger yang mengutamakan appearances dari pada performances, dimana kecantikan wajah blog lebih di utamakan dengan resiko loading agak sedikit terganggu, terutama bagi blogger yang ingin menampilkan image popular post dengan ukuran yang lebih besar dari 72px, misalnya 300px atau 336px sesuai lebar sidebar yang dipasang pada blog.

Dari hasil experiment ediTEMP, memperbaiki ukuran (pixel) untuk image Popular Post ternyata tidaklah se rumit memperbaiki pixel image posting yang di tampilkan pada halaman home page (menggunakan jscript). Dengan sedikit sentuhan yang sangat mudah, ternyata tampilan image popular post dengan ukuran yang lebih besar bisa menjadi lebih bagus dan elok dipandang mata. 

setelah kita mengubah / menerapkan css :

#PopularPost1 item-thumbnail {margin:0;padding:0;width:100%;height:auto}

atau mungkin juga seperti ini :

#PopularPost1 item-thumbnail img {margin:0;padding:0;width:100%;height:auto}

Mari amati pengaturan image popular post default blogger, seperti ini,


coba perhatikan bila nilai (value) yang tertera pada aturan secara default (data:post.featuredImg, 72, &#quot;1:1&#quot;

maka bila ukuran image diatur menjadi lebih besar dari width:72px, pasti tampilan iamge akan blur seperti ini :



Hanya dengan mengganti angka 72 manjdi 336 dan mengatur 1:1 menjadi 8:5,




Nilai 336 tidaklah mutlak. Lebih besar dari 336 juga tidak mengapa, tentunya dengan resiko semakin besar nilainya maka akan semakin mengganggu loading blog. Value 336 hanyalah contoh pemilihan ukuran terkecil, demi menyesuaikan lebar .sidebar .widget blog dicontohkan yang berukuran width:336px. Bila .sidebar .widget diatur dengan lebar 300px, demi kecepatan loading gunakanlah angka 300

Perbandingan panjang dan lebar dari 1:1 diubah menjadi 8:5 juga bukan value mutlak, itu hanya karena pada sidebar yang dijadikan contoh dan kaitannya dengan ukuran gambar yang di upload saja, secara kebetulan tampilan paling enak dipandang mata dan crop image tidak memotong bagian penting gambar, pas menggunakan perbangingan 8:5. 

Perbandingan itu bisa diubah misalnya 4:3 atau 5:4 atau 5:3 atau yang lainnya, disesuaikan dengan ukuran gambar yang pertama di upload pada sebuah postingan, dan juga lebar sidebar. Yang perlu diingat adalah bahwa angka pertama dari perbandingan itu mewakili lebar gambar dan angka kedua mewakili tinggi gambar. Ibarat perbandingan 4: 3, itu bisa dimisalkan bila lebar gambar = 4cm maka tinggi gambar otomatis = 3cm.

Bila sudah menggunakan perbandingan panjang lebar pada image popular post itu sudah di atur, agar image yang akan muncul ukurannya statis, usahakan membuat gambar pertama pada tiap posting dengan perbandingan yang sama.

Tampilan image popular post yang sudah di modifikasi dengan mengganti value 72 menjadi 336 dan value perbandingan 1:1 menjadi (persegi), menjadi 8:5 (persegi panjang), seperti dibawah ini.




lihatlah bahwa kualitas gambar menjadi sangat jelas dan tidak blur

Bagi yang ingin mencoba, silakan dicoba, dan bila ternyata ujung ujungnya tidak suka, tinggal kembalikan saja lagi ke ukuran default kembali.

Lebih jauh mengamati kualitas image popular post silakan lihat  DEMO
Untuk memperbaiki tampilan image posting pada Home Page Blog, SILAKAN MASUK KESINI

Tombol Back to Top dengan simbol HTML unicode

Akhir akhir ini ramai dibicarakan tentang tombol back to top alias tombol untuk bisa cepat kembali ke halaman atas pada halaman blog. Dikatakan bahwa tombol ini akan sangat berguna bagi pengunjung blog yang menggunakan device dengan layar lebih sempit, karena halaman blog akan sangat memanjang dengan sangat panjangnya, sehingga akan kerepotan bila ingin segera kembali ke halaman paling atas.

Atur Share Button agar tidak mengganggu speed blog

Share Button, seperti gplus, facebook, twitter, pinterest dan lain lain, memang dianggap sangat menunjang proses perkembangan sebuah blog. Karena itu hampir seluruh blogger berusaha sekuat tenaga agar bisa memasang Share Button pada setiap blog yang di kelolanya.

Formulir Kontak

Nama

Email *

Pesan *