Cara Membuat Effect Goyang Pada Hover di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Effect Goyang pada Hover di Blogger, Hal ini dilakukan untuk mempertahankan dan menambah jumlah pengunjung, semakin bagus blog yang dikelola semakin betah pengujung di blog kita.

Jika kamu tidak mengetahui apa itu hover nah pada kesempatan kali ini saya akan memberikan info apa itu hover, Hover adalah salah satu element CSS yaitu sebuah efek element yang akan terjadi jika kamu sentuh dengan menggunakan mouse.

Cara Membuat Effect Goyang Pada Hover di Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya silahkan cari kode berikut ini ]]></b:skin> dan pastekan tepat DIATAS kode tersebut.

/* Button Hover by Jagoandzgn */
.Jagoandzgnbtn{
  text-align: center;
}
.jagobtn{
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-size: 200%;
  transition: 0.6s;
}
.jagobtn1{
  background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.jagobtn:hover{
  background-position: right;
}

4. Kalau sudah silahkan klik SIMPAN dan Selesai.
5 .Untuk menggunakan effect tersebut silahkan copy kode dibawah ini tepat di mode HTML [Bukan Compose]

<div class="jagoandzgnbtn">
<button class="jagobtn jagobtn1">Jagoandzgn</button>
</div>

Demo

Bagaimana mudah bukan untuk tutorial Cara Membuat Effect Goyang Pada Hover di Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Membuat Schema QAPage Tanya Jawab Manual di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial menarik bagaimana Cara membuat Schema QAPage (Halaman Tanya Jawab) Manual di Blogger dengan mudah hanya menambahkan beberapa kode didalam posting saja.

Halaman tersebut bakal muncul di penelusuran Google yang nampak sebagai halaman tanya jawab, penampilan Schema ini sangat berbeda dengan ketika kamu mengaksesnya melalui desktop dan mobile, oke langsung saja kita ketutorial pemasangan Json nya.

Cara Membuat Schema QAPage (Tanya Jawab) Manual di Blogger

1. Silahkan kamu copy kode json dibawah ini dan pastekan diatas artikel dalam mode HTML (bukan Compose).

<script type='application/ld+json'>
  {
    "@context": "http://schema.org",
    "@type": "QAPage",
    "mainEntity": {
      "@type": "Question",
      "name": "Judul Artikel",
      "text": "Deskripsi artikel",
      "answerCount": 10,
      "upvoteCount": 50,
      "dateCreated": "28/12/2019",
      "author": {
        "@type": "Person",
        "name": "Namamu"
      },
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Teks Jawaban Pertama",
        "dateCreated": "28/12/2019",
        "upvoteCount": 2500,
        "url": "https://www.jagoandzgn.com",
        "author": {
          "@type": "Person",
          "name": "Namamu"
        }},
      "suggestedAnswer": [
        {
          "@type": "Answer",
          "text": "Teks Jawaban Kedua",
          "dateCreated": "1/12/2019",
          "upvoteCount": 1250,
          "url": "https://www.jagoandzgn.com",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }}
      ]
    }
  }
</script>

2. Ada beberapa keterangan yang harus kamu isi agar data yang Terindex pun lebih relavan dengan data yang ada di artikel pastinya. Untuk pengisiannya sebagai berikut :

• Name Quest : Berisi judul artikel
• Name Person : Berisi nama orang kedua maupun ketiga
• URL : Berisi url artikel bukan url blog
• AnswerCount : Berisi jumlah suara atau nominal angka
• dateCreated : Berisi tanggal pembuatan artikel
• Text : Berisi kalimat jawaban atau keterangan.

3. Pada saat kamu mengedit data tersebut alangkah baiknya kamu menggunakan Alat Uji Coba Data Terstruktur terlebih dahulu agar tidak terjadi masalah atau error.

Hasil kode diatas akan Terindex seperti gambar dibawah ini.

Nah, apabila kamu ingin menambah jawaban yang ketiga silahkan kamu copy kode dibawah ini.

,
{
          "@type": "Answer",
          "text": "Teks Jawaban Ketiga",
          "dateCreated": "1/25/2019",
          "upvoteCount": 75,
          "url": "https://www.kurazone.net",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }}

4. Letakkan sebelum kode ] maka hasilnya akan seperti dibawah ini.

<script type='application/ld+json'>
  {
    "@context": "http://schema.org",
    "@type": "QAPage",
    "mainEntity": {
      "@type": "Question",
      "name": "Judul Artikel",
      "text": "Deskripsi artikel",
      "answerCount": 10,
      "upvoteCount": 50,
      "dateCreated": "28/12/2019",
      "author": {
        "@type": "Person",
        "name": "Namamu"
      },
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Teks Jawaban Pertama",
        "dateCreated": "28/12/2019",
        "upvoteCount": 2500,
        "url": "https://www.jagoandzgn.com",
        "author": {
          "@type": "Person",
          "name": "Namamu"
        }},
      "suggestedAnswer": [
        {
          "@type": "Answer",
          "text": "Teks Jawaban Kedua",
          "dateCreated": "1/12/2019",
          "upvoteCount": 1250,
          "url": "https://www.jagoandzgn.com",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }},
{
          "@type": "Answer",
          "text": "Teks Jawaban Ketiga",
          "dateCreated": "1/25/2019",
          "upvoteCount": 75,
          "url": "https://www.jagoandzgn.com",
          "author": {
            "@type": "Person",
            "name": "Namamu"
          }}
      ]
    }
  }
</script>

5. Maka hasil penelusuran Google bakal nampak seperti gambar dibawah ini.

