Tampilkan postingan dengan label viomagz. Tampilkan semua postingan
Tampilkan postingan dengan label viomagz. Tampilkan semua postingan
Jika kalian adalah pengguna template viomagz versi yang lebih lama kalian mungkin pernah menerima perbaikan atau update breadcrumb yang tidak valid karena Google menghentikan dukungannya kepada breadcrumb versi struktur data tertentu, sebaliknya mendukung penuh breadcrumb schema.org.

Waktu itu template viomagz buatan mas sugeng ini menggunakan data vocalubary.org alih alih menggunakan data terstruktur schema.org yang di dukung oleh Google.

kotak penelusuran sitelink google

Alhasil ketika dilakukan pengujian di halaman Google webmaster, breadcrumb dinyatakan tidak valid dan dapat angka merah. Bukan seluruhnya kesalahan mas Sugeng. Kadang di  dunia web dan di halaman Internet terjadi perubahan yang tidak terduga, dan kita baru merasakan dampaknya setelah melihat notifikasi yang menyalahi parameter.

Cara mengganti breadcrumb template viomagz telah banyak di posting oleh para blogger, dan lagi pula Mas sugeng telah merilis update template viomagz dengan tampilan yang lebih segar dan mengganti data terstruktur breadcrumb yang valid. 

Jadi masalah itu saya ungkit hanya sebagai contoh. Saya juga tahu tidak ada yang sempurna, termasuk template viomagz, hanya saja ia sudah terlanjur sangat populer dan memang memiliki banyak hal yang bagus. Contohnya saya menggunakannya walaupun hanya untuk sementara, sebelum template buatan saya sendiri lolos uji coba.

Cara menambahkan fitur kotak penelusuran ke dalam template viomagz versi ke 3

Setelah memperbaiki breadcrumb saya kemuida melakukan pengujian dengan mengirimkan konten tulisan ke Google webmaster, dan mengujinya, saya merasa ada yang kurang. Ya template viombaz masih minus kotak penelusuran SITELINK. Padahal itu penting karena ia masuk ke dalam bagian penyempurnaan agar dapat di ranking oleh mesin pencari dengan lebih maksimal.

Perhatikan contoh record datanya di webmaster sebelum saya tambahkan script SITELINK:

tanpa script sitelink

Contoh di atas adalah hasil pengujian template viomagz versi 3.1.1 setelah saya perbaiki parameter breadcrumbnya. Namun saya membandingkannya dengan template buatan saya yang memiliki kotak penelusuran SITELINK, ternyata template viomagz tidak memilikinya. 

Jadi saya memeriksa halaman HTMLnya pada bagian bawah tag <head> memang benar tidak ada jadi saya tambahkan script berikut yang saya ambil dari halaman resmi panduan Google:
<script type='application/ld+json'>
{
&quot;@context&quot;: &quot;https://schema.org&quot;,
&quot;@type&quot;: &quot;WebSite&quot;,
&quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;,
&quot;name&quot;: &quot;<data:blog.title/>&quot;,
&quot;alternateName&quot;: &quot;<data:blog.title/>&quot;,
&quot;potentialAction&quot;: {
&quot;@type&quot;: &quot;SearchAction&quot;,
&quot;target&quot;: &quot;<data:blog.homepageUrl/>search?q={search_term_string}&amp;max-results=6&quot;,
&quot;query-input&quot;: &quot;required name=search_term_string&quot;
}
}
</script>
Pokoknya letakan dia setelah kode tag <head> di dalam halaman HTML template viomagz

Dan setelah saya uji ulang konten segera di baca telah memiliki fitur kotak penelusuran:


Perhatikan bagian bawah telah ada fitur kotak penelusuran Sitelink yang valid. 

Apa gunanya fitur kotak penelusuran Sitelink ini?

Jika ia tidak berguna Google tidak akan menambahkankannya ke dalam dasbor penyempurnaan di halaman Google Webmaster. Ia dapat memaksimalkan mesin pencari dalam meranking halaman blog kita.

Menurut google:

Kotak penelusuran sitelink adalah cara cepat bagi orang-orang untuk menelusuri situs atau aplikasi Kalian di halaman hasil penelusuran. Kotak penelusuran menerapkan saran real-time dan fitur lainnya.

Google Penelusuran dapat otomatis menampilkan kotak penelusuran yang dicakupkan ke situs Kalian saat situs muncul sebagai hasil penelusuran, Kalian tidak perlu melakukan apa pun untuk mewujudkannya. Kotak penelusuran ini didukung oleh Google Penelusuran. Namun, Kalian dapat secara eksplisit memberikan informasi dengan menambahkan data terstruktur WebSite, yang dapat membantu Google memahami situs Kalian dengan lebih baik.

