0 Cara Buat Navigasi Breadcrumb

Pada artikel kali ini saya coba posting  Cara Pasang Widget Artikel Terkait di Blog, sekedar sharing walaupun sudah banyak para blogger mempublikasikan tentang ini, namun tidak ada salahnya jika saya posting juga di sini, karena semakin hari jumlah blogger di seluruh dunia terus bertambah, otomatis setiap hari blogger pemula terus bermunculan, mungkin saja ada yang sedang mencari panduan bagaimana Cara Pasang Widget Artikel Terkait di Blog maka artikel ini bisa dijadikan referensi.

Keuntungan yang di dapat dari memasang Widget Artikel Terkait ini adalah secara signifikan dapat meningkatkan Pageviews blog kita, karena pengunjung dimudahkan dalam hal navigasi untuk mencari artikel yang terkait dengan artikel yang sedang di baca sehingga akan berdampak pada perampingan rangking alexa blog kita, jika blog Anda belum ter-rangking di Alexa Web, baca juga artikel Cara Pasang Kode Meta Tag dan Widget Alexa Rank Pada Blog.

Sekarang kita langsung saja ke 'TKP' bagaimana Cara Pasang Widget Artikel Terkait di Blog :

• Login ke blogger dengan ID Anda

• Jika halaman Dashboard anda belum menerapkan tampilan antarmuka blogger yang telah diperbaharui silahkan klik link Try the updated Blogger interface atau Coba antarmuka Blogger yang diperbarui yang terdapat pada halaman sebelah kanan bagian atas tepat diatas menu pilih bahasa

• Sebaiknya sebelum melakukan perubahan backup terlebih dahulu template anda lihat artikel Cara Backup dan Restore Template Blogger

• Klik Template >> Edit HTML >> Proceed/Lanjutkan

• Jangan lupa beri tanda mark ✔ (check/centang) pada kotak Expand Template Widget

• Cari kode </head> tempatkan kode di bawah ini tepat di atas kode </head>

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://sites.google.com/site/multipaste1/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/multipaste1/Related_posts.js?attredirects=0=1' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <div class='post-body'> (jika anda menemukan kode ini lebih dari satu dalam kode HTML template anda gunakan saja kode yang pertama ditemukan) kemudian copy kode di bawah ini dan paste di bawahnya.

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Artikel Terkait :</b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

• Angka 5 yang berwarna merah adalah jumlah artikel yang akan ditampilkan dalam Widget Artikel Terkait ini, Anda dapat merubahnya sesuai keinginan.

• Untuk menyimpan perubahan klik tombol Simpan template >> Tutup jendela kode HTML

• Periksa hasilnya... jika berhasil ucapkan Alhamdulillah....