Masing-masing kode Jawaban memiliki lingkupnya sendiri, jadi penggunaan tanda koma (,) sebagai pemisah adalah hal yang sangat penting.

Bagaimana mudah bukan untuk tutorial Cara Membuat Schema QAPage (Tanya Jawab) Manual di Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Mudah Menggunakan Google Question Hub di Blogger

Jagoandzgn.com - Kamu sudah taukah fitur terbaru dari Google Question Hub yang baru dirilis oleh Google baru-baru ini. Sebenarnya saya baru mendapatkan notifikasi pagi ini ketika saya membuka dashboard blogger saya fikir fitur ini sangat bermanfaat bagi blogger pemula.

Question Hub adalah sebuah fitur yang menyediakan banyak sekali informasi tentang beragam ide yang di pertanyaan oleh pelanggan yang belum mendapatkan cukup informasi. Fitur ini sangat bermanfaat apabila kamu masih bingung dengan sebuah pertanyaan atau tutorial yang mana fitur ini bakal memberikan jawaban sesuai dengan pertanyaan kamu.

Dengan adanya fitur Question Hub ini, saya tidak perlu lagi mencari informasi yang dibutuhkan hanya dengan menggunakan fitur ini saya langsung menemukan informasi tersebut dengan mudah.

Kelebihan dan Manfaat Question Hub
1. Mencari Kata Kunci
2. Memperbanyak Traffic
3. Membuahkan Hasil dan Manfaat

Cara Menggunakan Google Question Hub di Blogger

1. Silahkan login ke blogger.com dengan menggunakan Gmail kamu, setelah itu klik Daftar dan ikuti tutorial berikut.

2. Setelah masuk silahkan kamu masuk Kebagian Add Questions > Langkah selanjutnya Klik Dibagian Kotak Contohnya tentang Artis & Entertainment, Autos & Vehicles,dll. Nah disini kalian Terserah bebas pilih mau menggunakan yang mana intinya kalian pilih yang sesuaikan Niche Blog kalian.

3. Disini saya akan Menggunakan Internet & Telecom > Kemudian akan ada Muncul Banyak kata kunci dibawah Internet & Telecom tepatnya di bawah All Topics, Nah disitu ialah terdapat pertanyaan yang sedang orang cari, Nah dikesempatan inilah kita bisa menggunakan sebagai Keyword Nantinya. Kemudian Kalian Klik Add Pada keyword yang sudah dipilih.

4. Setelah kalian Klik Add > Lalu ada muncul kata Antena televisi 10 more questions added, Langkah selanjutnya kalian Klik Close X Ads Question di Suduh Kiri Atas. Seperti gambar #2 dibawah ini.

#1

#2

5. Langkah selanjutnya Dibawah Antena Televisi ada terdapat banyak 30 Keyword Kurang lebih jika di Scrool Kebawah nah Question inilah yang kita gunakan Untuk Judul Keyword nantinya.

6. Kalau sudah silahkan klik SIMPAN dan Selesai, Selanjutnya silahkan buat artikel sesuai dengan pertanyaan yang dikirim.

Cara Submit Artikel ke Google Question Hub

1. Silahkan kamu ceklis Apakah Bisa kabel listrik dipasang ke kabel Antena TV? Kemudian Klik Answer > Isikan Link artikel Dikolom Link to Article yang sudah di buat tadi > Lalu Submit > Selesai. Seperti gambar dibawah.

Bagaimana mudah bukan untuk tutorial Cara Mudah Menggunakan Google Question Hub di Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Download Template Textrim v3 Free Blogger Responsive

Jagoandzgn.com - Ada kabar bagus nih bagi kamu pengguna blogger yang menginginkan sebuah template yang pastinya gratis, Nah pada kesempatan kali ini saya akan membagikan sebuah template blog yang sangat ringan dalam hal kecepatan loading blog maupun nilai plus bagi Google.

Nama templatenya adalah TEXTRIM, kenapa diberi nama tersebut karena template ini mengusung konsep text only yang hanya memunculkan teks saja pada bagian homepage atau biasa kita sebut Halaman Utama. Textrim ini sendiri merupakan sebuah template buatan mbak igniel yang merupakan pemilik dari blog igniel.com.

Karena tidak ada gambar pada bagian homepage, maka template ini bisa kita sebut dengan template super ringan ketika pertama kali dibuka. seperti yang diketahui, Google memberikan nilai plus kepada blog yang mempunya loading yang cepat dan pastinya membuat pengunjung menjadi lebih nyaman untuk terus berada di blog kamu.

Tidak ada gambar bukan berarti tidak ada struktur datanya menjadi kurang komplit. Ketika dicek di Google Structured Data Testing Tool, ImageObject akan tetap terbaca dan diambil dari gambar pertama dalam isi postingan. Paham ? Gambar tidak ditampilkan tapi tetap mengirimkan datanya ke skema struktur. kamu bisa cek aja sendiri dan buktikan kalau strukturnya tetap komplit seperti template pada umumnya, ungkap mbak Igniel di salah satu artikelnya.

Template ini sangat cocok untuk kamu pengguna blog yang memiliki niche sebagai berikut :

• Lowongan Pekerjaan
• Pendidikan
• Kesehatan
• Lirik Lagu dan Chord Gitar

Fitur dan Kelebihan Template Textrim

1. Blogger Layout v3 dan Widget v2
2. Versi terbaru dan tercanggih dari Blogger.
3. Multi Related Post dalam Postingan
4. Kalau biasanya artikel terkait hanya bertumpuk di satu tempat, maka dengan Textrim Blogspot theme ini keberadaannya akan disebar dan diselipkan ke dalam paragraf sehingga akan muncul berulang dan lebih menarik perhatian pembaca.
5. Super Ringan
6. Memaksimalkan kode bawaan Blogger untuk membuat fitur sehingga penggunaan Javascript bisa diminimalisir yang berakibat semakin cepatnya loading blog.
7. Support Blogger Theme Designer
8. Jika ingin mengubah font, warna, dan tampilan lainnya cukup diubah melalui Blogger Theme Designer, tidak perlu pusing mengedit HTML.
9. Responsif
10. Mobile Friendly
11. SEO Friendly
12. Valid Strutur Data Google
13. Schema Markup
14. Breadcrumbs
15. Share Button ke Media Sosial
16. Related Post di Bawah Artikel
17. Navigasi
18. Back to Top
19. Dan lainnya.

Changelog :

v3 (27 Januari 2020)
- Perbaikan Breadcrumb agar valid struktur data Google
- Penambahan slot iklan in-feed tengah artikel
- Perbaikan meta tag deskripsi
- Penambahan skema struktur
- Mengaktifkan dan menonaktifkan efek GLITCH pada judul blog

Textrim v3 Blogger Theme Free Download

Untuk kamu yang ingin melihat tampilan tempalenya kamu bisa mengklick tombol dibawah ini, dan bagi kamu yang menginginkan template tersebut kamu bisa mengunduh filenya secara gratis, dengan klick tombol berikut.

Demo

Download

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2

Jagoandzgn.com - Setelah kita membahas versi pertama yaitu Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1 yang hanya memberikan CSS dan HTML saja, nah pada kali ini saya akan memberikan tutorial bagaimana cara memberikan tutorial menambahkan nama alamat dll di bagian kedua ini, sekaligus tahap terakhir dalam pembuatan footer Jagoandzgn.

Nah, di artikel sebelumnya kita hanya membahas bagaimana cara membuat tampilannya saja seperti gambar dibawah ini.

Selanjutnya, kita akan membuat dan menambahkan informasi kontak dan menu - menu yang ingin di tampilkan di bagian menu tersebut.

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TATA LETAK > Klik Edit dibagian kontak.
3. Silahkan copy kode HTML dibawah ini dan paste di kolom konten tersebut.

<div class="footer-contact">
<p><label><span><i class="fa fa-user"></i></span></label>Ahmad Febrian Sembiring<br/>
<label><span><i class="fa fa-map-marker"></i></span></label>Jln. Medan Sinembah, Sumatera Utara - Indonesia</p>
<p class="phone"><label><i class="fa fa-whatsapp"></i></label>
<span>0813-7579-3824</span><br/>
<label><i class="fa fa-facebook-official"></i></label>
<span>www.fb.com/AhmdFebryan</span><br/>
<label><i class="fa fa-envelope-o"></i></label>
<span>cs@jagoandzgn.com</span><br/>
<label><i class="fa fa-rss"></i></label>
<span class="sotabilo aa"><a target="_blank" class="murub" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=1211395477844098579">Follow Blog Jagoandzgn.com</a></span>
</p>
</div>
<style>.sotabilo{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}</style>

4. Untuk hasilnya akan seperti gambar dibawah ini.

Sisanya kamu tinggal mengganti Nama, Alamat, No HP / Bisnis, ID Facebook, Alamat email dan ID Follow Blog yang bisa kamu copy dengan masuk ke akun blogger kamu lalu copy ID Blogger yang berada di bagian address bar.

5. Selanjutnya, Silahkan kamu copy kode dibawah ini untuk menambahkan widget lagi yang dikhususkan untuk menampilkan menu tersebut, dan letakkan tepat dibagian Tools atau Navigasi tersebut.

<div style="padding-bottom:1px;margin-bottom:5px;border-bottom:1px solid #222;padding-left:5px;border-left:5px solid #222;">
<a class="murub" style="color:white" href="https://www.jagoandzgn.com/p/color-picker.html" target="_blank" title="Color Picker">Color Picker<span style="background:#222" class="sasabilo"><i class="fa fa-paint-brush"></i></span></a>
</div>

6. Hasilnya akan terlihat seperti gambar dibawah ini.

Jika kamu ingin menambahkan menu lebih dari satu, kamu hanya tambahkan menu lebih dari satu, maka paste kode yang tadi kamu copy dibawah kode menu yang pertama, begitupun seterusnya untuk tampilannya kamu bisa lihat gambar dibawah ini.

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1

Jagoandzgn.com - Untuk para blogger pastinya tidak asing lagi dengan namanya Widget Footer di blog, widget sendiri yang bisa kita atur pada bagian menu TATA LETAK. Berbagai macam widget ini kita bisa buat sendiri untuk mempercantik tampilan blog kita. Waktu itu ada yang mengirim email melalui email cs Jagoan yang meminta untuk membuat tutorial ini.

Nah, untuk template yang belum memakai Footer 3 Kolom versi Jagoan ini bisa kalian bisa buat sendiri dengan tutorial bagaimana cara membuatnya, selain itu footer tersebut saya dapatkan di salah satu blog legendaris yang memberikan banyak manfaat untuk saya yang Newbie yaitu kurazone. Blog Jagoandzgn akan memberikan artikel bagaimana cara membuat widget footer tersebut.

Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > Klik Edit HTML
3. Silahkan kamu cari kode dibawah ini, dan Hapus kode tersebut agar tidak terjadi bentrok dengan footer tersebut.

  <div id='footer-navmenu'>
  <nav id='footer-navmenu-container'>
  
