Menambahkan fitur "Baca artikel lain" dibawah post

Fitur ini menggunakan feed label atau kategori post, dan cara kejanya hampir sama dengan "Related Articles" atau "Artikel yang berhubungan". Bedanya kalau fitur ini, kita dapat menentukan label atau kategori artikel apa yang akan kita tampilkan. Sehingga judul artikel  yang muncul secara acak dan otomatis, akan sesuai dengan label atau kategori yang kita pasang pada fitur ini.
Selain itu kita juga dapat menentukan jumlah label atau kategori yang akan ditampilkan dan jumlah judul artikel yang akan muncul pada setiap label atau kategori yang kita pasang.

Untuk letak, dimana kita meletakkan fitur ini terserah kita....
Pada artikel ini saya memberi contoh dan langkah-langkahnya di bawah artikel post. Atau bila sudah ada fitur "Related Articles" atau "Artikel yang berhubungan", kita tinggal menambahkan dibawahnya.

Contohnya bisa anda lihat fitur "Baca artikel lain" yang ada dibawah fitur "Related Articles" pada blog ini.

Tapi, bila anda menghendaki fitur ini ditampilkan dalam gadget sidebar juga bisa. Sebab fitur ini akan tetap bekerja dengan baik, asal anda tidak keliru mengganti teks yang ada pada script yang saya berikan dan anda tinggal copy paste pada gadget....OK.

Bila anda juga bermninat membuat artikel berhubungan atau related Post pada blog anda, silahkan anda ikuti langkah-langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

 4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang mirip dengan kode ini : <data:post.body/>

7. Bila blog anda sudah menggunakan "Read more",
Taruh kode dibawah ini setelah kode <data:post.body/> yang kedua. 
Dan bila anda sudah menggunakan "Related Articles" atau "Artikel yang berhubungan", anda tinggal meletakkan kode dibawah ini setelahnya. :

<br/> <b>Baca artikel lain :</b><div style='height:200px;overflow:auto;' class='related-post' id='artikel_lain'> <script type='text/javascript'> var homeUrl3 = "http://www.carabuatwebgratis.com/"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 4; maxNumberOfPostsPerLabel = 4; maxNumberOfLabels = 4; 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('artikel_lain').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; textLabel = "LABEL-1"; 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++; }} textLabel = "LABEL-2"; 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++; }} textLabel = "LABEL-3"; 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++; }} textLabel = "LABEL-4"; 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++; }} </script> </div>

Catatan :

• "maxNumberOfPostsPerLabel = 4;"  Jumlah artikel yang tampil.
  "maxNumberOfLabels = 4; "  Jumlah artikel yang tampil.
• Ganti teks  LABEL-1, LABEL-2, LABEL-3, LABEL-4, dengan label yang ingin anda pasang.
• Bila ingin menambahkan label, anda tinggal menambahkan satu bagian kode seperti berikut :
  
  textLabel = &quot;LABEL-4&quot;;
  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
  labelArray.push(textLabel);
  var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
  labelArray.length : maxNumberOfLabels;
  if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
  }} 
  Jangan lupa ganti teks berwarna merah.

8. Simpan Template.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Green Compact News

Desain template ini sangat elegan, memiliki warna tampilan hijau muda yang sangat dinamis dengan sentuhan vector graphics motif bunga.
Template ini saya desain untuk memenuhi kebutuhan blogging anda. Baik untuk anda yang fokus menulis tentang berita-berita aktual, tapi juga template ini sangat mendukung bagi anda yang sedang berbisnis.

Selain itu template ini memiliki fitur yang amat padat dan menarik, sehingga diharapkan anda tidak perlu lagi sibuk menambahkan banyak widget pada template anda yang masih asli dari blogger.

Diantara fitur-fitur menarik dari template ini adalah :

1. Tombol share pada home page.
2.  Fitur Slide Show yang indah dan elegan.
3. Google Translate.
4. Memiliki Tiga Multi Tab dengan tampilan yang cool.
5. Fasilitas read more.
6. Tombol share simpel tapi komplit.
7. Fasilitas "Artikel berhubungan".
8. Menu drop down horisontal tampil mantab.
9. Menu pada bagian footer.
10. Tombol to top.

Berikut gambar tampilan template Green Compact News :

Untuk langkah-langkah cara upload dan edit, anda tinggal baca pada file yang anda download.
Bila anda berminat, silahkan anda lihat DEMO dan langsung saja Download Templatenya.
Semoga bermanfaat untuk anda.


Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Mengenal 5 bagian utama pada template blogger

Memiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak tutorial-tutorial yang ditulis.
Nah..., untuk mengatasi masalah diatas, sebaiknya kita mengetahui dan memahami terlebih dahulu 5 Bagian utama yang ada pada Template blogger.

OK, langsung saja...
Dibawah ini adalah 5 Bagian utama berikut contoh yang ada pada Template blogger :

1. XML declarations 

XMl atau eXtensible Markup Language adalah deklarasi standar header yang mendefinisikan versi XML. XML declarations terletak pada bagian paling atas yang bentuknya seperti berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

2. HEAD, TITLE dan META TAG

Elemen head merupakan wadah yang didalamnya terdapat elemen - elemen yang dapat menginstruksikan browser untuk menemukan script, style sheet atau CSS, title, informasi meta data yang di dalamnya termasuk meta tag description dan meta tag keywords, dll.

<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='N4RVxgZiRiM2VUDOtv5yhKWJn628E3qhZqOcUNnfqus' name='google-site-verification'/>
<META content='c2ad550e993554a3' name='y_key'></META>
<!-- 0cUQtmDWaVCyDtpxS4TBa8B64Iw -->
<meta content='0cUQtmDWaVCyDtpxS4TBa8B64Iw' name='alexaVerifyID'/>
<title>Cara buat web | Cara buat blog | Tutorial Blogger</title>
<meta content='web,web gratis,website,website gratis,situs,situs gratis,situs website.situs web.blog,blogger,blogspot,buat blog,tutorial blog,tutorial blogger,tutorial,tutorial gratis,tutorial blogspot,tutorial blogger blogspot,tutorial blogger blog,tips blogger,widget blog,widget blogger,widget blogspot,templates blogger blogspot,theme blogger,html,css,javascript,jquery,peluang usaha,peluang,bisnis online,0cUQtmDWaVCyDtpxS4TBa8B64Iw' name='keywords'/>
<meta content='Belajar cara buat web disini menggunakan blogspot dari blogger, selain gratis juga lebih interaktif dengan pengunjung. Ada form chat box untuk berdiskusi tentang tips, trik, tutorial blog, blogspot, blogger, Css, Html, javascript dll. ' name='description'/>
<meta content='Noer Cholis' name='author'/>
<meta content='Noer Cholis' name='ownership'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='Indosesia' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

3.Variable Definitions

Variable Definitions diperlukan sebagai klasifikasi atau untuk menentukan nilai, warna, dari beberapa atribut yang dianggap sama.

<b:skin><![CDATA[/*


/* Variable definitions
  ====================
  <Variable name="bgcolor" description="Page Background Color"
  type="color" default="#dd9" value="#CAF99B">
  <Variable name="textcolor" description="Text Color"
  type="color" default="#333" value="#333333">
  <Variable name="linkcolor" description="Link Color"
  type="color" default="#684" value="#0066CC">
  <Variable name="pagetitlecolor" description="Blog Title Color"
  type="color" default="#874" value="#000000">
  .............................

4. CSS (Cascading Style Sheet)

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

...............

/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
  margin-left: 0px;
  margin-right: 0px;
}
]]></b:skin>
  </head>

5.Body

Tag yang mendefinisikan tubuh dokumen, yaitu seluruh unsur berisi semua isi dari sebuah dokumen HTML, seperti teks, hyperlink, gambar, tabel, daftar, dll.

<body>
  <div id='outer-wrapper'><div id='wrap2'>

  <!-- skip links for text browsers -->
  <span id='skiplinks' style='display:none;'>
  <a href='#main'>skip to main </a> |
  <a href='#sidebar'>skip to sidebar</a>
  </span>

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Cara Buat Web Gratis' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</b:section>
  </div>

  <div id='content-wrapper'>

  <div class='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Recent Post' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Arsip' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

  <div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search ' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  </div>

  <div class='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</b:section>
  </div>

  <!-- spacer for skins that want sidebar and main to be the same height-->
  <div class='clear'>&#160;</div>

  </div> <!-- end content-wrapper -->

  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</b:section>
  </div>

  </div></div> <!-- end outer-wrapper -->

<script type='text/javascript'>
var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);
document.write(unescape(&quot;%3Cscript src=&#39;&quot; + gaJsHost + &quot;google-analytics.com/ga.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker(&quot;UA-8271964-1&quot;);
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

Jadi dari keseluruhan penjelasan dan contoh isi dari setiap bagian, dapat disimpulkan sebagai berikut :

<html>
  XML (eXtensible Markup Language)

<head>
  Titel dan meta data
  Variable Definitions
  Script
  CSS (Cascading Style Sheet)
</head>

<body>
  Seluruh dokumen yang ditampilkan.
</body>

</html>

Dengan mengetahui 5 bagian utama yang berada pada template, maka pada saat kita akan mengedit template, tentu kita tidak akan kesulitan lagi. Sebab kita sudah tahu bagian - bagian yang mana yang akan kita edit.

Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara membagi gadget menjadi dua kolom

Ada kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.
Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna  kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?

OK..., seperti yang dirasakan  oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :

Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :

#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :

<div id='sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
  </b:section>

  </div>

Catatan:
Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'.

Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :

<div id=' .......... '>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML' locked='false' title='' type='HTML'/>
  </b:section>

  </div>

7. Sisipkan kode dibawah ini diantara </b:section> dan </div>  :

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

Sehingga tampak seperti berikut :

<div id='sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
  </b:section>


<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

  </div>

8. SIMPAN TEMPLATE

Selesai...., silahkan anda lihat hasilnya....
Selamat mencoba dan Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini. 

Baca artikel lain :