Tutorial Blogger

By Ndo Andre At Senin, Oktober 26, 2026

Cara Mudah Membuat Indikator Persen Saat Halaman Artikel di Scroll ke Bawah

By Ndo Andre At Senin, Oktober 26, 2026

Apakah sobat pernah mendapati blog atau website ketika postingannya di scroll atau di gulir ke bawah menampilkan indikator persen? ini unik sekali. Nah, pada kesempatan ini akan berbagi tutorial bagaimana cara membuat indikator persen ketika halaman blog di scroll ke bawah ataupun ke atas.

Ketika berkunjung ke sebuah blog, scroll atau gulir ini sering dilakukan untuk melihat keseluruhan artikel yang mungkin tidak cukup hanya pada satu layar tanpa digulir. Scroll lebih mudah dilakukan jika menggunakan mouse, tinggal gulir saja tombol scroll yang biasanya ada ditengah mouse maka halaman akan bergeser sesuai keinginan.

Tombol gulir atau scroll adalah tombol yang digunakan untuk menaikan atau menurunkan halaman, biasanya ada di sisi kanan blog. Di sini kita akan membuat indikator persen pada samping tombol tersebut yang berguna menampilkan animasi untuk mengetahui berapa persen halaman tersebut telah digulir.

Cara membuat indikator gulir saat postingan halaman di scroll

Indikator saat scroll

Sebelumnya juga admin sudah berbagi redirect otomatis dan juga tentang emoticons pada komentar. Berikut ini buat kamu yang ingin memasang indikator persen saat blog di scroll untuk menambah daya tarik tampilan blog kamu.

Ada dua opsi yang bisa kamu pilih ditutorial kali ini yaitu kamu bisa memasukan kodenya langsung ke dalam tema / template blog yang mungkin agak sulit bagi kamu yang baru dan masih belajar nge-blog dan memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya.

Cara Pertama

1. Di blog kamu di Blogger.
2. Masuk ke Tema - Klik samping Sesuaikan - Pilih Edit HTML

Edit HTML

3. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#sepesergulir {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}#sepesergulir:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}

4. Letakkan kode di bawah ini di atas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#sepesergulir').height() / 2; $('#sepesergulir') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#sepesergulir').fadeOut(); }, 1500); }); //]]> </script>

5. Letakan kode di bawah ini diatas kode <body>

<div id='sepesergulir'></div>

6. Save Tema.

Selesai. Oh yah, jika kamu kesulitan dengan tutorial di atas maka admin bagikan cara pemasangan yang lebih mudah, berikut adalah caranya.

Cara ke 2

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

HTML / JavaScript

3. Masukan kode dibawah ini:

<style> #sepesergulir {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;} #sepesergulir:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);} </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#sepesergulir').height() / 2; $('#sepesergulir') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#sepesergulir').fadeOut(); }, 1500); }); //]]> </script> <div id='sepesergulir'></div>

4. Save atau simpan.

Nah sekarang kamu tinggal mengujinya dengan cara mengscroll halaman blog kamu.

Jika kamu masih kebingungan bagaimana cara pemasangannya di Blogger, maka kamu bisa menonton video tuorialnya yang sederhana di bawah ini:

Video Tutorial

Bagaimana tampilannya, keren kan? Nah, semoga dengan memasang ini blog kamu bisa tampil lebih keren, unik dan menarik.

👉 LIVE DEMO 👈

Persen seringkali dinyatakan sebagai angka bagian dari keseluruhan, dimana bagian keseluruhan itu adalah 100%. Persen bisa menunjukan nilai atau tingkat suatu bilangan. Persen seringkali juga dikaitkan dengan pekerjaan. Berapa persenkah pekerjaanmu selesai hari ini? jika pekerjaan telah selesai sampai akhir maka seringkali dinyatakan 100%.

Sekian postingan dikesempatan ini, Semoga bermanfaat.

Ndo Andre a la/s Senin, Oktober 26, 2026

By Gio Bastian At Selasa, September 03, 2024

Cara Membuat Emoticons di Kolom Komentar Blog! Berkomentar Dengan Ekspresi Wajah

By Gio Bastian At Selasa, September 03, 2024

Emoticon lebih merujuk ke sebuah simbol atau kombinasi dari simbol-simbol yang mengkespresikan wajah manusia. Jika memakai emoticons di komentar blog kamu maka kamu bisa memberikan komentar sambil berekspresi, seperti senang, sedih, lapar, marah, bahagia dan sebagianya, pengunjung juga bisa menyampaikan ekspersinya lewat emoticon ini.

Selain emoticons ada juga yang namanya emoji. Tak seperti emoticon, emoji berbentuk gambar, yang mewakili berbagai hal, bisa ekspresi wajah, hewan, makanan, buah-buahan, dan sebagainya. Jika emoticon diciptakan untuk menggambarkan emosi dengan berbasis teks dasar, emoji adalah barisan karakter yang dipakai kebanyakan sistem operasi saat ini.

Memasang emotions di kometar blog

Emoticons di Komentar Blogger

Ada banyak blog yang memasang emoticon seperti ini, mungkin saja kamu tertarik ingin membuatnya juga di blog andalan kamu. Emoticon adalah tulisan tipografi yang merepresentasikan ekspresi wajah, mulai dari tersenyum, menangis, tertawa, sedih, marah, dan semacamnya.

Penggunaan emoticon disetiap blog atau website memiliki variasinya sendiri. Sebagai contoh, emoticon yang dimiliki WA akan memiliki tampilan yang cukup berbeda dengan yang ada pada Twt begitu pun sebaliknya.

