Home » Posts filed under Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Menambahkan Widget Random Post Terbaru di Blog

Unknown | 18.05 | 0 komentar

Kebanyakan blog memiliki gadget Recent Post dan Post Populer disidebar atau footer. Ini sangat membantu para pembaca blog anda untuk lebih mengetahui isi dari blog, serta mempertahankan pembaca pada blog Anda untuk tidak lekas cabut setelah membaca satu buah postingan. Dengan begitu gadget Random Post benar-benar menggali lebih jauh ke dalam arsip Anda dan membantu menjaga pembaca posting lebih lama bertahan pada blog. Bagaimana cara menambahkan Gadget Random Post Terbaru tersebut, mari kita ikuti langkah-langkahnya.

1. Masuk dashboard blog anda

2. Kemudian klik tambah gandget, pilih HTML / Java Script

3. Dan paste code berikut ini

<a href='http://belajarsaraf.blogspot.com/'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwPvRCfHWbsOLPiS6ejUHMf2vYdGK5or6WD4ZfxJuzHH6fhPkiZLNiqecoeloO0yF5F6amHGjxjOPnz-SE9XQG393rddd_dIrupitGdVZ8I4Dcwwg-IX9HwKqOEZKoLwQPxuMqbeq5_uxM/s1600/best+blogger+tips.png'/></a><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

4. Kemudian klik save.

Anda dapat merubah berapa jumlah postingan yang ditampilkan dengan mengganti jumlah numofpost=6 dengan 5 atau 4 postingan.

Selamat mencoba.

Memasang Widget SubMenu Thumbnail di Blog

Unknown | 22.02 | 2 komentar

Bagaimana widget SubMenu Thumbnail tersebut, lihat dulu Demonya Disini. Bila anda juga tertarik membuatnya ikuti langkahnya-langkahnya sebagai berikut :

1. Masuk dashboard blog anda.

2. Pilih Edit HTML kemudian klik Expand Widget (jangan lupa backup terlebih dahulu template anda)

3. Cari kode </head>.

4. Pastekan kode berikut sebelum </head> :

5. Setelah itu cari kode ]]></b:skin>
6. Pastekan kode berikut sebelum ]]></b:skin> :

.raden{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}

.hide{
display: none;
}

.show{
display: block;
}

a{cursor: hand}

7. Bila sudah simpan/save template anda.

Pada tahap ini windget SubMenu Thumbnail masih belum tampil di blog anda. Untuk menampilkanya ikuti langkah selanjutnya :

8. Masuk ke Tata Letak dan pilih Elemen Halaman
9. Klik tambah widget dan pilih Java Script HTML
10. Kemudian copy paste saja kode dibawah ini :

<a class="raden"><font size="5"><b>Navigasi</b></font></a>
<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>
<div id="ogahku1" class="hide">
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat blog</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat link</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat marquee</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat Icon</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>
<div id="ogahku2" class="hide">
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Yahoo Emotions</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blogger Emotions</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang jam</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang Video</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>
<div id="ogahku3" class="hide">
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Free Blog Template</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blog Menu Free</a>
<a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Authorize service</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>
<div id="ogahku4" class="hide">
<a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Freezta</a>
<a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">JalanMaz</a>
<a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>
<a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">AnaBlog</a>
</div>

11. Setelah itu pilih save.

Keterangan :
>> Ganti kode yang berwarna kuning dengan nama menu dan sub menu blog anda
>> Ganti juga kode yang berwarna merah dengan link yang anda inginkan

Dan lihat hasilnya.

Membuat Auto Read More di Blog

Unknown | 20.40 | 0 komentar

Mungkin sebagian anda merasa tidak nyaman dengan tampilan postingan yang terlihat full di halaman depan blog. Sehingga halaman depan blog anda menjadi tampak panjang kebawah, apalagi bila ada beberapa postingan yang ditampilkan, tentu ini akan memakan waktu bagi anda maupun pengunjung blog anda yang hendak melihat-lihat isi blog anda tersebut.

Solusinya adalah, anda dapat memenggal sebagian entri anda, pada saat anda akan mempublikasikanya. caranya, anda hanya tinggal mengatur seberapa tulisan yang akan di penggal, lalu tekan Insert Jump Break. Fasilatas Insert Jump Break / pemenggalan postingan ini seperti yang telah ada di blogspot, terdapat di atas, saat anda menulis entri.

Tapi kelemahan dari pemenggalan secara manual ini, tampilan beberapa postingan anda tidak bisa sama rata, dan gambar yang tampil dihalaman blog tidak bisa sama besar. Tergantung besar gambar yang anda posting. Lalu bagaimana agar tampilan postingan dan gambar dihalaman blog anda bisa sama besar dan lebarnya ?

Untuk mengatasi hal tersebut anda bisa membuat Auto Read More, sehingga anda tidak perlu repot-repot secara manual untuk mengatur postingan dan gambar saat hendak mempublikasikan entri. Langsung saja ikuti caranya dibawah ini :

1. Masuk ke halaman dashboard blog anda.

2. Pilih Edit HTML dan klik Expand Widget (jangan lupa untuk memback up template anda).

3. Setelah itu cari kode </head>.

4. Kemudian letakkan kode ini sebelum kode </head> :

5. Kemudian cari lagi kode <data:post.body/>.

6. Setelah ketemu ganti kode <data:post.body/> tersebut dengan kode ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Kalau sudah save template anda dan lihat hasilnya.

Keterangan tambahan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat moncoba.

Cara Memasang Cek Speed Loading di Blog

Unknown | 01.14 | 0 komentar

Seperti penjelasan yang telah saya posting sebelumnya tentang cara menge-chek sebarapa berat dan kecepatan loading blog / web anda (lihat disini). Kali ini anda bisa membuat sendiri tools cek speed dan berat blog / web di blog milik anda sendiri. Jadi anda tidak perlu repot untuk mencari website yang menyediakan alat / tools untuk cek speed dan berat blog anda.

Anda tertarik untuk membuat sendiri ?

Caranya sangat mudah. Anda cukup menambahkan kode di bawah ini pada postingan atau menambahkan pada widget blog milik anda.

<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr> <td height="91" valign="top"><table class="tooltop" height="76" style="border-collapse: collapse;"><tbody>
<tr> <td><table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr> <td colspan="5" valign="top"><span style="font-size: medium;">Masukkan Alamat Blog/Web Anda Disini: </span></td> </tr>
<tr> <td colspan="4" valign="top"><textarea name="domain" rows="11" style="width: 400px;"></textarea></td> <td></td> </tr>
<tr> <td><input style="float: left;" type="submit" value="Check!" /></td> <td><span style="font-size: x-small;"><a href="http://belajarsaraf.blogspot.com/2012/07/cara-memasang-cek-speed-loading-di-blog.html">Pasang di blog anda</a></span></td> <td></td> <td colspan="2"></td> </tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td></td> </tr>
<tr> <td height="39"></td> </tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script>

Cukup mudah bukan ?

Selamat mencoba.

Cara Menampilkan Widget Hanya di Postingan

Unknown | 22.29 | 0 komentar

Ini adalah tips sederhana untuk menampilkan widget hanya pada halaman postingan saja. Mungkin tidak semua widget di blog anda ingin di tampilkan di halaman depan atau homepage, akan tetapi salah satu atau sebagian widget ingin anda tampilkan di halaman postingan saja dan tidak tampil di homepage.

Bagi anda yang tertarik menerapkanya di blog ikuti langkahnya :

1. Masuk dashboard blog anda.

2. Pilih edit HTML dan klik saja Expand widget

3. Lalu cari kode widget yang ingin anda tampilkan pada halaman postingan.

4. Setelah kode widgetnya ketemu, pastekan kode dibawah ini sebelum kode widget :

<b:if cond='data:blog.pageType == "item"'>

Dan pastekan kode ini setelah kode widget :

</b:if>

Selain menampilkan widget hanya pada halaman postingan saja, anda juga bisa mengatur untuk menampilkan widget hanya di halaman depan / homepage saja, kebalikan dari cara diatas.

Caranya sama dengan cara pertama, anda hanya menganti kode yang disisipkan saja.

Kode yang disisipkan sebelum kode widget :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Kode yang disisipkan setelah kode widget :

</b:if>

5. Jika sudah simpan template anda. Dan lihat hasilnya.

Selamat mencoba

Cara Menambahkan Kotak Chat Di Blog

Unknown | 12.44 | 0 komentar

Banyak manfaat yang kita peroleh ketika terdapat kotak chat di blog. Seperti tanya jawab, atau sekedar memberikan sapaan ketika seseorang mengunjungi blog anda. Bagi anda yang ingin menambahkan widget kotak chat di blog (seperti gambar dibawah). Kali ini saya akan memberikan tips, cara menambahkan kotak chat di blog. Silahkan anda ikuti tutorialnya berikut.

1. Masuk ke dashboard blog anda

2. Pilih Tata Letak, lalu klik Tambah Gadget. Lalu masukkan kode HTML java sript berikut

3. Dan klik save.

Kemudian lihat hasilnya

Trik Membuat Judul Postingan Miring di Blog

Unknown | 15.30 | 0 komentar

Satu lagi cara membuat blog anda menjadi menarik. Yaitu dengan membuat judul postingan berposisi miring. (seperti contoh gambar diatas). Akan tetapi apabila judul disorot oleh mouse, maka judul akan berubah posisinya menjadi lurus mendatar. Bagai mana cara membuatnya ? Langsung simak saja langkahnya dibawah ini.

1. Masuk dashboard blog anda.

2. Sebelumnya back up terlebih dahulu template anda untuk menjaga hal-hal yang tidak di inginkan.

3. Pilih Template, lalu klik Edit HTML.

4. Kemudian cari kode ]]></b:skin>

5. Seteleh ketemu pastekan kode berikut di atas ]]></b:skin>

/* post rotate */.post-title{opacity:0.7; background:#050505; border:1px solid white; -moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; font-family:'Molengo',Trebuchet MS,Serif; font-size:22px; margin-bottom:2px; padding:5px 10px 10px 10px; transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -o-transform:rotate(-10deg); line-height:1.2em}

6. Kemudian simpan template anda

Dan lihat hasilnya.

Membuat Teks Berjalan di Blog

Unknown | 22.07 | 0 komentar

Teks berjalan atau Marquee. Ini adalah istilah di html-nya. Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan baik kekanan, ke kiri, atau kebawah.

Caranya cukup mudah, anda hanya cukup memasang kode html ini pada teks yang ingin anda buat berjalan. Berikut adalah kode / script html nya :

<marquee>Teks yang Berjalan</marquee>

Hasilnya akan seperti ini :

Teks yang Berjalan

1. Teks bisa berjalan ke samping kanan :

<MARQUEE align="center" direction="right" height="70" scrollamount="2" width="30%">
Teks Berjalan ke Samping Kanan</MARQUEE>

Hasilnya akan seperti ini :

Teks Berjalan ke Samping Kanan

2. Teks bisa berjalan ke samping kiri :

<MARQUEE align="center" direction="left" height="70" scrollamount="3" width="70%" behavior="alternate">Teks Berjalan ke Samping Kiri</MARQUEE>

Hasilnya akan seperti ini :

Teks Berjalan ke Samping Kiri

3. Teks bisa berjalan ke atas

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="70" align="center">Teks bisa berjalan ke atas</marquee>

Hasilnya akan seperti ini :

Teks bisa berjalan ke atas

4. Teks bisa berjalan ke bawah

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100" height="70" align="center">Teks bisa berjalan ke bawah</marquee>

Hasilnya akan seperti ini :

Teks bisa berjalan ke bawah

5. Teks berjalan berLINK

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://belajarsaraf.blogspot.com/2012/05/alamat-situs-porno-yang-banyak-di.html" target="new">Alamat Situs Porno</a><br/>
<a href="http://belajarsaraf.blogspot.com/" target="new">Tempat Bermesum Ria</a><br/>
<a href="http://belajarsaraf.blogspot.com/2012/04/koleksi-video-mesum-dan-foto-bugil-cewe.html" target="new">Koleksi Foto Bugil</a><br/>
</marquee>

Hasilnya akan seperti ini :

Alamat Situs Porno
Tempat Bermesum Ria
Koleksi Foto Bugil

Silahkan anda mencobanya sendiri dan berkreasi.

Semoga berhasil.

Membuat Menu Dropdown Horizontal Keren

Unknown | 22.38 | 0 komentar

Menu Dropdown ini sangat keren untuk dipasang pada blog anda. Cara membuatnya-pun cukup mudah, karena anda tidak perlu mengoprek-oprek template blog, anda hanya cukup menambahkan pada kode HTML java script berikut ini di widget anda. Contoh menu Dropdown ini bisa anda lihat seperti gambar diatas.

Ini kode HTML java script yang ditambahkan pada widget anda :

Ganti kode yang berwarna hijau diatas dengan link yang hendak dituju pada blog anda.

Kemudian klik save.

Dan lihatlah hasilnya.

Cara Menambahkan Share Box di Blog

Unknown | 09.01 | 0 komentar

Pada kali ini saya ingin menunjukan kepada anda cara membuat share box untuk blog anda, didalamnya terdapar fungsi-fungsi sebagai berikut :

official tweet button dengan counter
oficial Google Buzz dengan counter
official Stumbleupon button dengan counter
Blog This!
Email this!
Print this!
Comment count link
Dan terakhir Facebook like button.

Bagaimana cukup complete bukan ? Semuanya dapat diramu jadi satu dan bisa ditambahkan dengan cepat pada blog anda. tampilannya kira-kira seperti ini :

Berikut adalah cara membuat share box blog anda :

Log in pada blogger anda
Pilih Rancangan --> Edit HTML
Klik "Expand Widget Templates"
Cari kode berikut <div class='post-header-line-1'/>
Copy dan pasang kode share box tepat dibawah kode <div class='post-header-line-1'/>

Perhatian: jika anda tidah dapat menemukan kode <div class='post-header-line-1'/> , anda juga bisa paste sebelum kode <data:post.body/>

Kode share boxnya adalah:

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>
.multisharebox {
background: none repeat scroll 0 0 #EFEFEF;
float: right;
margin: 5px 0px 3px 10px;
padding: 0 5px 0;
text-shadow: 0 1px 0 #FFFFFF;
width: 260px;
border:4px solid #d8dfea;
}
.fb-like-boxtop {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
margin: 0 0;
padding: 5px 10px;
text-align: left;
width: 230px;
}
.fb-like-boxtop a {
color: #000000;
text-decoration:none;
}
.fb-like-boxtop a:hover {
color: #000000;
text-decoration:underline;
}
.fb-like-box {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
height: 60px;
margin: 5px 0;
overflow: hidden;
padding: 5px 10px;
text-align: left;
width: 230px;
}
</style>


<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td>
<td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>


</b:if>

Dan yang terakhir save template anda. Kemudian lihat hasilnya

Efek Tulisan Mesin Ketik Pada Postingan

Unknown | 06.32 | 0 komentar

Langsung Lihat Demo-nya :

Anda mungkin tertarik untuk membuat tulisan berjal

Untuk membuat efek tulisan mengetik seperti pada postingan di atas, silahkan lihat caranya DISINI.

Membuat Link Bergoyang Saat Disorot Mouse

Unknown | 04.45 | 0 komentar

Memperindah tampilan blog adalah hal yang penting buat anda. Salah satu tips yang satu ini adalah, membuat efek link bergerak pada saat disorot oleh mouse. Apakah anda juga tertarik untuk membuatnya ?

Disini ada 2 cara yang bisa anda coba. Yang pertama melalui Edit HTML pada template anda, dan yang kedua dengan cara menambahkan code kedalam widget. Lebih jelasnya langsung saja ikuti langkahnya dibawah :

CARA PERTAMA :

1. Login ke dashboard Blog anda
2. Kemudian pilih Template, kemudian klik Edit HTML
3. Cari Kode </head> dan letakan kode script di bawah tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

4. Simpan template

CARA KEDUA :

Cara yang ini cukup simple, karena anda hanya cukup meng-copy kode di bawah ini dan masukan ke dalam tempat widget (Add HTML/Script)

<script src='http://ruki-zone.googlecode.com/files/link-goyang_www.ruki-zone.com.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Kemudian save.

Cukup mudah bukan. Silahkan anda mencobanya.

Mengganti Images Favicon Di Blogspot

Unknown | 08.31 | 0 komentar

Favicon adalah icon atau simbol yang berada di pojok atas browser, saat anda membuka sebuah web atau blog. Favicon di blog dapat di ganti sesuai keinginan anda. bagaimana cara menggantinya ?

Sebelum menggantinya, persiapkan dahulu gambar kreasi anda yang akan di tampilkan pada favicon blog anda.

Berikut langkah-langkahn mengganti Favicon di blog :

1. Masuk akun blog anda.

2. Pilih tata letak, lalu klik Edit favicon. seperti gambar dibawah

3. Lalu akan muncul pemberitahuan seperti gambar dibawah ini

4. Klik Hapus favicon seperti pada gambar dengan nomor 3.

5. Setelah dihapus, unggah gambar Favicon (Ukuran gambar 16 x 16 pixel) yang akan anda tampilkan di blog.

6. Kemudian klik simpan.

Lihat hasilnya

Membuat Icon Penulis, Date, Label, di Bawah Judul

Unknown | 16.13 | 0 komentar

Satu tips dan trik lagi dari saya, tentang cara menambahkan icon penulis, date, dan icon label di bawah judul postingan. Penambahan icon ini hanyalah sebagai penghias halaman blog anda agar tampak lebih cantik. Langsung saja bagaimana cara menambahkan icon penulis, date, dan label dibawah judul postingan dengan mudah ? Silahkan ikuti caranya dibawah ini

1. Login ke dashboard blog anda.

2. Pilih Template, klik Edit HTML, kemudin klik Expand Widget. Jangan lupa untuk back up sebelum anda mengedit templatenya, untuk menghindari hal-hal yang tidak di inginkan

3. Setelah itu cari kode ini

<div class='post-header-line-1>

4. Setelah ketemu kodenya, kemudian Copy kode dibawah dan Paste-kan tepat dibawahnya

Kode warna Biru adalah Icon untuk Penulis/Author

Kode warna Merah adalah Icon untuk Date/Kalender

Kode warna Kuning adalah Icon untuk Label

Pengaturan tambahan :

Anda bisa mengganti gambar/images icon di atas dengan icon kreasi anda sendiri. Caranya hanya menganti url gambar di atas dengan url gambar kreasi anda.

5. Setelah selesai save template.

Dan lihat hasil icon kreasi anda.

Membuat Header Menjadi 2 Bagian / Kolom

Unknown | 15.33 | 0 komentar

Header di blog yang standart biasanya hanya terdapat 1 kolom/bagian saja, yang berisi judul blog dan deskripsi blog anda. Hal ini membuat anda yang ingin menambahkan widget di header menjadi kesulitan. Sebenarnya anda tetap bisa menambahkan widget di header, tetapi ini akan membuat lebar atau tinggi header menjadi berubah mengikuti seberapa besar widget yang anda tambahkan.

Akan tetapi masalah ini bisa di atasi dengan cara membuat header anda menjadi 2 bagian/kolom. Kolom pertama berisi judul blog dan deskripsi, dan kolom kedua berisi widget yang anda tambahkan (lihat gambar di atas). Dengan merubah header menjadi 2 bagian, anda bisa menambahkan iklan atau widget lainya tanpa merubah lebar dan besar header blog anda.

Bagaimana cara membuat header menjadi 2 bagian/kolom ? Silahkan ikuti langkah-langkahnya di bawah ini :

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Widget"

Langkah 2
Cari kode: ]]></b:skin>

