UNIXMEDIA T.P.

| Photovideography | Web Design, Domain, Hosting | Fotokopi, ATK | Undangan, Banner, ID Card, Vinil, Print |

Cara Membuat Related Post (Postingan atau Artikel Terkait) Pada Blogger.

Seringkali kita membaca pada sebuah blog (seperti di tulisan pada Blog ini) terdapat beberapa post yang berhubungan dengan postingan yang sedang dibaca. Postingan yang berhubungan dengan yang sedang dibaca tersebut dinamakan postingan terkait atau related post. Secara umum related post sering diletakan pada bagian tengah postingan atau juga sering pada bagian akhir tulisan. Postingan terkait bertujuan untuk memberikan informasi atau pengetahuan yang berhubungan dengan informasi yang sedang dibaca. Bagi pembuat blog hal ini bertujuan untuk meningkat jumlah pengunjung pada blog tersebut. Postingan terkait secara rata-rata menggunakan informasi label untuk mengaitkan kedalam daftar (list) related post. Pada tutorial kali ini akan dijelaskan bagaimana membuat related post dengan menggunakan informasi Label sebagai media untuk menautkannya.

Berikut ini merupakan cara singkat (beberapa langkah) sederhana dan cepat untuk membuat related post (postingan terkait) yang bisa diletakan dimana saja, baik di bagian awal tulisan, bagian tengah ataupun bagian akhir dari sebuah postingan.

Langkah 1:

Bukalah blogger.com kemudian buatlah sebuah postingan (Post) kemudian klik New Post, selanjutnya seperti bisanya buatlah postingan pada mode Compose View, isilah dengan tulisan, gambar, tabel ataupun video. Selanjutnya copylah code di bawah ini (dalam bingkai kuning), kemudian klik pada mode HTML View  dan letakan code yang sudah dicopy pada bagian paling bawah.

<style type="text/css"> #penaindigocom{background:#fff;width:99%;margin:5px auto;border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} Labelnya{color:#FFF;font-weight:bold;margin:0 -5px;margin-top:20px; padding:1px 0 2px 11px;background: #3498DB; border:1px solid #2D96DF; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} ol{font-weight:normal;background:#fff;margin-left: 35px;} ol li{border-bottom: #ddd 1px dotted;margin-right:5px;padding:3px} </style> <div id="unixmedia"> <script> var numposts = 5; var standardstyling = true; function startpost(json){ for (var i = 0; i < numposts; i++){ var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++){ if (entry.link[k].rel == 'alternate'){ posturl = entry.link[k].href;break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle); } if (standardstyling) document.write('</li>'); } function finished(){} </script> <labelnya>POST TERKAIT</labelnya> <ol> <script src="/feeds/posts/default/-/LABELNYA?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script> </ol> </div><div><b><br /></b></div>


Langkah 2: 

Jika semua isi blog sudah selesai dibuat selanjutnya klik PUBLISH maka bisa dilihat dibagian paling bawahpostingan sudah tampil POSTINGAN TERKAIT, seperti pada gambar berikut:

Pada kode diatas terdapat variabel numpost yang artinya jumlah artikel atau postingan terkait (yang mempunyai label) yang sama yang ingin ditampilkan, rubahlah angka tersebut sesuai dengan kebutuhan. Selanjutnya POST TERKAIT juga bisa dirubah dengan kata lain misalnya BACA JUGA, ARTIKEL LAINNYA, dan sebagainya. 

Pada bagian kata LABELNYA silahkan diganti dengan label yang sama dengan postingan, karena artikel terkait ini menghubungkan artikel-artikel dengan label yang sama.

Jika ingin meletakan dibagian tengah caranya juga cukup gampang yaitu pada mode HTML View code diatas tinggal di cut saja dan pastekan dibagian tengah dari yang tampil di HTML View atau kalau mau di tempat paling atas tinggal di pastekan saja dibagian paling atas HTML View.

Jika masih belum jelas, silahkan simak pada video berikut:

ARTIKEL TERKAIT:

Post a Comment

Previous Post Next Post