Sebelumnya juga admin telah berbagi cara membuat recent post efek slide juga tentang cara membuat halaman eror 404 redirect otomatis ke homepage dan membuat menu navigasi efek hover. Untuk membuatnya, pengguna biasa menggunakan kombinasi tanda baca. Ok sobat, berikut ini adalah cara memasang Emotions di komentar Blogger.

Cara Memasang Emoticons di Komentar Blogger

1. Blog kamu di Blogger
2. Masuk ke menu Tema ➔ Edit Html

Edit HTML

3. Letakan kode dibawah ini, diatas kode ]]></b:skin>

.emoWrap{ background-color:#fff; border:2px solid#0054BB; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center} img.emo, input.emoKey{ display:inline-block; *display:inline; vertical-align:middle} input.emoKey{ border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black}

4. Selanjutnya letakan kode berikut ini di bawah kode </head>

<script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "Kasih spasi seblum masukan kode bro."; //]]> </script> <script src='https://cdn.rawgit.com/Brando07/haisob/newbe/emoticon-haisob.js' type='text/javascript'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js' type='text/javascript'/>

5. Perhatikan kode berwarna biru di atas, jika sudah ada kode yang sama maka tidak perlu digunakan lagi.
6. Save tema/ template

7. Sekarang bisa buka salah satu postingan/ artikel kamu.

Video Tutorial

Emoticon diciptakan untuk menggambarkan emosi dengan berbasis teks dasar, untuk membuatnya, pengguna biasa menggunakan kombinasi dari berbagai tanda baca.

Nah sekarang di blog kamu telah terpasang emoticons kini diskusi antara kamu dan pengunjung blog akan semakin menarik karena kamu bisa menampilkan ekspresimu menggunaakan emoticons ini. Sekian dan terimakasih.

Gio Bastian a la/s Selasa, September 03, 2024

By Ndo Andre At Rabu, Juli 24, 2024

Cara Memasang Video Youtube Responsive Dihiasi Dengan Bingkai di Blogger

By Ndo Andre At Rabu, Juli 24, 2024

Berikut ini saya akan membagikan tutorial cara memasang video Youtube responsive dengan bingkai di Blogspot. Pastinya kita semua tahu bahwa pengguna mobile saat ini semakin banyak. Web/blog kita menjadi lebih sering di akses pengguna menggunakan mobile sehingga saat ini di tuntut web/blog harus mobile friendly dan responsive.

Ada saatnya kita harus memasukan video kedalam postingan dan seringkali adalah video yang di ambil dari Youtube, nah agar videonya dapat di tonton dengan nyaman oleh pengguna mobile maka sebaiknya dibuat menjadi responsive, oleh karena itu saat ini saya akan membagikan cara memasang video 🆈outube responsive sekaligus dengan tambahan bingkai untuk membuatnya terlihat lebih menarik.

Video Youtube Responsive Style 1

Gaya yang pertama cukup keren dengan efek bayangan dibawahnya, video title info yang muncul dibagian atas dan video terkait yang muncul diakhir video telah di nonaktifkan sehingga lebih ringan dan loading video youtube yang lebih cepat.

Style 1

1. Kamu dapat memasukan kode dibawah ini kedalam CSS template blog (Tema → tata letak → Edit HTML letakan sebelum atau diatas </head>) atau bisa juga dalam postingan tapi dengan mode HTML (bukan Compose).

<style>
.haisob-tbn-frm { width:100%; max-width:560px; margin:120px auto; }
.haisob-tbn-frm_inner { position:relative; padding-bottom:53%; height:0; background-color:#000 !important; border:15px solid #CACACA; }
.haisob-tbn-frm_inner iframe,.haisob-tbn-frm_inner object,.haisob-tbn-frm_inner embed { position:absolute; top:0; width:100%; height:100%; }
.bottomshadows { position:relative; }
.bottomshadows:before,.bottomshadows:after { z-index:-1; position:absolute; content:""; bottom:0; left:10px; width:50%; top:80%; max-width:300px; background:#777; -webkit-box-shadow:0 15px 10px #777; -moz-box-shadow:0 15px 10px #777; box-shadow:0 15px 10px #777; -webkit-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -o-transform:rotate(-4deg); -ms-transform:rotate(-4deg); transform:rotate(-4deg); }
.bottomshadows:after { -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); -o-transform:rotate(4deg); -ms-transform:rotate(4deg); transform:rotate(4deg); right:10px; left:auto; }
@media all and (max-width:400px) {
.haisob-tbn-frm_inner { border:7px solid #CACACA !important; } .bottomshadows:before,.bottomshadows:after { bottom:9px !important; }
}
</style>

2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.

<div class="haisob-tbn-frm">
<div class="haisob-tbn-frm_inner bottomshadows">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pIMwhEflezE?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

3. Ganti kode/link/id/ embed video youtube (kode berwarna merah diatas) dengan video milik kamu (lihat di url video youtube).

Video Youtube Responsive Style 2

Ini adalah frame dari mcbook kosong dengan bingkai gambar, sialahkan digunakan jika kamu anggap menarik.

Style 2

<style>
.haisob-tbn-fow { width:100%; max-width:650px; margin:120px auto; }
.haisob-wb-mac { position:relative; padding-bottom:43%; padding-top:0; height:0; overflow:hidden; -webkit-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUw8cHsHqRD7kcS-N6_0ZH3TWWW4ibd3Rwah69EQJOFdM0p-Mvi2ERK2O97y5HWqk6OHdwA2vAnpyUdruazCcLp2yT0k78ZYg3ZA_RJ-ITLjdqMUQ97bRha2cNsgqqJbYx35o5GBgWY0k/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUw8cHsHqRD7kcS-N6_0ZH3TWWW4ibd3Rwah69EQJOFdM0p-Mvi2ERK2O97y5HWqk6OHdwA2vAnpyUdruazCcLp2yT0k78ZYg3ZA_RJ-ITLjdqMUQ97bRha2cNsgqqJbYx35o5GBgWY0k/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUw8cHsHqRD7kcS-N6_0ZH3TWWW4ibd3Rwah69EQJOFdM0p-Mvi2ERK2O97y5HWqk6OHdwA2vAnpyUdruazCcLp2yT0k78ZYg3ZA_RJ-ITLjdqMUQ97bRha2cNsgqqJbYx35o5GBgWY0k/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUw8cHsHqRD7kcS-N6_0ZH3TWWW4ibd3Rwah69EQJOFdM0p-Mvi2ERK2O97y5HWqk6OHdwA2vAnpyUdruazCcLp2yT0k78ZYg3ZA_RJ-ITLjdqMUQ97bRha2cNsgqqJbYx35o5GBgWY0k/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-color:rgba(0,0,0,0); border-width:27px 76px 55px 76px; border-style:inset; }
.haisob-wb-mac iframe,.haisob-wb-mac object,.haisob-wb-mac embed { position:absolute; top:0; width:100%; height:100%; background-color:#ddd; }
@media (max-width:500px) {
.haisob-wb-mac { border-width:20px 62px 40px 62px; } @media all and (max-width:400px) { .haisob-wb-mac{border:none !important; }
}
</style>

2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.

<div class="haisob-tbn-fow">
<div class="haisob-wb-mac">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pIMwhEflezE?rel=0&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

3. Ganti kode/link/id/ embed video youtube (kode berwarna merah diatas) dengan video milik kamu (lihat di url video youtube).

Video Youtube Responsive Standart

Yang ini adalah versi standartnya berbeda gaya/style sebelumnya karena ini yang sederhana, mungkin cocok untuk kamu yang suka dengan kesederhanaan.

Kamu dapat memasukan kode dibawah ini kedalam CSS template blog (Template → tata letak → Edit HTML letakan sebelum atau diatas </head>) atau bisa juga dalam postingan tapi dengan mode HTML (bukan Compose).

CSS

<style>
.haisob-vdo { width:100%; max-width:560px; margin:15px auto; }
.haisob-vdowp { position:relative; padding-bottom:56%; padding-top:0; height:0; background-color:#000 !important; }
.haisob-vdowp iframe,.haisob-vdowp object,.haisob-vdowp embed { position:absolute; top:0; width:100%; height:100%; }
</style>

HTML

<div class="haisob-vdo">
<div class="haisob-vdowp bottomshadows">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU" frameborder="0" allowfullscreen></iframe> </div>
</div>

Sama seperti kedua style diatas, ganti kode berwarna merah diatas di kode/link video Youtube milik kamu.

Ndo Andre a la/s Rabu, Juli 24, 2024

By Ndo Andre At Rabu, Juli 24, 2024

Cara Mudah Membuat Efek Hover dengan Deskripsi Pada Gambar di Blogger

By Ndo Andre At Rabu, Juli 24, 2024

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 a la/s Rabu, Juli 24, 2024

By Gio Bastian At Rabu, Juli 24, 2024

Begini Cara Mudah Memasang Iklan Buatan Milik Sendiri di Blogger! Pemulapun Bisa

By Gio Bastian At Rabu, Juli 24, 2024

Pada postingan ini saya akan berbagi totorial bagaimana cara membuat iklan dan memasang iklan milik sendiri di Blogger. Mau membuat iklan punyamu sendiri di Blog? ternyata caranya mudah saja. Membuat iklan di blog bertujuan untung menggiring, membujuk pengunjung kepada produk atau jasa yang bertujuan menguntungkan pengiklan. Sebaiknya iklan dibuat sedemikian rupa agar menarik sehingga konsumen dalam hal ini pengunjung blog tertarik menggunakan produk atau jasa yang disediakan pengiklan.

Dulu iklan hanya sering tampil di majalah dan koran, namun seiring perkembangan zaman dengan teknologi yang semakin maju maka iklan bisa di lakukan di berbagai macam media, seperti media sosial Facebook, Instagram, Tiktok dan media sosial lainnya. Selain itu iklan juga bisa di lakukan di website atau blog, memanfaatkan web atau blog yang kita kelola sendiri.

Cara membuat kotak iklan pasang iklan disini

Cara membuat iklan di Blogger

Membuat Iklan

Sebelumnya tentu saja kamu harus menyiapkan tema apa iklanmu. Setelah itu buat gambarmu atau iklanmu sendiri menggunakan aplikasi editor picture atau gambar yang kamu ketahui, bisa menggunakan HP atau PC Laptop, aplikasinya banyak gays tinggal di pilah-pilih saja. Lebih mudahnya dalam format .jpg atau .png yah itu terserah kamu, ukurannya persegi misalnya itu jika kamu ingin menampilkan iklan di sidebar blog kamu.

Kamu bisa membuat gambarnya, bisa yang sederhana saja, nantinya di gambarnya akan kamu masukin link yang menuju ke postinganmu yang memuat deskripsi atau penjelasan lebih detailnya lagi mengenai iklanmu ini.

Membuat Iklan

Sebelumnya juga admin telah berbagi cara membuat komentar support gambar di blog bagi kamu yang kolom komentar blognya tidak bisa menampilkan gambar dan cara membuat kotak komentar dapat menampilkan emoticon menarik.

Cara memasang Iklan di Blogger

Upload gambar kamu kemana saja, paling mudahnya upload ke Blogger, ini yah untuk mendapatkan linknya saja. Caranya mudah saja buat postingan baru upload gambarmu (postingan tidak perlu di publish yah gays) masuk ke mode HTML dan copy link atau url gambar.

Di Blogger pilih blog yang ingin kamu pasangin iklan. Pilih Tata Letak => Tambahkan Gadget => HTML/JavaScript

HTML / JavaScript

Masukan kode dibawah ini.

<div style="background: none; border: none; height: 250px; margin: 0; padding: 0; width: 300px;"> <a href="https://www.sepeser.com/" target="_blank" title="blog banner"><img alt="iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRNSRYJn3nehLooPIz4vVSgCkJCRTVt9vwtfgmz1IODYj0W_7SMhyDVbU2ttf1ZDz4wdrNzFanTnxK1ACwEybGaq3-0t3e0COn8eDkqSWmMwiH_AXYoNBUzq1ovitCz-TIPlNWlZMhpxi-Li9iWfPMlA3Wii2qD_jGGvHMZWlKkJoJUoNDued1jsFYLoN/s320/contoh-baner-iklan.jpg" title="title image iklan" /></a> </div>

Keterangan:

Warna merah: Link tujuan ketika gambar di klik (Misalnya link postingan kamu yang menjelaskan promosi iklanmu )
Warna biru : Link gambar yang kamu upload tadi (di atas hanya contohnya saja, ubah saja ganti link gambarmu)
Warna hijau : ukuran gambar, width adalah ukuran lebar gambar (bisa kamu ubah dan sesuaikan) dan height adalah tinggi gambar (bisa juga kamu ubah dan sesuaikan),

Jangan lupa Save untuk menyimpan hasil buatanmu.

Cara di atas tadi seandainya lebar sidebar, atau tempat kotak iklan di blog kamu berukuran 300px (ukuran umumnya sih dan paling sering di template Blogger), tapi jika kamu ingin mencoba yang responsive dan menyesuaikan dengan lebar template yang kamu gunakan bisa coba gunakan kode di bawah ini:

<div class="separator" style="clear: both; text-align: center;"> <a href="https://www.sepeser.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRNSRYJn3nehLooPIz4vVSgCkJCRTVt9vwtfgmz1IODYj0W_7SMhyDVbU2ttf1ZDz4wdrNzFanTnxK1ACwEybGaq3-0t3e0COn8eDkqSWmMwiH_AXYoNBUzq1ovitCz-TIPlNWlZMhpxi-Li9iWfPMlA3Wii2qD_jGGvHMZWlKkJoJUoNDued1jsFYLoN/s320/contoh-baner-iklan.jpg" width="100%" /></a></div>

Ok gays, cara mengeditnya adalah seperti di atas tadi.

Memasang iklan bisa dilakukan di mana saja, dan sekarang kamu memasangnya di web atau blog kamu. Memasang iklan diharapkan mempu mendongkrak penjulan barang atau jasa. Dengan tampilan iklan yang menarik akan mudah menarik perhatian konsumen.

Kamu bisa menginformasikan nama produk atau detail produk di halaman deskripsi produk. Kamu bisa menyiapkan kontak agar konsumen bisa dengan mudah menghubungimu jika di tertarik dingan produk atau jasa yang kamu promosikan.

Dengan masang baner iklanmu sendiri pada web atau blog populermu bisa saja menghemat pengeluaranmu, yah karena kamu tidak perlu menyewa jasa pengiklan, kamu bisa promosikan sendiri lewat blog kamu. Sekian selamat mencoba.

Gio Bastian a la/s Rabu, Juli 24, 2024

By Ndo Andre At Rabu, Juli 24, 2024

Begini Cara Mudah Membuat Efek Hover BLUR pada Gambar di Blogger! Pemulapun Bisa

By Ndo Andre At Rabu, Juli 24, 2024

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.

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.

Image Hover Effect: Blur

Blur CSS image hover effect

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 ini.

Cara 1

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

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, Selamat mencoba dan Salam Bloggers.

Ndo Andre a la/s Rabu, Juli 24, 2024

By Gio Bastian At Senin, Juli 22, 2024

Cara Mudah Membuat Halaman Error 404 di Redirect Otomatis ke Homepage

By Gio Bastian At Senin, Juli 22, 2024

Halaman error 404 tidak di temukan ini biasanya terjadi karena url atau halaman blog yang sebelumnya ada tapi sudah terhapus, mungkin pemilik blog sengaja menghapusnya atau urlnya yang di ubah. Bisa juga terjadi karena kesalahan penulisan url dari pengguna yang mengarah ke domain situs kita.

Kadang url yang terhapus ini sudah terindex Google dan ditemukan oleh pengguna, nah ketika pengguna mengklik url ini dan menuju ke situs kita ternyata postingannya tidak ada atau tidak ditemukan. Pembuat blog seringkali membuat halaman khusus error page 404 untuk memberitahu pengunjung.

Redirect

Error Page 404 Redirect

Error page memberitahukan pengguna bahwa halaman tersebut sudah tidak ada dan tidak tersedia lagi. biasanya pembuat blog menyertakan pesan meminta pengunjung mencoba halaman lain atau periksa kembali url. Beberapa pembuat blog memilih membiarkan menuju ke halaman eror 404 dan ada juga yang memilih mengalihkannya ke halaman lain atau di redirect.

Seiring berjalannya waktu memang url yang di hapus ini dan sudah terindex Google, lama-lama akan hilang dari penelusuran, namun kadang ada pengguna yang kesal jika ternyata artikel yang di carinya tidak ada di blog tersebut.

Redirect atau juga bisa di artikan pengalihan adalah cara yang digunakan untuk mengarahkan pengunjung kehalaman lain yang berbeda dengan tujuan awalnya, jadi di atur pengunjung akan teralihkan dari url tujuan awalnya. Nah untuk kamu yang mau mengelihkan halaman eror 404 tidak ditemukan ke homepage blog dapat mencoba cara di bawah ini:

Cara Membuatnya di Blogger

1. Masuk ke Blogger dan pilih blog kamu.
2. Pilih menu Tema / Theme ➔ klik di samping sesuaikan kemudian pilih ➔ Edit HTML

Edit HTML

3. Letakan kode dibawah ini diatas kode </body>

<b:if cond='data:blog.pageType == "error_page"'> <div style='text-align: center;'> <div class='separator' style='clear: both; text-align: center;'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOK6kNOCqOLFoKEVvVioKD7UwGILAuFdVwn5Ie3kcr9aNkJRKnRv8JJjc6HwK3Cqw-_B6prR2-E18ViFUJLJXSgRZxCnre3hVDzH3dDKDo0q0acnIl4FR5oHumQrpkJi1Gx1VpWfxsgs/w128-h40-no/Loading10.GIF'/></div> <br/></div> <script type='text/javascript'> BSPNF_redirect=setTimeout(function() { location.pathname= "/" }, 0); </script> </b:if>

4. Save tema.

5. Untuk mengujinya coba saja dengan link yang tidak ada dan mengarah ke domain blog kamu.

Sekian, Selamat mencoba.

Gio Bastian a la/s Senin, Juli 22, 2024

By Ndo Andre At Senin, Juli 22, 2024

Cara Membuat Hanya Blockquote Saja yang Dapat di Copy Paste di Blogger

By Ndo Andre At Senin, Juli 22, 2024

Membuat Anti Copy Paste Pada Bagian Tertentu di Blog

Copy paste hanya dibagian blockquote

Apakah kamu memasang anti copy paste di blog tapi ingin agar tidak semua bagian tidak bisa dicopy, Jadi maksudnya disini hanya menyisahkan bagian tertentu saja yang bisa dicopy paste. Memasang anti copy paste di blog adalah untuk menghindari pencurian konten yang biasanya merugikan blog, banyak cara untuk mengcopy paste postingan artikel blog orang lain, tapi disini kita akan meminimalisirnya saja. Pada postingan ini, anti copas ini hanya menggunakan CSS berbeda dengan anti copas yang admin bagikan artikel sebelumnya yang mana menggunakaan javascript dan semua postingan tidak bisa di copas.

Anti copas ini kamu bisa kecualikan bagian-bagian tertentu di blog kamu misalnya hanya pada bagian code, blockquote atau tag pre. Nah disini admin akan contohkan yang paling mudah yaitu di bagian blockquote atau biasanya kutipan yang ada di postingan blog. Memasang ini cocok untuk blog yang suka membagikan kode-kode atau tutorial yang ingin hanya bagian tertentu saja yang bisa dicopy paste. Ok berikut cara memasangnya.

Cara Membuatnya di Blogger

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

HTML / JavaScript

3. Masukan kode dibawah ini:

<style type='text/css'>
.post { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }
.post blockquote { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }
</style>

4. Save atau simpan.

Penerapan Pada Postingan

Blok atau tandai teks kalimat yang kamu inginkan bisa di copy paste, kamu bisa menggunakan blockquote atau kutip teks seperti gambar di bawah ini:

Blockquote di Blogger

Jadi dengan kode diatas pada bagian blockquote atau kutipan saja yang bisa di copy tapi selain itu yang ada di postingan tidak bisa dicopy paste.

Ndo Andre a la/s Senin, Juli 22, 2024

By Ndo Andre At Senin, Juli 22, 2024

Cara Mudah Membuat Efek Hover Shadow Border Radius pada Gambar di Blogger

By Ndo Andre At Senin, Juli 22, 2024

Efek hover shadow border radius pada gambar blog 1

Efek hover shadow border radius 1

Apakah sobat pernah berkunjung ke blog yang menggunakan efek hover pada gambar? bagaimana apakah blognya terlihat menarik? ternyata cara membuatnya mudah. Pada kesempatan ini 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.Penggunaan efek hover pada gambar seperti ini memiliki keuntungan tersendiri yaitu, dapat meningkatkan daya tarik visual pada blog.

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 Pertama

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, juga membuat efek daun berjatuhan di blog dan cara memasang navigasi responsive.

Cara ke 2

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

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.

Ndo Andre a la/s Senin, Juli 22, 2024

By Ndo Andre At Senin, Maret 18, 2024

Begini Cara Mudah Mengetahui Apakah Artikel Blog Telah Terindex Google Atau Belum

By Ndo Andre At Senin, Maret 18, 2024

mengetahui artikel postingan telah terindex Google

sepeser.com

Cara untuk mengetahui apakah artikel sudah terindex Google atau belum berikut ini adalah dengan dengan menggunakan Google Search Console. Cara ini bisa dilakukan jika kamu sudah mendaftarkan blog kamu di search console. Sebelum di kenal menjadi Google Search Console sebelumnya bernama Google Webmasters. Ini adalah layanan yang disediakan oleh Google untuk membantu pemilik blog dalam memeriksa kesehatan sitis dan mengoptimalkan pencaharian blog miliknya.

Cara mengecek blog telah terindex di Search Google Console

1. Pastikan kamu sudah terdaftar di Google Search Console
2. Buka dashboard
3. Pada kotak pencarian, pastekan link artikel atau halaman yang ingin dicek

4. Kemudian klik Enter dan perhatikan hasilnya

Google search console

Tampilan di atas menunjukkan bahwa website atau halaman sudah masuk dalam index Google. Namun jika tampilan seperti di bawah ini, maka halaman tersebut belum terindex mesin pencari Google.

Google search console

Sekian tips blog yang dapat dibagikan saat ini, semoga bermanfaat.

Ndo Andre a la/s Senin, Maret 18, 2024

By Ndo Andre At Minggu, Maret 17, 2024

Begini Cara Mudah Redirect Error Page 404 ke Halaman yang Kamu Inginkan di Blogger

By Ndo Andre At Minggu, Maret 17, 2024

Cara Redirect Postingan Terhapus ke Link Baru

Cara Mudah Redirect Error Page 404

Ini sering dilakukan agar pengunjung yang masuk ke halaman error tidak ditemukan dialihkan ke halaman yang masih relevan atau halaman perbaikan agar tidak kehilangan trafik karena membuat pengunjung kecewa. Disini kamu meredirect halaman tidak ditemukan ke halaman yang kamu inginkan tapi masih dalam blog kamu sendiri. Redirect atau pengalihan adalah proses meneruskan halaman lama ke halaman baru.

Cara Membuatnya di Blogger

1. Masuk ke Blogger dan pilih blog kamu.
2. Pilih menu Tema / Theme ➔ Klik disamping Sesuaikan ➔ Edit HTML

Edit HTML

3. Letakan kode dibawah ini diatas kode </body>

<b:if cond='data:blog.pageType == "error_page"'> <script type='text/javascript'> BSPNF_redirect=setTimeout(function() { location.pathname= "/p/widgets-blog.html" }, 0); </script> </b:if>

Ganti link warna biru di atas dengan link tujuan baru yang kamu ingini pengganti link yang telah terhapus ini.

4. Save Template.

Pengalihan ke halaman lain bertujuan membuat pengunjung tetap bertahan di situs web, pengalihan dari halaman di hapus biasanya ke halaman utama atau halaman kontak, tetapi kamu juga bisa mengaturnya ke halaman lain tapi masih relevan.

Ndo Andre a la/s Minggu, Maret 17, 2024

By Ndo Andre At Minggu, Maret 17, 2024

Begini Cara Menjadwalkan Artikel Kapan Akan di Posting atau di Publikasikan di Blogger

By Ndo Andre At Minggu, Maret 17, 2024

Publish post

Ada beberapa alasan penulis blog ingin menjadwalkan kapan artikel diposting atau dipublikasikan, salah satu alasanya agar blog terus terlihat aktif memberikan postingan baru kepada pengunjung setia ataupun pengikut yang telah setia mengikuti blog miliknya.

Cara Mengaturnya di Blogger

1. Di Blog kamu di Blogger

2. Saat selesai menulis artikel atur jadwal kapan tanggal dan waktu ingin publikasikan artikelmu:

Jadwal posting

3. Setelah selesai tinggal klik "publikasikan"

Ini bisa kamu ubah kapan saja, kembalikan saja ke mode "Draft" jika kamu ingin mengubah waktu ataupun tanggalnya.

Cara ini sebenarnya mudah saja diketahui, karena disaat kamu membuat artikel menggunakan komputer atau laptop disebelah kanan sudah ada pilihan kapan tanggal yang kamu ingini artikelmu dipublikasikan.

Ndo Andre a la/s Minggu, Maret 17, 2024

By Ndo Andre At Sabtu, Maret 16, 2024

Cara Mudah Mengganti Background Blog dengan Gambar yang Kamu Inginkan di Blogger

By Ndo Andre At Sabtu, Maret 16, 2024

Mengganti Background Template Blog

Background blog adalah tampilan latar belakang dari sebuah blog yang berbeda pada setiap template yang dipakai dan biasanya secara default hanya berupa warna saja tapi bisa kamu ganti menjadi gambar sesuai keinginanmu. Misalnya blog kamu isinya anime, biar lebih gress kamu ingin mengganti background dengan gambar anime, maka kamu bisa menggunakan cara yang admin bagikan di bawah ini.

Mengganti background blog juga dapat membuat tampilan blog menjadi lebih menarik. Bagi penulis blog dan bosan dengan tampilan background blognya dan ingin mengubahnya dengan gambar yang keren bisa mengikuti langkah berikut ini.

Cara Mengganti Background dengan Gambar 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 </body>:

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgroqe8hLBvWWPRVzsqkYVtPoZIShsizB-9pBQwLhN7xn-tsgW0SAkb8YOkvRmO3ycJ_-m5wJCybsjAt8LhLBQCwkz_FsTf7N1i7f8ntfgHkuq5QusEJ-3BWYihndNCI_0Y6fEzDu4r5VJ_/w0/anime-girl-sky-clouds-sunrise-scenery-4K-67.jpg)}

Ganti kode link berwarna biru di atas dengan link gambar background yang kamu inginkan, bisa kamu ambil di penelusuran Google atau upload sendiri di blog kamu dan copy saja linknya.

4. Save template.

Sekian, selamat mencoba.

Ndo Andre a la/s Sabtu, Maret 16, 2024

By Ndo Andre At Sabtu, Maret 16, 2024

Cara Agar Link Error 404 di Redirect ke Homepage Blog! Pemulapun Bisa Membuatnya

By Ndo Andre At Sabtu, Maret 16, 2024

redirect ke homepage

Tutorial ini berguna mengalihkan otomatis link yang terhapus tapi sebelumnya telah terindex Google dan masih ada di penelusuran Google, jika nantinya link terhapus kemudian diklik pengunjung maka akan dialihkan otomatis ke beranda atau homepage blog. Langsung saja berikut adalah cara membuatnya.

Cara Membuatnya di Blogger

1. Masuk ke Blogger dan pilih blog kamu.
2. Pilih menu Tema / Theme ➔ klik di samping sesuaikan kemudian pilih ➔ Edit HTML

Edit HTML

3. Letakan kode dibawah ini diatas kode </body>

<b:if cond='data:blog.pageType == "error_page"'> <div style='text-align: center;'> <div class='separator' style='clear: both; text-align: center;'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOK6kNOCqOLFoKEVvVioKD7UwGILAuFdVwn5Ie3kcr9aNkJRKnRv8JJjc6HwK3Cqw-_B6prR2-E18ViFUJLJXSgRZxCnre3hVDzH3dDKDo0q0acnIl4FR5oHumQrpkJi1Gx1VpWfxsgs/w128-h40-no/Loading10.GIF'/></div> <br/></div> <script type='text/javascript'> BSPNF_redirect=setTimeout(function() { location.pathname= "/" }, 0); </script> </b:if>

4. Save template

5. Untuk mengujinya coba saja dengan link yang tidak ada dan mengarah ke blog kamu.

Seiring berjalannya waktu url yang di hapus ini dan sudah terindex Google akan hilang dari penelusuran, namun kadang link ini telah tertaut ada dihalaman website atau blog diluar pengetahuanmu, maka kamu bisa coba mengalihkannya ke halaman sejenis yang masih berhubungan atau ke homepage blog kamu.

Ndo Andre a la/s Sabtu, Maret 16, 2024

By Ndo Andre At Sabtu, Maret 16, 2024

Cara Menampilkan dan Menyembunyikan Widget di Blog Versi Mobile dengan Tag Kondisional

By Ndo Andre At Sabtu, Maret 16, 2024

tutorial blog

Beberapa pemilik blog saat mengedit template miliknya ingin memisahkan salah satu fungsi kode script atau widget, yaitu ingin tampil hanya di versi mobile saja atau sebaliknya hanya tampil di versi desktop dan tidak tampil di versi mobile.

Tag kondisional adalah tag yang digunakan untuk mengatur suatu script /widget ditampilkan di suatu halaman spesifik atau tidak. Ada banyak macam tag kondisional, namun pada kesempatan ini admin hanya spesifik menjelaskan pada tag kondisional tampilan dekstop dan mobile.

Tag Kondisional Hanya Tampil di versi Mobile

Tag kondisional berikut ini untuk mengatur agar script atau widget hanya tampil pada tampilan versi mobile dan tidak tampil di versi mobile dapat menggunakan tag kondisional berikut :

<b:if cond='data:blog.isMobileRequest == "true"'>  </b:if>

Tag Kondisional Hanya Tampil di versi Dekstop

Tag kondisional berikut ini untuk mengatur agar script atau widget hanya tampil pada tampilan versi dektop dan tidak tampil di versi mobile dapat menggunakan tag kondisional berikut :

<b:if cond='data:blog.isMobileRequest == "false"'>  </b:if>

Tag Kondisional Tampil di Mobile Selanjutnya Tampil di Dekstop

Tag kondisional berikut ini dengan tag pengecualian dimana kamu ingin menampilkan 2 script dengan pengecualian script pertama hanya tampil di mobile dan script kedua hanya tampil di desktop. Tag kondisionalnya adalah sebagai berikut :

<b:if cond='data:blog.isMobileRequest == "True"'>  <b:else/>  </b:if>

Seperti yang sudah dijelaskan di atas, dengan menggunakan tag kondisional ini maka kamu dapat mengatur tampilan script dan widget tersebut agar terpisah antara mobile atau dekstop.

Ndo Andre a la/s Sabtu, Maret 16, 2024

By Ndo Andre At Kamis, Maret 14, 2024

Begini Cara Mudah Mengganti Background dengan Warna yang Diinginkan di Blogger

By Ndo Andre At Kamis, Maret 14, 2024

Mengganti Warna Background Blog

Menghias blog agar tampak menarik dilihat pengunjung sebenarnya tidak sulit, ketika tema blog kamu terlihat menarik membuat pengunjung nyaman dan ingin berlama-lama dan bahkan beberapa ingin kembali lagi ke blog kamu. Apalagi jika dilengkapi dengan navigasi yang mudah, kelengkapan deskripsi pada postingan pastinya pengunjung ingin kembali lagi ke blog atau website kamu.

Warna background merupakan warna yang disusun demi menciptakan efek latar belakang yang sesuai dengan tema atau topik suatu blog. Background menjadi salah satu hal yang perlu diperhatikan agar blog yang kamu ciptakan mempunyai tampilan yang menarik. Terdapat banyak cara yang bisa kamu lakukan untuk menambahkan background pada blog, salah satunya adalah dengan penambahan warna, sehingga mendapat tampilan visual yang lebih menarik dan elegan.

Cara Mengganti Background Blog dengan Warna 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 </body>:
4. Jika sudah ketemu tambahkan kode di bawah ini:

body { background:#ddd;}

Kode berwarna biru di atas adalah kode warna Html, kamu bisa mengganti kode warnanya sesuai keinginanmu misalnya menggunakan Generator Warna atau kode warna Html (search Google).

5. Save template.

Sekian yang dapat admin bagikan saat ini. Selamat mencoba.

Ndo Andre a la/s Kamis, Maret 14, 2024

By Ndo Andre At Rabu, Maret 13, 2024

Begini Cara Mudah Mengetahui Apakah Blogmu Sudah Terindex di Penelusuran Google

By Ndo Andre At Rabu, Maret 13, 2024

Cek blog terindex Google

Pada saat membuat blog atau website tentu saja salah satu hal yang penting bagi penulis blog umum adalah mengecek apakah blognya sudah terbaca terindex Google atau belum.

Jika blog sudah terindex Google, maka blog tersebut akan muncul di hasil pencarian. Namun blog yang sudah terindex tidak otomatis akan masuk ke ranking pertama. Blog terindex yang dimaksudkan di sini artinya blog tersebut sudah ada di pencarian Google.

Cara Mengetahui Website atau Blog Terbaca Index Google

1. Di Browser kamu, buka halaman awal Google.

2. Pada kolom sebagai contoh isi dengan: site:alamat-blog

Contohnya kalau blog ini, site:sepeser.com Selanjutnya klik tombol enter dan lihat hasilnya

Cek Blog Terindex

3. Jika muncul nama dan alamat web blog kamu maka selamat blog kamu telah terindex Google.

Blog yang baru dibuat biasanya membutuhkan waktu yang cukup lama untuk membuatnya terindex Google dengan cepat, seperti mengisinya dengan artikel kemudian mendaftarkannya ke Google Search Console.

Ndo Andre a la/s Rabu, Maret 13, 2024

By Ndo Andre At Selasa, Maret 12, 2024

Cara Mengganti Background Default Tema Bagi Kamu yang Masih Menggunakan Tema Bawaan

By Ndo Andre At Selasa, Maret 12, 2024

Mengganti Background Default Tema Blog

Template blog bisa juga disebut sebagai tema atau tampilan sebuah blog. Kamu bisa mengedit sendiri tema blog yang digunakan di blog kamu, namun hal itu tentunya juga harus ditunjang dengan memiliki pengetahuan yang cukup mengenai html.Tema atau template di Blogger adalah desain dari halaman sebuah blog beserta seluruh elemen penataan yang tersusun secara sistematis. Hal ini yang membuat blog menjadi lebih enak dipandang dan memudahkan user untuk mencari informasi dalam blog tersebut.

Mungkin saja karena sudah bosan dengan tampilan latar belakang atau juga karna ingin agar tampilan template Blogger terlihat lebih keren maka kamu ingin mengganti tampilan background blog kamu. Berikut adalah caranya:

Cara Mengganti Background Default Tema Blogger

1. Di Blog Blogger 😀
2. Pilih Menu Template ➔ Pilih Sesuaikan ➔ Pilih Latar Belakang ➔ pilih Gambar Latar, pilih gambar background apa yang ingin kamu gunakan.

Cara Mengganti Background Default Template Blogger

Selain gambar bawaan ada juga pilihan unggah gambar, jadi kamu dapat mengupload gambar sesuai kinginanmu untuk dijadikan gambar latar belakang tema.

4. Jika sudah sesuai keinginan, pilih selesai dan klik terapkan ke Blog.

Sekian, selamat mencoba.

Ndo Andre a la/s Selasa, Maret 12, 2024

By Ndo Andre At Selasa, Maret 12, 2024

Begini Cara Mudah Mengetahui Postingan Telah Terindex Google Tanpa Masuk Search Konsol

By Ndo Andre At Selasa, Maret 12, 2024

Terindex Google

Biasanya admin blog atau penulis artikel penasaran apakah artikel postingannya telah ada di pencaharian Google atau belum. Terdapat kepuasan tersendiri ketika artikel yang telah dipublikasikan bisa muncul di pencarian Google, apalagi ada pada peringkat yang bagus.

Artikel yang terpublis dan telah terindex Google akan membawa peluang visitor berkunjung ke blog kita. Namun tahukah kamu bagaimana cara mengecek artikel telah terindek Google atau belum? Daripada lama-lama berikut admin bagikan tips singkatnya.

Cara Mengetahui Artikel Postingan Blog Terbaca Index Google

1. Di Browser kamu, buka halaman awal Google.

2. Pada kolom pencarian isi dengan: site:link artikel

Contohnya kalau blog ini, site:https://www.sepeser.com/2023/08/jquery-versi-terbaru.html Selanjutnya klik tombol enter dan lihat hasilnya:

Artikel berhasil terindex Google

Biasanya admin yang membuat blog baru merasa penasaran ketika artikel yang sudah dipublish tidak muncul di search engine Google. "Loh, kok artikel postingan saya tidak atau belum muncul di pencarian Google?" Hal itu wajar karena untuk blog baru robot Google masih berusaha memahami blog kamu.

Ndo Andre a la/s Selasa, Maret 12, 2024