<!-- menu navigasi footer start -->
<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

  </nav>
  </div>

4. Selanjutnya, silahkan kamu copy kode dibawah ini dan paste di tempat kode yang kamu hapus tadi.

<style>
#footer{background:#000;color:#fff;padding:0;margin:10px 0 0}
#footer h2:after{content: &#39;&#39;;display: inline-block;position: absolute;height: 20px;top: 0;margin: 1px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3216hqNK0URJVT5B-zYv9U7F9fS592kfuQltyBc36HZRZROAOBjfTB0RVQZvMcntSX2lQKt64jRIhTbZZ8RBOiLTAIkWL-evIhJMDRDA1rW2pdjTZI2xgT-TW5LW85ceTTR_JgcAEfkso/s1600/repeat-bg.png)repeat;}
.footer-sections {overflow: hidden;margin: 0 auto;padding: 50px 120px;}
.sect-left{display:inline-block;float:left;width:31.655%;margin-right:25px}.sect-left:nth-child(3){margin-right:0}
.sect-left h2{position: relative;background:none;overflow: hidden;padding: 0 0 10px 0;color: #fff;font: 700 14px "Roboto Slab",sans-serif;display: inline-block;-webkit-flex: 0 auto;-ms-flex: 0 auto;flex: 0 auto;margin: 0;text-transform: uppercase;font-size: 1rem;
font-weight: 700;white-space: nowrap;width: 100%;}
.sect-left h2 a{color:#E4E4E4}
a.murub{font-size: 14px;text-decoration:none;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}
a.murub:hover{color:#fff;text-shadow:0 1px 0 #0972cd,0px 0 3px #0972cd,0px 0 5px #0972cd,0px 0 30px #0972cd,0px 3px 50px #0972cd}
.aa{background: linear-gradient(to right,#111,#111,#111,#111,#007bfd,#111,#111,#111,#111);background-size: 400% 400%;-webkit-animation: Gradient 2s ease infinite;-moz-animation: Gradient 2s ease infinite;animation: Gradient 2s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;}
.footer-contact p a{color:white !important;}
.footer-contact p {clear: both;color: #fff;overflow: hidden;font-size: 14px;font-weight: normal;line-height: 22px;}
.footer-contact p {margin-bottom: 13px;margin-top: -5px;padding-bottom: 13px;border-bottom: 1px solid #222;}
.footer-contact label {color: #fff;float: left;font-size: 14px;font-weight: normal;margin-right: 20px;max-width: 80px;display: inline-block;}
.footer-contact:last-child p.web {border: medium none;margin: 0;padding: 0;}
.sasabilo{padding: 1px 4px;float:right;color: #fff;width: 50px;text-align: center;}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@media only screen and (max-width:1099px){.sect-left{width:31.55%}.footer-sections{padding:30px}}
@media only screen and (max-width:979px){.sect-left{width:100%;margin-right:0;margin-bottom:20px}.sect-left:last-child{margin-bottom:0}.footer-sections{padding:30px}}
</style>
<div id='footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
    <div class='footer-sections row'>
      <b:section class='sect-left' id='footer-sec1' maxwidgets='3' name='Widget 1' showaddelement='yes'>
        <b:widget id='HTML991' locked='false' title='KONTAK' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #1
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-coffee'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
       </b:section>
      <b:section class='sect-left' id='footer-sec2' maxwidgets='3' name='Widget 2' showaddelement='yes'>
        <b:widget id='HTML992' locked='false' title='TOOLS' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #2
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <b:section class='sect-left' id='footer-sec3' maxwidgets='3' name='Widget 3' showaddelement='yes'>
        <b:widget id='HTML993' locked='false' title='Navigasi' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>Jagoandzgn #3</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class='fa fa-cogs'/> <data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div> 
</b:includable>
        </b:widget>
      </b:section>
  </div></div>

5. Kalau sudah silahkan klik SIMPAN dan Selesai. untuk melihat hasilnya kamu bisa melihat gambar dibawah ini.

Tampilan Desktop

Tampilan Mobile

Maaf! Untuk artikel pada bagian pertama ini hanya pemasangan CSS dan HTMLnya saja. Alhasil tampilan footernya masih belum sempurna seperti Jagoandzgn.

Selanjutnya silahkan kamu check pada bagian menu TATA LETAK, kalian akan menemukan 3 kolom bagian footer seperti gambar dibawah ini.

Jika kamu ingin merapikan tampilan footer tersebut di menu TATA LETAK, Silahkan kamu gunakan kode dibawah ini, biasanya kode ini diletakkan pada segerombolan komunitan body#layout atau kamu bisa membuat baris baru dibawah kode body#layout seperti gambar dibawah ini.

body#layout div#footer-sec1 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec2 {width: 27.3% !important;float: left !important;}
body#layout div#footer-sec3 {width: 27.3% !important;float: left !important;}

Maka Hasilnya ketika kamu menambahkan kode tersebut seperti gambar dibawah ini.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #1, nah untuk lanjutannya kamu bisa mengklik bacaan berikut Cara Membuat Tampilan Footer 3 Kolom Seperti Jagoandzgn #2 apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Mencegah dan Mengatasi Bom Klik Adsense Dengan Javascript

Jagoandzgn.com - Pada postingan kali ini saya akan membahas bagaimana cara menangani masalah bom klik pada iklan Google adsense yang dilakukan oleh pihak ketiga atau orang jail terhadap blog kamu, biasanya pemula atau baru mengikuti didalam dunia blog pasti bingung dikarenakan kenapa banyaknya klik dalam satu waktu.

AdSense adalah program periklanan berbasis CPC (cost-per-click) yang memungkinkan pemilik website mendapatkan penghasilan dari iklan yang terpasang. Sejak kemunculan pertamanya banyak para pemilik website yang berlomba-lomba untuk mendaftar menjadi publisher AdSense. Terbukti hingga saaat ini sudah ada sekitar 2 juta lebih publisher AdSense yang tersebar diseluruh dunia.

Didalam dunia maya saat ini memang sangat kejam, disaat seseorang berada diatas maka sekumpulan orang yang berada dibawah nya pun akan berusaha menjatuhkan orang tersebut agar sederajat atau mungkin agar orang tersebut berada dibawahnya . Begitu juga dalam hal adsense saat anda terlalu bahagia show off penghasilan mungkin beberapa orang syirik akan merasa kesal dan melakukan berbagai hal untuk menjatuhkannya.

Cara Mencegah dan Mengatasi Bom Klik Adsense Dengan Javascript

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian silahkan kamu cari kode berikut ini </body> dan pastekan kode js dibawah ini tepat DIATAS kode tersebut.

<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/antiboomclick.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Atau kamu bisa menggunakan kode Javascript dibawah ini yang mana kamu bisa mengatur berapa jumlah klik dan batyas waktu untuk melakukan klik selanjutnya, untuk kodenya dibawah ini. Untuk penempatannya sama seperti diatas.

<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/view@master/clickonme.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
Arlina.init({click:3,interval:23000});
//]]>
</script>

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Maksud dari kode yang saya warnai tersebut adalah selang waktu yang dibutuhkan untuk melakukan klik selanjutnya setelah dilakukan klik yang pertama, untuk nilainya kamu bisa atur sesuai keinginan kamu masing-masing.

Bagaimana mudah bukan untuk tutorial Cara Mencegah dan Mengatasi Bom Klik Adsense Dengan Javascript dengan mudah, Apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Mengatasi Header Top Bergeser Karena Page Level Ads di Blog

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mengatasi Header Top Bergeser Karena Page Level Ads di Blog dengan mudah. Secara default iklan anchor atau biasa disebut page level ads tersebut muncul di atas layer mobile.

Masalah ini muncul diatas header top mobile dan menggeserkan posisi dari header fixed, walaupun sepele tapi beberapa orang dari kalian sangat terganggu. Nah kali ini saya akan memberikan tutorial agar header tersebut bisa fixed.

Cara Mengatasi Header Top Bergeser Karena Page Level Ads di Blog

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Pastikan kamu sudah memasang iklan page level ads terlebih dahulu, selanjutnya masuk ke menu HTML dan cari kode CSS dari selector body.
4. Tambahkan kode berikut ini tanpa menghapus kode yang sudah ada.

padding:0px !important;

Jika sudah ada property padding maka tinggal mengganti value-nya nmenjadi  0px !important

5. Kemudian, hasilnya kurang lebih seperti dibawah ini.

body {
  ...
  ...
  padding: 0px !important;
  ...
  ...
}

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Secara default iklan anchor berada diatas, tapi kamu juga bisa memindahkan kebawah layar, Cara Merubah Posisi Iklan Anchor Ads di Bawah Versi Mobile. Bagaimana mudah bukan untuk tutorial Cara Mengatasi Header Top Bergeser Karena Page Level Ads di Blog dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Membuat Circle Animation dengan CSS di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Circle Animation dengan CSS di Blogger dengan mudah, animasi ini terinspirasi dari sebuah blog template yang sangat unik yaitu idntheme. Kamu bisa cek dibagian atas terdapat kotak atau gelembung yang mengudara.

Kami pun penasaran dengan source kode tersebut akhirnya saya pun menginspect kode tersebut dan akhirnya menemukannya, untuk tutorialnya silahkan simak tutorial berikut ini dengan cermat jangan lupa untuk membackup template terlebih dahulu.

Cara Membuat Circle Animation dengan CSS di Blogger

1. Silahkan kamu login ke akun blogger.com dengan Menggunakan Gmail kamu.

2. Masuk kemenu TEMA > klik Edit HTML

3. Silahkan cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Animasi Circle Jagoandzgn */
.circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.07);animation:animate 45s linear infinite;bottom:-150px;z-index:0}
.circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}
.circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}
.circles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}
.circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}
.circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s} @keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}

