Cara Membuat Artikel Terkait Di Bawah Postingan

 ___Contoh Menu Artikel Terkait___

Membuat blog lebih mudah digunakan oleh pengunjung adalah sesuatu yang harus dilakukan karena demi kenyamanan para pengunjung setiap blog, dimulai dari cara pembuatan menu drop down, dan lain sebagainya.

Kali ini saya akan berbagi tentang cara pembuatan "Artikel Terkait/ Related Post" di bawah setiap posting blog anda. Sebagai contohnya anda bisa melihat pada bagian bawah artikel ini..

Tujuannya sudah saya jelaaskan di atas, yakni untuk membuat pengunjung semakin nyaman karena semakin mudah untuk mengakses artikel terkait yang ada di blog kita. Cara kerja yang akan di tampilkan pada artikel terkait itu sesuai label posting yang anda buat, jika anda membuat posting dengan label Tips dan Trik maka yang ditampilkan adalah yang ber label itu. Begitu Juga dengan Label yang lain yang telah anda buat.

Tanpa basa-basi lagi, untuk menerapkannya yaitu :

1. Seperti biasa anda masuk ke >> Edit Html, jangan lupa centang kotak kecil bertuliskan Expand Template Widget.

2. Lalu anda cari kode ini <data:post.body/> ,untuk memudahkan pencarian anda tekan Ctrl+F.

    Note : Jika blog anda telah dipasang Read More otomatis, maka cari kode serupa yang ke-2.

3. Copy Paste kode di bawah ini, dan letakkan setelah kode <data:post.body/> 

<b:if cond='data:blog.pageType == "item"'><br /> <strong>Artikel Terkait di Bawah posting</strong><br /> <div class='rbbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><div id='ardi33'/><script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script><br /> </div><script type='text/javascript'>RelPost();</script><br /> </div></b:if>

4. Simpan Template Anda, jika anda sudah melakukannya dengan benar, maka seharusnya apa yang anda inginkan sudah berhasil.

Terimakasih, salam blogger.

Cara Membuat Read More Secara Otomatis Pada Blog

Read More adalah fasilitas yang digunakan pada blog untuk melanjutkan pembacaan artikel, tentunya ini sangat berguna karena dengan adanya read more ini blog tampil lebih rapi dan enak dipandang. pada posting kali ini saya akan share cara pembuatan read more otomatis, kegunaan dari pada readmore otomatis yakni membuat readmore secara otomatis tanpa harus kita menulis <!--more--> pada saat menulis.

Manfaat dari pada readmore otomatis untuk SEO yakni sangat berperan penting, yg akan membuat suatu blog menjadi ringan loading saat di akses oleh pengunjung. Ini termasuk salah satu SEO template. Untuk membuatnya tak usah panjang lebar, langsung menuju TKP.

Untuk cara membuatnya mudah saja :
1. login ke dashboard blogger.
2. pilih Rancangan »» edit HTML
3. Tandai kotak kecil pada tulisan Expand Template Widget.
4. Tempatkan script berikut dibawah kode

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 440; summary_img = 344; img_thumb_height = 100; img_thumb_width = 120; </script>

5. Selanjutnya cari kode <data:post.body/> atau kode <p><data:post.body/></p> sama saja.
6. Ganti kode tersebut dengan kode berikut »

<b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'> createSummaryAndThumb ("summary<data:post.id/>"); </script><br /> <span class='rmlink' style='float:right; padding-top:20px;'><br /> <a expr:href='data:post.url'>»» Baca selengkapnya..... </a></span> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>

7. Terakhir Simpan Template.

		Note : Saya sarankan anda untuk membackup (unduh template)  terlebih dahulu template anda untuk menjaga apabila terjadi kesalahan.

Cara Mengatur Jumlah Posting Yang Ingin Ditampilkan Pada Saat Klik Label Dan Menampilkan Navigasi Halamannya

Halo kawan, jika sebelumnya anda mengikuti tutorial saya yaitu mengenai cara membuat page/halaman di http://sipkom.blogspot.com/2012/04/cara-membuat-page-pada-blog.html, maka biasanya ketika anda mengklik salah satu label posting maka tidak akan tampil navigasi page nya, dan seluruh posting yang ada pada label itu akan tampil semua, meski demikian cara yang akan saya jelaskan di bawah juga berlaku bagi yang tidak membuat navigasi dari tutorial saya, serta cara ini juga sekaligus untuk membatasi jumlah posting yang ingin ditampilkan pada setiap label, nah untuk mengatasinya,,Silahkan simak :

1. Masuk Ke Edit Html, kemudian anda centang kotak Expand Template Widget, kemudian cari kode ini :

Lihat:

expr:href='data:label.url'

2. kemudian tambahkan kode di bawah ini setelahnya :

Lihat:

+ &quot;?&amp;max-results=5&quot;

3. Maka tampilannya menjadi :

Lihat:

expr:href='data:label.url + &quot;?&amp;max-results=5&quot;

4. Karena kode expr:href='data:label.url , bukan hanya ada satu, maka cari lagi yang laiinya, dan tambahkan kode yang sama seperti di point 2.

Selamat mencoba dan semoga berhasil, jika ada yang tidak dipahami, silahkan ditanyakan.

Cara Posting Kode html di Blog

Assalamualaikum.Wr.Wb
Sebenarnya banyak cara untuk menampilkan kode html di blog, tujuannya yaitu ingin memberikan tutorial kepada pembaca, agar kode html yang kita posting tidak diterjemahkan, tapi ditampilkan apa adanya.

Sebagai contoh anda ingin memposting kode seperti di bawah ini :

<div align="center"><br><textarea cols="20" name="code" rows="6" style="height: 99px; width: 205px;"> <b>CONTOH HTML APA ADANYA</b> </textarea></div>

Tentu saja untuk menampilkan kode html diatas tidak langsung copy paste html nya, tetapi ada caranya dan sangat mudah sekali, karena jika anda langsung copast maka html nya akan di terjemahkan. Contohnya kode di atas adalah kode text area, akan tampil text area, bukan kode html nya.

Adapun langkah-langkahnya yaitu :

		1. Anda masuk ke sini http://www.blogcrowds.com/resources/parse_html.php 2. Lalu anda copy paste kode html yang ingin di posting, di halaman tadi, lalu anda klik parse. 3. Setelah selesai, akan keluar hasilnya, dan itulah kode html yang harus anda posting supaya html nya tampil apa adanya.

Cara Membuat Page Pada Blog

Selamat datang kembali di blog saya, kali ini saya akan memberikan tutorial mengenai pemberian page pada blog, untuk lebih jelasnya silahkan lihat contoh berikut :

Contoh Page Pada Blog:

Tujuan daripada pembuatan page pada blog adalah untuk mempermudah akses posting kita oleh para pengunjung, dan juga memperindah tampilan blog kita sehingga memanjakan para pengunjung.

Langkah-langkahnya yaitu :
1. Masuk ke setelan, kemudian edit html, kemudian cari kode ]]></b:skin>
2. Selanjutnya Copy Paste Kode html berikut :

/* ----- Page Navigation styles ----- */<br>.showpageNum a {<br>padding: 2px 5px;<br>margin:0 5px;<br>text-decoration: none;<br>border:1px solid #ccc;<br>-webkit-border-radius:3px;-moz-border-radius:3px;<br>background: #eee;<br>}<br>.showpageOf {<br>margin:0 8px 0 0;<br>}<br>.showpageNum a:hover {<br>border:1px solid #ccc;<br>background: #ddd;<br>}<br>.showpagePoint {<br>color:#fff;<br>text-shadow:0 1px 2px #333;<br>padding: 2px 5px;<br>margin: 2px;<br>font-weight: 700;<br>-webkit-border-radius:3px;-moz-border-radius:3px;<br>border:1px solid #999;<br>background: #666;<br>text-decoration: none;<br>}

3. Letakan diatas kode yang tadi. Lalu simpan template.
4. Kemudian anda cari kode  </body> , setelah ketemu anda copy paste lagi kode di bawah ini dan letakkan tepat di atasnya. Kemudian simpan template. Selesai.

<!--Page Navigation Start--><br><script type='text/javascript'><br>var home_page=&quot;/&quot;;<br>var urlactivepage=location.href;<br>var postperpage=4;<br>var numshowpage=6;<br>var upPageWord =&#39;Previous&#39;;<br>var downPageWord =&#39;Next&#39;;<br></script><br><script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'<br>type='text/javascript'/><br><!--Page Navigation End -->

Semoga ini dapat bermanfaat bagi anda semua dan selamat mencoba.

**Saya sarankan anda memback up template anda terlebih dahulu.