Just another WordPress.com site

Archive for the ‘Cara Buat Blog’ Category

>Cara Memasang Widget TOP KOMENTATOR Di Blogspot

>

Top komentator adalah informasi ranking pemberi komentar pada posting blog kamu yang paling banyak. Tujuannya apa memasang top komentator ini? tujuannya adalah memberi penghargaan kepada komentator yang telah rajin mengunjungi, membaca dan meluangkan waktunya untuk memberikan komentar pada posting blog kita.

Daripada basa-basi, mending langsung kita kerjakan. Berikut kode script Top Komentatornya :
<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2FBLOGNAME.blogspot.com &num=10&filter=xxxxx” type=”text/javascript”>
</script>
Dari kode script diatas, ada beberapa yang harus kamu edit, yaitu :
BLOGNAME = Ganti dengan nama domain blog kamu
10 = Ganti dengan jumlah peringkat yang ingin kamu tampilkan. Dan Di xxxx adalah filter untuk nama yang tidak ingin ikut dikalkulasi, biasanya tentu nama anda sebagai admin.
Gampang kan

Iklan

>Membuat Halaman Berbeda Dengan Homepage Blogspot

>

Pernah melihat sebuah blog dengan tampilan yang berbeda antara home dengan isi posting? Perbedaan disini maksudnya adalah dalam hal widget, di homepage ada beberapa widget yang tidak muncul dan baru muncul saat masuk ke halaman posting. Begitu juga dengan sebaliknya, ada beberapa widget juga yang hanya bisa tampil di halaman awal (homepage). Nah bagaimana cara membuat agar widget dapat menghilang di halaman awal maupun postingan?

Cara ini mungkin sangat bermanfaat untuk menghemat waktu reload blog anda. Untuk membuat itu semua kita harus melakukan sedikit bedah pada template blog.
Untuk membuat Widget tampil di halaman posting (dan hilang di homepage):
1. Tentukan/pilih widget yang ingin di sembunyikan. (lihat di view source)
2. Catat judul widget tersebut.
3. Cari judul widget tersebut di template kamu (gunakan ctrl+f atau f3)
Maka secara keseluruhan widget tersebut memiliki struktur seperti di bawah ini:
<b:widget id=’HTML14‘ locked=’false’ title=’Judul Widget Kamu‘ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Huruf yang berwarna merah itu adalah judul widget kamu. Dan huruf yang berwarna biru adalah kode untuk menyembunyikan widget.
Membuat widget hanya tampil di Home Page.
Sama seperti di atas, hanya saja strukturnya berbeda. Strukturnya seperti di bawah ini:
<b:widget id=’HTML14‘ locked=’false’ title=’Judul Widget anda’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Huruf yang berwarna merah adalah judul widget anda. Huruf yang berwarna biru adalah kode untuk menyembunyikan widget di homepage.
Setelah puas membedah, Klik Pratinjau dulu Untuk memastikan. jika bisa dibuka segera Simpan template?
Gimana ada kesulitan?

>Membuat Artikel Terkait Di Sidebar

>

Bagaimana cara membuat artikel terkait atau related posts di sidebar. Tutorial ini berbeda dari cara membuat artikel terkait di bawah postingan lihat pada postingan sebelumnya. Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Anda harus mempunyai label karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Instalasi Script
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Letakkan kode berikut di atas </head>
<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>

6. Kemudian cari kode berikut

<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
</b:if>

Ganti Dengan :

<b:if cond=’data:post.labels’><data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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=10&amp;quot;’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>

Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 7, atau bisa juga hingga 15 jika postingan Anda memiliki lebih dari satu label.

7. Simpan Template Anda.

Nah, begitulah rangkaian tutorial menambahkan artikel terkait atau related posts di sidebar Anda. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat. Mengalami kesulitan untuk tutorial lain? Request saja…
Penempatan Gadget
Sekarang beralihlah ke bagian Tata Letak. Pilih dimana gadget akan ditambahkan. Klik Add Gadget. Pilih HTML/JavaScript.
Lalu masukkan kode berikut ini di gadget Anda.
<script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>
Alhamdulillah rangkaian tutorial menambahkan artikel terkait atau related posts di sidebar Anda selesai sudah. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat.

>Membuat Artikel Terkait /Related Post Dengan Fungsi Scroll

>

Cara membuat Related Post atau Posting Terkait yang standar sudah pernah dijelaskan pada posting sebelumnya. Tetapi kali ini saya akan memberikan cara membuat Related Post dengan fungsi scroll. Dengan mengaktifkan fungsi scrolling pada widget related post maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah.

Apalagi widget related post ini diletakkan di bawah posting. Tertarik ingin memasang related post fungsi scroll? Tapi tunggu dulu.. Jika anda terlanjur memasang widget related post versi lama (tanpa fungsi scrolling), maka harus dihapus dulu. Untuk membuat Related Post dengan fungsi scroll sangatlah mudah :
1. Login ke blog anda
2. Masuk menu ‘Layout lalu pilih Edit HTML’
3. Centang kotak ‘Expand Widgets Template’
4. Cari kode ini <p><data:post.body/></p>
5. Letakkan script berikut ini, persis di bawah kode <p><data:post.body/></p> tadi (kalau ada 2 kode tersebut, Letakkan pada kode yang pertama).
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<H2>Related Post:</H2>
<div class=’rbbox’>
<div style=’margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;’>
<div id=’albri’/>
<script type=’text/javascript’>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
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 == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 == 'alternate') {
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('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&amp;callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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>
<script type=’text/javascript’>RelPost();</script>
</div>
</b:if>
6. Jika sudah, sekarang cari kode ]]></b:skin>
7. Letakkan kode berikut ini di bawah kode tadi :
/*– modifikasi related posts oleh http://situslakalaka.blogspot.com–*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
6. Klik Pratinjau (jika blog bisa dibuka berarti terpasang dengan benar)
7. Simpan Template. Selesai.

“Cara ini sudah diuji coba di dapur blog admin dan terbukti 100% berhasil”

>Menyembunyikan LinkWithin Dari Halaman Depan (Homepage) Blog

>

Jika Kita Memasang widget linkwithin, mau tidak mau kita harus menerima jika widget tersebut berjejer pada postingan baru kita di halaman depan. hal tersebut cukup mengganggu karena blog kita akan menjadi berat saat loading. Kita bisa menyembunyikan bahkan menghilangkan related post linkwithin dari halaman depan atau home blog kita.

Sebenarnya cara ini bisa juga digunakan untuk widget lain selain link within. Tetapi karena judulnya hanyalah menyembunyikan Linkwithin dari halaman depan maka kita hanya akan membahas tentang hal tersebut.
1. Seperti biasa, login ke blogspot temen temen lalu menuju ke edit HTML.
2. Jangan lupa centang Expand Widget Templates.
3. Selanjutnya gunakan ctrl + F dan cari judul widget “linkwithin” kalian (jika belum diapa apain cari aja LinkWithin) kalo udah diganti judulnya, yah cari deh dengan nama apa kalian ganti judulnya. dan kalian akan menemukan kode seperti dibawah ini.
<b:widget id=’HTML10′ locked=’false’ title=’LinkWithin’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:content/>
</b:if>
</b:includable>
</b:widget>
4. Perhatikan kode diatas, silahkan temen temen sisipkan kode yang dicetak tebal tersebut sesuai dengan contoh diatas.
5. Pratinjau,
6. Save /Simpan
Selesai deh, related post dengan thumbnail dari linkwithin telah sempurna terpasang dan tidak tampil dihalaman muka atau homepage.

>Membuat Posting 2 Kolom

>

Banyak hal yang terpikirkan untuk mempercantik postingan. Jika sebelumnya telah pernah dibahas tentang membuat Drop Cap (Baca: Buat Drop Cap di Blog), yakni huruf pertama artikel Anda besar seperti di surat kabar atau majalah, kini Anda bisa mempercantik lagi dengan gaya postingan berkolom. Untuk membuatnya Anda bisa gunakan cara pembuatan table.

Nah, bagi Anda yang ingin membuat seperti itu sangatlah mudah. Silahkan buat postingan baru dan gunakan kode berikut ini di mode pengeposan Edit HTML.
<table cellpadding=”10″ cellspacing=”10″ style=”text-align: justify;”><tbody><tr> <td align=”justify” valign=”top” width=”300″>artikel di bagian kiri</td><td align=”justify” valign=”top” width=”300″>artikel di bagian kanan</td> </tr></tbody></table>
Hasilnya akan menjadi seperti Ini :
artikel di bagian kiri artikel di bagian kanan
Keterangan:
cellpadding: atur jarak antara tepi kolom dengan tulisan
cellspacing: atur jarak antara dua kolom
width: ada dua width, pada kode di atas sama sama menggunakan angka 300. Jika ingin berbeda silahkan ganti saja.
align: perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah)
valign: perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah)
Selamat mencoba, semoga mempercantik postingan Anda dan semoga bermanfaat….

>Membuat Tombol Tukar Link Otomatis /Auto Install

>

Tombol Add Gadget Auto Install adalah fitur baru untuk menambahkan widget kedalam blog kita secara instan, intinya jika tombol itu di klik maka secara otomatis widget akan terpasang pada blog kita, tugas kita hanyalah meletakkan widget itu dengan cara menggeser (Drag & Drop). Pada kesempatan ini saya hanya mengemukakan cara membuat gadget tombol tukar link otomatis.

Begini Cara membuatnya:
1. Login di blogger > Layout > Page Element
2. Klik Add a Page Element /Tambah Gadget
3. Pilih Add menu HTML/JavaScript
4. Lalu pastekan kode berikut

<center>
<form action=”http://beta.blogger.com/add-widget&#8221; method=”POST”>
<input value=”My Friend” name=”widget.title” type=”hidden”/><textarea style=”display:none;” name=”widget.content”>
<a href=”http://situslakalaka.blogspot.com” target=”_blank”/>
<img border=”0″ alt=”Situslakalaka” src=”http://i1038.photobucket.com/albums/a470/Teamjabal/Mylogo.png“/></a>
</textarea><input value=”http://buzz.blogger.com&#8221; name=”infoUrl” type=”hidden”/>
<input value=”http://www.blogger.com/img/icon_logo32.gif&#8221; name=”logoUrl” type=”hidden”/>
<input value=”Link To Me” name=”go” type=”submit”/></form><p> This button image will display on your site </p><br/>
<img border=”0″ alt=”” src=” http://i1038.photobucket.com/albums/a470/Teamjabal/Mylogo.png “/> </center>

5. Simpan > Selesai
6. Pindahkan Widget tersebut sesuai keinginan kamu
Hasilnya akan menjadi seperti berikut :

Jika Tombol diatas ditekan maka banner dibawah ini akan muncul di blog kamu (silahkan ditekan untuk mencobanya itung-itung tukar banner)

Keterangan :
warna biru = Ganti dengan alamat blogmu.
warna ungu = Ganti dengan judul blogmu.
warna hijau = Ganti dengan alamat gambarmu.
Link To Me = Bisa kamu ganti dengan kata lain .

Untuk widget yang lain silahkan perhatikan script berikut ini :

<form action=”http://beta.blogger.com/add-widget&#8221; target=”_blank” method=”post”><input value=”judul untuk widget anda” name=”widget.title” type=”hidden”><textarea rows=”3″ cols=”5″ style=”display: none;” name=”widget.content”>MASUKKAN KODE WIDGET DISINI</textarea><input value=”Pasang Translator Widget” class=”button” name=”go” type=”submit”></form>
Hasilnya kira-kira begini:

“Cara diatas sudah diuji coba didapur blog admin dan terbukti berhasil”

Awan Tag