About

Friday 20 January 2012

Related Post dengan Thumbnails dibawah Postingan Blogspot

relate post thumbnail,related post dengan gambar


Membuat Related Post dengan Thumbnail pada Blogger bukan hal yang baru lagi bagi sahabat yang sudah sekian lama hidup di dunia blogspot. Related Post yang menyertakan image alias gambar secara thumbnail akan lebih mempercantik tampilan blog, dan diyakini dapat meningkatkan pageview pada blog sahabat yang mungkin saja bisa meningkatkan kualitas alexa pagerank atau tambahan recehan dolar.

Cara Membuat Related Post dengan Image Gambar Posting adalah sebagai berikut:
1.Login ke akun blogger kamu.
2.Masuk ke Rancangan/Design >> Edit HTML
3.Beri tanda centang pada "Expand Template Widget".
4.Cari kode  </head>
5.Letakkan kode berikut diatas/sebelum kode </head>
<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://jiox.googlecode.com/files/sambung.js’ type=’text/javascript’/>
</b:if>

6.Search atau cari kode ini :
<div class=’post-footer-line post-footer-line-1′>

kalau tidak ada, alternatifnya cari kode ini :
<p class=’post-footer-line post-footer-line-1′>

7.Kemudian, Letakkan/Paste kode berikut diatasnya :
<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://alkatro.com/’ style=’display:none;’>simple tips</a>
<script type=’text/javascript’>
var currentposturl=&quot;<data:post.url/>&quot;;
var jumlahpost=7;var judulnya=”Artikel Terkait”;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>


Keterangan :
Ganti  var jumlahpost=7 dengan jumlah post yang ingin ditampilkan.
Ganti var judulnya="Artikel Terkait" dengan nama yang kamu inginkan.


8.Save Template





alkatro.com

Related Post dibawah Postingan Blogspot

Cara Membuat Related Post | Cara membuat artikel terkait ( related post ) tepat di bawah postingan blog - Tips ini sebenarnya sudah sangat banyak beredar, namun tidak ada salahnya di ulas kembali untuk membantu blog-blog pemula yang masihawam dengan tips ini. Berikut ini cara dalam membuat artikel terkait di bawah postingan.



  • Login ke blogger Anda.
  • Pilih Rancangan, kemudian kli Edit HTML
  • Beri tanda centang pada Expand Widget Template.
  • Cari kode <data:post.body/>, supaya mudah, gunakan kotak Find dengan menekan tombol F3
  • tempatkan script/kode berikut di bawah kode <data:post.body/>
  • Jika di template blog anda memakai fungsi " Read More" , maka cari kode seperti ini :
    <data:post.body/> </b:if> 
  • tempatkan script/kode berikut di bawah kode <data:post.body/> 
  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
    <div class='widget-content'>
    <h3>Related Posts by Categories</h3> <div id='data2007'/>

    <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;data2007&#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> </b:if>
  • Ganti tulisan  Related Posts by Categories dengan yang anda inginkan.
  • Save template dan lihat hasilnya

Memasang Widget Recent Post di Blogspot

http://1.bp.blogspot.com/_JX5QbXApsNQ/TH0RoC0Rt7I/AAAAAAAABUc/9jS0g2R8rVk/s1600/Recent+Post+With+Thumbnails.jpg 
 
 
Anda pasti sudah pernah melihat widget seperti gambar diatas bukan? widget ini berguna untuk menampilkan Postingan terbaru pada blog kamu. di widget ini juga ditampilkan Thumbnail serta jumlah komentar pada postingannya.
1. Login blogger
2. Rancangan(Design)
3. Pilih Elemen Halaman
4.
Tambah Gadget Pilih "HTML / JAVASCRIPT"
5. Copy Kode Dibawah ini Kedalamnya:

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://azmi-muzaky.blogspot.com/";

</script>

<script src="http://postrecent.googlecode.com/files/Recentpostthumbnails.js" type="text/javascript"></script>

6.Ganti http://azmi-muzaky.blogspot.com dengan URL blog kamu.
6. Save template dan lihat hasilnya.
 

Membuat Widget Popular Post Pada Blogger

