Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:
- Meningkatkan pageview (PV)
- Mempercantik tampilan blog
- Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
- Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)
Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.
Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:
Related Post by Kang Ismet
Seperti namanya, style ini saya dapatkan setelah nyolong dari salah satu web designer ternama asal Indonesia, yakni Kang Ismet. Related Post ala kangismet ini memiliki background warna hijau flat ui, jadi, tampilannya cukup enak dilihat dan cukup untuk mempercantik blog anda. Berikut tutorialnya:
1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
5. Sekali lagi, copy-paste script dibawah ini diatas kode </head>
<style>
.related-post{margin:2em auto 0;font-size:13px;background:#fff;border-radius:4px} .related-post h4{margin-bottom: 15px !important; font-size:14px;margin:0 0 .5em;background:#9dcb63;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase} .related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#8db857;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:8px 20px;position:absolute} ul.related-post-style-1{padding-left:0!important;margin-top:-12px} .related-post-style-1 li{list-style:none;padding:15px 20px;border-top:1px solid #eceef5} .related-post-style-1 li a{color:#79798d;text-decoration:none} .related-post-style-1 li a:active{color:#33aea5;text-decoration:none} .related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:13px}
</style>
6. Tekan CTRL+F dan cari kode <data:post.body/>
7. Copy-paste script dibawah ini dibawah kode <data:post.body/> (mungkin akan ada lebih dari 1 kode <data:post.body/>, silahkan copy-paste script dibawah ini tepat dibawah kode <data:post.body/> terakhir atau coba satu per satu)
<!-- Related Post Widget Start --> <b:if cond='data:blog.pageType == "item"'> <div id='related-post' class='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4>Artikel Terkait:</h4>", numPosts: 5, titleLength: "auto", containerId: "related-post", newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script> <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/> </b:if> <!-- Related Post Widget End -->
8. Lihat di Pratinjau, kalau sudah sesuai dengan selera Simpan template
Tidak suka dengan Related Post versi Polosan? anda bisa mencoba ini :
0 komentar:
Post a Comment