Saturday 20 October 2012

Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Ada Tiga Jenis Aplikasi Artikel terkait:
  1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.  (Yang akan anda baca saat ini)
  2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.
  3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.
perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.
Dan berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:

artikel terkait blogspot

Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:
  • Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
  • Salin kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>:

    #mamas-topik {
      margin-top:100px;
      clear:both;
      display:block;
    }
    
    .paling-ganteng {
      border:2px solid #666;
      padding:5px;
      background-color:#efefef;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      border-radius:5px;
      -webkit-box-shadow:inset 0 0 7px #666;
      -moz-box-shadow:inset 0 0 7px #666;
      box-shadow:inset 0 0 7px #666;
    }
    
    .paling-ganteng:hover {background:#f9f9f9;}
    
    .sedunia {
      padding:10px;
      border:1px solid #bbb;
      height:165px;
      overflow:auto;
    }
  • Setelah itu salin juga kode ini:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='mamas-topik'>
    <h2>Tutorial Sejenis:</h2>
    <div class='paling-ganteng'>
    <div class='sedunia'>
    <div id='hompimpa'/>
    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 7;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 50;
    maxNumberOfLabels = 7;
    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    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 &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;hompimpa&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    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 = &quot;<data:label.name/>&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++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>
    </div>
    </div>
    </b:if>

    Kemudian letakkan tepat di bawah kode yang tampak seperti ini:

    <data:post.body/>

    atau seperti ini:

    <p><data:post.body/></p>

    atau seperti ini:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

  • Klik Simpan Template dan lihat hasilnya (pada halaman item).


Sedikit Penyesuaian:

  • Ganti kode yang Saya beri warna merah (Saya harap Anda tidak buta warna) dengan judul yang kalian inginkan.
  • Di situ juga terdapat beberapa variabel yang bisa kalian utak-atik, tapi Saya rasa itu tidak telalu penting. Langsung simpan saja.
  • Jika kalian tidak menghendaki scroll bar dalam elemen ini, hapus saja deklarasi overflow:auto; dan ganti value 165px dalam properti height: dengan auto sehingga hasilnya menjadi seperti ini:

    .sedunia {
      padding:10px;
      border:1px solid #bbb;
      height:auto;
    }

    Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya.

Sumber :

DAFTAR ISI


Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel


artikel terkait blogspot

Ada Tiga Jenis Aplikasi Artikel terkait:
  1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.
  2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.
  3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.(Yang akan anda baca saat ini)
perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait dengan gambar, judul dan deskripsi. Anda tinggal memilih mana yang lebih menarik atau sesuai dengan Anda. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini.

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

  • Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
  • Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <style type='text/css'>
              #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
              #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
              #relpost_img_sum:hover         {background:none;}
              #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
              #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
              #relpost_img_sum li:hover      {background-color:#F0ECE9;}
              #relpost_img_sum .news-title a {color:#2C6BA8;}
              #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
              #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
              #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
         </style>
         <script type='text/javascript'>
              var relnojudul = 0;
              var relmaxtampil = 10;
              var numchars = 200;
              var morelink = "baca selengkapnya";
         </script>
         <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
    </b:if>

  • Selanjutnya temukan kode ini:

    <div class='post-footer'>

    TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

    Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

    <!-- Artikel Terkait dengan Gambar dan Ringkasan -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div id='related_posts'>
              <h4>Artikel Terkait</h4>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
              </b:loop>
              <ul id='relpost_img_sum'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </b:if>
    <!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->
  • Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
  • Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian-Penyesuaian:

  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
  • var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
  • var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
  • var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
  • Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.


Sumber :

DAFTAR ISI


Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

artikel terkait blogspot
Ada Tiga Jenis Aplikasi Artikel terkait:
  1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.
  2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.  (Yang akan anda baca saat ini)
  3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.
perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait dengan gambar dan judul artikel.. Jika berminat tinggal ikuti langkah-langkah di bawah ini.

Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

  • Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.
  • Salin kode di bawah ini, kemudian letakkan di atas kode </head>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
            #at-gambar         {text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
            #at-gambar a       {color:#895F30;overflow-x:hidden;text-align:left;}
            #at-gambar a:hover {background-color:#EAE7DB;color:#666;}
            #at-gambar img     {width:84px !important;height:84px !important;}
        </style>
        <script type='text/javascript'>
            var defaultnoimage    = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF";
            var maxresults        = 5;
            var splittercolor     = "#EBEBEB";
            var relatedpoststitle = "Catatan Lainnya:";
        </script>
        <script src='http://reader-download.googlecode.com/svn/trunk/terkaitlib.js' type='text/javascript'></script>
    </b:if>

  • Selanjutnya temukan kode ini:

    <div class='post-footer'>

    TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

  • Jika sudah ketemu, salin kode ini kemudian letakkan di atasnya:

    <!-- Artikel Terkait dengan Gambar -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='at-gambar'>
            <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast != &quot;true&quot;'>
                </b:if>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'></script>
            </b:loop>
            <script type='text/javascript'>
                removeRelatedDuplicates_thumbs();
                printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
            </script>
        </div>
        <div style='clear:both'/>
    </b:if>
    <!-- Akhir Artikel Terkait dengan Gambar -->

  • Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan embel-embel post-footer umumnya memang berada di bawah posting. Begitu saja logikanya. Titik.
  • Jika sudah selesai, klik Simpan Template. Sekarang kita tinggal melakukan beberapa penyesuaian.


Penyesuaian-Penyesuaian

  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #at-gambar img{ ... }, yaitu pada deklarasi width:84px dan height:84px.
  • var defaultnoimage adalah tampilan untuk thumbnail cadangan jika posting yang dimaksud tidak memiliki gambar (umumnya menggunakan gambar "No Image").
  • var maxresults adalah variabel untuk menentukan jumlah posting maksimal yang akan ditampilkan.
  • var splittercolor adalah variabel untuk menentukan warna garis batas.
  • var relatedpoststitle adalah variabel untuk menentukan judul artikel terkaitmu (dalam hal ini adalah "Catatan Lainnya:").

Sumber :

DAFTAR ISI


Two Reasons why IPS is a "Must Have" for your Network

Introduction This is the third in my Security Series of Connect articles.  For more information on how to keep your enterprise environm...