Jika Google Penelusuran sudah menampilkan kotak penelusuran sitelink untuk situs, Kalian dapat mengontrol aspek tertentu dari kotak penelusuran sitelink dengan menambahkan data terstruktur WebSite.

Manfaat sitelink adalah untuk kampanye iklan adsense, video dan halaman Blog kalian karena:
  1. Mempermudah pembaruan: Ubah teks link dan URL kapan pun Kalian inginkan, sehingga memastikan iklan terus diperbarui dengan info penjualan dan penawaran khusus. Kalian tidak perlu membuat iklan baru atau mengeditnya untuk menyertakan sitelink.
  2. Melihat data yang mendetail tentang klik Kalian: Temukan jumlah klik yang terjadi pada iklan Kalian saat sitelink muncul. Kelompokkan statistik menurut kampanye, grup iklan, atau iklan. Segmentasikan statistik Kalian untuk melihat jumlah klik yang terjadi pada masing-masing sitelink versus bagian lain dari iklan (misalnya, judul, sitelink lain, atau ekstensi lain).
  3. Menggunakan tracking konversi untuk halaman landing: Siapkan tracking konversi untuk halaman landing yang dikunjungi orang saat mereka mengklik sitelink di bawah iklan. Kalian harus mengoptimalkan halaman landing untuk peristiwa konversi "ringan" (seperti kunjungan situs atau "tambahkan ke keranjang").
  4. Mengedit ekstensi sitelink tanpa kehilangan data: Edit ekstensi sitelink tanpa mereset statistik performanya.
  5. Sitelink yang disesuaikan untuk seluler: Buat sitelink yang dioptimalkan untuk seluler untuk tampil di perangkat seluler.
  6. Menjadwalkan dengan tanggal mulai dan akhir: Tentukan tanggal, hari, atau waktu untuk menampilkan sitelink Kalian.
Manfaat untuk penelusuran:
  • Ekstensi sitelink muncul di iklan di bagian atas dan bawah hasil penelusuran Google.
  • Kalian memerlukan minimal 2 ekstensi sitelink (untuk desktop), dan minimal 1 ekstensi sitelink (untuk seluler) agar sitelink muncul di iklan. Jumlah sitelink yang dapat muncul berbeda-beda bergantung pada tempat orang melihat iklan:
  • Desktop: Iklan Kalian dapat menampilkan hingga 6 sitelink. Sitelink dapat muncul pada baris yang sama atau mengisi hingga 2 baris iklan Kalian.
  • Seluler: Iklan Kalian dapat menampilkan hingga 8 sitelink. Sitelink ini muncul berdampingan pada satu baris dalam format carousel. Orang dapat menggeser ke kiri atau ke kanan di carousel untuk menjelajahi berbagai sitelink. Jika iklan Kalian muncul di posisi paling atas, sitelink Kalian memenuhi syarat untuk ditampilkan di baris yang menonjol, dengan hanya satu sitelink di setiap baris.
Manfaat untuk kampanye video
  • Ekstensi sitelink muncul di bawah iklan yang memenuhi syarat yang diputar sebelum, selama, atau setelah video lain di YouTube. Sitelink hanya muncul di bawah iklan yang memenuhi syarat di perangkat seluler.
  • Kalian memerlukan setidaknya 2 ekstensi sitelink agar sitelink muncul di iklan.
  • Iklan Kalian dapat menampilkan hingga 4 sitelink. Orang-orang dapat menjelajahi dan memilih sitelink saat menonton iklan.
Kesimpulan:

Kotak penelusuran sitelink itu penting bagi halaman Anda sekaligus penting bagi pengoptimalan mesin pencari dalam meranking halaman.

Dan script ini dapat di tambahkan ke dalam template blogger tipe apa saja dengan posisi penempatan yang telah saya singgung di atas.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Siapa yang tidak mengenal template legendaris buatan Mas Sugeng? Mereka para penggemarnya menyebutnya sebagai template sejuta umat. Template itu tidak hanya laris di beli tapi juga di 'bajak' ya melalui inspect elemen seorang yang memiliki pengatahuan koding akan mudah menjiplak template apapun.
back to top ala template blogger viomagz

Dalam kesempatan ini Saya ingin mengungkapkan cara membuat tombol back to top seperti pada template viomagz karena elemen buatan Mas Sugeng ini cukup reponsif dan menarik untuk di terapkan ke dalam template. Baiklah kita mulai.