4. Selanjutnya silahkan kamu copy kode berikut ini, sesuai dengan selara kamu masing-masing.

<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

5. Untuk mengganti warna background tersebut silahkan kamu ganti kode berikut ini sesuai dengan selera kamu masing-masing.

 background:rgba(255,255,255,0.07)

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Circle Animation CSS di Blogger dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Membuat dan Memasang Persentase Scrollbar di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat dan Memasang Persentase Scrollbar di Blogger dengan mudah. Persentase Scroolbar merupakan fitur menarik yang mampu menghitung berapa persen kamu melakukan scrool kebawah.

Dengan Melakukan pemasangan persentase Scroolbar ini membuat blog kamu menjadi lengkap dan menarik untuk pengunjung, dan  untuk memasang Scroolbar ini pun tidak terlalu rumit, nah langsung saja kita ketutorialnya.

Berikut Cara Membuat dan Memasang Persentase Scrollbar di Blogger

1. Silahkan kamu login ke akun blogger.com kamu dengan menggunakan Gmail.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Persentase Scrollbar Jagoandzgn */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

4. Setelah kamu memasang kode diatas, selanjutnya cari kode <body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<div id='scrollPersentase'/>

5. Masih belum selesai, selanjutnya silahkan kamu tambahankan kode javascript dibawah ini tepat DIATAS kode </body>

<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 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Persentase Scrollbar Keren di Blogger Dengan Mudah, untuk kamu yang memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah ini.

Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial keren Bagaimana Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel. Seperti yang kita ketahui tampilan seperti ini sudah tidak asing lagi bagi kita dikalangan design yang pasti membuat tampilan blog kamu menjadi lebih keren.

Sebenarnya tutorial ini sudah dibuat oleh beberapa blog hanya saja untuk tampilannya agak berantakan dibagian CSS nya, nah disini saya akan membagikan tutorialnya agar menjadi rapih dan bagus untuk dipandang.

Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel

1. Silahkan kamu Login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode ]]></b:template-skin> dan Pastekan kode dibawah ini tepat DIBAWAH kode tersebut.

<b:if cond='data:view.isMultipleItems'> <style>
/* GRID HOME PAGE BY JAGOANDZGN */
.post-container{
padding:0;
background:transparent;
}
.blog-posts{
margin:0 -7px;
}
.blog-posts .post-outer{
width:50%;
padding:0 10px 30px 10px;
box-sizing:border-box;
}
.blog-posts{
display:flex;
flex-wrap:wrap;
}
.blog-posts .post-outer .post{
width:100%;
height:100%;
background:#fff;
overflow:hidden;
position:relative;
border:2px solid #fff;
border-radius:20px;
box-shadow: 4px 4px 4px rgba(0 , 0 , 0 , 0.12) , 0 4px 4px 4px rgba(0 , 0 , 0 , 0.12);
}
.img-thumbnail{
position:relative;
float:none;
width:100%;
height:0;
border-radius:20px 20px 0 0;
overflow:hidden;
padding-bottom:66.666666%;
}
.img-thumbnail img{
width:100%;
height:auto;
border-radius:0;
box-sizing:border-box;
}
h2.post-title {
margin: 0;
padding: 14px 10px; font-size: 16px;
display: inline-block;
width: 100%;
box-sizing: border-box;
margin-bottom: 30px;
}
.post-outer .post .post-bottom {
position: absolute;
bottom: 10px;
width: 100%;
overflow: hidden;
padding: 10px;
font-size: 11px;
box-sizing: border-box;
}
.post-outer .post span.post-comments{
float:right;
}
span.post-label{
float:left;
}
span.post-label a:nth-child(n+2){
display:none;
}
.post-bottom a {
color: #fff;
background: #22a7f0;
padding: 5px 8px;
border-radius: 50px;
font-size: 10px;
}
.post-label a {
background: transparent;
color: #22a7f0;
padding:8px 0px;
}

/* ICON DEFAULT */
.post-label a::before {
content: "\f02c";
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; margin-right: 2px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; color: #fff;
padding: 10px;
background: #22a7f0;
border-radius: 30px;
font-size: 12px;
}
.post-container{
padding-right:0;
width:100%;
margin-top:10px;
}
@media (max-width:480px){
.blog-posts .post-outer{
padding:0 8px 4px;
margin:0 0 10px 0
}
.img-thumbnail{
margin:0;
}
h2.post-title{
margin-bottom:14px;
font-size:10px;
padding:1px 5px
}
.post-label a::before{
padding:5px;
}
.post-outer .post .post-bottom{
padding:5px;
}
}
@media (max-width:640px){
.post-container{
width:100%;
}
.item-thumbnail{
width:70px;
float:left;
padding-bottom:0;
height:70px;
margin-right:14px;
margin-bottom:14px
}
.PopularPosts .item-title{
padding:0;
font-size:14px;
}
.post-outer .post .post-bottom {
bottom:5px;
}
}
</style>
</b:if>

4. Selanjutnya, cari kode berikut ini <div class='blog-posts'>
5. Kalau sudah dapat silahkan hapus kode yang berwarna merah seperti dibawah ini.

<!-- posts -->
    <div class='blog-posts'>
<b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>
    <!-- navigation -->

6. Kemudian copy kode HTML dibawah ini dan Pastekan ditempat anda menghapus tadi.

<data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>

     <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
  </b:if>
  <data:adEnd/>
</div>

7. Setelah itu hapus kode postingan di halaman default dibawah ini, yang biasanya terletak DIATAS kode </article> hapus kode yang berwarna merah.

<b:default/>
<!-- Posting halaman default (index, arsip, dll.) -->
  <b:include data='post' name='postthumbnail'/>
  <b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
  </b:if>
  <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
          <h2 class='post-title entry-title' itemprop='name headline'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h2>
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description'>
<div class='post-snippet'>
<data:post.snippet/>
</div>
</div>
<div class='post-info info-1'>
<b:include data='post' name='postauthorinfo'/>
<b:include data='post' name='postdateinfo'/>
<b:include data='post' name='postcommentinfo'/>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:switch>
<div style='clear: both;'/>
  </article>

8. Silahkan kamu copy kode dibawah ini dan pastekan di kode yang kamu hapus tadi.

<!-- Posting halaman default (index, arsip, dll.) -->
<b:if cond='data:post.labels'>
</b:if>
<b:include data='post' name='postthumbnail'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name headline'>
        <b:if cond='data:post.link'>
          <a expr:href='data:post.link'><data:post.title/></a>
        <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <a expr:href='data:post.url'><data:post.title/></a>
            <b:else/>
              <data:post.title/>
            </b:if>
            <b:else/>
              <data:post.title/>
          </b:if>
        </b:if>
      </h2>
</b:if>
  <!-- <div class='post-snippet'>
  <data:post.snippet/>
  </div> -->
<div class='post-bottom'>
<span class='post-comments'>
  <b:include data='post' name='postcommentinfo'/>
</span>
<b:if cond='data:post.labels'>
<span class='post-label'>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'> <data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
</span>
<div style='clear: both;'/>
</b:if>
</div>
</b:switch>
<div style='clear: both;'/>

9. Selanjutnya, salin kode CSS dibawah ini dan pastekan tepat DIATAS kode </body>

<style>
    h2.post-title {
      margin-left: 2px;
    }
    @media only screen and (max-width:1080px){
      h2.post-title {
        margin-left: 2px;
      }
    }
    @media only screen and (max-width:800px){
      h2.post-title {
        margin-left: 1px;
      }
    }
    @media only screen and (max-width:640px){
       h2.post-title {
        margin-left: 1px;
      }
    }
    @media only screen and (max-width:480px) {
       h2.post-title {
        margin-left: 0px;
      }
    }
    </style>

10. Langkah terakhir silahkan kamu cari kode seperti dibawah ini.

/* POST WRAPPER */
.post-container {
padding-right: 25px;
}
#post-wrapper {
background:transparent;
float:left;
width:70%;
max-width:700px;
margin:0 0 10px;
}

11. Ubah kode yang berwarna merah menjadi 67% dan hasilnya akan seperti dibawah ini.

/* POST WRAPPER */
.post-container {
padding-right: 25px;
}
#post-wrapper {
background:transparent;
float:left;
width:67%;
max-width:700px;
margin:0 0 10px;
}

12. Kalau sudah silahkan klik SIMPAN dan Selesai.

Demo

Untuk demonya silahkan tombol demo diatas, Bagaimana hasilnya keren bukan hampir sama seperti igniel pada umumnya apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Mudah Mengatasi Error Breadcrumb di Search Console Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mengatasi Error Breadcrumbs di Search Consore #2, nah sebelumnya saya telah memberikan tutorial untuk mengganti Data-vocabulary di webmaster.

Nah Breadcrumbs kali ini sudah menggunakan markup breadcrumbs versi terbaru yaitu schema.org, yang sangat di rekomendasikan oleh webmaster dan Bing master.

Jika di template sobat sebelumnya sudah terdapat Breadcrumb, silakan ganti dengan versi ini.

Cara Mudah Mengatasi Error Breadcrumb di Search Console Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode berikut ini.

<b:includable id='comment-form' var='post'>

4. Selanjutnya silahkan tambah kode dibawah ini tepat DIATAS kode tersebut.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

5. Kemudian, silahkan tambahkan kode dibawah ini tepat DIATAS kode </head>

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

6. Selanjutnya tambahankan kode dibawah ini tepat DIBAWAH kode berikut <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Mudah Mengatasi Error Breadcrumbs di Search Consore webmaster, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Mengatasi Error Data-vocabulary Schema Deprecated di Webmaster

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mengatasi Data-vocabulary schema deprecated blogger di Webmaster. Jika kamu seorang blogger pastinya tau betul apa itu breadcrumbs. Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website.

Nah yang jadi masalah, beberapa hari lalu ketika saya hendak melakukan index di webmaster kenapa mendapatkan warning, melalui email pun juga dapat yang berisikan tentang error breadcumb data-vocabulary.org schema deprecated setelah kita selidiki masalah ini muncul di global loh bukan hanya di blogger, wordpress ataupun cms lainnya pokonya breadcumb dengan vocabulary.org semuanya terkena imbas di search console.

Dari informasi sementara Error ini dikarenakan Google tidak lagi mendukung data-vocabulary.org dan wajib migrasi ke schema.org. Ini bisa kita temukan saat kalian masuk ke lihat selengkapnya tentang breadcumb dan akan mendapati semua info yang berkaitan dengan schema.org breadcumb.

Cara atasi Error Data-vocabulary Schema Deprecated di Webmaster

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML.
3. Silahkan kamu cari kode seperti gambar dibawah ini.

Data-vocabulary.org

Kalau sudah ketemu, silahkan ganti dengan kode gambar dibawah ini sesuai dengan webmaster.

Schema.org

4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Cara Atasi Breadcrumbs Untuk Pengguna Viomagz atau Evomagz

1. Silahkan kamu cari kode seperti dibawah ini di menu TEMA.

<b:includable id='breadcrumb' var='posts'> ...sampai dengan penutup ... </b:includable>

2. Hapus kode tersebut dan ganti dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
    <b:loop values='data:posts' var='post'>
        <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
            <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
            <meta content='1' itemprop='position'/>
            <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
            </span>
            <b:if cond='data:post.labels'>
            <b:loop index='nomor' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
              <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                <meta expr:content='data:nomor+2' itemprop='position'/>
                <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
                  <span itemprop='name'><data:label.name/></span>
                </a>
              </span>
            </b:loop>
            <b:else/>
            &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
            </b:if>
        </div>
    </b:loop>
<b:elseif cond='data:view.isPage'/>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
        </span> &amp;nbsp;&#8250;&amp;nbsp; 
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <meta expr:content='data:num+2' itemprop='position'/>
        <a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'>
          <span itemprop='name'><data:blog.pageName/></span>
        </a>
        </span>
    </div>
</b:if>
</b:includable>