Widget ini berisi Artikel Paling paling populer dengan mengurutkan berdasarkan jumlah komentar pada posting tersebut. Akan tetapi, pada widget ini tidak ada Thumbnailnya, sehingga widget ini tidak terlalu membebani kecepatan loading blog kamu.

Berikut Cara membuatnya:

1. Login blogger
2. Rancangan(Design)
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih "HTML / JAVASCRIPT"
5. Copy Kode Dibawah ini Kedalamnya:
<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://azmi-muzaky.blogspot.com
&ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<span style=" float:right;"><a href="http://dj-note.blogspot.com/2011/02/cara-membuat-widget-popular-post.html" target="_blank">Make your own</a></span>
<!-- Popular posts with comment count End -->
Keterangan: Silahkan Ganti Url http://azmi-muzaky.blogspot.com dengan Url Anda dan ganti 10 Dengan Jumlah postingan yang ingin anda tampilkan.

Jika Sudah Save template anda dan lihat hasilnya...




dj-note.blogspot.com

Membuat Fungsi Scroll Pada Blog Archive

Jika postingan di blog kamu lebih dari 50 post/harinya, mungkin akan ada banyak sekali entri yang tampil di widget "Blog Archive" atau nama lainnya "Arsip Blog". dengan begitu widget ini akan banyak memakai ruang di sidebar blog kamu yang otomatis akan mengganggu widget-widet lainnya.
Tak apa. karena semua itu bisa diatasi. caranya adalah dengan memperkecil widget Blog Archive dengan menggunakan fungsi Scroll pada widget itu. Bagaimana cara membuatnya??

Ikuti langkah-langkah berikut !


  1. Masuk dulu ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang dulu  Expand Widget Templates
  4. Cari kode yang seperti ini : <div id='ArchiveList'>  atau kata Archive.
  5. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
  6. Kalau sudah,  tambahkan kode berwarna Merah sebagai scollnya:
  7.  Lengkapnya kode tersebut seperti dibawah ini :
    <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div></div>
      </div>
      <b:include name='quickedit'/>
      </div>
    </b:includable>
  8. Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.
  9. Mungkin saja diblog sobat kodenya beda, Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.
  10. Save template
  11. Selesai.

Thursday 19 January 2012

Membuat Widget Followers Blog Show/Hide

Kali ini saya akan beritahu cara memasang widget Google Friend Connect atau yang lebih dikenal Google Followers dengan cara yang berbeda dari yang lainnya. Apa yang berbeda? jika biasanya widget ini hanya terpasang di sidebar blog orang-orang, maka kali ini Widget tersebut bisa disembunyikan, dan dapat dilihat dengan diklik.
Berminat? Ikuti langkah-langkah berikut !





1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya :



<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


KODE GOOGLE FRIEND CONNECT DISINI

<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Jangan disimpan dulu sob, masih ada langkah berikutnya neh

6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect

Screenshot

7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy Kode nya, Lalu Paste kode tersebut menggantikan 
"KODE GOOGLE FRIEND CONNECT DISINI"
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:

<a href="javascript:showHideFL()"/><img border="0" src="http://lh6.ggpht.com/_yF0--u7KSSI/TN6RD4JoCmI/AAAAAAAABG0/bkYV2RML-qk/Follow-.png" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>
14. Save dan lihatlah hasilnya. 

Membuat Daftar Isi di Blogger

Postingan yang terlihat hanya Post yang memiliki Label, tanpa memiliki label, Postingan tersebut tidak akan terlihat di Table of Content(Daftar Isi) ini.


Cara membuat daftar isi/sitemap blog di blogger/blogspot:
1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).
Dashboard > New Post/Edit Post > Edit Pages > Create New Page

2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain lain.
3. Pada bagian kanan kotak posting klik "Edit HTML".
4. Masukkan script berikut:
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script> 
<script src="http://azmi-muzaky.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script>
 Ganti http://azmi-muzaky.blogspot.com dengan url blog/website anda.
5. Jika ingin melihat hasilnya klik "preview/pratinjau".
6. Publish post.
7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.
8. Done!



bukarahasia.blogspot.com

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons