Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Thursday, February 25, 2010

Membuat Permalink Blogger

Langkah Cara Membuat Permalink Tag Otomatis untuk Blogger Blogspot

  • Pertama,pergilah ke Dashboard blogger anda,selanjutnya pilih Tata Letak dan kemudian pilih tab Edit HTML.

    Pelajaran Blog Membuat Permalink Blogger
  • Seperti biasa,jangan lupa contreng tulisan Expand Widget Templates ya :D

    Pelajaran Blog Membuat Tag Otomatis Blogger
  • Berikutnya,cari kode ]]></b:skin> (gunakan Ctrl+F untuk membantu pencarian),setelah ketemu kode tersebut,persis diatasnya letakkan kode css berikut :
    .membuatpermalinkblogger
    {border: 1px solid #EFF0F1;
    padding: 5px;
    background: #ffffff;-moz-border-radius:5px;}

    .membuatpermalinkblogger a
    {background:none;}
    img.float-right {margin: 5px 0px 0 10px;}
    img.float-left {margin: 5px 10px 0 0px;}

  • Selanjutnya,cari kode berikut:
    <data:post.body/> atau <p><data:post.body/></p>
    Jika sudah ketemu,hapus kode tersebut dan gantilah dengan kode berikut:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p><data:post.body/></p>
    <div class='membuatpermalinkblogger'>
    <center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div>
    <b:else/>
    <p><data:post.body/></p>
    </b:if>

  • Lalu simpan Templates,selesai :D

Bagaimana jika saya menemukan dua(2)kode <data:post.body/>,misal karena saya telah membuat read more/baca selengkapnya?

Memang,setelah anda merubah template menambahkan fasilitas read more,akan ada 2 kode <data:post.body/>,seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Betul tidak,ada dua kode ? solusinya,tinggal menyelipkan kode permalink diatas diantaranya,jadi kira-kira kodenya akan menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<div class='membuatpermalinkblogger'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Lalu simpan templates dan lihat hasilnya.

Permalink blogger ini hanya akan terlihat saat anda membuka suatu posting bukan halaman utama blog anda.

disadur dari : pelajaran-blog.blogspot

Wednesday, February 24, 2010

Membuat Related Post Link di Blogspot

Preview of Related Posts Links:

How to Add Related Posts Widget to Your Blog?
  1. Go to Layout >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Search for the </head> tag.
  5. Add the following code just before the </head> tag.
  • <style> #related-posts { float : left; width : 540px; 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/AVvXsEgDr9ymVLVmsgRX1p-zNqxSK8UGx7ERPsXwo_-frIdShH4ZCfRHEZ5fhxyKsYpqaB62T9x4NMJ4q9nBlyS7iVSrYTXSJqrVBaMFWUcL5OCQO8c4SS5uhY4VZL16zYnFEV98MN0l2d6fSSo/") 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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>
  1. Now search for <data:post.body/>. In some of the templates this code may look like this <div class='post-body>
    or

    <data:post.body/>
  2. Add the following code just beneath the code you just searched for.

    <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>
  3. Now Save your Template and you're done!

Customization

  • In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
         max-results=5 

     
    Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews