Senin, 07 Februari 2011

Cara Membuat Related Post atau Artikel Terkait di Blog

     Sekarang saya akan membahas cara untuk membuat Related post atau artikel terkait di blog kita.. Tujuan dari Related post ini adalah untuk memudahkan pengunjung melihat artikel2 yang berhubungan dengan tulisan kita sebelumnya...
Berikut adalah langkah2nya...
1. Masuk ke Blog anda dan pilih menu Tata Letak (Edit HTML)
2. Jangan lupa centang dulu expand widget template..
3. Copy kode berikut ini...di atas kode </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>

4. Cari kode  <data:post.body/>, kemudian copy lagi kode ini dibawahnya...

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

6. Simpan Template yang telah dibuat

Untuk contohnya bisa dilihat seperti yang ada di blog ini...
SELAMAT MENCOBA YA...!!!!!!
 

Share

Selasa, 01 Februari 2011

Membuat footer manjadi beberapa bagian

Berikut ini cara untuk membuat footer blog kita menjadi beberapa bagian...ne aq lihat sewaktu mampir ke hermanblog...
1. Login ke Blog
2. Klik Desain-Edit HTML
3. Kalau sudah, cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Jika sudah cari kode dibawah ini.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Jika ingin membuat footer 2 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer 3 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer menjadi 4 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

7. Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

Footer 2 kolom

footer 2 kolom
Footer 3 kolom

footer 3 kolom
Footer 4 kolom

footer 4 kolom

Selamat mencoba ya...

Share

Cara Membuat Tab View di Blog

Mau tau cara membuat tab view di  blog kita....

Kalua anda tertarik setelah melihat gambar tersebut...maka mari kita coba untuk membuatnya...
1. Login ke Blog
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color: #ffffff">Tab 1</span></a>
<a><span style="color: #ffffff">Tab 2</span></a>
<a><span style="color: #ffffff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
Keterangan:
Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan merah jambu merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 180 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

4. Kalau sudah simpan dan lihat blog anda...
selamat mencoba...

Share

Senin, 31 Januari 2011

Membuat Tombol Search di Blog

Berikut ini adalah tips untuk melangsingkan badan..eh salah..membuat tombol searh di blog kita...
Mau???? Lihat aja deh...
1. Login blog anda..kemudian masuk ke edit laman dan klik add a gadget
2. Klik Add a Gadget -> HTML/Java script
3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="Blagbligblog/search" style="display:inline;" method="get">
<strong>NamaKotak<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
Tulisan Blagbligblog bisa diganti dengan alamat URL blog Anda. Misalnya, http://www.kucingkurap.com dan ganti NamaKotak dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari artikel disini, atau bisa Cari pacar disini..hehehe

4. Jika sudah selesai, klik Save kemudian lihat Blog untuk melihat tampilannya di blog.

Anda bisa mengubah ukuran lotal dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.

contoh gambar...

 

Share

Cara membuat teks berjalan di menu bar

 Teman teman mungkin pernah memasuki sebuah blog yang tulisan di menu barnya berjalan...yang terkadang bikin pusing juga..
Sebenarnya aku malas memakai yang seperti itu,namun mungkin diantara teman2 ada yang berniat untuk mencobanya...hehehehe
1. Masuk ke Blog..kemudian Edit HTML
2. Letakkan kode yang ada di bawah ini di atas kode </head>

kodenya adalah :

<script type='text/javascript'>
//<![CDATA[

msg = " selamat datang ";
msg = " semua ada di sini " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


Keterangan :
Tulisan merah diganti dengan nama blog anda dan keterangan untuk blog anda...sedangkan tulisan 200 adalah untuk kecepatan pergerakan..

Selamat mencoba..

Share

Cara Cepat Untuk Mencari Kode di edit HTML

Ketika kita ingin menambah sebuah widget di blog,kita sering kali dipusingkan untuk mencari sebuah kode tertentu di edit HTML...
Jika para blogger ingin cara cepat untuk mencari kode tersebut, misalkan <b:include data='blog' name='all-head-content'/>. Maka kita hanya perlu untuk menekan tombol CTRL + F secara berbarengan...

Selamat mencoba...

Share

Cara Memasang Tombol Share Facebook di Blog

Tombol share facebook sangat diperlukan bagi para blogger yang ingin meningkatkan traffic nya...karena bisa menjadi altenatif untuk mensharingkan postingan2 terbaru dari blog kita kepada teman teman yang ada di facebook..
ne beberapa langkah yang harus diikuti untuk membuat tombol share facebook...
1. Ambil telur ayam 2 butir..kemudian kocok...
UPPsss..salah..kita ulangi lagi ya...hehehe
1. Masuk ke blog kita..kemudian masuk ke DESIGN-EDIT HTML
2. Jangan lupa centang pada 'Expand widget templates' 
3. Cari kode <data:post.body/>
4. Copy Paste kode yang ada di bawah ini..di atas atau dibawah kode <data:post.body/> (tergantung kita ingin meletakkan tombol share facebook di atas atau di bawah postingn)

Tombol Fshare tanpa counter

tombol fshare tanpa counter

Kode:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Tombol Fshare dengan counter diatas

tombol fshare dengan counter diatas




Kode:
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Tombol Fshare dengan counter disamping

tombol fshare dengan counter disamping

Kode:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
5. Jika sudah..simpan dan lihat hasilnya..

 SELAMAT MENCOBA :)

Share

Sabtu, 29 Januari 2011

Membuat blog dapat dicari oleh mesin pencari Google

Cara yang paling mudah untuk membuat Blog kita mudah dicari dalam mesin pencari google biar aq jelasin dulu ya.. :)

1. Sering meninggalkan comment di setiap blog lain yang kita kunjungi.
Rajin-rajinlah memberikan komentar/comment ke blog lain. Jika anda aga malas blogwalking, maka anda bisa pergunakan software comment kahuna. Comment kahuna adalah sebuah software yang bisa anda pergunakan untuk memudahkan anda mencari blog dengan topik yang berhubungan dengan blog anda dan dengan software ini, akan lebih mudah untuk mengirimkan komentar ke blog lain. Download softwarenya silahkan

2. Submit blog ente secara manual
Google memiliki feature blog search, jika anda ingin memasukkan blog anda ke dalam blog search google, anda bisa melakukannya secara manual disini. Anda tinggal memasukkan alamat blog anda.... jadi deh..


3. Bantulah google agar dapat mengindex blog anda
Untuk membantu blog anda terindex oleh google, maka gunakanlah google webmaster tools! Alasannya adalah hal ini dapat membantu google bot untuk menelusuri dan mendaftarkan halaman situs anda.


4. Submit blog anda pada situs2 social bookmarking
Mungkin  StumbleUpon dapat dijadikan tempat submit blog yang sesuai...


Dengan memudahkan google mencari blog anda, maka besar kemungkinan blog anda akan mengalami peningkatan rank... ga pengen neh???? :)


Semoga berhasil ya...

Share

MEMASANG KOTAK KOMENTAR DI BLOG


Ingin melihat komentar komentar dari orang yang melihat blog anda....??? caranya sangat mudah//
1. Cari aplikasinya di sini
2. Isi formulir pendaftaran, kemudian ok..
3. Copy kode yang ada di embed..kemudian paste ke script yang ada di widget blog anda...
4. Tinggal menunggu hasilnya :)

Selamat mencoba...

Share

Memasang template blog gratis


Untuk membuat tampilan blog semakin menarik kita harus pandai menyiasatinya..salah satu caranya adalah dengan mengganti tampilan blog kita. blog yang tampil cantik dan elegan akan membuat pengunjung betah berselayar di blog kita...
Ne ada beberapa kumpulan template yang bisa didownload secara gretong....

1 . www.btemplates.com
2. www.bloggerbuster.com
3. http://blogtemplate4u.com/
4. www.freeblogger-templates.blogspot.com
5. www.blogger-templates.blogspot.com
6. www.finalsense.com
7. www.ourblogtemplates.com
8. www.bloggerstyles.com
9. www.eblogtemplates.com
10.www.blogspottemplate.com

Share

Memasang aplikasi jam di Blog

Tips mudah memasang aplikasi jam di blog..
1. Masuk ke dalam situs yang menyediakan aplikasi tersebut. klik di sini
2. Pilih dahulu jam yang anda sukai..kemudian klik view html tag
3. Dalam license persetujuan klik accept
4. Pilih warna jika disediakan, kemudian ubah waktu menjadi GMT + 07.00
5. Copy URL yang tersedia ke blog anda.

Selesai....Met mencoba ya...

Share

blogger templates | Make Money Online