Mengulas Misteri dan Blogging

Simple Related Posts Valid HTML5

Related Posts

Simple Related Posts Valid HTML5 - Assalamualaikum Wr. Wb - Saat ini, banyak blog yang sudah memasang related posts. Kegunaan related post ini tidak lain dan tidak bukan adalah memudahkan pembaca untuk menemukan artikel pada label yang sama dan memiliki keterkaitan dengan konten yang sudah dibaca tadi.

Baca juga : Modifikasi Widget Popular Posts Keren dan Elegant

Dilihat dari kegunaanya, sebuah blog memang perlu yang namanya related posts atau artikel terkait. Jadi, pembaca akan tau konten-konten apa saja yang ada dalam blog kita melalui related posts ini. Dan pembaca pun juga tidak akan cepat-cepat keluar dari blog kita jika sudah membaca salah satu konten di blog kita. Karena mereka akan dibuat terus-terusan berada di blog kita dengan artikel terkait tadi. Misal, si pembaca melihat judul postingan pada related posts-nya menarik, dan apalagi isi kontennya juga sedang mereka butuhkan, mereka pasti akan mengklik salah satu artikel yang dipilih tadi dari related posts-nya. Dan ketika mereka sudah masuk di postingan yang sudah diklik tadi dan selesai membacanya, mereka menemukan lagi judul postingan yang dianggapnya juga menarik pada related posts-nya. Otomatis, mereka juga ingin mengkliknya lagi dan membacanya juga. 

Seperti itulah cara kerja dari related posts. Pembaca akan dibuat untuk terus berkutat di dalam blog kita. Sehingga, ini menjadikan bounce rate pada blog kita juga akan menurun. Jadi, dilihat dari fungsinya itu, keberadaannya memang sangat penting.

Silahkan lihat gambar di bawah ini untuk melihat demonya.
Langsung saja, untuk cara pemasangannya tidak rumit.

Pertama, silahkan simpan kode berikut ini di atas ]]></b:skin> atau </style>

.related-post{;margin:20px 0 0 0;font:16px &quot;PT Sans Narrow&quot;;background:#fff;}
.related-post h4{font-size:14px;margin:0 0 .5em;background:#697374;color:#fff;padding:14px 20px 14px 15px;font-weight:normal;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}
ul.related-post-style-1{padding-left:0!important;margin-top:-12px}
.related-post-style-1 li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmor42SMrrtrsruMoTfX7UJziMSeNGxpFV27A8GUrMUbJ_ovXKplrVRa6JHrFUv0UxkjfiHvVHsSonwvXbRplPWIFRVCb1WY193IqC4gQ8nv5VnSpQA2-YLkFLp-Ywk2fkN0JgWiedGEH/s1600/bullet.png) 20px 23px no-repeat;list-style:none;padding:15px 55px;border-top:1px solid #eceef5;font:16px &quot;PT Sans Narrow&quot;;transition:all 400ms ease-in-out}
.related-post-style-1 li a{color:#79798d;text-decoration:none}
.related-post-style-1 li a:hover{color:#ef7f67;text-decoration:none}

Kemudian, silahkan letakkan HTML nya di bawah ini di daerah bawah postingan Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Related Posts:&lt;/h4&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script src='https://googledrive.com/host/0B2KamfXIslknRkxBVTNtOE54azg/labeltutorial-relatedpost.js' type='text/javascript'/>
</b:if>

Setelah itu, save template.

Related posts di atas sudah valid HTML5. Bagi yang tidak terlalu peduli dengan masalah validasi ini ya abaikan saja lah.

Sekian. Terima kasih. Semoga bermanfaat.
Tag : Blogging, HTML5

Artikel Terkait:

5 Komentar untuk "Simple Related Posts Valid HTML5"

Lebih simple pasti lebih cepat pokoknya :D

Betul kang. Lebih simple jadi lebih cepat. :)

Bosan main poker sama ROBOT? Kapan untungnya?
Kini Hadir Game Terbaru ===>> GAME SAKONG
Mari.. bergabung bersama kami di ROYALQQ, main poker tanpa Robot 100% player vs player.
Deposit Minimum Rp. 15.000
www,royalqq,poker
Support Bank BCA, MANDIRI, BNI, BRI
add 2B68D666

Komentar ini telah dihapus oleh pengarang. - Hapus

Ayo segera bergabung dengan Agen Judi Poker Online Terbaik dan Terpercaya di Indonesia KacangMasPoker | www.kacangmaspoker.net | . Dapatkan Jackpot hingga Jutaan rupiah setiap harinya !!

• Bonus New Member & Next Deposit s/d Rp. 1.000.000,-
• Bonus Jackpot s/d Rp. 200.000,-
• Bonus TurnOver 0,5%
• Bonus Referral 20%

# LINE : pokerkcm
# BBM : pokerkcm
# WHATSAPP : +6287819742741
# Twitter : kcm__poker
# IG : kcm_p0ker

• 7 Games dalam 1 ID
| Texas Poker | Capsa Susun | Ceme | Domino QQ | Bandar Ceme | Super 10 | Omaha |

• BCA - BNI - BRI - CIMB - Danamon - Mandiri.
• Menerima Deposit via Go-Pay, Ovo & Pulsa Telkomsel / XL

Link Alternatif:
• www.kacangmaspoker.xyz
• www.kacangmaspoker.club
• www.kacangmaspoker.live

Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.

Emoticon : :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak: