Daftar Isi





Tampilkan postingan dengan label Artikel Terkait. Tampilkan semua postingan
Tampilkan postingan dengan label Artikel Terkait. Tampilkan semua postingan

Minggu, 22 Juli 2012

Membuat Scrol pada Artikel Terkait

Pada posting sebelumnya kita membuat related post atau artikel terkait untuk mempermudah pengunjung untuk mencari artikel yang berhubungan. Namun jika dalam suatu kategori telah memiliki banyak posting, maka blog kita akan tampak terlalu memanjang dan kurang praktis. untuk itu pada posting ini saya akan memberikan code script untuk memodifikasi Related Post menjadi ringkas dengan memiliki scroll.
Langsung saja kita ikuti langkah-langkahnya:
  1. Login ke akun Blogger, pilih Tata Letak, lalu pilih Edit HTML.
  2. Beri tanda centrang pada Expand Template Widget.
  3. Cari kode berikut (gunakan Control F atau F3):
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='related-posts'>
    atau jika tidak ada coba cari :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
  4. Setelah ketemu, gantikan kode <div class='related-posts' atau 'similiar'> dengan kode berikut:
    <div class='related-posts' style='border:1px solid #CCC; padding:10px; width:95%; height:250px; overflow:auto;'>
    atau dengan kode ini
    <div class='similiar' style='border:1px solid #CCC; padding:10px; width:95%; height:250px; overflow:auto;'>
  5. Atur lebar (width) dan tinggi (height) sesuai keinginan kamu.
  6. Simpan

SELAMAT MENCOBA
Diambil Dari Blog Tutorial
Read more »

Membuat Artikel Terkait /Related Post 2

Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.
Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
  1. Kemudian Login ke blogger kamu.
  2. Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  3. Kemudian centrang pada Expand Template Widget.
  4. Carilah kode dengan Control F.
  5. Letakkan kode script tadi di bawah <data:post.body>
  6. Kopikan kode script berikut

    <!-- Mulai Related Post -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='related-posts'>

    <div class='widget-content'>
    <h3>Artikel terkait dengan kategori ini:</h3>
    <div id='datablogku' style='margin:10px 0 10px 0'/>

    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;

    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;datablogku&#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>
    document.write(&quot;<div style='font-size:87%; float:right; margin-top:5px;'><a href='http://bloggerblogku.blogspot.com/2010/05/membuat-artikel-terkaitrelated-post.html' target='_blank' title='Cara membuat Related Post'>Widget by Blog Tutorial - Andre Sahan</a></div>&quot;);
    </script>
    </div></div>
    </b:if>
    <!-- Akhir Related Post -->
  7. Dan SIMPAN TEMPLATE
Untuk Menambah Scroll Artikel Terkait Lihat Disini

SELAMAT MENCOBA
Diambil dari Blog Tutorial
Read more »

Membuat Tumbnails Related Post /Artikel Terkait

Menambahkan related post atau artikel yang terkait pada setiap postingan dapat meningkatkan trafik kunjungan blog anda.Pengunjung akan mudah menemukan dan membaca artikel-artikel terkait pada blog anda.Lebh menariknya lagi related post ini disertai dengan gambar.Cara membuat related post dengan thumbnails adalah sebagai berikut.
  1. Login pada blogger.
  2. Klik Layout pada Dasboard.
  3. Klik Edit HTML pada Layout dan jangan lupa centang Expand Widget Template
  4. Cari kode </head>
  5. Dan ganti kode tersebut dengan kode dibawah ini.
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }


    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }


    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>
  6. Selanjutnya temukan kode
    <div class='post-footer-line post-footer-line-1'>
    atau kalau tidak ada coba cari
    <p class='post-footer-line post-footer-line-1'>
  7. Letakkan kode berikut setelah kode diatas

    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->
  8. Untuk menampilkan jumlah post dapat diedit dengan mengganti angka pada
    var maxresults=5;.
  9. Untuk mengganti nama "Related Post" dengan "Artikel Yang Terkait" dapat diganti pada
    var relatedpoststitle="Related Posts";

Selamat Mencoba
Read more »

Related Post /Artikel Terkait Blog Otomatis

Related posts adalah kumpulan link yang diletakkan persis dibawah artikel sehingga menarik minat pembaca untuk membaca artikel berikutnya.
  1. Seperti biasa masuk ke blogmu 
  2. Pilih template, klik edit html dan klik lanjutkan 
  3. Ceklist pada Expand Template Widget (jangan lupa simpan template aslinya buat jaga-jaga) 
  4. Cari kode: </head> (gunakan Ctrl+f untuk mencari) 
  5. Copy kode dibawah ini tepat diatas </head>
    <style> #related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1Wys4iNS-D_HLRxutRDmOcqHurhXfDvo4eiGDgWAvNHk-6xo7AupN6xUWOrDeYzEfW0Nfy9hGkYeF61ZKNH1XVucURbyVpaggTYnI4tQgZ92JJqakqNCePlzVzmwXRaSjQdvQMW4ylrI/s1600/rss.png ") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/1244223703/related_postku1.js' type='text/javascript'/>
  6. Cari kode <data:post.body/> atau <div class='post-body>, 
  7. Kemudian copy code dibawah ini, letakkan persis dibawahnya
  8. <b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </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>
      Klik pratinjau (preview) untuk memastikan tidak terjadi error dan Simpan hasilnya
    Read more »