Supervba: Tutorial Blog Non AMP dan AMP
Showing posts with label Tutorial Blog Non AMP dan AMP. Show all posts
Showing posts with label Tutorial Blog Non AMP dan AMP. Show all posts

Tuesday, 18 June 2019

Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia (Table Of Contents)

Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia (Table Of Contents)

Banyak pemilik bog akhir-akhir ini memasang daftar isi di dalam postingannya (Table Of Contents). Daftar isi biasanya dibuat di bagian laman (static) kemudian dijadikan salah satu menu di widget blog.

Jika diingat, Wikipedia sudah lama menerapkan TOC (Table Of Contents). Pada setiap postingan di Wikipedia pasti ada daftar isi. Daftar isi memudahkan pembaca mengetahui apa saja materi yang dibahas dari jadul artikel tersebut. Jika sebuah judul pada daftar isi kita klik maka kita akan langsung dipandu ke isi dari judul tersebut.

Dari segi SEO, ternyata penulisan daftar isi di blog dapat meningkatkan hasil pencarian blog kita di mesin pencari Google. Selain itu, situs kita akan terlihat lebih profesional.

Daftar Isi berikut serupa dengan daftar isi yang ada di Wikipedia. Hanya berbeda tampilan saja sedikit. Masalah tampilan kan bisa kamu atur sendiri.

Daftar isi berikut memiliki fungsi (tombol) untuk menampilkan atau menyembunyikan judul-judul postingan yang ada di daftar isi. Admin siapkan 2 kode CSS daftar isi yang bisa kamu pilih yaitu dengan border dan tanpa border (garis tepi).

Kalau kamu berminat membuat daftar isi di dalam postingan blog, ikuti tahapan berikut ya.


1. Simpan kode berikut di atas /style.

Gaya Pertama : dengan Border

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
#toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px}
:target::before{content:"";display:block;height:0px;margin-top:0px;visibility:hidden}


Gaya kedua : tanpa Border

Kode berikut admin peroleh dari situs kompiajaib.com ya. Link lengkapnya bisa lihat di akhir artikel ini.

Kode Daftar Isi Dalam Postingan

/* Table of Contents by kompiajaib.com (modifikasi)*/
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}


Kalau kamu menggunakan tag kondisional, kamu bisa menyimpannya di dalam tag berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Daftar isi ini hanya tampil di halaman artikel saja.

Untuk blog AMP simpan kode di atas di style amp-custom.

2. Pasang kode pemanggil daftar isi berikut saat menulis artikel.

Kode Pemanggil Daftar Isi Dalam Postingan

<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
DAFTAR ISI <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="toc">
<ol>
<li><a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li><a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li><a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
</ol>
</div>

<h2 id="toc1">
Judul Satu</h2>
Isi Judul Satu

<h2 id="toc2">
Judul Dua</h2>
Isi Judul Dua

<h2 id="toc3">
Judul Tiga</h2>
Isi Judul Tiga


Kamu ganti kata DAFTAR ISI dengan kata-kata mu sendiri misalnya, TABLE OF CONTENTS, CONTENTS, dan sebagainya.

3. Jika sudah selesai membuat artikel, Klik Publish untuk melihat hasilnya.

Sebelum Publish, perhatikan bahwa alamat #toc1, #toc2, dan #toc3 tidak berubah alias tetap seperti ini. Kemudian publish artikel pada saat berada pda Mode HTML buka Compose. Peralihan mode pengetikan artikel bisa menyebabkan perubahan URL pada item di atas.

Demikian Cara Membuat Daftar Isi Di Dalam Postingan Blog Seperti Wikipedia. Semoga bermanfaat.


Referensi
1. https://www.kompiajaib.com/2018/01/membuat-table-of-contents-di-dalam.html

Monday, 17 June 2019

Membuat Widget Popular Posts Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Sidebar Blog

Membuat Widget Popular Posts Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Sidebar

Membuat Popular Post Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Blog Non AMP dan AMP - Widget popular posts biasanya ditampilkan di sidebar blog. Banyak variasi cara pemilik blog menampilkan widget popular postsnya. Ada yang pakai gambar ada juga yang tidak, ada yang pakai nomor urut ada juga yang tidak, dan design-design lainnya. Setiap orang memiliki rasa yang berbeda-beda dalam mengemas tampilan blognya supaya menarik pembaca bisa terus berada di halaman situsnya.

Sebelumnya admin sudah posting widget popular posts tanpa gambar. Bagi yang belum baca, linknya ada di bawah ya. Nah, widget popular posts berikut ini sangat menarik. Ini karena widget ini menampilkan thumbnail dan nomor urut postingan dalam tampilan yang cantik. Hasilnya bisa kamu lihat pada gambar ilustrasi di atas.


Jika kamu tertarik membuat Membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog, bisa ikuti tahapan berikut ini.

1. Salin kode CSS berikut di atas /style.

Tag H2 tanpa ID

/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 auto!important;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 0 10px!important;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;display:block;overflow:hidden}
.PopularPosts ul li a:hover {color:#f80538!important}
.PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:72px;margin:0 20px 0 0;overflow:hidden;float:left;border-radius:4px;}
.PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title {padding:0 0 5px}
.PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:31px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;}
.PopularPosts ul{counter-reset:count;}


2. Simpan template.

Sebelum mengaplikasikan kode CSS Popular Posts di atas sebaiknya kamu menghapus kode sebelumnya atau kode awal popular posts yang ada di template kamu supaya tidak bentrok. Jika kamu menggunakan beberapa tag kondisional pada template, kamu bisa meletakkan kode widget di atas di dalam tag kondisional berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Letakkan kode widgetnya di atas /style tentunya.
Nah, sekarang kamu bisa pergi melihat hasilnya. Semoga berhasil.

Demikian cara membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog. Semoga bermanfaat.



Sunday, 16 June 2019

Membuat Popular Post berbentuk List (Daftar) Keren tanpa Gambar di Blog

Membuat Popular Post berbentuk List Keren tanpa Gambar di Blog

Popular post adalah salah satu widget blog wajib buat saya termasuk buat nubie yang mau daftar adsense. Popular post menampilkan daftar artikel yang sering dikunjungi pembaca.

Admin mau berbagi cara buat popular post berbentuk daftar. Popular post ini tidak menampilkan jumlah postingan. Tapi kalau kamu mau menampilkan, silahkan saja.

Design popular post ini tanpa gambar dan counter. Jadi jangan khawatir akan membebani loading blog. Ringan banget.

Kita langsung cek cara membuat popular post berbentuk daftar tanpa gambar thumbnail.

1. Kode CSS ini taruh di atas /style.

Kode CSS POPULAR POSTS
/* Popular Post */
#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}
#PopularPosts1 ul li{padding:8px 0 11px!important;margin:0;list-style:none;font-size:11px;line-height:normal}
#PopularPosts1 ul li:first-child{border-top:none}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13.5px;color:#444;display:block;font-weight:500;padding:0 5px 0 0;margin:0;line-height:1.4em;overflow:hidden;}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:none;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,&quot;.&quot;);padding:0 .1em 0 10px;font-size:18px;font-weight:500;color:#ff4c2e;float:left;margin-right:10px}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}


2. Simpan template.

Kalau di template kamu udah ada CSS untuk widget popular post maka sebainya dihapus supaya widget popular post ini bisa tampil semestinya.

Demikian cara membuat popular post tanpa gambar. Semoga bermanfaat.

Printer

3R

Teknologi