Lalu letakkan kode dibawah ini diatasnya

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}

Langkah 3
Setelah itu cari kode ini atau yang mirip, karena beda template biasanya beda kodenya

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
..............
</b:section>

Yang bertanda ................. berisi kode yang panjang dan mungkin berbeda-beda. Perhatikan saja kode terahir </b:section>.

Lalu Setelah kode </b:section> paste-kan kode di bawah ini

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Contoh penerapannya seperti ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Judul Blog Sobat (Header)' type='Header'/>
.................
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Langkah 4
Sekarang cari kode ]]></b:template-skin>

Kemudian letakkan kode dibawah ini diatasnya

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

Langkah 5
Save template anda

Kemudian lihat hasilnya

Mengganti Teks Baca Selengkapnya di Blogspot Standart

Unknown | 16.52 | 2 komentar

Buat anda yang sempat kebingungan seperti saya, gimana caranya mengganti atau mengedit teks/tulisan Read More/Baca Selengkapnya, yang biasanya terdapat dibawah potongan artikel halaman blog, dengan template standart bawaan blogspot.

Dari beberapa tutorial yang saya ubek-ubek, ternyata saya tidak menemukan kode yang disarankan. Itu mungkin karena template yang saya pakai masih standart bawaan blogger, sedangkan tutorial yang saya baca adalah tutorial dari para master untuk template-template profesional, di tambah pemahaman saya tentang HTML yang masih sak ndulit. Ya jadinya makintambah semrawut saja blog saya.

Tapi setelah lama, akhirnya ketemu juga kode yang saya cari. Buat anda yang mau merubahnya bisa ikuti cara yang saya lakukan dibawah ini :

1. Masuk dashboard blog anda.

2. Pilih template, lalu klik edit HTML, centang Expand Widget.

3. Setelah itu cari kode ini :

<data:post.jumpText/>

Biasanya bergandengan dengan kode seperti ini

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <span style='float:right'>
          <a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
            <i style='color: #38761d;'><data:post.jumpText/></i>
          </a>
        </span>
      </div>
    </b:if>

Anda perhatikan saja kode yang berwarna hijau.

4. Ganti kode <data:post.jumpText/> tersebut dengan teks sesuai keinginan anda.

5. Apabila anda berkeinginan mengganti teks tersebut dengan sebuah gambar. Anda tinggal mengganti saja kode tersebut dengan kode yang ini :

<img alt='Read More..' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-readmore9.png'/>

Tambahan :
Anda bisa mengganti gambarnya sesuai dengan yang anda inginkan. Caranya, ganti kode url gambar di atas (kode yang berwarna merah) dengan url gambar anda.

6. Kalau sudah seve template anda

Lihat hasilnya........

Ingin melihat gambar / images read more dengan berbagai macam warna ? Silahkan lihat DISINI.

Merubah Teks Posting Lama/Posting Baru di Blogspot

Unknown | 18.22 | 0 komentar

Untuk para pakar blog mungkin tutorial cara merubah tulisan Posting lama/Posting baru atau Older post/Never post ini tidaklah begitu sulit. Tapi bagi blogger baru seperti saya tutorial ini sangatlah membantu sekali. Karena saya sendiri pun awalnya sangat kebingungan mencari-cari cara untuk menggantinya.

Sebenarnya mengganti tulisan Posting lama/Posting baru diblog fungsinya hanya untuk mempercantik halaman blog anda. Lalu bagaimana cara merubahnya ? Ikuti langkahnya seperti yang dibawah ini :

1. Masuk ke dashboard blog anda, lalu pilih template. Jangan lupa untuk mem-back up template untuk menghindari apabila terjadi kesalahan. Kemudian klik Edit HTML, dan klik Expand Widget.

Merubah teks Posting Baru

2. Cari kode berikut <data:newerPageTitle/> (kode ini adalah tulisan Posting Baru di blog anda), klik saja Ctrl + F di keyboard anda, lalu ketikkan kode tersebut untuk mempermudah pencarian

3. Setelah ketemu, ganti kode <data:newerPageTitle/> tersebut dengan tulisan yang anda inginkan, misalnya ( Next ). Atau bila anda ingin merubah tulisan tersebut dengan gambar seperti blog ini, silahkan ganti saja kode tersebut dengan kode ini :

Tambahan : Anda bisa menganti gambar/images nya, dengan cara merubah url gambar diatas ganti dengan url gambar milik anda.

Merubah teks Posting Lama

4. Kemudian cari lagi kode ini <data:olderPageTitle/> (kode ini adalah tulisan Posting Lama di blog anda).

5. Ganti kode <data:olderPageTitle/> tersebut dengan tulisan seperti yang anda inginkan, misalnya (Preveous). Apabila anda ingin merubah tulisan tersebut dengan gambar seperti blog ini, silahkan ganti saja kode tersebut dengan kode ini :

Tambahan : Anda bisa menganti gambar/images nya, dengan cara merubah url gambar diatas ganti dengan url gambar milik anda.

Merubah teks Home

6. Apabila anda juga ingin merubah tulisan Home/Beranda, silahkan cari kode ini <data:homeMsg/>. Apabila anda menumukan ada 2 kode yang sama, pilih saja kode yang pertama.

7. Setelah ketemu ganti kode <data:homeMsg/> dengan tulisan sesuai keinginan anda. Misalnya (Awal, Teras). Bila anda ingin merubahnya dengan gambar seperti blog ini, silahkan ganti kode tersebut dengan kode berikut :

Tambahan : Anda bisa menganti gambar/images nya, dengan cara merubah url gambar diatas ganti dengan url gambar milik anda.

8. Setelah itu save template.

Kemudian lihat hasilnya.

Membuat Tombol Menu Share Unik Di Blog

Unknown | 14.12 | 0 komentar

Menu sosial bookmark adalah salah satu komponen penting untuk sebuah blog anda. Selain untuk mempercantik tampilan blog, juga untuk mempermudah pengunjung blog anda untuk membagikan / share ke jaringan sosial yang lain. Bentuk menu sosial bookmark share sangat bermacam-macam. Sudah banyak tutorial di blog-blog dan situs yang telah membagikan cara membuat tombol menu share sosial bookmark.

Kali ini akan berbagi tutorial cara membuat tombol menu share sosial bookmark berbentuk slide telur yang bisa membuka dan menutup berada di pojok bawah blog anda (seperti dalam gambar). Slide telur terbuka berisi tombol bookmark untuk pembaca anda untuk share posting di Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble dan Email.

Langsung saja bagaimana cara memasangnya. Ikuti langkahnya dibawah :

Selalu Back Up Template Anda Sebelum Anda Membuat Perubahan.

1. Masuk ke dashboard blog anda pilih "Template" lalu pilih "Edit Html" kemudian klik "expand widget".

2. Cari kode berikut </head> di blog anda atau klik Ctrl F untuk mempermudah pencarian kode

3. Copy paste kode dibawah ini tepat di atas / sebelum </ head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Kemudian cari kode </body>

5. Sekarang copy paste kode di bawah ini di atas / sebelum kode </ body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>

Tambahan :

Tombol menu ini diatur berada di sudut kanan bawah dari blog anda, tetapi anda dapat dengan mudah merubahnya. Lihat kode yang berwarna kuning di atas bottom: 2%; left: 2%;. Anda dapat merubah posisi tombolnya dari bawah ke bagian atas halaman atau dari kiri ke kanan halaman blog anda. Rubahlah persentase atau bottom / up dan left / right.

6. Simpan Template Anda.

Cara Membuat Kolom Komentar Facebook Dan Blogger Berdampingan Pada Postingan

Unknown | 21.40 | 6 komentar

Sudah ada banyak tutorial tentang cara membuat komentar Facebook dan Blogger bersamaan di blog, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Saya sedikit menguji lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan Blogger Berdampingan pada blog:

1.    Login ke account blogger Anda
2.    Klik rancangan lalu klik Edit HTML
3.    Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4.    Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5.    Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6.    Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.

7.    Kemudian Anda cari kode </head>
   Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda. Maka ID Anda berada pada tulisan yang berwana hijau. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890

8.    Kemudian cari kode <div class='comments' id='comments'>

Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>

<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>

<fb:comments-count expr:href='data:post.url'/> Comments</div>

<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna hijau di atas, angka 5 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi.

Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.

9. Kemudian klik save, dan lihat hasilnya.

Demikian Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template.

Membuat Tulisan Di Blog Berkedip-Kedip

Unknown | 13.00 | 0 komentar

Ingin Tulisan Anda Berkedip Seperti Ini?

Apakah anda juga tertarik dengan tulisan yang seperti lampu disco?, maksudnya sebuah kalimat atau kata ataupun Link yang berkedip-kedip seperti lampu, dapat kita lihat pada beberapa Blog yang menggunakan kata atau kalimat yang berkedip-kedip atau berkelap- kelip, misalnya seperti ini, membuat kalimat yang berkelap-kelip bak lampu jalanan, dari pengalaman saya hal itu sangat disukai para Blogger.

Mungkin banyak diluar sana para Blogger yang mempunyai masalah yang sama, untuk itu saya posting masalah ini.

Mungkin buat yang belum tau akan sedikit bingungya gimana cara membuatnya, ternyata tanpa disadari membuatnya sangat mudah. Yang hanya menambahkan sedikit kode HTML saja di kalimat yang mau kita kelap-kelipkan.

Jika Anda ingin Meletakkannya pada tulisan Posting arahkan Compose ke Edit HTML, lalu silahkan anda
ketik : <blink>(Tulis disini kata atau kalimat yang ingin anda kelap-kelipkan)</blink>

Hasilnya seperti ini :

(Tulisan disini kata atau kalimat yang ingin anda kelap-kelipkan)

Bagaimana gampangkan...!,
Ok selamat mencoba.

Langganan: Postingan ( Atom )