3. Kalau sudah silahkan klik SIMPAN dan Selesai.

Baca Juga : Cara Mudah Mengatasi Error Breadcrumb di Search Console Blogger

4. Kalau sudah mengikut langkah diatas silahkan kamu lakukan Validasi kembali di search console apakah cara ini berhasil atau tidak. Untuk sementara setelah kita klik validasi proses sedang berlangsung, mari kita tunggu apakah cara ini akan berhasil atau tidak.

Bagaimana mudah bukan untuk tutorial Cara Mengatasi Data-vocabulary schema deprecated blogger di Webmaster dengan Mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Menghilangkan ?m=1 dan ?m=0 pada Akhir URL Blog Mobile

Jagoandzgn.com - Kembali lagi dengan saya nah pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Menghilangkan kode ?m=1 atau ?m=0 pada akhir URL blog, kode tersebut muncul pada platform blogspot dengan menggunakan mobile.

Sebelum kita masuk ketutorialnya nah saya akan memberikan sedikit informasi mengenai kode tersebut dan bagaimana sih cara kerjanya, berikut penjelasannya.

• Maksud dari kode ?m=1 ialah memberikan tanda bahwasannya blog tersebut diakses menggunakan Perangkat seluler / mobile, sedangkan

• Maksud dari kode ?m=0 ialah memberikan tanda bahwasannya blog tersebut diakses menggunakan perangkatPC tetapi masih dalam akses mobile.

Cara Menghilangkan ?m=1 dan ?m=0 pada Akhir URL Blog Mobile

#Metode 1

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TATA LETAK > Pilih Gadget > Masukkan kode HTML dibawah ini tepat di kolom tersebut.

<script type='text/javascript'>
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>

3. Kalau sudah silahkan klik SIMPAN dan Selesai.

#Metode 2

1. Masuk ke menu TEMA > klik edit HTML.
2. Silahkan cari kode berikut ini </head> dan pastekan kode diatas tepat DIATAS kode tersebut.
3. Jangan lupa PARSE KODE nya terlebih dahulu.
4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Menghilangkan kode ?m=1 dan ?m=0 pada Akhir URL Blog Dengan Mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Menghilangkan Ekstensi HTML pada URL Permalink Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Menghilangkan Ekstensi HTML pada URL Permalink Blogger dengan Mudah, seperti yang kita ketahui saat ini permalink blogger itu sangat tidak unik menurut saya contohnya seperti dibawah ini.

https://www.jagoandzgn.com/2020/01/cara-membuat-color-picker-di-halaman-statis.html

Menurut saya itu kurang cantik dikarenakan masih ada ekstensi HTML dan tanggal pada link tersebut, cantikan seperti dibawah ini.

https://www.jagoandzgn.com/cara-membuat-color-picker-di-halaman-statis

Bagaimana, cantik bukan sebelum kita masuk ke tutorialnya saya akan memberitahukan apa itu Permalink ?

Apa Itu Permalink ?

Permalink adalah sebuah URL yang mengarah langsung pada suatu blog atau forum tertentu setelah melewati halaman depan ke arsip. Dikarenakan Permalink bersifat permanen tanpa ada batas waktu, maka permalink lebih tahan terhadap kerusakan.

Cara Menghilangkan Ekstensi HTML pada URL Permalink Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > Klik edit HTML
3. Selanjutnya, silahkan kamu cari kode </body> pastekan kode dibawah ini tepat DIATAS kode tersebut.

<script type='text/javascript'>
/*<![CDATA[*/
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
/*]]>*/
</script>

4. Kalau sudah silahkan SIMPAN dan Selesai.

Tidak disarankan buat kalian yang memasang meta http-equiv='refresh'

Bagaimana mudah bukan untuk tutorial Cara Menghilangkan Ekstensi HTML pada Permalink Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Cara Membuat Color Picker di Halaman Statis Blog Dengan Menggunakan HTML5

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Color Picker di Halaman Statis Blog Dengan menggunakan HTML5, Tapi sebelum itu saya akan memberitahukan apa sih itu Color Picker.

Apa itu Color Picker ?

Color Picker dalam bahasa inggris memiliki arti ‘Pemilih warna’. Sesuai dengan namanya, Color Picker merupakan tools atau alat yang memiliki fungsi untuk memilih warna dan akan ditampilkan secara detail, Seperti warna HEX dan RGB-nya.

Bicara soal Tools Color Picker, pada artikel kali ini penulis akan memberikan sedikit tutorial singkat Cara Membuat Halaman Color Picker Responsive di Blogger. Jika kamu tertarik untuk membuatnya, kamu bisa simak dalam tutorial berikut ini.

Cara Membuat Color Picker di Halaman Statis Dengan HTML5

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Selanjutnya masuk ke menu HALAMAN > Buat Halaman Baru dan Masukan Judul Color Picker di atas.
3. Masuk ke mode HTML ( Bukan Compose ) dan paste kode dibawah ini tepat di halaman HTMLnya.

<input id="inputColor" type="color" value="#ff1a1a" />
<button onclick="getColor()">Get Color</button>
<br />
<div id="colorHex">
</div>
<div id="colorRGB">
<script>
function getColor() {
    document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
    document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    var r = parseInt(result[1], 16);
    var g = parseInt(result[2], 16);
    var b = parseInt(result[3], 16);
    return 'RGB('+r+','+g+','+b+')'; 
}
</script>
</div>

4. kalau sudah silahkan klik PUBLISH dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Color Picker di Halaman Statis Dengan menggunakan HTML5 dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.