Blogger Tutorials

By Ndo Andre At Tuesday, October 17, 2023

Cara Membuat Efek Hover + Deskripsi Pada Gambar Blog

By Ndo Andre At Tuesday, October 17, 2023

Ada banyak cara untuk membuat tapilan website aatau blogmu menjadi kelihatan menarik, seperti menambahkan efek hover pada bagian ternentu. Nah sobat, Pada kesempatan ini admin kembali akan membagikan tutorial blog tentang cara membuat efek hover transform plus deskripsi pada gambar di postingan blog.

Caption atau deskripsi gambar adalah sebuah keterangan yang terdapat dibagian bawah sebuah gambar dan biasanya caption atau lebih kita kenal deskripsi gambar ini ditulis secara manual untuk memberikan penjelasan detail gambar tersebut.

Di artikel ini, saya akan sedikit memodifikasi caption tersebut dengan memberikan efek Hover, maksudnya, deskripsi pada gambar akan muncul jika gambar tersebut di sorot dengan pointer mouse. Disini kita akan menambahkan efek transisi agar tampilannya terlihat lebih smooth.

Image Hover Effect: Transform + Description

Efek hover plus deskripsi gambar pada gambar postingan

Untuk contoh show hide deskripsi gambar responsive ini bisa kamu lihat demonya pada link demo dibawah. Oh iya, namanya juga efek hover, jadi efeknya akan terlihat jika cursor pointer mouse diarahkan pada gambar. Jika kamu tertarik ingin mencobanya, silahkan gunakan kode-kode di bawah ini.

Kode CSS

.imagebox{position:relative;width:80%;height:auto;z-index:2;margin:0 auto;padding:0} .imagebox img{position:relative;z-index:1;transition:all .5s ease-in-out;width:auto;max-width:100%;height:auto} .imagebox img:hover{transform: scale(1.5) ;-webkit-filter:brightness(0.55);} .imagebox div.imgdescription{position:absolute;width:80%;z-index:2;bottom:-100px;left:50%;margin-left:-42%;padding:2%;text-align:center;background:rgba(0,0,0,0.8);color:white;border-radius:8px;opacity:0;transition:all .5s ease .5s;font-size:100%} .imagebox div.imgdescription a{color:white;text-decoration:underline} .imagebox:hover div.imgdescription{bottom:15px;opacity:.8} @media screen and (max-width:480px){ .imagebox{width:100%;} }

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

edit html

3. Letakan kode di CSS tadi di atas kode ]]></b:skin>

Kode HTML

Untuk menerapkannya pada postingan blog, Pada mode Tampilan HTML contoh adalah seperti di bawah ini:

Tampilan HTML

Gunakan kode di bawah ini ketika akan menyimpan gambar dengan deskripsi di postingan, sebaiknya gunakan gambar dengan dimensi yang besar, misalnya 600px x 300px namun memiliki size yang kecil agar tidak membebani loading halamannya.

<div class="imagebox"> <img alt="thumbnail" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34Nrl113TUUOEEtaVq4XEk6cG4ZCei8A9ql9PCiGFCQfMkY3k6Bgu5C7OxEQqK49Ia7Vk8o8wc8A15JBxGo4g6KqYKfD9BVI05wWWgr5zFfuu8P5X9A92sbFbz0sp5-ZXjWWSjZKM-h0P/s1600/windows-10.png" width="600" title="Capable of seating 50,000 spectators"/> <div class="imgdescription"> Ini adalah contoh deskripsi gambar dengan hover, <a href="http://www.haisob.com/" title="Contoh Link">Haisob.com</a> ini adalah contoh link dalam deskripsi gambar. </div> </div>

Silahkan ganti alt dan title tag, serta tinggi dan lebar sesuai dengan gambar yang diunggah. Ganti URL gambarnya dengan URL gambar yang kamu unggah.

Untuk deskripsi atau caption gambarnya kamu simpan di dalam class="imgdescription" seperti contoh di atas. Di sini kamu juga bisa menyimpan link pada deskripsi gambarnya.

👉 LIHAT DEMO 👈

Sekian, semoga bermanfaat.

Ndo Andre at Tuesday, October 17, 2023

By Ndo Andre At Thursday, October 12, 2023

Cara Membuat Efek Hover Blur Pada Gambar Blog.

By Ndo Andre At Thursday, October 12, 2023

Efek hover Blur pada gambar ini merupakan salah satu efek animasi blog yang dapat menambah daya tarik dan keunikan tersendiri pada blog. Efek ini tidak mempengaruhi kecepatan loading blog karena animasinya dibuat dengan CSS.

Mungkin saja kamu sudah pernah berkunjung ke suatu blog atau situs web dan menemukan blog atau situs web tersebut memiliki efek yang menarik. Misalnya, saat kursor melayang di atas gambar, ada efek munculnya animasi menarik.

Banyak macam variasi efek hover yang bisa kamu gunakan untuk membuat tampilan gambar di blogmu menjadi kelihatan lebih menarik, contohnya dengan menambahkan efek hover gambar seperti Blur image hover efek ini.

Image Hover Effect: Blur

Blur CSS image hover effect

Cara 1: Memasang Blur CSS image hover effect di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Template ➔ Klik disamping Sesuaikan ➔ Edit HTML

Edit HTML Tema template Blogger update 2023

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; } .post-body img:hover { -webkit-filter:blur(5px); }

4. Save template

Tadi kamu membuatnya dengan cara memasukan kode CSS langsung ke dalam template blog. Namun, mungkin saja agak sulit jika masih baru dan masih belajar nge-blog. Kamu bisa juga memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya seperti di bawah ini:

Cara 2: Memasang Blur CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style> .post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; } .post-body img:hover { -webkit-filter:blur(5px); } </style>

4. Save.

👉 LIHAT DEMO 👈

Blur Efek hover pada gambar ini adalah efek yang muncul ketika pointer mouse ada di atas gambar pada postingan di blog, dan gambar akan memiliki efek Blur.

Sekian Blur CSS image hover effect, Selamat mencoba dan Salam Bloggers.

Ndo Andre at Thursday, October 12, 2023

By Ndo Andre At Wednesday, October 11, 2023

Cara Membuat Efek Hover Tilt Pada Gambar Blog.

By Ndo Andre At Wednesday, October 11, 2023

Ok sobat, setelah pada waktu yang lalu admin telah membagikan cara membuat efek Brigthnes pada gambar blog, maka kesempatan ini admin kembali lagi akan berbagi berbagi cara membuat Tilt image hover effect di Blogger.

Penggunaan efek hover pada gambar seperti ini memiliki keuntungan tersendiri yaitu, dapat meningkatkan daya tarik visual pada blog. Biasanya untuk menarik perhatian pengunjung agar pengunjung bisa terkesan.

Kamu bisa tambahkan efek hover pada gambar untuk membuat gambar di postinganmu menjadi lebih menarik, misalnya dengan menambahkan Tilt image hover efek. Tilt Efek hover pada gambar di sini adalah efek yang muncul ketika mouse diarahkan pada gambar yang ada di postingan blog kamu.

Image Hover Effect: Tilt

Tilt CSS image hover effect

Cara 1: Memasang Tilt CSS image hover effect di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Template ➔ Klik disamping Sesuaikan ➔ Edit HTML

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { -webkit-transform:rotate(-22deg); -moz-transform:rotate(-22deg); -o-transform:rotate(-22deg); -ms-transform:rotate(-22deg); transform:rotate(-22deg); }

4. Save template

Tadi kamu membuatnya dengan cara memasukan kode CSS langsung ke dalam template blog.Namun, mungkin saja agak sulit jika masih baru dan masih belajar nge-blog. Kamu bisa juga memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya seperti di bawah ini:

Cara 2: Memasang Tilt CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style> .post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } .post-body img:hover { -webkit-transform:rotate(-22deg); -moz-transform:rotate(-22deg); -o-transform:rotate(-22deg); -ms-transform:rotate(-22deg); transform:rotate(-22deg); } </style>

4. Save.

👉 LIHAT DEMO 👈

Sekian Tilt CSS image hover effect, salam Bloggers.

Ndo Andre at Wednesday, October 11, 2023

By Ndo Andre At Thursday, October 05, 2023

Membuat Brightnes Image Hover Effect di Blogger

By Ndo Andre At Thursday, October 05, 2023

Pastinya kalau sobat sering berkunjung ke blog diluar sana bakalan menemukan efek-efek css pada blognya. Nah, Pada kesempatan ini sepeser.com akan membagikan tentang cara membuat Brightnes Image Hover Effect pada gambar di postingan blog.

Dengan menambahkan efek gambar ini pada gambar adalah salah satu cara untuk mempercantik atau membuat tampilan blog menjadi lebih menarik, efek hover ini akan terlihat jika kursor mouse diarahkan pada gambar di postingan blog.

Brightness CSS image hover effect

Efek Hover : Brightness

Cara yang di bagikan ini untuk membuat gambar yang berada di dalam postingan blog mempunyai efek hover brightnes, dimana akan ada perubahan gambar saat kursor mouse ada di atas gambar di blog kamu.

Disini ada dua opsi yang bisa kamu pilih yaitu kamu bisa memasukan kode CSS langsung ke dalam template blog yang mungkin agak sulit jika masih baru dan masih belajar nge-blog dan bisa juga memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya.

Cara 1: Memasang Brightness CSS image hover effect di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Template ➔ Klik disamping Sesuaikan ➔ Edit HTML

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.post-body img { -webkit-filter:brightness(0.25); -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }.post-body img:hover {-webkit-filter:none; }

4. Save template

Cara 2: Memasang Brightness CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style> .post-body img { -webkit-filter:brightness(0.25); -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; } .post-body img:hover {-webkit-filter:none; } </style>

4. Save atau simpan

👉 LIHAT DEMO 👈

Efek hover pada gambar ini dibuat hanya menggunakan css jadi ringan saja dan tidak memberatkan loading blog kamu. Kamu juga tak perlu lagi untuk memasukkan satu persatu kode pada gambar karena ini akan membuat gambar dipostinganmu otomatis mempunyai efek hover.

Ndo Andre at Thursday, October 05, 2023

By Ndo Andre At Saturday, September 16, 2023

Membuat Efek Hover Shadow Border Radius Pada Gambar Blog

By Ndo Andre At Saturday, September 16, 2023

Efek hover pada gambar di Blog. Apakah sobat pernah berkunjung ke blog yang menggunakan efek hover pada gambar? bagaimana apakah blognya terlihat menarik? ternyata cara membuatnya mudah loh. Pada kesempatan ini sepeser.com akan membagikan tentang cara membuat efect hover shadow border radius pada gambar di postingan blog.

Dengan menambahkan efek hover border radius beserta efek bayangan pada gambar adalah salah satu cara untuk mempercantik atau membuat tampilan blog lebih menarik, efek hover ini akan terlihat jika kursor mouse diarahkan pada object, kalau di sini adalah gambar di postingan blog.

Kamu bisa membuat artikel berkualitas apabila disajikan secara efektif melalui tulisan yang mudah dipahami dan dilengkapi dengan gambar yang menarik. Penggunaan efek hover pada gambar seperti ini memiliki keuntungan tersendiri yaitu, dapat meningkatkan daya tarik visual pada blog.

Efek hover shadow border radius pada gambar blog 1

Efek hover shadow border radius 1

Efek Hover Pada Gambar

Tujuan membuat efek hover pada gambar seperti ini biasanya untuk menarik perhatian pengunjung agar pengunjung bisa terkesan dengan blog kita. Cara yang di bagikan ini untuk membuat semua gambar yang berada di dalam postingan blog dengan otomatis mempunyai efek hover shadow plus border radius.

Disini ada dua opsi yang bisa kamu pilih yaitu kamu bisa memasukan kode CSS langsung ke dalam tema / template blog yang mungkin agak sulit bagi kamu yang baru dan masih belajar nge-blog dan bisa juga memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya.

Cara 1: Memasang CSS Image Hover Effect di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Template ➔ Klik disamping Sesuaikan ➔ Edit HTML

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.post-body img{background:#FFF;padding:15px;border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s} .post-body img:hover{border-radius:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

4. Save template.

Berbicara soal efek animasi blog, sebelumnya juga admin telah berbagi efek hover gambar berputar pada blog, juga membuat efek daun berjatuhan update terbaru di blog dan cara memasang menu navigasi dropdown responsive.

Cara 2: Memasang CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style> .post-body img{background:#FFF;padding:15px;border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s} .post-body img:hover{border-radius:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer} </style>

4. Save atau simpan

Tambahan

Berikut ini adalah jika kamu ingin efek gambar seperti di atas tapi terbalik, maksudnya efek hover pada gambar ini kebalikan dari efek gambar di atas.

Efek hover shadow border radius pada gambar 2

Efek hover Shadow border radius 2

Disini saya langsung saja ke cara yang ke 2, yaitu memasangnya pada widget blog, jika sobat suka dengan cara yang pertama maka bisa mengikuti cara 1 di atas.

Berikut adalah kode + Cara pemasangannya:

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

3. Masukan kode di bawah ini:

<style> .post-body img{background:#FFF;padding:15px;border-radius:0;box-shadow:0 0 3px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s} .post-body img:hover{border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s ;cursor:pointer} </style>

4. Save atau simpan

Video Tutorial

Efek hover pada gambar shadow border radius ini dibuat hanya menggunakan css jadi ringan saja dan tidak memberatkan loading halaman blog kamu. Kamu juga tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual, karena ini akan membuat gambar di postinganmu otomatis mempunyai efek hover.

Ok sobat sekian tentang postingan di kesempatan ini semoga bermanfaat.

Ndo Andre at Saturday, September 16, 2023

By Gio Bastian At Wednesday, September 13, 2023

Sering di Copas? Cara membuat Anti Copy Paste di Blog

By Gio Bastian At Wednesday, September 13, 2023

Cara membuat anti copy paste di Blog. Hai sob pada kesempatan ini sepeser.com akan berbagi tutorial blog yaitu tentang cara memasang script anti copas atau copy paste di Blogger. Mungkin kamu menemukan masalah dimana artikel atau postinganmu di copy paste orang lain tanpa sepengetahuanmu, nah hal ini seringkali terjadi dan masih terjadi sampai saat ini, bahkan kadang artikel copas lebih trending lebih populer dari artikel originalnya sendiri.

Tenang sobat ada cara untuk meminimalisir pencurian konten ini. Yaps, kamu bisa memasang script anti copy paste di blog Blogger kamu. Ada cara lain jika postinganmu di copas orang lain, kamu dapat melaporkannya ke DMCA, namun tentu saja repot jika banyak yang copy artikelmu sehingga harus mengecek dan melaporkannya satu persatu, apalagi jka sering terjadi copy paste di blogmu.

Sebelumnya juga admin telah berbagi anti copas di blog yang hanya menggunakan css saja, jadi tanpa script dan hanya pada bagian tertentu saja yang bisa di copy, kamu bisa membaca postingan cara membuat css anti copas di blog.

anti copy paste

Anti Copy Paste

Fungsi dari script yang akan kamu pakai ini adalah dapat mematikan fungsi copy paste, script ini akan meminimalisir pencurian artikel di blog kamu. Cara membuat dan memasang script ini di Blogger cukup mudah, kamu tinggal copy kode yang sudah saya sediakan dan memasukannya kedalam template kamu.

Di postingan sebelumnya sepeser.com sudah membahas tentang cara membuat smartlink dimana link kata tertentu di postingan otomatis menjadi link aktif dan tentang cara membuat efek hover pada gambar. Yah dengan memasang script ini blog kamu takakan dengan mudah di copas orang lain, berikut cara membuatnya sobat.

Cara Memasang Script Anti Copy Paste di Blogger

1.Di Blogger, pilih blog kamu
2. Pilih menu Tema 👉 Klik disebelah Sesuaikan 👉 Edit HTML

Edit Html Template

3. Selanjutnya cari kode </head> dan letakan kode berikut ini dibawah kode </head> .

<script type="text/javascript"> if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } </script >

4. Save temamu

Sekarang kamu dapat mengujinya apakah berhasil atau tidak dengan cara lihat blog dan test apakah artikelmu masih bisa dicopas atau tidak.

Video Tutorial

Mungkin saja kamu sudah bosan artikelmu seenaknya di copas orang lain, walaupun ini tidak sepenuhnya menghalangi para copaser setidaknya kamu sudah meminimalisir atau mempersulit mereka untuk mengambil artikel-artikel di blogmu.

👉 LIHAT DEMO 👈

Sebenarnya masih ada script lain yang ada pada penyimpanan admin, beberapa mungkin yang kamu cari dan cocok untuk blog kamu, tapi karena waktu dan kesempatan nanti admin bagikan dilain waktu, mungkin ada di artikel selanjutnya. Sekian yang dapat admin bagikan untuk saat ini, selamat mencoba yah gays.

Gio Bastian at Wednesday, September 13, 2023

By BastianMan At Monday, September 11, 2023

Cara membuat Efek Zoom Berputar pada Gambar di Blog

By BastianMan At Monday, September 11, 2023

Efek Zoom Berputar pada Gambar. Pada kesempatan ini sepeser.com akan berbagi tutorial tetang cara membuat efek hover zoom berputar pada gambar di postingan blog. Kita bisa menyebutnya sebagai penambahan efek hover zoom yang memberikan efek agar gambar terzoom dan berputar saat disorot pointer mouse.

Untuk penerapannya sendiri cukup mudah, kamu tinggal meletakkan perintah CSS ke dalam tema blog. Fungsi gambar dalam sebuah tulisan dalam hal ini posting blog adalah selain membagikan informasi mengenai topik postingan, juga bisa menambah daya tarik suatu halaman postingan blog di mata pengunjung.

Kamu bisa menyajikan gambar pada blog kamu dengan tampilan yang semenarik mungkin, dengan menerapkan efek hover pada gambar diharapkan akan membuat penampilan blog menjadi lebih keren dan menarik. Membuat efek seperti ini di blog membuat kesan tersendiri bagi pengunjung.

Efek Zoom Berputar

Efek Hover Zoom Berputar

Efek zoom berputar pada gambar ini akan muncul saat kursor mouse diarahkan pada gambar di postingan blog kita. Tapi tidak menjadi jaminan semua pengunjung akan suka pada efek ini, mungkin ada beberapa yang kurang suka dan yah mungkin saja ada yang suka.

Sebelumnya juga admin sudah berbagi cara membuat efek salju terbaru dan cara membuat efek loading blog sederhana juga tentang membuat indikator persen saat scroll artikel di Blogger. Berikut adalah cara membuatnya di Blogger:

Cara 1: Membuat Efek Hover Zoom Berputar Pada Gambar di Tema Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#sepeser img{padding:8px; box-shadow:0 0 3px #333;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #sepeser img:hover{padding:4px; -o-transform: scale(1.3) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.3) rotate(360deg);border-radius:50%;}

4. Untuk menerapkannya pada postingan blog:

Tampilan HTML

Pada mode Tampilan HTML contoh kodenya adalah seperti di bawah ini:

<div id="sepeser"> <div style="text-align: center;"> <a href="http://www.sepeser.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtClMPrUEPcbsLEH7JU6vyRzyDHQ2pAwmrWz6ACx_mtRnI5weh_l_3UeXrEx2_RTqCQ-pY5MiAG8zP-MwuX1yWf_yuvWACsjpS_xBl1QeyPkgvhpic3JwL8JUC6OhP3MLor9e_EP9Iqqa9MdgfI0wjIcJDXYnf09p6boYpMTFHh2A3ho0MoWH1zu5a_O0/s300/contoh-efek-hover-zoom-berputar.jpg" height="250" width="250" /></a> </div></div>

Untuk kode berwarna biru di atas adalah url gambar, silahkan ganti dengan gambar yang kamu inginkan.

5. Publikasikan artikel dan lihat hasilnya.

Video di bawah ini buat kamu yang masih kebingungan bagaimana cara membuatnya di Blogger, karena mungkin kamu masih baru dalam dunia blog.

Video Tutorial

Kelebihan dari cara yang pertama di atas adalah kamu bisa memilih dan menentukan gambar mana yang kamu inginkan memiliki efek hover ini, jadi tidak semua gambar memiliki efek hover. Cara yang ke-2 di bawah ini lebih mudah cara pemasangannya, dan otomatis akan membuat semua gambar di postinganmu memiliki efek hover ini.

Cara yang ke-2 ini pastinya lebih mudah cara membuatnya, karena kamu tinggal copy dan pastekan kodenya ke widget html, maka semua gambar yang ada di postinganmu otomatis memiliki efek hover ini. Lebih mudah karena kamu tidak perlu kesulitan mengedit gambarmu satu persatu untuk menyisipkan tag div.

Cara 2: Memasang Efek Hover Berputar Pada Gambar di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode di bawah ini:

<style> .post-body img{padding:5px; box-shadow:0 0 3px #333;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} .post-body img:hover{ padding:15px; box-shadow:0 0 15px #000; -o-transform: scale(0.9) rotate(360deg); -moz-transform: scale(0.9) rotate(360deg); -webkit-transform: scale(0.9) rotate(360deg);border-radius:50%; } </style>

4. Save atau simpan

Sekarang cek gambar di postingannmu, bagaimana mudah bukan? bagi sebagian Bloggers pasti akan mencoba menggunakan cara yang ke 2 karena lebih mudah dan simple.

Menambahkan efek-efek pada blog, tentu saja ini bagi kamu yang tidak masalah akan kecepatan loading blog, tapi efek css seperti ini tidak akan berpengaruh bagi kecepatan blog. Nah sekian artikel untuk saat ini dan jangan lupa lihat artikel terbaru lainnya.

BastianMan at Monday, September 11, 2023

By Ndo Andre At Monday, September 11, 2023

Cara Membuat Menu Navigasi Lavalamp Pure CSS3 di Blog

By Ndo Andre At Monday, September 11, 2023

Dengan adanya menu navigasi web blog yang baik pengunjung akan lebih mudah mengakses berbagai konten yang disajikan di situs web blog tersebut. Hal ini membantu meningkatkan durasi kunjungan karena mereka tidak mengalami kesulitan dalam mencari informasi yang mereka butuhkan.

Pengunjung juga akan merasa lebih puas dengan pengalaman mereka di blog tersebut. Ini akan berdampak positif pada retensi pengunjung, dimana mereka akan berpeluang kembali lagi ke blogmu untuk mendapatkan informasi atau mengakses layanan yang mereka butuhkan.

Meningkatnya durasi kunjungan dan retensi ini sangat penting dalam membangun hubungan jangka panjang dengan pengunjung dan meningkatkan efektivitas pada blog tersebut. Menggunakan menu yang responsif berfungsi untuk membuat pengunjung betah dan tertarik dengan halaman website.

Lavalamp Menu Pure CSS3

Menu Navigasi Lavalamp

Kamu perlu meletakkan menu navigasi di tempat yang strategis. Perlu diketahui bahwa pembuatan navigasi lebih mengedepankan kemudahan daripada kebebasan kreativitas. Oleh sebab itu, letakkan menu di tempat yang familiar bagi kebanyakan pengguna internet, misalnya di bagian atas (header) blog.

Mungkin sobat sudah pernah melihat menu navigasi yang seperti ini di beberapa template blog, karena navigasi ini sudah lama beredar dan sudah banyak dipakai di template-template blog di luar sana. Tertarik ingin mencoba menggunakannya juga? bagi kamu yang tertarik dengan Menu Lavalamp ini berikut ini adalah cara membuatnya:

Cara Membuat Menu Navigasi Lavalamp di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#nav,#nav ul { list-style:none outside none; margin:0; padding:0; }
#nav { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWxU5gyJWyr3GAxXNllR_uQ4RDFl5gNThArSckQu8CYisMMlyKhw3a5YoNz3h9FfT1W4villkxdepvD5zFWwjS2eHzOts8hNqHFoBBEUfj71gEDJV6CWS89UDCdmD8TvK7-iaFpZ9fMwWA/s1600/menu_bg.png') no-repeat scroll 0 0 transparent; clear:both; font-size:12px; height:58px; padding:0 0 0 9px; position:relative; width:957px; }
#nav ul { background-color:#222; border:1px solid #222; border-radius:0 5px 5px 5px; border-width:0 1px 1px; box-shadow:0 5px 5px rgba(0,0,0,0.5); left:-9999px; overflow:hidden; position:absolute; top:-9999px; z-index:2; -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0); -webkit-transform:scaleY(0); transform:scaleY(0); /*-moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; -webkit-transform-origin:0 0; transform-origin:0 0; -moz-transition:-moz-transform 0.1s linear; -ms-transition:-ms-transform 0.1s linear; -o-transition:-o-transform 0.1s linear; -webkit-transition:-webkit-transform 0.1s linear; transition:transform 0.1s linear; */; }
#nav li { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGJPijH3s5M8Ka8jArIKAL-qlrDCp1HPxW7ApW82eBj0Qahd_WlfHcQF4lcnSfXxUtGCufnEFYJM2glXBpZih-odHlV6C567nIjhIbf3CiDrA8hwLUaNUWn1ACZUs8fRn6_6omCIHYbJf/s1600/menu_line.png') no-repeat scroll right 5px transparent; float:left; position:relative; }
#nav li a { color:#FFFFFF; display:block; float:left; font-weight:normal; height:30px; padding:23px 20px 0; position:relative; text-decoration:none; text-shadow:1px 1px 1px #000000; }
#nav li:hover > a { color:#00B4FF; }
#nav li:hover,#nav a:focus,#nav a:hover,#nav a:active { background:none repeat scroll 0 0 #121212; outline:0 none; }
#nav li:hover ul.subs { left:0; top:53px; width:180px; -moz-transform:scaleY(1); -ms-transform:scaleY(1); -o-transform:scaleY(1); -webkit-transform:scaleY(1); transform:scaleY(1); }
#nav ul li { background:none; width:100%; }
#nav ul li a { float:none; }
#nav ul li:hover > a { background-color:#121212; color:#00B4FF; }
#lavalamp { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbc_3LNA15O-LZSJojdxEGaTlc4tpyDwbDfqeix_qK5eDK8nzYUFGV1B98mtsxvvPtw5HMacrKx7zaEs5xEKHyUA9NECyEICOUqkfUGeCMCFOoRNc6G7mweG-bhG5QMOW2Ckn69WLKr5Nc/s1600/lavalamp.png') no-repeat scroll 0 0 transparent; height:16px; left:13px; position:absolute; top:0; width:64px; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -webkit-transition:all 300ms ease; transition:all 300ms ease; }
#lavalamp:hover { -moz-transition-duration:3000s; -ms-transition-duration:3000s; -o-transition-duration:3000s; -webkit-transition-duration:3000s; transition-duration:3000s; }
#nav li:nth-of-type(1):hover ~ #lavalamp { left:13px; }
#nav li:nth-of-type(2):hover ~ #lavalamp { left:90px; }
#nav li:nth-of-type(3):hover ~ #lavalamp { left:170px; }
#nav li:nth-of-type(4):hover ~ #lavalamp { left:250px; }
#nav li:nth-of-type(5):hover ~ #lavalamp { left:330px; }
#nav li:nth-of-type(6):hover ~ #lavalamp { left:410px; }
#nav li:nth-of-type(7):hover ~ #lavalamp { left:490px; }
#nav li:nth-of-type(8):hover ~ #lavalamp { left:565px; }

Kode warna merah di atas adalah lebarnya, silahkan sesuaikan atau ganti ukurannya sesuai template yang digunakan
4. Gunakan kode di bawah ini dan masukan ke dalam template sobat:

<div class="container">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.haisob.com">Back</a></li>
<div id="lavalamp"></div>
</ul>
</div>

5. Kode tanda # itu di ganti dengan link milik kamu.

6. Save temanya.

Video Tutorial:

Nah bagaimana sobat keren bukan? Nah video di atas adalah tutorial cara membuatnya di Blogger agar kamu lebih paham bagaimana cara pemasangannnya.

Penutup

Sebelumnya juga admin sudah berbagi menu navigasi responsive v1 dan neat menu navigasi dengan social button dan juga tentang menu navigasi dengan icon efek hover di Blogger.

Kebanyakan orang saat ini lebih menyukai segala hal yang cepat, instan, dan mudah. Taksonomi atau lebih dikenal dengan sebutan tag akan membantu pengunjung mengakses konten dan halaman yang relevan dengan topik terkait.

LIVE DEMO

Menu navigasi yang menarik tentu jauh lebih baik dibandingkan tampilan menu monoton. Sekian artikel yang dapat dibagikan saat ini semoga bermanfaat dan jangan lupa lihat artikel terbaru blog ini.

Ndo Andre at Monday, September 11, 2023

By Ndo Andre At Saturday, September 09, 2023

Membuat Menu Navigasi Dropdown Bounce Effect di Blog

By Ndo Andre At Saturday, September 09, 2023

Menu Navigasi Dropdown Bounce Effect. Dengan menambahkan menu navigasi pada blog, pengunjung menjadi lebih mudah menelusuri dan menemukan artikel dalam grup atau kategori tertentu. Misalnya, jika menu navigasi menyertakan bagian berlabel widget, pengguna dapat mengakses menu drop-down yang berisi berbagai opsi terkait widget, seperti widget Facebook, widget berlangganan email, widget Google Plus, dan banyak lagi.

Perancangan sebuah website harus memperhatikan pentingnya navigasi website. Oleh karena itu, penting untuk memastikan navigasi situs Anda efektif. Ini harus memungkinkan pengguna untuk dengan mudah menavigasi halaman yang ada.

Evaluasi rutin terhadap navigasi Anda diperlukan, dan setiap masalah atau kebingungan yang dialami pengunjung harus segera ditangani dan diselesaikan. Meningkatkan SEO situs web adalah langkah penting untuk mencapai peningkatan visibilitas di mesin pencari.

Menu Nav

Navigasi Menu Dropdown Bounce Effect

Struktur navigasi hierarki adalah jenis navigasi web yang umum digunakan oleh situs portal berita, yang menunya berbeda-beda di setiap halaman. Menu halaman beranda menyertakan link ke kategori tertentu, namun bila Anda memilih kategori, menu akan beralih ke subkategori.

Sebelumnya sepeser.com telah menunjukkan cara membuat menu navigasi lavalamp dan juga membahas tentang menu yang dapat diubah ukurannya di berbagai perangkat dan menu dengan tombol untuk media sosial di Blogger.

Cara Membuat Navigasi Menu Dropdown Bounce Effect di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Jika sudah ada menu pada template maka dihapus saja, tapi jika menunya lebih bagus dari menu ini sebaiknya berpikir 4x sebelum menghapusnya.

4. Letakan kode di bawah ini di atas kode ]]></b:skin>

#navsepeser { background:#156AA6; overflow:hidden; } #navsepeser ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; } #navsepeser li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; } #navsepeser li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; } #navsepeser li.depan a { border-left:none; } #navsepeser li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; } #navsepeser li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; } #navsepeser li:hover li a { background:#156AA6; } #navsepeser li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; } #navsepeser li a:hover,#navsepeser li:hover > a { color:#fff; } #navsepeser li:hover ul.hidden { display:block; }

5. Kode ini diletakan di tempat paling cocok di dalam template kamu, misalnya mengganti kode html menu widget yang lama.

<nav id='navsepeser'> <ul> <li class='depan'><a href='/'>Beranda</a></li> <li><a href='#'>Title 2</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> <li><a href='#'>Title 3</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> <li><a href='#'>Title 4</a> <ul class='' style='display: none;'> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> <li><a href='#'>Dropdown</a></li> </ul> </li> </ul> </nav>

6. Letakan kode di bawah ini di atas kode </head>.

<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $('#navsepeser li ul').removeClass('hidden'); $('#navsepeser li').hover(function() { $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce'); }, function() { $('ul', this).slideUp(600, 'easeInExpo'); }); //]]> </script>

7. Save dan lihat hasilnya.

Video Tutorial

Video di atas adalah tutorial cara membuat dan memasangnnya di Blogger, bagikamu yang masih belum mengerti dengen cara pemasangannya.

Penutup

Aspek penting dalam meningkatkan SEO situs web mencakup memastikan navigasi yang efektif, yang memfasilitasi pengguna dalam menemukan dan mengakses konten yang diinginkan dengan mudah.

Jika situs web Anda mudah dinavigasi, pengguna cenderung menghabiskan lebih banyak waktu di situs, mengunjungi lebih banyak halaman, dan memiliki rasio pentalan lebih rendah. Selain itu, mengoptimalkan navigasi juga memiliki dampak menguntungkan pada struktur situs web dan tautan internal.

Ndo Andre at Saturday, September 09, 2023

By Ndo Andre At Saturday, September 09, 2023

Neat Menu Navigasi Dropdown dengan Social Button di Blog

By Ndo Andre At Saturday, September 09, 2023

Neat Menu Navigasi Dropdown. Hai teman-teman, apakah Anda merasa bosan dengan navigasi menu di blog Anda dan membutuhkan penggantinya? Apakah tema blog Anda tidak memiliki menu navigasi? Menu navigasi memegang peranan penting dalam sebuah blog, karena membantu pengguna dalam mengakses konten yang diinginkan dengan mudah dan cepat.

Dengan demikian, pengguna tidak akan kesulitan menemukan artikel terkait atau halaman tertentu, karena menu navigasi menyederhanakan proses pencarian. Kurangnya menu navigasi yang terstruktur dengan baik sangat membatasi tampilan situs web, sehingga menghambat pengunjung untuk segera menemukan konten yang diinginkan.

Untuk menjamin kenyamanan pengunjung, penting untuk memiliki menu navigasi yang dirancang dengan baik. Hal ini tidak hanya membantu perayapan dan identifikasi detail konten secara efisien oleh sistem tetapi juga sangat penting bagi sebuah blog, terutama ketika bertujuan untuk pertumbuhan bisnis atau pengembangan blog web yang ekstensif.

Neat Menu Navigasi

Neat Menu Navigasi Dropdown

Ketika sebuah blog berisi banyak postingan, banyak pengunjung mungkin tidak tertarik untuk membaca seluruh kontennya. Sebaliknya, mereka memilih untuk mencari informasi tertentu yang berkaitan dengan kebutuhan mereka saat ini.

Sebelumnya admin telah berbagi informasi mengenai menu navigasi responsive v2 dan juga menjelaskan cara membuat widget postingan terbaru dengan efek slide, serta cara membuat template kosong di Blogger. Sekarang admin akan memperkenalkan menu navigasi yang mungkin berguna bagi Anda. Berikut ini contoh cara membuatnya di Blogger.

Cara Membuat Navigasi Menu Dropdown di Blogger

Berikut adalah cara membuatnya di Blogger:

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Klik tanda disebelah SESUAIKAN 👉 Edit HTML

edit html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

/*Nav*/ #contact-links { text-shadow:0 -1px 0 rgba(0,0,0,0.3); margin:10px auto 0; position:relative; width:100%; } #contact-links a { color:#4C9FEB; } #contact-links a:hover { color:#3D85C6; } #my-links { float:right; font-size:12px; margin:4px 10px; overflow:hidden; text-shadow:0 1px 0 #FFFFFF; } #my-links a { margin-left:7px; padding-left:8px; text-decoration:none; } #my-links a:first-child { border-width:0; } #menu-container { background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0 ); border-radius:0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset; clear:both; height:46px; padding-top:1px; } #neat-menu { float:left; } #neat-menu a { text-decoration:none; } #neat-menu ul { list-style:none; margin:0; padding:0; } #neat-menu > ul > li { float:left; padding-bottom:12px; } #neat-menu ul li a { box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset; border-color:#D1D1D1; border-image:none; border-style:solid; border-width:0 1px 0 0; color:#333333; display:block; font-size:14px; height:25px; line-height:25px; padding:11px 15px 10px; text-shadow:0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-bottom:1px solid #2D81CC; border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; margin:-1px 0 -1px -1px; text-shadow:0 -1px 0 rgba(0,0,0,0.3); } #neat-menu > ul > li.active > a:hover { background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0 ); } #neat-menu > ul > li:first-child > a { border-radius:0 0 0 5px; } #neat-menu ul ul { background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0 ); border-radius:5px 5px 5px 5px; border:1px solid rgba(0,0,0,0.1); box-shadow:0 1px 0 #FFFFFF inset; height:0; margin-top:1px; opacity:0; overflow:hidden; width:240px; padding:0; position:absolute; visibility:hidden; z-index:1; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #neat-menu ul li:hover ul { margin-top:0\2; height:auto; opacity:1; visibility:visible; } #neat-menu ul ul a { border-right-width:0; border-top:1px solid #D1D1D1; box-shadow:0 1px 0 #FFFFFF inset; color:#444444; height:24px; line-height:24px; padding:7px 12px; text-shadow:0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 ); border-top:1px solid #4791D6; box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset; color:#FFFFFF; text-shadow:0 -1px 0 rgba(0,0,0,0.3); } #neat-menu ul ul li:first-child a { border-top-width:0; } #menu-search { margin:8px 10px 0 0; float:right; } #menu-search form { background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lSuNdqBqKxwmvMacGFmJ-42l41jvd9zeQ7_TbKyV5r5Ou6ygO-nhFnOVPkNUTbq6U4-BkFB7kEFqnDB0BVahSi-46WFnBeUc2e6d5XWSjerNB7Us1Uj7w9l0WreZJ5kvLls5R4V_dSdF/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border:1px solid #CCCCCC; border-radius:3px 3px 3px 3px; box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFFFFF; height:26px; padding:0 25px; position:relative; width:130px; } #menu-search form:hover { background-color:#F9F9F9; } #menu-search form input { color:#999999; font-size:13px; height:26px; text-shadow:0 1px 0 #FFFFFF; background:none repeat scroll 0 0 transparent; border:medium none; float:left; outline:medium none; padding:0; width:100%; } #menu-search form input.placeholder,#menu-search form input:-moz-placeholder { color:#C4C4C4; }

4. Kamu bisa menggunakan kode HTML di bawah ini untuk mengganti menu navigasi lamamu.

<div id='contact-links'> <div id='my-links'> <a href='#'>About</a> <a href='#'>Contact</a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIF4AOVOC7uBdGWEBDSB-Ac3LZeWxeEj27bhqqXmpJRsDbi6cvcNsMWpy1CnBOELdbS9qJAamB3yZirF9r2cNJVBhQgyWp62efjdo3l0WMns_qXjPJhRigdlz1VpX-hJFSmZ_kZG1bNgAC/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYILt2jRVqXQvNHaw6koV48DuWMyq-9Q50-11TcNMss6z3UDzVXNIyulGopQgCghAL5QM9L-FI_laMEP_6JCIJFi0Z_FOrKdjgVksJxjuJCALJaA77LVI68_AuNjbN62NG0iK4xortYJjg/s1600/twitter.png' title='Twitter' width='18px' /></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxgtOv3_v37_vjsYXtS1BANT4L_tl0rQsPHVwB5r_RXeraGEAZ2WlRxsH2dO0ud3D2HygzkdorkfEugES8mlVN_lGVVjqu7JOayDxWAnZ48RZhDo472JgujJvUjY6fvpJobzscLFFw7uSzlJzfja3-29aQ9HgPtYLsI76omWp-E1M0WkkWVbUorxt3xI/s100/Instagram_icon.png' title='Google' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnG0Lg3ZcZKDRUUgV9X9HefXbITj45uIbuAE1fNQLth6xL1nVpcGuvbc1zLDwo3Gu9XguWuy0GtZvNdmD-jBS7fL8bgb0mdAFxCrAunrdMCF66IZRz1jeWp77c09FH1XbhQolTAVDQW0m-LUiqj7vGZvoR_BAOhi3XmBg0IRl8fdYAkUNUVsCThLL3Eqs/s100/tiktok.png' title='RSS Feed' width='18px'/></a> </div> <div id='menu-container'> <nav id='neat-menu'> <ul> <li class='active'><a href='/'>Home</a></li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Dropdown</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> </ul> </nav>  <div id='menu-search'> <form method='get' action='https://www.sepeser.com/search'> <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/> </form> </div> </div> </div>

5. Edit kode HTML di atas dengan memasukan link yang kamu inginkan.

6. Save Temamu.

VIDEO TUTORIAL

Video di atas adalah contoh bagaimana cara memasang menu navigasi secara manual di blog. Selain sebagai elemen dekoratif atau mempercantik tampilan blog, menu navigasi juga harus ditata sedemikian rupa untuk melengkapi konten.

👉 LIHAT DEMO 👈

Hal ini menguntungkan karena membantu pengunjung dengan mudah menemukan informasi yang diinginkan di blog, menghindari kebingungan yang disebabkan oleh topik yang sulit ditemukan. Sekian postingan kali ini, semoga bermanfaat.

Ndo Andre at Saturday, September 09, 2023

By Ndo Andre At Friday, September 08, 2023

Membuat Menu Navigasi Efek Hover dengan Icon Bisa Diganti

By Ndo Andre At Friday, September 08, 2023

Menu Navigasi Efek Hover dengan Icon. Hai sobat apa kabar lagi? semoga semua dalam keadaan baik dan diberkati, ok sob kesempatan ini admin akan berbagi cara membuat menu navigasi dengan icon efek hover yang mungkin saja ini menu navigasi yang cocok buat blog sobat.

Efek hover maksudnya disini adalah ketika kursor mouse diarahkan ke menu yang sebelumnya tulisan saja maka akan berganti menjadi icon, oh yah icon ini bisa kamu ganti sesuai keinginanmu, karena icon-icon ini hanya merupakan icon gambar yang di upload ke hosting Blogger dan bisa diganti sesuai keinginanan / sesuka hati.

Navigasi di blog sangat berperan penting, pengunjung blog lebih akan lebih mudah menemukan artikel sesuai keinginannya berdasarkan kategori. Tanpa navigasi juga blog sulit buat daftar adsense. Tanpa keberadaan navigasi atau petunjuk yang jelas, pengunjung akan kesulitan menemukan artikel lain yang berhubungan dengan postingan yang dibacanya saat ini.

Menu Navigasi

Menu Navigasi Efek Hover

Menu navigasi adalah elemen penting pada blog yang memungkinkan user untuk berpindah antara halaman-halaman blog dengan mudah. Menu navigasi ini biasanya berupa link yang mengarah ke halaman lain, yaitu internal link dan external link. Internal link mengarahkan pengunjung ke halaman tertentu di blog itu sendiri.

Sedangkan external link mengarahkan pengguna ke luar blog. Nah, menu navigasi menggunakan internal link yang mengarahkan pengguna ke halaman lain blog atau website yang sama. Menu navigasi yang baik memungkinkan pengunjung masuk ke halaman yang mereka inginkan secara cepat dan mudah.

Mengenai menu navigasi sebelumnya juga admin telah berbagi menu navigasi dropdown responsive v1di Blogger dan neat menu navigasi dropdown di Blogger juga tentang menu navigasi dropdown responsive v2 di Blogger. Mungkin saja diantara kamu ada yang ingin mengubah tampilan menunya karena bosan atau ingin membuat blog terlihat menarik kamu dapat mencoba menu navigasi ini.

Cara Membuat Menu Navigasi Efek Hover dengan Icon di Blogger

1. Di Blogger, pilih blog kamu

2. Pilih menu Tema 👉 Edit HTML

Edit Html

3. Letakan kode di bawah ini di atas kode ]]></b:skin>

#sepeser-btrix-nav {margin: 5px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} #sepeser-btrix-nav li {float: left;} #sepeser-btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} #sepeser-btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} #sepeser-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} #sepeser-btrix-nav li a:hover {cursor: pointer;} #sepeser-btrix-nav li a:hover img {top: -85px;} #sepeser-btrix-nav li a:hover .aname {top: 85px;} #sepeser-btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;} #sepeser-btrix-nav li:nth-child(2) a {background: #9bc704;} #sepeser-btrix-nav li:nth-child(3) a {background: #0dc3ff;} #sepeser-btrix-nav li:nth-child(4) a {background: #51a2ec;} #sepeser-btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

4. Gunakan kode di bawah ini dan masukan ke dalam template sobat, letaknya bisa berbeda tergantung sruktur template yang digunakan ( bisa nonton video tutorial sebagai cpntoh panduannya )

<div id="sepeser-btrix-nav"> <li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TIE92TAkNU4bw44aeGHRxeGy5OeDTH04mvbqY9NSKakNemzIU_ZinahiIBppuO8VXHonyQmIhJQCw-dO1wLqU8e2eS4eGmyvTFK3X0HGvPqYinXaxqsPdJhO2YNUKdJEiHO09wIgseI/s1600/btrix-home.png" /> </a> </li> <li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMEAVa_l9uUjaYImrT6s3jVGYizKjHPWJILgedymM-XUm0PF9pcGDLEWbn82wc_W-v6kdjjKZ4zUz5MFReZoDlrFK839OWETyWPQLG779mz5KvHFUg7drZ1wB1__N6jDu33FRNKiUwoXo/s1600/btrix-download.png" /> </a> </li> <li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEATxBhfJ_ruifFBDxb8AfGNLmFicLZkqtV0hdPmTQGn4VVd555aAn70CcOz8mVMb0hhgR0PGQs4QqA4Qs1xCHcLjvpABZB1DMpY160X4DCvCib81vTgUh-tWgc7-sg_BoF9ePYGX0Ts/s1600/btrix-mysql.png" /> </a> </li> <li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dB1su19OqtpHH9FeVAcD-kyhtPXtupWW33dlS79g75WnHgECswa2gvBnqVU47a-WsErh_U25eV5_-tRYfmEGbCo3L9fKCxNSjNpgtmv3hIA-hJemPTuRWSi6VoWF7AMVdFbevRse6yM/s1600/Btrix-html.png" /> </a> </li> <li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImKqpHKCBI9bBdSemLRe5i_kGXivhv4DGFN6a0EPd3LA9VExpyWeA9ExfzTjeVeNZRIzxdHunvFHLbHq3WgmPxkDjEFgxV6vo9FzCMTpmtjiq2XiRB-5-VSYjCZBxBZ0caK8uO6rXyGs/s1600/btrix-contact.png" /> </a> </li> </div>

Kode warna merah adalah link icon gambar, kamu bisa menggantinya dengan icon milikmu jika kurang suka.

Video Tutorial

Video di atas adalah contoh cara pemasangannya, itu jika kamu bingung bagaimana cara membuatnya di Blogger.

Penutup

Secara garis besar, navigasi website adalah menu yang berada pada suatu halaman website. Menu-menu ini nantinya akan terhubung satu sama lain berdasarkan topik tertentu, dengan perantara sebuah link. Jadi link tersebut akan mengarah ke halaman lainnya yang mengarah ke banyak halaman di blog kamu.

Bagaimana tampilan navigasi ini? kamu dapat melihat gambarnya atau kedemonya saja untuk lebih jelasnya lagi.

👉 LIHAT DEMO 👈

Ketika menggunakan navigasi, pengunjung website bisa mengakses halaman atau page yang mereka mau dengan lebih mudah. Tidak hanya untuk pengunjung, adanya navigasi juga punya peran penting untuk mesin pencari. Selamat mencoba,salam Blogger.

Ndo Andre at Friday, September 08, 2023