1. Tambahkan CSS
  1. Masuk pengaturan blogger
  2. Pilih Tema
  3. Pilih  Edit Tema dan cari kode </head>
Letakan kode berikut di atas </head>:
<style>/* Back to top */
#back-to-top {
    background:rgb(249, 0, 255);
    color:blue;
    padding:0px 0px;
    font-size:24px;
    border-radius: 50px;
    box-shadow: 0 0px 0px 0 rgb(240, 255, 240), 0 1px 1px 0 rgb(240, 255, 240);
}
.back-to-top {
    position: fixed !important;
    position: absolute;
    bottom: 15px;
    right: 5px;
    z-index: 998;
}</style>

2. Tambahkan HTML/XML:

Masih di dalam opsi halaman Edit HTML (HTML Editor), cari kode <body> atau kode <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Dan letakan kode berikut tepat di bawahnya:
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z' fill='#000000'/>
</svg>
</a></div>
3. Terakhir Tambahkan JavaScript

Cari kode </body> dan letakan kode JavaScript berikut tepat di atasnya:
 <script>           
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>
Save template

Pada saat sekarang Mas Sugeng telah merilis template terbaru buatannya yakni Link Magz. Bedanya sama viomagz selain tampilan headernya, template ini menurut pembuatnya lebih di peruntukan untuk keperluan Jualan alias bisnis Online. Silahkan cari di Google.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

SHARE YA:

tombol berbagi ringan tanpa ikon font awsome
ilustrasi tombol berbagi ringan tanpa ikon font awsome

Editblogtema pernah menggunakan hampir semua tombol berbagi buatan pihak ketiga seperti addholic, sharethis, addthis, addtoany dll.

Namun disamping manfaatnya yang luarbiasa tombol tombol buatan pihak ketiga ini mengharuskan template dan halaman blog terhubung ke situs mereka, ini karuan membuat loading template blog menjadi berat, secara signifikan belum ada tombol share pihak ketiga yang benar benar ringan selama mereka memiliki hak "linking" dan kontrol terhadap blog kita.

Lalu untuk melepaskan diri satu persatu dari ketergantungan dengan widget buatan pihak ketiga, saya mencoba mempelajari tombol berbagi dari template viomagz buatan mas Sugeng, Arlina, bung Frenky dan kompi ajaib.

Saya lebih tertarik dengan style tombol berbagi milik mas Sugeng yang terkesan simpel alias sederhana. Saya menganalisanya melalui inspect elemen browser dengan opsi "samaran" dan saya copy CSS berikut HTML bagian share tersebut. Saya terapkan ke template tua dengan layout versi 2, dan juga template terbaru bawaan blogger dengan layout versi ke 3. Begitulah caranya mempelajari sesuatu. Ternyata bekerja dengan baik, namun dengan sedikit beda cara pemasangannya.

Ada kelemahannya: Tombol berbagi viomagz juga merugikan kecepatan karena dia menggunakan font awsome yang mengharuskan kita menanamkan link font awsome ke dalam tag <head> template. Jadi saya menyiasatinya dengan menggantinya dengan ikon SVG seperti umumnya di gunakan pada template template buatan milik situs Sora studio dan Template textrim buatan mbak Igniel.

Kalau mau hitung hitungan template template editblogtema adalah kombinasi semua template template tersebut namun dengan porsi lebih besar berbasis template bawaan (default).

Ingin memasangnya, ikuti langkah berikut:

CSS

Masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML. Pada template lama (layout versi 2) kalian bisa meletakkannya kode CSS berikut di atas kode ]]></b:skin> akan tetapi pada template terbaru seperti contempo, harus di letakan di atas kode penutup </head>. Ingat itu. berikut kode CSSnya (telah saya rombak sedikit)
/* Share button */.share-this-pleaseeeee { display: inline-block; margin: 0; color: #afafaf; text-transform: uppercase; font-size: 16px; background: #fff; z-index: 1; position: relative; padding: 0 10px; font-weight: 500;}#share-container { margin: 20px auto; overflow: hidden;border:solid;border-radius: 20px;}#share { width: 35%; text-align: center;}#share a { width: 25%; height: 33px; display: block; font-size: 24px; color: #fff; transition: opacity 0.15s linear; float: left;}#share a:hover { opacity: 0.8;}#share i { position: relative; top: 50%; transform: translateY(-50%);}.facebook { background: #0000FF;}.twitter { background: #87CEEB;}.tumblr { background: #000000;}.linkedin { background: #6495ED;}

Jika meletakannya di atas </head> kalian tambahkan tag <style> pada pangkal kodenya dan tutup dengan </style> pada akhir kodenya. Jadi akan tampak sbb:
<style>disini kodedisini kodedst.....</style>
Note: Tulisan (kode) yang di merahkan sengaja tidak saya hapus karena itu bawaan yang di tulis oleh mas Sugeng sendiri.

HTML

Masih di halaman editor HTML, cari kode: <data:post.body/> pada template bawaan blogger yang lebih tua, ada 3 kode yang sama pilih yang ke 2 atau yang ke 3. Sedangkan pada template contempo hanya ada satu satunya <data:post.body/> tesebut. Kalian bisa memilih untuk meletakkan di bawah atau di atasnya. Jika di bawah ia akan tampil di bawah artikel, sebaliknya jika di letakkan di atas, ia akan tampil di atas artikel. Berikut kode-nya (setelah saya rombak)
<div id='share'>  <!-- facebook -->  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>    <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#fff'/></svg></a>  <!-- twitter -->  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>    <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z' fill='#fff'/></svg></a>  <!--tumblr-->    <a class='tumblr' expr:href='&quot;http://tumblr.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>    <path d='M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#fff'/>      </svg></a>
    <!-- linkedin -->   <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>    <path d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z' fill='#fff'/></svg></a>  </div>  
Kode warna biru adalah kode ikon SVG yang telah saya tambahkan sebagai pengganti ikon font awsome. Tampilan-nya persis seperti terdapat pada blog ini. Sekarang pada pengukuran GTmetrix, kecepatan blog telah meningkat tajam karena hilangnya beban dari link aktif Addthis atau Addto Any.

Dan sekali lagi ingat, perbedaan cara memasang antara template blogger lama dengan baru di atas ya...kalau asal pasang tombolnya bekerja tapi tidak kelihatan lantaran CSS-nya tidak bekerja.

Jangan lupa save template.

TIDAK PERLU MEMASANG TOMBL BERBAGI

Jika tidak penting penting amat lebih baik memasang ekstension berbagi langsung melalui browser saja. Kalian bisa memasangnya dengan mudah pada browser browser seperti Chrome dan Firefox.

Cara di chrome adalah dengan mencari tombol Apl (Aplikasi) di bar bagian atas browser. Kemudian masuk ke Chrome web store,   cari dan tuliskan di kolom pencarian store tersebut "share button" biasanya AddToAny yang paling pertama di temukan. Klik tmbahkan maka di atas bar browser akan muncul tanda Plus   dengan mengklik itu kita dengan mudah membagikan postingan ke media media besar duni. Tombol AddToAny sangat lengkap

Kalian dapat melakukan hal yang sama di browser modzilla, ekstension tombol berbagi di firefox juga adalah AddToAny.

SHARE YA:

Semakin hari saya semakin panasaran dengan berbagai trik pembuatan templat blogger, wordpress, WIX dan Drupal. Akhir akhir ini rajin melihat situs situs paling efektif memperesentasikan niche blog mereka melalui tampilan template mereka. Di tanah air Viomagz buatan Mas Sugeng boleh dikatakan salah satu template paling banyak di gunakan. Sayangnya hampir lebih separohnya yang telah dipergunakan terindikasi sebagai bajakan alias gak berbeli.
design tools
design tools
Saya tertarik dengan form pencarian "layar penuh" yang digunakannya. Jujur saya tidak tahu bagaimana Mas Sugeng menempatkan elemennya di dalam templat viomagz baik CSS pemebentuknya maupun HTML penampilnya. Tetapi setelah saya mencoba editorial W3School saya menemukan trik yang menghasilkan tampilan yang mirip. Sebenarnya ini di terapkan oleh editblogtema namun telah di modifikasi sehingga tampilan "full scree" alias tampilan "layar penuh"nya lenyap. Perhatikan Contoh aktif yang saya terapkan melalui opsi penulisan HTML berikut:



×

Menu pencarian layar penuh

klik tombol kaca pembesar dibawah untuk membuka.





Klik tombol "🔍" diatas, Maaf tidak sebagus buatan Admin editblogtema, ini hanya sebagai contoh penerapannya saja yang mungkin berguna buat kalian nantinya jika ingin membuat elemen elemen penting template sendiri. Cara penerapannya adalah:

1. TAMBAHKAN CSS 
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada pengaturan template terbaru klik titik tiga 
  4. Akan muncul menu seperti pada gambar:
  5. Klik atau pilih "Edit HTML" 
  6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode CSS berikut tepat diatasnya:
<style>
body {
  font-family: Arial;
}
* {
  box-sizing: border-box;
}
.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}
.openBtn:hover {
  background: #bbb;
}
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}
.overlay .closebtn:hover {
  color: #ccc;
}
.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}
.overlay input[type=text]:hover {
  background: #f1f1f1;
}
.overlay button {
  float: left;
  width: 15%;
  padding: 15px;
  background: transparent;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.overlay button:hover {
  background: transparent;
}
</style>
2. TAMBAHKAN HTML:Masih di dalam pengaturan blogger, tepatnya masih di dalam halaman editor HTML cari kode </head> seperti diatas tadi, dan letakan kode HTML berikut tepat dibawahnya:
<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg></button>
    </form>
  </div>
</div>
<button class="openBtn" onclick="openSearch()"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg></button>
3. TAMBAHKAN JAVASCRIPT;
Masih di dalam pengaturan blogger, tepatnya masih di dalam halaman editor HTML cari kode </body> seperti diatas tadi, dan letakan kode JS berikut tepat dibawahnya:
<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>
Kemudian SAVE template.

Catatan: Tutorial ini tidak akan mengajarkan Kalian bagaimana server memproses input kotak pencarian diatas.  Memproses input dijelaskan dalam tutorial PHP yang akan saya tulis pada artikel berikutnya....

Salam, Anissa

SHARE YA:

Tampilan Navigasi tema buatan Mas Sugeng

Ada pertanyaan yang diajukan melalui email (gmail):

Dear Mas Sofyan,
Saya membeli dan memakai viomag terbaru buatan mas Sugeng tapi saya ingin merobah tampilan menu navigasinya menjadi berwarna warni daripada sekedar gradasi dua warna, bisakah anda memberikan tutorial cara membuat menu navigasinya berwarna warni sperti layaknya infinity color buatan Arlina...bla..bla..bla..
Template viomag terbaru ini sebenarnya sudah memiliki warna gradasi dua warna pada navigasi menunya, yang sebelah kanan dan sebelah kirinya bisa dirubah berbeda warna dengan mudah melalui opsi pengaturan blogger yakni melalui Desainer Tema Blogger. Tapi ada yang mencoba untuk merobah tampilannya menjadi infinity color.

Mas Sugeng sendiri kayaknya gak akan keberatan kalau pengguna ingin memodifikasi sedikit tampilan tema buatannya, tapi saya tekankan secara kesluruhan viomag sudah sangat bagus, stabil dan memenuhi kriteria standard blogging, tapi yah yang namanya kita manusia gak akan pernah ada puasnya.

Sebenarnya saya ragu untuk memenuhinya karena pertanyaan serupa pernah diajukan melalu blog comment di blog ini pada salah satu tutorial:
CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Dan saya telah menjawabnya, akan tetapi karena pertanyaan terulang saya akan memberikan triknya sbb:
  1. Buka template viomag anda melalui pengaturan blogger seperti biasa saat anda mau menambahkan widget pada blog.
  2. Pilih "Tema atau Template"
  3. Pilih editHTML
Pada halaman HTML cari kode berikut di template mas Sugeng yang keren ini:
/* HEADER */
#header-container {

Dibawah kode tersebut terdapat kode dibawah ini:

background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}

Dan lalu hapus saja seluruh kode yang saya sorot dengan warna kuning tersebut silahkan diganti dengan kode yang telah saya modifikasi di bawah ini:

background: linear-gradient(-50deg, #F0FFFF#FFB6C1, #20aadb, #87CEFA);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Lalu SAVE template.

KELEMAHAN:
Navigasi akan kehilangan "sticky" alias tidak fix berada diatas header pada saat di scroll , namun anda bisa memodifikasinya dan akan kami sediakan tutorialnya dilain waktu. Banyak juga yang berpendapat Tutorial diatas sudah cukup membantu karena tidak semua orang menyukai menu navigasi yang sticky.

Kode dibawah ini tidak akan berfungsi lagi untuk opsi "sticky mode" pada viomag versi terbaru tersebut. Saya berencana akan memodifikasinya.

position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}


Bukan bermaksud meng-adu suhu Mas Sugeng sama Mbak Arlina ya, dua duanya adalah Master dalam hal ngeblog karena sudah sakti mandraguna, hanya saja kita butuh sedikit kebebasan untuk mendesain ulang beberapa tema yang sebenarnya sudah cantik cantik tersebut agar tampak lebih fresh, lebih update atau malah lebih hancur ha ha ha...

Semoga bermanfaat jika ada pertanyaan, kami akan menjawab dan memberikan penjelasan se simpel mungkin.

SHARE YA: