Ads 468x60px

Minggu, 08 April 2012

Cara Membuat related post terbaru

Related post atau juga di sebut artikel terkait sangat berguna sekali, baik bagi pembaca, pengunjung, ataupun bagi para blogger sendiri. dengan adanya related post atau artikel terkait, para pengunjung juga bisa membaca artikel yang berhubungan  dengan artikel yang sedang di baca, karenanya mungkon saja para pengunjung akan lebih lama di blog kita. pada menu related post ini akan muncul judul judul artikel sesuai dengan labelnya masing masing. biasanya menu related post ini berada di bawah postingan.Nah apakah anda masih tertarik.? Bagaimana caranya..? ikuti langkah langkah berikut
  • Tentunya langkah pertama adalah log in ke akun blogger anda
  • Setelah itu masuk menu template > Edit HTML
  • Untuk berjaga jaga kemungkinan gagal, download template lengkap terlebih dahulu
  • Cari kode </head> copy kode di bawah ini dan letakan di atas kode </head>
    <style>
     #related-posts {
     float : left;
     width : 540px;
     margin-top:20px;
     margin-left : 5px;
     margin-bottom:20px;
     font : 13px Arial;
     margin-bottom:10px;}
     #related-posts .widget {
     list-style-type : none;
     margin : 5px 0 5px 0;
     padding : 0;}
     #related-posts .widget h2, #related-posts h2 {
     color : #f1c232;
     font-size : 20px;
     font-weight : normal;
     margin : 5px 7px 0;
     padding : 0 0 5px;}
     #related-posts a {
     color : #b45f06;
     font-size : 12px;
     text-decoration : none;}
     #related-posts a:hover {
     color : #00ff00;
     text-decoration : none;}
     #related-posts ul {
     border : medium none;
     margin : 10px;
     padding : 0;}
     display : block;
     margin : 0;
     padding-top : 0;
     padding-right : 0;
     padding-bottom : 1px;
     padding-left : 16px;
     margin-bottom : 5px;
     line-height : 2em;
     border-bottom:1px dotted #ffffff;}
     </style>

     <script type='text/javascript'>
     //<![CDATA[
     var relatedTitles = new Array();
     var relatedTitlesNum = 0;
     var relatedUrls = new Array();
     function related_results_labels(json) {
     for (var i = 0; i < json.feed.entry.length; i++) {
     var entry = json.feed.entry[i];
     relatedTitles[relatedTitlesNum] = entry.title.$t;
     for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == 'alternate') {
     relatedUrls[relatedTitlesNum] = entry.link[k].href;
     relatedTitlesNum++;
     break;
     }
     }
     }
     }
     function removeRelatedDuplicates() {
     var tmp = new Array(0);
     var tmp2 = new Array(0);
     for(var i = 0; i < relatedUrls.length; i++) {
     if(!contains(tmp, relatedUrls[i])) {
     tmp.length += 1;
     tmp[tmp.length - 1] = relatedUrls[i];
     tmp2.length += 1;
     tmp2[tmp2.length - 1] = relatedTitles[i];
     }
     }
     relatedTitles = tmp2;
     relatedUrls = tmp;
     }
     function contains(a, e) {
     for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
     return false;
     }
     function printRelatedLabels() {
     var r = Math.floor((relatedTitles.length - 1) * Math.random());
     var i = 0;
     document.write('<ul>');
     while (i < relatedTitles.length && i < 20) {
     document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
     if (r < relatedTitles.length - 1) {
     r++;
     } else {
     r = 0;
     }
     i++;
     }
     document.write('</ul>');
     }
     //]]>
     </script>
  • Selanjutnya, cari kode <data:post.body/> kemudian  letakkan kode berikut dibawahnya:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <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'><data:label.name/><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> 
Sekian tutorial blog dari saya, mungkin tutoroal ini bukan berarti apa apa bagi mereka para blogger profesiinal, tapi sebagai blogger pemula saya juga ingin berbagi setiap ilmu baru yang saya dapatkan. semoga tutorial ini bermanfaat, khususnya bagi para pemula seperti saya ini.

Selasa, 31 Januari 2012

Cara membuat scrool box

     Sebelumnya saya pernah memposting Cara membuat 3 kolom di atas footer yang saya dapatkan dari http://blognya-reggy.blogspot.com/. nah saat saya membaca artikel cara membuat 3 kolom ini pada blog tersebut, sepintas saya melihat judul postingan yang bertuliskan cara membuat scrool box pada blog, sejenak saya tinggalkan artikel cara membuat 3 kolom pada blog tersebut, untuk membuka artikel cara membuat scroll box pada blog. dalam hati saya berkta "akhirnya yang slama ini q cari ketemu juga di blog ini". Bagaimana sich cara membuat scrool box pada blog itu..? ini adalah sebuah pertanyaan yang muncul sejak pertama membuat blog ini, tapi saya tak pernah berfikir untuk menanyakannya atau mencarinya di mang googl, tapi akhirnya saya meenemukan jawabannya secara tidak sengaja di blog tersebut, sekali lagi saya ucapkan terimakasih pada pemilik blog tersebut. karna hal ini saya merasa senang sekali, jadi saya memutuskan untuk menulisnya kembli pada blog saya ini.mungkin bagi sobat blogger yang sudah profesional cara ini bukanlah apa apa, tapi biarlah mereka para blogger pemula ini untuk mengetahuinya dan tetap belajar. jadi saya pikir tidak ada salahnya saya menuliskan kembali artikel ini. menurut saya trik seperti ini di perlukan bagi blogger pemula seperti saya ini.

Ooh ya sebelum  saya bahas cara Membuat Scrool Pada Blog ini, saya  akan jelaskan dulu apa kegunaan scrool box yang di maksud pada blog ini. Scroll box bisa dipakai untuk menyimpan kode HTML, gambar, link dll.

 Berikut langkah langkah untuk Membuat Scrool Pada Blog

Cara untuk  Membuat Scrool Pada Blog ini mudah sekali, copy saja kode di bawah ini untuk di pasang pada widget HTML/Javasript pada blog anda Atau bisa juga di pasang pada artikel dalam postingan anda Atau juga pada suatu  halaman.

<div style="overflow:auto;width:100px;height:50px;padding:10px;border:1px solid #eee">

Isi Scroll Box

</div>
Dan hasilnya akan tampak seperti ini


Isi Scroll Box

 Ket:
  • Tulisan berwarna hijau adalah isi scrollboxnya
  • Tulisan berwarna merah adalah tinggi kotak nya. Anda bisa merubahnya sesuai kebutuhan.
  • Tulisan yang berwarna biru adalah lebarnya. Andajuga bisa merubahnya sesuai kebutuhan
  • Jika anda tidak ingin kotaknya terlihat anda bisa merubahnya yaitu tulisan yang berwarna ungu (tulisan #eee adalah warna kotaknya 
Selamat Mencoba!!! Semoga artikel ini bermanfaat.............

Sabtu, 28 Januari 2012

Cara membuat 3 kolom di atas footer

      Kali ini saya akan membahas tentang tutorial blog yaitu. bagai mana cara membuat 3 kolom di atas footer. Setelah saya cari cari di mang google, mengenai cara membuat kolom ini, memang banyak saya temukan blog blog yang membahas tentang ini, tetapi saya coba praktekan satu persatu, dan ternyata tidak ada yang berhasil, bukan karena cara cara nyaterlalu susah, malahan sangat mudah bagi saya, kita hanya tinggal mencari  kode di Rancangan > Edit Html (kode ini misalnya <div id='footer' ) kemudian setelah ketemu kode yang di maksud kita hanya tinggal Copy code yang sudah di sediakan dan mem paste kan nya di atas atau di bawah kode yang kita cari tadi ( <div id='footer'  ) tapi masalahnya saya tidak bisa menemukan kode yang harus di cari terlebih dahulu (kode ini misalnya <div id='footer' ).walaupun saya sudah menggunakan fasilitas find di mozila tapi tetep aja g ktemu. tapi akhirnya saya menemukan tutorial yang cocok dari blog http://blognya-reggy.blogspot.com/ dengan blog saya.
nahh  berhubung saya lagi malas ngtik jadi ga usah banyak banyak deh basa basinya, langsung ke intinya.aja ya .. tapi sebelumnya saya ucapkan terima kasih terlebih dahulu ya kepada pemilik blog http://blognya-reggy.blogspot.com/ karena yang saya cari cari akhirnya ketemu juga..
OK bagi pembaca yang belum paha kotak apa yang di maksud. untuk lebih jelasnya lihat gambar berikut

nahh apakah anda masih tertarik...? ikuti langkah berikut

  1. Tentunya langkah pertama yang harus anda lakukan adalah login ke akun blogger anda
  2. langsung msuk ke Rancangan > Edit Html 
  3. Beri tanda centang pada tulisan Expand Template Widget
  4. Cari kode ]]></b:skin> dan letakan kode di bawah ini dia atas kode tersebut!
#footer-bottom { width: 900px;background:#fff; position: relative;display:inline; clear:both; margin:0 auto 0; color:#000; float: left; padding:10px; } #left-bottom { width: 270px; float: left;display:inline; margin:10px 5px 0 5px; padding:5px } #center-bottom { width: 280px; float: left; margin:10px 5px 0; padding:5px } #right-bottom{ width: 270px; float: left;display:inline; margin:10px 5px 0; padding:5px }
  1. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut  

    <div style="border: 1px solid rgb(238, 238, 238); height: 250px; overflow: auto; padding: 10px; width: 977px;">
    <div id="footer-bottom"><b:section class="footer-bottom" id="left-bottom" preferred="yes" showaddelement="yes"> </b:section>  <b:section class="footer-bottom" id="center-bottom" preferred="yes" showaddelement="yes"> </b:section>  <b:section class="footer-bottom" id="right-bottom" preferred="yes" showaddelement="yes"> </b:section> </div></div>

    sekian tutorial  Cara membuat 3 kolom di atas footer ini semoga bermanfaat