Blog Trik dan Tips

Membuat Back To Top dengan Efek JQuery

2009-10-08T15:58:00.000-07:00

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Masukan kode javascript ini setelah script jquery tadi:

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro

5. Cari kode <body> dan ubah menjadi <body id='top'>
6. Masukkan kode html berikut sebelum </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

7. Simpan template anda dan lihat hasilnya.

Thumbnail Gallery dengan efek JQuery pada Heading dan Caption

2009-10-08T15:39:00.000-07:00

Untuk membuat blog anda lebih creative maka anda perlu membuat sesuatu yang berbeda. Kali ini Blog Trik dan Tips akan memberikan trik membuat Thumbnail Gallery dengan efek JQuery pada bagian heading dan caption. Thumbnail Gallery ini dikembangkan oleh Queness.

Untuk membuatnya sangat mudah. Ikuti aja langkah berikut ini:
1. Login ke blogger
2. Klik Tata Letak dan klik Edit HTML
3. Expand widget template
4. Masukan script berikut ini sebelum code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Masukan java script berikut ini dibawah script sebelumnya

<script src='http://choenblogspot.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script>
$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-60},{duration:200, easing: style});
}
);

});
</script>

6. Tambahkan gadjet pada elemen halaman kemudian pilih HTML/Javascipt dan masukan kode berikut ini:

<div class="photo">
<div class="heading"><span>Bukan Template Coklat</span></div>
<a href="http://bukantemplatecoklat.blogspot.com/"><img alt="" src="http://1.bp.blogspot.com/_dfnTVAxeWMI/Snl-0DulohI/AAAAAAAABvQ/sTRn2qXumsk/template-coklat.jpg"/></a>
<div class="caption"><span>Bukan Template Coklat - Free Blogger Template Bukan Template Coklat. </span></div>
</div>

Keterangan: ubah alamat image dan url diatas sesuai yang anda inginkan.

7. Masukan kode CSS berikut, pastinya di dalam kode css sesudah <b:skin><![CDATA[ atau sebelum ]]></b:skin>

/* Trumb Gallery */
.post .photo img {
/* Ini khusus kode CSS di postingan, perlu disesuaikan dengan template anda*/
padding: 0;
border: 0;
margin-top: -34px;
line-height: 0;
}

.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;

/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:250px;
height:190px;
}

.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:250px;

/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;

}

.photo .heading {

/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.photo .caption {
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-60px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}

.photo .caption span{
color:#999;
font-size:9px;
display:block;
padding:5px 10px 0 10px;
}

8. Simpan template anda dan lihat hasilnya

Membuat Slide Show dan Caption - JQuery

2009-10-04T05:30:00.000-07:00

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya "s3Slider jQuery plugin". Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.

Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Masukan script jquery ini dibawah script tadi:

<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with CufÃ³n to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

Membuat Efek List Menjorok di Blog

2009-09-23T04:39:00.000-07:00

Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada disekitar posisi list tersebut. Oke mungkin kalian penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik bagaimana membuat list yang menjorok.

Berikut ini adalah langkah untuk membuatnya:
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode pada langkah 3

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>

Keterangan: Anda dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah

5. Untuk membuat list dalam postingan maka jangan lupa untuk memasang atribut ini:

<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>

6. Jika anda ingin membuat semua list menjorok maka sisipkan kode berwarna biru pada kode di langkah 4

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + <span style="color: rgb(255, 0, 0);">5</span>).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>

function lm_loadBehavior() {
var lis = document.getElementsByTagName("li");
for(var i=0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function(){lm_toRight(this);}
li.onmouseout = function(){lm_restore(this);}
}
}
var lm_window_onload = window.onload;
window.onload = function() {
if(lm_window_onload) {lm_window_onload();}
lm_loadBehavior();
}

Selamat mencoba semoga berhasil!!!

Menghilangkan Judul Gadjet pada Blog

2009-09-23T02:50:00.000-07:00

Jika anda mempunyai gadjet HTML Javascript yang kebanyakan pastinya anda akan sulit mencari dan membedakan satu sama lainnya. Anda akan mengalami kesulitan untuk mencari kode-kode dalam gadjet tersebut. Itu karena anda tidak menampilkan judul gadjet karena biasanya akan menggangu penampilan dari blog. Jadi Blog Trik dan Tips akan memberikan solusi bagaimana menampilkan judul tersebut pada elemen halaman tanpa menggangu penampilan blog. Caranya yaitu dengan menghilangkan judul pada tampilan blog namun menampilkannya pada elemen halaman.

Oke langsung kita praktekin:
1. Login ke blogger.
2. Klik Tata Letak dan klik Edit HTML
3. Cari kode ini: ]]></b:skin>
4. Tambahkan kode dibawah ini sebelum kode pada langkah 3

#hidden_widget h2 {
display:none;
}

5. Cari lagi kode ini: </b:section>
6. Tambahkan kode dibawah ini setelah kode pada langkah 5.

<div id='hidden_widget'>
<b:section id='sidebar_hidden' preferred='yes'>
</b:section>
</div>

7.Save template anda

Coba lihat hasilnya sekarang! Coba anda tulis masing2 gadjet HTML JavaScript dengan judulnya. Anda tidak akan menemukan judul tersebut pada tampilan blog lagi...selamat mencoba!!!

Memasang HTML Encoder di Blogspot

2009-09-22T19:02:00.000-07:00

Jika anda sering memposting artikel mengenai tutorial ngeblog, maka anda akan sering menggunakan fasilitas HTML encoder. Selama ini Blog Trik dan Tips menggunakan HTML Encoder dari situs ini http://francois.schnell.free.fr/tools/BloggerPaste/BloggerPaste.html. Tapi kini ada cara lain untuk memudahkan anda menggunakan fasilitas HTML encoder langsung dari situs Blogger-Blogspot. Jika fasiitas ini ada pada blogger maka anda lebih cepat untuk membuat posting. Cara memasangnya pada blogspot cukup mudah dan cepat...silahkan dicoba jika tertarik untuk memasangnya.

Berikut langkah memasangnya:
1. Download Greasemonkey 0.8.20090123.1 pada situs https://addons.mozilla.org/en-US/firefox/addon/748 lalu menginstall dan restart browser anda kembali.

2. Kemudian install JavaScript http://userscripts.org/scripts/source/42696.user.js

Coba lihat di menu posting anda pasti akan muncul tombol HTML Encode Selection. Nah untuk memparse HTML code maka anda hanya menghighlight code HTML yang ingin diparse dan klik tombol tadi.

Selamat mencoba!!!

Membuat Refleksi Gambar pada Blog

2009-09-22T17:35:00.000-07:00

Untuk membuat refleksi gambar biasanya dilakukan dengan perangkat lunak Adobe Photoshop dan lain sebagainya. Namun tidak semua orang dapat menjalankan program tersebut. Bagaimana dengan kita yang memiliki pengetahuan terbatas namun ingin membuat refleksi gambar pada blog. Tentunya Blog Trik dan Tips memiliki cara tersendiri untuk membuat refleksi gambar. Untuk membuatnya langsung aja kita praktekan...

1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Kopi kode dibawah ini dan paste antara ]]></b:skin> dan </head>

<script type='text/javascript'>
//<![CDATA[
if (!document.myGetElementsByClassName) {
document.myGetElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();

for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
}
var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,

add: function(image, options) {
Reflection.remove(image);

doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
if (options) {
for (var i in doptions) {
if (!options[i]) {
options[i] = doptions[i];
}
}
} else {
options = doptions;
}

try {
var d = document.createElement('div');
var p = image;

var classes = p.className.split(' ');
var newClasses = '';
for (j=0;j<classes.length;j++) {
if (classes[j] != "reflect") {
if (newClasses) {
newClasses += ' '
}

newClasses += classes[j];
}
}

var reflectionHeight = Math.floor(p.height*options['height']);
var divHeight = Math.floor(p.height*(1+options['height']));

var reflectionWidth = p.width;

if (document.all && !window.opera) {
/* Fix hyperlinks */
if(p.parentElement.tagName == 'A') {
var d = document.createElement('a');
d.href = p.parentElement.href;
}

/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';

d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';

var reflection = document.createElement('img');
reflection.src = p.src;
reflection.style.width = reflectionWidth+'px';
reflection.style.display = 'block';
reflection.style.height = p.height+"px";

reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';

d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);

d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';

d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';

var context = canvas.getContext("2d");

canvas.style.height = reflectionHeight+'px';
canvas.style.width = reflectionWidth+'px';
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;

d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);

d.appendChild(p);
d.appendChild(canvas);

context.save();

context.translate(5,image.height-1);
context.scale(1,-1);

context.drawImage(image, 0, 0, reflectionWidth, image.height);

context.restore();

context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);

gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");

context.fillStyle = gradient;
context.rect(0, 0, reflectionWidth, reflectionHeight*2);
context.fill();
}
}
} catch (e) {
}
},

remove : function(image) {
if (image.className == "reflected") {
image.className = image.parentNode.className;
image.parentNode.parentNode.replaceChild(image, image.parentNode);
}
}
}

function addReflections() {
var rimages = document.myGetElementsByClassName('reflect');
for (i=0;i<rimages.length;i++) {
var rheight = null;
var ropacity = null;

var classes = rimages[i].className.split(' ');
for (j=0;j<classes.length;j++) {
if (classes[j].indexOf("rheight") == 0) {
var rheight = classes[j].substring(7)/100;
} else if (classes[j].indexOf("ropacity") == 0) {
var ropacity = classes[j].substring(8)/100;
}
}

Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
addReflections();
});
//]]>
</script>

4. Simpan template anda
5. Jika anda ingin menampilkan refleksi gambar maka gunakan atribut class = "reflect" on the image code.

contohnya:

<img src="http://img177.imageshack.us/img177/5585/reflectionqq8.png" class="reflect"/>

Membuat Rotating Banner

2009-09-22T17:13:00.000-07:00

Udah tau belum apa itu rotating banner? Rotating banner adalah banner yang berotasi atau ditampilkan bergantian. Jika anda memiliki iklan yang cukup banyak namun ruang untuk menempatkan iklan tersebut terbatas, maka cobalah pasang rotating banner. Banner hanya akan berotasi pada satu tempat. Jika anda ingin melihat iklan tersebut bergantian ditampilkan maka halaman blog anda perlu direfresh.

Jika anda udah gak sabaran ingin membuatnya, maka Blog Trik dan Tips akan beberikan tutorial berikut ini:
1. Login ke blogger
2. Klik Tata Letak
3. Klik tambah gadjet dan klik HTML Javascript
4. Masukan kode berikut ini:

<script language="JavaScript">
var img_width = "468";
var img_height = "60";
var img_title = "Klik Disini";

var ad=new Array()
ad[0]='url/alamat source/gambar banner';
ad[1]='url/alamat source/gambar banner';
ad[2]='url/alamat source/gambar banner';

var links=new Array()
links[0]='url/alamat link ';
links[1]='url/alamat link ';
links[2]='url/alamat link ';

var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img border="0" width="'+img_width+'" alt="'+img_title+'" src="'+ad[xy]+'" height="'+img_height+'"></a>');
</script>

Keterangan:
-Kode berwaran merah menunjukan ukuran banner yang anda dapat gantikan
-Kode berwarna biru adalah link gambar dan link situs yang anda perlu masukan
-Anda dapat menambah banner dengan menambahkan var ad dan var links

5. Simpan gadjet dan lihat hasilnya...Selamat mencoba!!

Membuat Headline News pada Blog

2009-09-21T23:07:00.000-07:00

Blog Trik dan Tips akan membahas salah satu trik yaitu bagaimana cara membuat headline news. Pasti yang udah sering dengarin berita di televisi udah tau apa itu headline news. Tapi headline news di tv beda dong ama yang dibuat di blog. Sesuai dengan namanya headline news ini memuat judul2 postingan anda. Anda dapat memasangnya diatas atau dibawah blog. Headline news akan berhenti menampilkan judul post ketika cursor maouse anda berada diatas judul postingan.

Oke langsung aja kita buatnya
1. Login ke blogger
2. Klik Tata Letak
3. Tambahkan gadjet anda dan pilih HTML javascript
4. Kopi kode berikut ini dan paste anda gadjet anda

<script type="text/javascript">
var hn_url_blog = "http://BLOGKAMU.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
</script>

Keterangan:
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Simpan widget anda!!

Membuat Breadcrumb Navigasi

2009-09-21T21:56:00.000-07:00

Breadcrumbs adalah sebuah link navigasi untuk mengetahui posisi postingan. Breadcrumbs terletak diatas postingan dengan posisi yang mendatar. Breadcrumbs membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Ingin tahu lebih jauh tentang breadcrumbs dan mau mencoba memasangnya di blogger???

1. Login ke blogger
2. Klik Tata Letak dan klik edit HTML
3. Centang Expand Widget Template
4. Cari kode ini: <b:includable id='main' var='top'>
5. Letakan kode dibawah ini sebelum kode di langkah 4.

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

6. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
7. Letakan kode dibawah ini sebelum kode pada langkah 6.

<b:include data='post' name='breadcrumbs'/>

8. Tambahkan kode dibawah ini sebelum kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Membuat Sexy Bookmark di Blog

2009-09-21T19:49:00.000-07:00

Bookmark kini sekarang menjadi suatu trend untuk mempromosikan blog dan meningkatkan SEO. Tidak dipungkiri lagi jika banyak blog yang menempatakan sosial bookmark seperti facebook, twiter, digg dan lain sebagainya. Bookmark ternyata bisa ditampilkan lebih sexy....tapi seperti apa ya? Dari pada banyak omong mending langsung kita praktekin aja.

1. Login ke blogger
2. Klik tata letak dan klik edit HTML
3. Expand widget template (jangan lupa untuk backup template blog anda)
4. Carilah kode ini: ]]></b:skin>
5. Kopi kode dibawah ini dan letakan kodenya diatas kode pada langkah 4.

div.sexy-bookmarks{height:54px;background:url(http://i43.tinypic.com/2ueii3t.png) no-repeat left top;position:relative;width:570px}
div.sexy-bookmarks span.sexy-rightside{width:17px;height:54px;background:url(http://i43.tinypic.com/2ueii3t.png) no-repeat right top;position:absolute;right:-17px}
div.sexy-bookmarks ul.socials{position:absolute;bottom:0;left:10px;margin:0!important;padding:0!important}
div.sexy-bookmarks ul.socials li{display:inline-block!important;float:left!important;list-style-type:none!important;height:29px!important;width:48px!important;cursor:pointer!important;margin:0!important;padding:0!important}
div.sexy-bookmarks ul.socials a{display:block!important;width:48px!important;height:29px!important;font-size:0!important;color:transparent!important}
.sexy-furl,.sexy-furl:hover,.sexy-digg,.sexy-digg:hover,.sexy-reddit,.sexy-reddit:hover,.sexy-stumble,.sexy-stumble:hover,.sexy-delicious,.sexy-delicious:hover,.sexy-yahoo,.sexy-yahoo:hover,.sexy-blinklist,.sexy-blinklist:hover,.sexy-technorati,.sexy-technorati:hover,.sexy-facebook,.sexy-facebook:hover,.sexy-twitter,.sexy-twitter:hover,.sexy-myspace,.sexy-myspace:hover,.sexy-mixx,.sexy-mixx:hover,.sexy-script-style,.sexy-script-style:hover,.sexy-designfloat,.sexy-designfloat:hover,.sexy-syndicate,.sexy-syndicate:hover,.sexy-email,.sexy-email:hover{background:url(http://i32.tinypic.com/21ndq48.jpg) no-repeat!important}
.sexy-furl{background-position:-300px top!important}
.sexy-furl:hover{background-position:-300px bottom!important}
.sexy-digg{background-position:-500px top!important}
.sexy-digg:hover{background-position:-500px bottom!important}
.sexy-reddit{background-position:-100px top!important}
.sexy-reddit:hover{background-position:-100px bottom!important}
.sexy-stumble{background-position:-50px top!important}
.sexy-stumble:hover{background-position:-50px bottom!important}
.sexy-delicious{background-position:left top!important}
.sexy-delicious:hover{background-position:left bottom!important}
.sexy-yahoo{background-position:-650px top!important}
.sexy-yahoo:hover{background-position:-650px bottom!important}
.sexy-blinklist{background-position:-600px top!important}
.sexy-blinklist:hover{background-position:-600px bottom!important}
.sexy-technorati{background-position:-700px top!important}
.sexy-technorati:hover{background-position:-700px bottom!important}
.sexy-myspace{background-position:-200px top!important}
.sexy-myspace:hover{background-position:-200px bottom!important}
.sexy-twitter{background-position:-350px top!important}
.sexy-twitter:hover{background-position:-350px bottom!important}
.sexy-facebook{background-position:-450px top!important}
.sexy-facebook:hover{background-position:-450px bottom!important}
.sexy-mixx{background-position:-250px top!important}
.sexy-mixx:hover{background-position:-250px bottom!important}
.sexy-script-style{background-position:-400px top!important}
.sexy-script-style:hover{background-position:-400px bottom!important}
.sexy-designfloat{background-position:-550px top!important}
.sexy-designfloat:hover{background-position:-550px bottom!important}
.sexy-syndicate{background-position:-150px top!important}
.sexy-syndicate:hover{background-position:-150px bottom!important}
.sexy-email{background-position:-753px top!important}
.sexy-email:hover{background-position:-753px bottom!important}

6. Cari kode ini: <data:post.body/>
7. Paste kode ini dibawah kode pada langkah 6.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
</b:if>

8. Simpan template anda dan lihat hasilnya.

Membuat Slide Iklan atau Slide Foto

2009-09-21T06:32:00.000-07:00

Pengen punya slide iklan atau slide foto seperti blog ini. Anda dapat menampilkan berbagai jenis iklan dan menampilkannya seperti slide. Gambar akan ditanpilkan bergantian dan akan berhenti berganti ketika cursor berada tepat diatas iklan tersebut. Nah gimana trik yang satu ini menarik bukan???. Kalo udah gak sabaran langsung aja dibuat...
1. Login ke blogger
2. Klik tata letak
3. Klik edit HTML
4. Centangin Expand Widget Template
5. Cari kode ini ]]></b:skin>

6. Letakan kode ini diatas kode ]]></b:skin>

.carousel{
float:left;
margin: 0;
padding:0;
}

.carousel .widget {
width: 305px;
background:#FFFFFF;
margin: 0;
padding:10;
}

.carousel h2{
display:none;
}

.stepcarousel{
position: relative;
overflow: scroll;
width: 304px;
height: 140px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 1px;
width: 150px;
}
.stepcarousel .panel img{
float: left;
background:#FFFFF;
margin: 10px;
padding:0px;
border:0px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#FFFFF;
}

.quickedit{display:none}

7. Letakan kode dibawah ini dibawah kode ]]></b:skin>

<script src='http://blogipank.fileave.com/gallery1.js' type='text/javascript'/>
<script src='http://blogipank.fileave.com/gallery2.js' type='text/javascript'/>

8. Simpan template anda.

Selanjutnya nambah widget anda pada elemen halaman

1. Masuk ke elemen halaman, klik tambah gadjet dan klik edit HTML
2. Masukan kode ini pada elemen halaman anda:

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="url anda disini"><img width="125" src="url gambar anda disini" height="125"/></a>
</div>

<div class="panel">
<a href="url anda disini"><img width="125" src="url gambar anda disini" height="125"/></a>
</div>

</div>
</div>

3. Ganti tulisan berwarna merah didalam kode dengan url anda dan ganti tulisan warna biru dengan url gambar anda.
4. Simpan gadjet anda dan lihat hasilnya.....Selamat mencoba!!!

Pasang Iklan di Blog Trik dan Tips

2009-09-21T01:36:00.000-07:00

Blog Trik dan Tips memberikan kesempatan bagi anda untuk memasang iklan disini dengan penawaran yang menarik dan terjangkau. Informasi mengenai pemasangan iklan dapat dibaca dibawah ini:

1. Banner 125 x 125 px
Untuk pemasangan Iklan banner dengan ukuran 125 x 125 piksel di sidebar yaitu seharga Rp 20.000 /bulan. Iklan anda ditempatkan diposisi yang strategies sehingga akan memudahkan pengunjung untuk melihatnya.

2. Banner 468 x 60 px
Untuk pemasangan iklan disini akan dikenakan biaya sebesar Rp. 30.000 /bulan. Iklan dipasang disamping judul blog seperti terlihat pada gambar. Pemasangan iklan diposisi ini sedikit lebih mahal karena terbatas (hanya 2 banner iklan yang ditampilkan) dan tempatnya yang sangat strategis sehingga pengunjung sering melihatnya.

Jika anda tertarik silahkan hubungi saya di:
email: luhulima.indra@yahoo.com
facebook: indra.luhulima@yahoo.com

Terima kasih atas kerjasama anda.

Memasang Iklan Setelah Read More

2009-09-20T19:37:00.000-07:00

Mungkin anda pernah bertanya begini: "Kok iklan saya belum juga diklik oleh pengunjung ya????....." Nah pertanyaan itu seringkali dijawab dengan berbagai macam jawaban yang berbeda-beda.....misalnya trafik anda yang sedikit, blog anda belum populer, penempatan iklan kurang strategis, dll sebagainya....Oke kali ini Blog Trik dan Tips akan memberikan solusi untuk anda meningkatkan penghasilan dari iklan ppc. Tentunya hal ini berkaitan dengan penempatan iklan yang strategies.

Apabila anda menempatkan iklan di tempat yang strategies pengujung akan sesering mungkin mengklik iklan anda. Blog trik dan tips pada kesempatan ini akan membahas mengenai penempatan iklan dalam postingan setelah read more (baca selanjutnya) diklik. Penempatan iklan ini biasanya sering diklik dibandingkan dengan menempatkan iklan di sidebar, footer dan header. Oke langsung aja kita praktekin:

1. Login ke blogger.
2. Pilih Tata Letak dan klik Edit HTML
3. Jangan lupa membackup template anda.
4. Beri tanda centang pada expand widget template
5. Cari kode readmore seperti dibawah 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'>.:. Read More..</a>
</b:if>

6. Sisipkan kode berwarna merah pada kode di langkah 5 sehingga terlihat seperti ini:

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

<div style='float:up;'>
Kode Iklannya simpan disini
</div>

<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'>.:. Read More..</a>

</b:if>

keterangan: kode warna biru adalah posisi penempatan iklan. Anda dapat menubahknya....misalnya ganti down (iklan dibawah) right (iklan disamping kanan), left (iklan disamping kiri)..

7. Terakhir jangan lupa untuk menyimpan template anda.

Membuat ToolTip di Blog

2009-09-20T17:49:00.000-07:00

Toolltip adalah kotak yang menampilkan informasi dari link anda ketika cursor mouse berada tepat diatasnya. Kali ini kita akan membuat sebuah tooltip seperti pada gambar disamping ini. Tooltip ini akan menampilkan informasi mengenai url dan judulnya (title) dalam kotak berwarna biru. Jika udah gak sabaran langsung aja dipraktekin...

1. Login ke blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Carilah kode <body>
5. Paste kode dibawah ini sebelum kode <body> tadi:

<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>

6. Terakhir simpan templatenya

Jika anda memiliki blog di wordpress instal aja pluginnya.....disini

Coba lihat hasilnya pada layar blog anda. Selamat mencoba!!!

Cara Hapus Kotak Iklan Kumpulblogger

2009-09-19T16:49:00.000-07:00

Jika anda pernah memasang iklan kumpulblogger pada blog anda, maka anda pasti binggung bagaimana cara menghilangkan garis tepi kotak iklan tersebut. Kadang garis tepi yang dipasang membuat halaman blog menjadi kurang menarik. Anda tidak dapat hilangin garis tersebut pada situs kumpulblogger seperti pada situs ppc lainnya. Untuk menghilangin garis tepi tersebut, saya akan memberikan trik yang mudah dan cepat untuk anda.

1. Login ke kumpulblogger
2. Klik tata letak
3. Klik edit HTML
4. Kopi kode dibawah ini:

.garping,.garpinghor {
border: none !important;
}
.garping table,.garpinghor table {
border:#FFFFFF solid 1px !important;
background-color:#FFFFFF !important;
}
.garping td,.garpinghor td{
color:#000000 !important;
background-color:#FFFFFF !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a,.garpinghor a{
color:#000080 !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a:hover,.garpinghor a:hover{
color:#FF0000 !important;
}

5. Cari kode ini:

<b:skin><![CDATA[/*

6. Paste kode sebelumnya (warna biru) dikode nomor 5, seperti ini

<b:skin><![CDATA[LETAKAN KODENYA DISINI/*

7. Simpan template anda....

Membuat Buku Tamu Tersembunyi

2009-09-19T16:12:00.000-07:00

Jika blog anda sudah tidak ada ruang untuk menampilkan buku tamu atau anda sudah bosan dengan penampilan buku tamu, maka anda harus coba tutorial berikut ini yaitu membuat buku tamu tersembunyi. Buku tamu tersembunyi adalah buku tamu yang disembunyikan dibagian samping halaman blog anda, dan akan muncul ketika anda mengklik tombol buku tamu atau sebaliknya akan tutup jika anda mengklik tombolnya kembali.

Untuk cara membuatnya tidak susah kok, ikuti trik berikut ini:
1. Login ke blogger
2. Klik tata letak
3. Tambahkan Gadjet pada elemen halaman
4. Pilih HTML JavaScript

5. Masukan kode berikut ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">



<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://blogtrikdantips.blogspot.com/2009/09/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Ganti kode berwarna merah () dengan kode buku tamu anda.
7. Simpan kode anda.

Selamat mencoba!!!!

Membuat Efek Halaman yang Melengkung (Page Peel)

2009-09-19T15:33:00.000-07:00

Efek page peel adalah efek ujung kertas yang melengkung ketika cursor mouse anda berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian pengunjung mengklik gambar iklan dibalik lekungan kertas halaman. Efek ini juga dapat digunakan untuk berbagai macam tujuan misalnya pada blog saya pengunjung yang mengklik gambar akan diarahkan untuk "subscribe artikel saya".

Efek ini sih belum banyak digunakan pada blog2 lain. Ini adalah salah satu efek yang saya cari udah lama banget...dan akhirnya ketemu juga scriptnya....Sebelumnya ada sebuah blog yang menggunakan efek ini namun ketika saya minta bantuan untuk memberi informasi mengenai scriptnya.....bloggernya berlagak sombong dan tidak tau menahu....Tapi kali ini beruntung bagi teman2 yang berkunjung di blogtrikdantips karena saya akan memberikan tutorial yang satu ini gratis...Oke langsung saja

1. Login ke blogger
2. Masuk ke tata letak dan klik edit HTML
3. Centang pada Expand Template Widget
4. Cari kode ini: <b:skin><![CDATA[
5. Kopi script dibawah ini dan letakan diatas kode pada langkah 4.

<script src='http://dedehendriono.googlepages.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

6. Cari kode ini

]]></b:skin>

7. Letakan kode dibawah ini tepat diatas kode pada langkah 6.

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}

8. Cari kode ini

<body>

9. Letakan kode dibawah ini tepat dibawah kode pada langkah 8.

<div id='pageflip'>
<a href='http://ebook-buzz.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Keterangan: kode berwarna biru adalah link yang akan mengarahkan pengunjung (anda dapat menggantinya)

10. Simpan template anda....

Selamat mencoba dan semoga berhasil....

Membuat Floating Header

2009-08-22T01:04:00.000-07:00

Sebelumnya saya telah membuat sebuah artikel yaitu cara membuat strip ad footer atau statis footer. Kali ini kita akan melakukan trik sedikit berbeda yaitu membuat strip header atau statis header. Strip ad ini akan terlihat seperti layaknya navigation bar. Apabila anda mengscroll halaman ke bawah maka strip ad tersebut akan ikut ke bawah seperti floating image. Pada strip ad ini anda dapat memasang pesan, iklan dan lain sebagainya.

Tertarik gimana cara membuatnya...Apabila anda uda gak sabaran dan ingin segera membuatnya sehingga blog anda terlihat lebih menarik maka ikuti trik yang satu ini:

1. Login ke blogger
2. Klik Tata Letak dan klik lagi pada edit HTML
3. Lalu kopi dan paste kode berikut sebelum kode ]]></b:skin>

/*-- (mta bar) --*/
#mta_bar{background:#58ACFA; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FF0080; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FF0080; width:20%}

#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}

#mta_bar .right a{font-size:10px; color:#FF0080; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none}

#left_bar a{background:url('http://www.rexrainey.com/wp-content/themes/rexrainey_v3/images/r_icon.gif') no-repeat; text-decoration:none; color:#FF0080; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#FF0080}

#left_bar2 a{background: url(http://tbn1.google.com/images?q=tbn:SIPxi6jgt3SnnM:http://www.freelancerlisting.net/images/icon_exit.gif) no-repeat 2px; text-decoration:none; color:#FF0080; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FF0080}

#to_top{background:transparent url(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}

#to_top a{padding:8px}

Keterangan:
- Kode berwarna biru adalah kode warna
- Kode warna merah berfungsi untuk membuat warna kelihatan transparant
- warna ungu adalah alamt url gambar

4. Masukan kode ini diatas kode </head>

<script src='http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js' type='text/javascript'/>

5. Letak kode ini dibawah kode <body>

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.blogger.com/logout.g' target='_blank'>Log Out</a></span></div>
<div id='left_bar'>
<span class='center'>
Masukan tulisan anda disini
</span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

7. Masukan tulisan anda pada kode warna merah
6. Simpan hasilnya

Selamat mencoba...semoga berhasil..!!!

Membuat Footer Melayang atau Strip Footer

2009-08-21T22:16:00.000-07:00

Salah satu tips untuk memikat pengunjung bukan hanya pada artikel anda tapi penampilan blog anda merupakan pandangan pertama yang dapat memikat mereka. Jika anda merasa blog anda belum tampil menarik maka trik yang satu ini akan membuatnya lebih menarik. Pada kesempatan ini saya akan mengajarkan trik untuk membuat footer bar yang statis. Footer bar akan selalu muncul walaupun anda mengscroll ke bawah halaman. Pada footer bar atau strip footer ini anda dapat memasang iklan atau pun pesan kepada pengunjung. Tentunya pengunjung akan mudah melihat pesan tersebut apabila mereka mendatangi blog anda.

Jika anda tertarik untuk membuatnya. Maka perhatikan langkah berikut ini:
1. Log in ke blogger
2. Pilih Tata Letak klik Edit HTML
3. Expand widget template
4. Cari kode ]]></b:skin> dan paste kode dibawah sebelum kode ]]></b:skin>

#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#navbar-footer a {
color: #333;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

5. Kemudian paste kode berikut sebelum kode </body>

<div id='navbar-footer'>
<p>
Agar <a href='http://www.blogger.com'>Blog Trik dan Tips</a> lebih bermanfaat dan menarik lagi,<br/> diharap anda dapat meninggalkan komentar....
</p>
<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='http://www.facebook.com/indra.luhulima?ref=profile' target='_blank'>Indra F.L</a><br/>Copyright 2008 - 2009 All Rights Reserved: <a href='http://blogtrikdantips.blogspot.com/'>Blog Trik dan Tips</a>
<br/>
</p>
</div>

6. Simpan template anda dan lihat hasilnya...

Semoga trik ini bermanfaat...selamat mencoba!!

Membuat Efek Ketikan pada Judul Blog

2009-08-17T01:25:00.000-07:00

Ada beberapa cara untuk membuat judul blog menjadi animatif. Seperti yang udah saya tulis sebelumnya bagaimana cara membuat judul blog bergerak seperti marquee (ke kiri atau ke kanan), trik kali ini sedikit berbeda dimana judul blog akan muncul seperti sebuah ketikan dari masing-masing huruf. Kalo misalnya anda tertarik untuk memasangnya pada blog anda ikuti aja trik berikut ini:

1. Login ke blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Cari kode </body>
5. Paste script berikut ini tepat diatas kode </body>

<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>

6. Simpan perubahannya

Coba lihat hasilnya......kalo uda jadi jangan lupa beri komentar ya.....selamat ngeblog!!

Membuat Alert Konfirmasi pada Blog

2009-08-16T06:00:00.000-07:00

Seperti yang saya udah tulis pada artikel sebelumnya mengenai cara membuat script alert untuk menyapa pengujung yang datang pada blog, nah...kali ini kita akan membuat script alert yang sedikit berbeda yaitu script alert untuk konfirmasi....Jika anda memasang script ini maka pengunjung yang datang pada blog anda memiliki opsi untuk melanjutkan atau membatalkan kunjungan mereka pada blog anda....Script ini biasanya diletakan pada konten atau blog yang sifatnya dewasa, hanya untuk menkonfirmasi pengunjung. Script ini juga bisa digunakan dalam memberikan informasi apabila anda telah pindah ke situs lain.....Apabila tertarik memasangnya ikuti langkah berikut ini:

1. Login ke blogger
2. Pilih Tata Letak
3. Tambahkan Gadjet
4. Klik HTML JavaScript
5. Masukan kode berikut ini:

<script type="text/javascript">
confirm('Blog ini berisi conten dewasa. Apakah Anda yakin untuk melanjutkan?');
if (confirm('Blog ini berisi conten dewasa. Apakah Anda yakin untuk melanjutkan?')) {
window.location = "http://blogtrikdantips.blogspot.com/";
}
else {
window.location = "http://seputarberita.blogspot.com/";
}
</script>

Keterangan:
- Teks berwarna biru menunjukan kata-kata yang akan anda sampaikan kepada pengunjung. Anda dapat menggantinya sesuai selera anda.
- Teks berwarna merah adalah URL blog anda.
- Teks berwarna ungu adalah URL blog apabila pengunjung membatalkan kunjungannya.
- Dari contoh di atas, pengunjung yang menekan OK, akan dibawa masuk ke http://blogtrikdantips.blogspot.com/ sedangkan pengunjung yang menekan Cancel (Batal) akan dibawa http://seputarberita.blogspot.com/.

6. Simpan script tersebut

Selamat mencobanya..!!!

Membuat Alert Perkenalan bagi Pengunjung

2009-08-16T00:19:00.000-07:00

Anda mungkin pernah mengikuti salah satu tips yang saya berikan mengenai cara membuat alert pesan selamat datang bagi pengunjung. Nah kali ini agak sedikit berbeda, kita akan mencoba membuat alert tersebut dengan sedikit tambahan alias perkenalan sepintas. Ketika seseorang mendatangi blog anda maka orang tersebut akan diminta namanya...Setelah memasukan nama maka pengunjung akan disapa sesuai namanya. Oke bagi yang berminat langsung aja saya tunjukan langkahnya.....

1. Login dulu ke blogger
2. Klik Tata Letak
3. Klik Tambah Gadjet
4. Klik HTML JavaScript
5. Masukan Script dibawah ini

<script type='text/javascript'>
var name = prompt("Selamat Datang!! Boleh Tau Nama Anda?", "Nama Anda ");
alert("Salam Kenal "+name)
alert("Selamat Surfing di Blog Saya, Semoga Bermanfaat!!")
</script>

Kode berwarna merah adalah pesan bagi pengunjung....Anda dapat menganti sesuai dengan selara anda.

6. Simpan hasilnya dan lihat pada blog anda!

Nah pasti keren dong.....Selamat mencoba!!!

Membuat Slide Posting

2009-08-15T16:28:00.000-07:00

Rasanya belum lengkap apabila anda belum mencoba membuat Posting dengan Tampilan Slide. Jika demikian maka coba saja trik berikut ini. Posting dengan tampilan slide disini adalah hasil dari posting yang kita tulis akan ditampilkan dalam bentuk slide. Bagian dari tampilan yaitu judul posting dan isinya. Jika udah gak sabar kita langsung aja mencobanya....Ikuti langkah berikut ini.

1. Login ke blogger
2. Pilih Tata Letak dan tambahkan gadjet
3. Klik HTML JavaScript
4. Masukan kode dibawah ini:

<div id="TickerBC3905386" style="width:220px;height:150px
;overflow: auto;overflow-x: hidden;overflow-y: hidden;border-style: solid;border-width: 0;border-color: #CC6699;background-color: #FFCCFF;" class="bc_ticker">

<table width="100%">
<tr>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerPrevBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="PrevTickerBC3905386();">«</a></td>
<td id="TickerContentBC3905386" style="vertical-align: top;background-" class="bc_tickercontent">
<a id="TickerLinkBC3905386" style="text-decoration: none;" href="javascript: ;" class="bc_tickerlink" target="_top"><b><span id="TickerTitleBC3905386" style=" " class="bc_tickertitle"></span></b></a> <span id="TickerSummaryBC3905386" style=" " class="bc_tickersummary"></span>
</td>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerNextBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="NextTickerBC3905386();">»</a></td>
</tr>
</table>


<noscript><a href="http://www.blastcasta.com/" title="Add News and Content to Websites, Customize: Combine and Filter Feeds"><img border="0" src="http://www.blastcasta.com/images/tp.gif"/></a></noscript>
</div>

<script id="scr3905386" type="text/javascript"></script>
<script type="text/javascript">
setTimeout('document.getElementById(\'scr3905386\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.blastcasta.com/ticker-js.aspx?feedurl=http%3A//www.blogtrikdantips.blogspot.com/feeds/posts/default&changedelay=4&maxitems=-1&showsummary=1&objectid=3905386\'', 500);
</script>
</div>

5. Gantikan tulisan berwarna merah dengan URL blog anda. Sesuaikan ukuran kotak Slide Posting dengan ukuran ruang pada blog anda.

6. Simpan hasilnya

Jika udah selesai ...maka anda akan memiliki tampilan slide posting yang keren banget seperti dibawah ini.....Selamat mencoba

Membuat Efek Bunga Bertaburan

2009-08-15T16:15:00.000-07:00

Ingin blog anda tampil lebih menarik dengan efek bunga yang gugur dan bertaburan....Nah trik berikut ini dapat membuat blog anda lebih animatif. Kali ini kita akan membuat efek bunga bertaburan yang tidak jauh berbeda dengan efek salju. Anda dapat mencobanya jika anda uda bosan ama efek yang ada pada blog. Caranya mudah aja, anda hanya perlu ikuti langkah berikut ini:

1. Login ke blogger.
2. Pilih Tata letak dan klik Edit HTML
3. Cari kode <body>
4. Letakan kode berikut ini dibawah kode <body>

<script language=”Javascript” src=”http://www.geocities.com/yono_pati/bunga.js”> </script>

5. Simpan template anda

Nah...coba lihat blog anda....pasti udah bertaburan bunga.....Selamat mencoba......

Membuat Posting Acak

2009-08-15T06:10:00.000-07:00

Sudahkah anda pernah mendengar tentang random post...Nah itu dia...posting yang dapat ditampilkan secara acak. Yang diacak disini yaitu judul postingnya aja. Terkadang blogger yang baru memasang recent post dan pada halaman depannya udah ditampilkan judul yang sama. Dari pada menampilkan recent post....mendingan pasang aja gadjet berikut ini yaitu ....Random Post. Cara membuatnya gak susah amat alias cukup mudah....Jadi ikuti aja langkahnya....

1. Login dulu ke blogger.
2. Kemudian pilih Tata Letak
3. Tambahkan gadjet
4. Klik Edit HTML JavaScript
5. Masukan kode dibawah ini

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
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('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>
<span style="gt;Widget edited by <a href="http://blogtrikdantips.blogspot.com/">Blog Trik dan Tips</a></span>

6. Gantikan tulisan berwarna merah dengan URL blog anda.
7. Simpan kode tersebut

Keterangan:
Angka 10 pada kode tersebut menunjukan jumlah postingan yang ditampilkan secara acak!!! Met mencoba ya....

10 Langkah Meningkatkan Trafik pada Blog

2009-08-04T02:24:00.001-07:00

Kemampuan anda untuk meningkatkan trafik atau penunjung ke blog atau website anda merupakan kunci kesuksesan secara online. Ketika kamu ingin memperkenalkan produkmu secara luas melalui adsense, affiliate marketing, ataupun artikel yang kamu tulis, maka kamu perlu meningkatkan trafik. Beberapa bisnis internet mencoba untuk meningkatkan trafik dengan tujuan untuk meningkatkan jumlah penghasilan mereka. Berikut ini saya akan menjelaskan kepada saudara bagaimana anda meningkatkan trafik diblog atau website anda.

1. Tulislah artikel yang menarik dan tulislah sesering mungkin. Sesering mungkin anda mengupdate blog dan menulis dengan baik isi tulisan anda adalah langkah pertama dalam meningkatkan pengunjung. Ini akan membuat pengunjung tetapembali ke tulisan anda. Lebih dari itu ketika kamu sering menulis maka meningingkatkan peluang isi tulisan kamu diketahui oleh mesin pencari seperti Google searh, yahoo, dll.

2.Masukan blog kamu pada mesin pencari. Mesin pencari seperti Google dan yahoo akan mengetahui isi konten kamu dan menampilkannya kepada publik. Hal yang kamu perlu lakukan adalah memberikan url blog atau website kamu kepada mesin pencari.

3.Gunakan dan selalu update blogroll kamu. Dengan menambahkan link ke situs yang kamu sukai pada blogroll, pemilik dari blog tersebut akan menemukan blog kamu dan akan menaruh link kamu pada blogroll mereka. Harapannya yaitu bahwa pembaca yang berkunjung akan melihat blogroll dan menemukan blog atau website kamu.

4.Ajak pengunjung untuk memberikan komentar pada blog kamu. Memberikan komentar merupakan cara yang mudah dalam meningkatkan pengunjung pada blog kamu. Ketika seseorang memberikan komentar cobalah berikan komentar kepada dia kembali ataupun masukan. Ini akan membuat pembaca loyal kepada kamu dan tetap berkunjung keblog atau website kamu.

5.Gunakan RSS feed pada isi blog atau website kamu. Menampilkan RSS feed pada isi konten akan membuat pembaca sesering mungkin berkunjung keblog kamu untuk melihat isi tulisan kamu yang baru di publish.

6.Gunakan link dan trackback. Link merupakan cara yang baik untuk ditampilkan pada blog kamu. Hal ini karena link akan diketahui oleh mesin pencari. Link akan membuat blogger tau bahwa kamu sedang menghubungkan isi konten mereka dengan sebuah link. Dan ini akan membuat mereka berkunjung ke blog kamu. Kamu juga dapat memberi tau kepada pemilik blog atau website bahwa kamu memiliki link ke isi konten mereka dengan meninggalkan track back.

7.Tag setiap posting kamu. Ini hanya membutuhkan beberapa detik saja untuk membuat tag pada setiap posting kamu. Tags seperti link akan mudah diketahui oleh mesin pencari.

8.Masukan blog kamu ke situs sosial. Ini merupakan langkah yang sederhana dengan memcoba mempromosikan blog kamu dan isi konten kamu kepada publik. Jangan pernah berhenti mempromosikan blog kamu sehingga diketahui banyak orang.

9.Ingin akan optimasi dari mesin pencari yaitu bahwa ketika kamu melakukan posting kamu perlu membuat keyword atau link yang relevan yang disukai oleh pengujung.

10.Tampilkan gambar pada blog akan membuat blog kamu lebih menarik dan juga menarik pengunjung yang dapat

Dengan menerapkan 10 langkah tersebut maka kamu trafik pada blog atau website kamu akan meningkat. Hasilnya dapat kamu rasakan ketika kamu mencobanya. Selamat bekerja.

Apa itu Ziddu??

2009-08-04T02:23:00.001-07:00

Ziddu adalah salah satu situs penyedia layanan upload,share, earn yang memberikan imbalan bagi tiap download sebesar $ 0,001. Ziddu adalah situs yang menyediakan layanan hosting file gratis seperti EasyShare, RapidShare atau Photobucket yang khusus untuk gambar. Bedanya dengan situs-situs sejenisnya, Ziddu akan membayar membernya jika file member tersebut didownload oleh orang lain.Konsep situs yang berbasis di Hong Kong ini adalah berbagi dan mendapat uang, sesuai dengan mottonya: "Upload, Share, Earn." Jadi, Anda baru akan mendapat komisi kalau Anda membagi file yang disimpan di Ziddu. Berapa bayarannya? $0.001 untuk setiap file yang didownload.

Anda bisa memperbesar pendapatan Anda dengan dua cara. Pertama, lebih banyak berbagi yang berarti Anda harus lebih banyak mengupload file ke Ziddu dan membagikannya ke pembaca blog/situs Anda. Kedua, memaksimalkan program afiliasi alias mereferensikan member-member baru ke Ziddu. Setiap member baru yang direferensikan mengupload file pertamanya, Anda sebagai pereferensi akan memperoleh bayaran sebesar $0.3.

Tanpa keharusan melakukan konfirmasi melalui email, kita sudah dapat langsung mengupload file-file foto, audio, video, dan file lainnya. Untuk jenis file foto, audio, dan video, dengan melalui menu accessories, kita dapat membuat album untuk file-file tersebut. Batasan file yang dibolehkan adalah 100MB per file, dan ketika melakukan multiupload, total maksimal seluruh file adalah 200MB. Ziddu adalah layanan hosting yang benar-benar gratis berbasis media penyimpan data file, gambar foto dan upload suka-suka, termasuk bisnis dolarnya yg paling tidak nambah kocek kita.

Kini dengan terus berbenah telah merambah dalam 14 bahasa yang bisa dipilih bagi member-membernya seperti bahasa Indonesia, Thailand, Spanyol, Inggris, Brazil, Malaysia, Eropa, Arab, Jepang, Rusia, Italy, Prancis dan China.

Jika anda sudah mencapai 10$ anda bisa mengeset pembayaran baik menggunakan paypal atau moneybookers. moneybookers Silahkan untuk menu lainnya bisa di coba sendiri oleh anda seperti Cek Earning. Bagaimana Cara mendaftar (Register) di Ziddu Register)
Untuk mendaftar di ziddu caranya sebagai berikut
1. Pilih Menu di pojok kanan atas yang bertuliskan Register
2. Isikan data anda dengan benar di form pendaftaran
3. Anda tinggal konfirmasi melalui email yang di kirim oleh ziddu pada email anda.

Daftar Sekarang Yuk!!

Apa itu Afiliasi?

2009-08-04T02:20:00.000-07:00

Afiliasi merupakan sebuah program dimana kita mempromosikan suatu produk dan kita akan mendapatkan komisi setiap ada transaksi. Afiliasi juga merupakan cara menghasilkan uang dengan cara kita bergabung sebagai pemasar produk (affiliate marketers) kepada pemilik produk (affiliate merchant) untuk menjualkan produknya dan kita dibayar setelah berhasil menjual produk milik affiliate merchant tersebut. Kesempatan untuk membuat banyak uang adalah salah satu keunggulan utama afiliasi pemasaran. Afiliasi pemasaran Anda juga hadir dengan pilihan untuk mendukung Anda tentang produk dan memiliki semangat untuk oleh memungkinkan Anda untuk menambahkan link dan spanduk mereka tentang situs web Anda sendiri.

Ada beberapa program afiliasi di internet ini yang gratis maupun berbayar untuk jadi member, misalnya co.cc (domain gratis) , kumpulblogger.com (PPC), 000webhost (domain dan hosting gratis) dan masih banyak lagi yang lainnya. Program afiliasi telah menjadi cara yang sangat populer dan efektif saat ini untuk memasarkan produk atau jasa melalui Internet. Besarnya komisi dan aturan main lainnya diatur dalam perjanjian (affiliate agreement) yang sudah disepakati bersama antara Anda dan merchant.

Bisnis ini sangat mudah dilakukan sebab kita tidak usah membuat atau memiliki produk sendiri. Kita tinggal memasarkan produk milik orang lain dan kita dibayar setelah berhasil menjual produk tersebut. Sehingga modal yang kita keluarkan untuk menjalankan bisnis ini relatif kecil dibandingkan dengan kita mempunyai perusahaan sendiri yang harus memproduksi barang yang akan kita jual.

Banyak cara yang diberikan oleh para affiliate merchant kepada kita. Beberapa cara misalnya melalui Pay Per Sale atau disebut juga Pay Per Action dimana kita mendapatkan komisi dari affiliate merchant ketika benar- benar terjadi pembelian terhadap produk affiliate merchant. Selain itu ada Recurring dimana affiliate merchant memberikan komisi kepada kita secara berkala jika kita menjadi anggota dan berhasil menjual produk layanan berlangganan kepada konsumen. Kita mendapat komisi secara berkala selama konsumen masih berlangganan produk tersebut.

Kemudian ada Pay Per Lead yaitu pembayaran flat yang diberikan affiliate merchant untuk setiap prospek yang kita bawa ke website merchat dengan kualifikasi tertentu yang diminta oleh merchant. Keempat ada Pay Per Search dimana merchant akan membayar kita ketika ada seseorang yang mencari informasi melalui “search box” khusus dari merchant yang kita pasang di website kita kemudian orang tersebut mengklik salah satu link yang tampil dari hasil pencarian yang dilakukanya. Kelima yaitu Pay Per Clik dimana merchant akan membayar kita ketika pengunjung mengklik iklan affiliate merchant yang kita pasang di website kita. Dan yang terakhir yaitu hybrid programs dimana merchant memberikan komisi ketika pengunjung mengklik banner kemudian memberikan komisi lagi ketika terjadi penjualan atau semakin banyak penjualan, semakin tinggi komisi kita.

Apa Itu AdsenseCamp? Bagaimana Mempromosikan Iklan dan Menambah Penghasilan?

2009-08-04T02:18:00.001-07:00

AdsenseCamp memberikan kesempatan bagi Anda untuk memperoleh penghasilan tambahan dengan menyediakan ruang pada website Anda sebagai tempat pemasangan iklan bagi advertiser. AdsenseCamp juga memberikan kesempatan kepada para Advertiser yang berkeinginan mempromosikan iklannya yang bakal disebarkan kepada web owners yang telah terdaftar di AdsenseCamp. Anda membayar per click (tidak mahal per cliknya), karena itu disebut PPC atau Pay Per Clik. Kalau selama ini Anda memakai jurus iklan baris atau promosi via email untuk memperbesar bisnis online Anda, maka Adsense Indonesia dapat membantu Anda mempercepat lakunya bisnis Anda berlipat-lipat. Tentu saja ada strateginya. Di bagian akhir topik ini akan saya bahas strategi promosi jalur cepat di Adsense Indonesia atau Adsense Camp Indonesia ini.

Anda bisa membuat blog, kemudian mendaftar di Adsense Camp (Adsense Indonesia), kemudian daftarkan website atau blog Anda dan dapatkan kode iklannya. Lalu tempelkan Kode iklan tersebut di blog anda, maka Iklan dari Adsense Indonesia akan muncul di blog Anda. Artinya dengan cara ini Anda telah membantu menayangkan iklan orang lain yang bayar lewat Adsense Indonesia, kemudian ketika Ada yang klik iklan Adsense Indonesia di website Anda maka Anda akan dapat komisi.

Bagi Advertiser, setelah melakukan pendaftaran Anda bisa melakukan pengisian iklan yang nantinya akan disebar kepada pemilik web yang terdaftar di AdsenseCamp.Ketika anda ingin memasang iklan lewat Adsense Camp maka anda perlu mendepositkan dulu uang ke Adsense Indonesia untuk biaya iklan. Deposit mereka akan dipotong sebagai biaya iklan setiap kali iklan diklik. Kemudian Anda dibayar oleh Adsense Camp per klik juga. Sebelumnya anda perlu menyiapkan materi iklan anda. Biaya potongan advertiser yaitu sekitar 500 rupiah per klik. Sebagian komisi akan masuk ke AdsenseCamp dan sebagiannya lagi diterima oleh Anda. Komisi per kllik yang anda terima sebagai pemilik web atau blog yaitu sebesar 300 rupiah.

AdsenseCamp memberikan sistem referral bagi pemilik web yang menampilkan iklan mereka. Web owners atau pemilik web yang bisa merekomendasikan temannya untuk bergabung di AdsenseCamp.com dan teman tersebut memperoleh klik atas iklan yang tampil di websitenya, maka setiap klik yang diperoleh oleh teman anda, Anda akan mendapatkan Rp. 25,- (dua puluh lima rupiah). Mari mendaftar yuk di adsense camp!!!

10 Mitos Salah mengenai SEO

2009-08-04T02:13:00.000-07:00

1.Menggunakan nama domain yang sama dengan keyword
Maksudnya adalah seperti ini,misalkan anda menggunakan keyword "panduan bisnis online",lalu anda membuat web / blog dengan nama domain "panduanbisnisonline.com",nah cara seperti ini menurut mereka tidak berpengaruh banyak terhadap SEO,Search engine lebih menyukai nama domain yang pendek dan mudah diingat.

2.Google Partnership
Mungkin anda sering menemui iklan yang berkata bahwa mereka mampu membuat blog / web anda berada di posisi no 1 search engine,hanya dengan biaya "sekian",dan mereka mengklaim bahwa mereka adalah perusahaan yang bekerja sama dengan google.Anda jangan percaya dengan statement seperti itu,karena google sendiri sudah mengeluarkan statement : "Beware of SEOs that claim to guarantee rankings, allege a "special relationship" with Google, or advertise a "priority submit" to Google"

3.Meta keyword tag
Banyak orang yang beranggapan bahwa meta tag berpengaruh banyak terhadap SEO.Tapi ternyata tidak.Meta tag hanya berpengaruh kecil terhadap SEO.Dan faktanya,kebanyakan Search engine tidak pernah men cek meta tag pada semua web dan blog.

4.Menggunakan Bold dan Italic text pada konten
Banyak orang yang beranggapan bahwa dengan mem bold dan italic text yang mengandung unsur keyword pada konten akan mempengaruhi SEO,padahal faktanya hal tersebut tidak lah benar.Bold dan italic hanya sedikit berpengaruh terhadap searchh engine.

5. Panjang konten
Tidak ada aturan pasti mengenai panjang konten.Yang terpenting adalah konten yang mudah di mengerti oleh pembaca adalah konten yang disukai oleh search engine

6.Duplicate content
Maksud nya duplikat konten disini sama seperti copy paste.Jika anda mempunyai konten,kemudian ada yang mengkopi konten anda,atau anda mengkopi konten tersebut pada blog anda yang lain,tidak akan membuat google membanned web / blog anda.

7. Menghindari flash
Banyak yang beranggapan bahwa flash tidak akan terdeteksi oleh search engine.Itu benar.Karena search engine lebih menyukai html.tapi tiu tidak berarti bahwa anda tidak menggunakan flash sama sekali.Anda boleh saja menggunakan flash pada header atau widget anda,tapi hanya sedikit.Itu tidak akan mempengaruhi posisi anda di search engine.

8.Pay Per click
Banyak yang beranggapan bahwa PPC dapat mempengaruhi SEO.Padahal anggapan tersebut salah.

9.Sering mengupdate situs
Update situs adalah hal yang sangat baik sekali.Dan search engine sangat menyukai situs yang selalu terupdate.Tapi jangan mengupdate situs hanya dengan artikel yang berisi beberapa kata saja.Itu tidak akan membantu SEO anda.

10.Doorway page
Doorway page adalah halaman yang dibuat khusus untuk memperkuat keyword.Misalkan anda mempunyai situs perfectbisnis.com.Tentunya yang namanya situs tidak bisa terus diupdate seperti blog.Dan anda juga tidak mungkin mengubah sales letter nya setiap saat.Paling kita hanya bisa memperbanyak backlink dan merubah meta tag.Oleh karena itu dibuat doorway page.

Pay Per Click Bidvertiser Menghasilkan Uang

2009-08-04T02:00:00.000-07:00

Bidvertiser adalah program afiliasi pay per klik yang sedikit mirip seperti adsense pada umumnya. Bidvertiser adalah perusahaan pay per advertise yang memberikan penghasilan kepada publisher yang menempatkan iklan pada blog atau situs mereka dan akan membayar setiap kali iklan bivertiser di klik. Bidvertiser menyediakan berbagai jenis iklan yang dapat dipilih.

Iklan bidvertiser berubah setiap saat untuk membuatnya menjadi lebih fresh. Iklan dapat saja berubah tergantung dari isi konten blog anda. Berapa banyak yang anda terima dari bidvertiser tergantung dari tipe iklan yang diklik oleh pengunjung pada blog anda.

Pada bidvertiser anda mempunyai fleksibilitas untuk memilih tipe iklan yang anda ingin tampilkan pada blog. Anda juga dapat melihat iklan dengan penghasilan yang kurang dan penghasilan yang lebih.

Bidvertiser memiliki konsep yang cukup sederhana. Advertiser menawarkan ruang untuk iklan anda dan iklan yang membayar cukup tertinggi akan ditampilkan di situs Web Anda. Sehingga Anda dapat terus meningkatkan pendapatan. Saya menyarankan Anda untuk menampilkan hanya beberapa iklan bidvertiser di blog anda, maksimum 2 iklan saja.

Kadang-kadang ada iklan yang tidak dibayar tapi iklan tersebut ditampilkan dalam blog Anda . Jadi Anda tidak perlu banyak menghabiskan ruang untuk iklan bidvertiser. Ditambah lagi jika Anda memiliki sedikit iklan bidvertiser di blog Anda. Mereka akan menampilkan iklan dengan penawaran tertinggi sehingga Anda akan membuat lebih banyak uang per klik. Anda tidak akan menemukan kesulitan karena bidvertiser adalah hampir sama dengan adsense lainnya.

Berbagi Gambar Bersama Shareapic

2009-08-04T01:58:00.001-07:00

Shareapic merupakan situs yang menyediakan tempat bagi anda untuk mengupload gambar, berbagi sekaligus memperoleh penghasilan tambahan. Shareapic adalah layanan gratis yang memungkinkan penggunanya untuk meng-upload foto dan host di server Shareapic.

Apa yang membuat kami berbeda dari sisanya? Shareapic memiliki penghasilan unik bagi pengguna yang mengarahkan teman dan keluarga mereka untuk melihat foto-host.

Anda dapat mengupload gambar sebanyak-banyaknya tanpa batas. Selain itu anda dapat membuat galeri dan anda pun akan dibayar $0,22 per 1000 gambar yang dilihat. Penghasilkan tersebut cukup banyak jika dibandingkan dengan beberapa program afiliasi yang membayar publisernya. Shareapic akan membayar anda setelah 30 hari permintaan. Ketika penghasilan anda telah mencapai 20$ maka ada dapat meminta untuk dibayar. Shareapic membayar melalui PayPal. Bagi yang belum mengetahui apa itu paypal, silahkan mencari tahu seluk beluk tentang PayPal di www.paypalindonesia.com

Gambar yang kamu upload harus memenuhi syarat yang ditentukan oleh pihak shareapic yaitu tidak mengandung unsur pornografi, kekerasan, gambar yang dilindungi oleh hukum dan undang-undang. Sebelum album gambarmu mempunyai status PUBLIC dan dapat dilihat oleh khalayak luas, terlebih dahulu gambar-gambarmu diseleksi oleh pihak Shareapic. Apabila gambar-gambarmu memenuhi syarat maka album gambarmu akan disetujui.

Apabila gambar yang kamu upload mengandung hal-hal yang dilarang oleh Shareapic seperti yang telah saya sebutkan di atas, maka albummu tidak akan disetujui dan akunmu bisa diblokir. Tidak ada biaya yang diperlukan untuk mendaftar. Selain itu Tidak ada upgrade menjadi akun tertentu dan pembayaran di kemudian hari. Semuanya gratis. Mari mendaftar di www.shareapic.net!!!

Buat Website Gratis Pada 000webhost.com

2009-08-04T01:56:00.001-07:00

000webhost.com ($ 0,00 hosting), adalah industri yang menyediakan layanan web hosting gratis! Kecepatan yang cepat, dan kehandalan fiturnya bagi pengguna hanya dapat diterima dengan layanan ini.Setiap account diberikan 1500MB dan 100GB bandwidth. Jika situs Anda merasa perlu lebih dari paket standar 000webhost.com menawarkan berbagai pilihan upgrade. Tidak seperti webhosts lainnya yang gratis 000webhost.com mendukung PHP dan MySQL tanpa batasan. Anda mendapatkan akses penuh ke versi terbaru dari PHP dan MySQL. Berikut adalah fitur PHP yang didukung sepenuhnya:

* PHP mail () fungsi dan Sendmail
* Curl, GD2 library, XML, Zend,. Dukungan htaccess.
* Fopen () and PHP sockets
* Safe_mode is OFF, file yang di upload

* Zend Optimizer support, Ioncube loader .. dan masih banyak lagi fitur-fitur yang diaktifkan

000webhost.com memiliki cPanel, dimana cPanel adalah control panel paling maju dalam bidang industri. Memiliki berbagai fitur dan mudah digunakan bahkan untuk pemula. Memmiliki pembantu interaktif dan video tutorial yang akan membantu Anda untuk memahami mengapa cPanel yang terbaik dan Anda tidak akan pernah ingin beralih ke hal lain. cPanel banyak dipakai oleh host, namun 000webhost.com memberikannya gratis!

000webhost.com adalah perusahaan WebHosting yang memberi Anda akses ke Fantastico Autoinstatler. Fantastico adalah sebuah sistem yang dirancang untuk melakukan instalasi skrip populer dengan mudah. Jika anda ingin memperbaiki situs web Anda dengan sebuah forum diskusi online atau galeri. Fantastico dapat menginstal lebih dari 40 script populer seperti: Drupal, Geeklog, Joomla, Xoops, Wordpress, b2evolution, Support Logic Helpdesk, phpBB2, SMF, OS Commerce, Viper Guestbook, Coppermine Photo Gallery, PhpWiki, PHPauction, WebCalendar dan masih banyak lagi.

Hosting 000webhost.com adalah supercharged dengan SiteReptile website builder. SiteReptile menggunakan website builder. Dengan 3 langkah saja (masukkan login, pilih salah satu dari 330 template yang berkualitas dan klik 'publish')maka situs web Anda sudah siap online untuk diedit.

000webhost.com telah menyediakan hosting layanan gratis tanpa iklan sejak tahun 2007. Semua ini dapat dilakukan oleh 000webhost.com karena dibayar hosting layanan, termasuk upgrade pengguna, serta sumbangan dari masyarakat pengguna. Hosting Anda dapat digunakan selama-lamanya! 000webhost.com adalah 4 tahun di bisnis hosting dan dibayar selama 2 tahun di bisnis hosting gratis. 000webhost.com memiliki semua server dan menempatkan mereka dalam data centres berkualitas tinggi.

Teknik SEO untuk Dihindari

2009-08-04T01:49:00.002-07:00

Ada beberapa panduan dasar untuk membuat blog Anda lebih search engine friendly, yaitu dengan menulis tentang topik anda secara terfokus, sehingga topik anda dapat diakses banyak orang dan tersebar luas. Ada beberapa cara yang anda perlu hindari sehingga situs anda lebih mudah dicari pada search engine.

1. Jangan terlalu banyak kata kunci ke bagian yang tidak sesuai dengan topik blog anda.

2. Jangan percaya janji orang-orang bahwa mereka akan menjamin posisi blog anda pada peringkat 10 besar.

3. Jangan link ke orang lain dari situs Anda apabila mereka tidak memberi link bagi situs anda.

4. Jangan link ke orang lain hanya karena Anda dibayar, kecuali anda tahu persis apa yang Anda lakukan.

5. Jangan membuat beberapa artikel anda dengan konten yang sama persis dengan konten anda sebelumnya.

6. Jangan menggunakan URL orang lain untuk posting anda.

7. Jangan berinvestasi dalam sebuah server yang murah yang tidak dapat menanggulangi trafik; tidak membangun seluruh situs Anda pada situs web tool gratis.

8. Jangan khawatir tentang deskripsi halaman meta, kata kunci meta dan semacamnya. Lebih baik anda menghabiskan waktu untuk membuat konten yang bagus.

9. Jangan menggunakan alat-alat yang secara otomatis mengirimkan URL situs Anda ke direktori, dan mesin pencari.

10. Jangan memberikan konten yang berbeda kepada pengunjung, misalnya menyembunyikan teks Anda pada penggunjung dan menunjukkannya ke mesin pencari.

11. Jangan mencoba untuk mengakali mesin pencari.

Bagaimana Cara Membuat Blog yang Sukses

2009-08-04T01:44:00.001-07:00

Membuat blog merupakan hal yang sama seperti di saat anda membuat website, anda dapat membuat blog yang bersifat pribadi maupun umum, sehingga dapat sangat berguna. Walaupun demikian blog tersebut dapat mendatangkan keuntungan, dengan sedikit pekerjaan yang anda perlu lakukan. Blog anda dapat mendatangkan keuntungan jika anda memulainya dengan bekerja keras dari 3 bulan bahkan 3 tahun, tergantung seberapa besar atau intensif anda bekerja. Berikut adalah beberapa langkah yang ada perlu lakukan dalam membuat blog yang sukses:

Langkah 1.
Hal yang perlu ketahui dalam membuat blog yaitu topik apa yang ingin anda tampilkan. Kamu dapat membuat blog mengenai bisnis, hidup pribadimu, hobimu, dan lain sebagainya. Setelah memilih topikmu pilihlah nama domain dengan kata-kata yang pendek dan berhubungan dengan topikmu. Selanjutnya anda dapat memilih jenis blog yang anda sukai berserta templete. Blog pada umumnya dapat ditemukan pada Mesin Pencari Google dengan mudah dibandingkan dengan website.

Langkah 2.
Tulislah isi blog anda sesuai dengan keinginan hati anda. Ketika ada telah menemukan ide-ide dan inspirasi mulailah menulis sesuka hati. Bercerita dengan seseorang disebelah anda yang mungkin dapat membantu anda dalam mengembangkan pemikiran untuk menulis artikel. Buatlah artikel yang disukai oleh pembaca.

Langkah 3.
Anda perlu mempromosikan blog anda kepada publik. Banyak orang memiliki kesulitan dalam hal ini, karena akan membutuhkan waktu dan tenaga. Bagaimanapun ada cara yang lebih efektif dimana kebanyakan blogger memilih untuk mempromosikan blognya pada forum webmaster dan direktori artikel. Dengan bergabung bersama forum maka akan membuat blog anda lebih mudah dilihat oleh pembaca.

Langkah 4.
Langkah terakhir yaitu bagaimana cara membuat uang dari hasil kerja keras anda. Saya merekomendasikan iklan dari Google adsense karena memiliki kualitas iklan yang bagus.

Apa itu Paypal

2009-08-04T01:42:00.001-07:00

Paypal adalah bisnis e-commerce yang melakukan pembayaran dan transfer uang melalui internet. PayPal membantu dalam transaksi elektronik dari metode tradisional seperti cek dan pembayaran tunai. Dengan paypal kita bisa membeli sesuatu, kita juga bisa mentransfer uang ke rekening paypal yang lain. Selain itu kita juga dapat menerima bayaran yang akan masuk ke rekening paypal kita yang kemudian bisa dicairkan (withdraw) secara langsung ke rekening bank.

PayPal mengatasi kekurangan dalam pengiriman uang tradisional seperti cek atau money order yang prosesnya dapat memakan waktu lama. Untuk bertransaksi dengan menggunakan PayPal anda perlu membuat account, lalu mengisi account anda dengan dana dari kartu kredit atau transferan dana dari account paypal orang lain ke balance paypal anda, dan anda sudah dapat menggunakan account PayPal untuk bertransaksi.

Mempunyai rekening paypal merupakan hal yang penting jika kita melakukan bisnis diinternet dan jika kita mencari penghasilan di internet. Karena kebanyakan mereka akan membayar kita melalui paypal. Jika kita tidak punya paypal maka kita tidak bisa mendapatkan bayaran dari program-program penghasil dollar di internet.

Sebagai broker dalam transaksi online, PayPal mempermudah seseorang dalam melakukan pengiriman uang hanya dengan "email penerima". Pihak lain tidak dapat melihat informasi kartu kredit atau account bank. Hal ini menjadi kelebihan PayPal dalam menjaga keamanan data pribadi penggunanya. Kebijaksanaan perlindungan tertulis untuk pembeli yang menggunakan PayPal menyatakan pembeli yang menggunakan PayPal dapat melakukan komplain dalam waktu 45 hari jika pembeli belum mendapatkan barang yang dipesan atau jika barang yang dipesan tidak sesuai deskripsi yang diberitahukan penjual.

Untuk membuat PayPal kunjungi Paypal.com, lalu klik Sign Up, selanjutnya paypal perlu diverifikasi. Untuk mengirim atau menerima uang melalui PayPal, tidak diperlukan alat yang canggih atau dokumen-dokumen pembayaran lainnya. Yang perlu disiapkan hanya email dan dana PayPal baik dari balance, kartu kredit atau account bank.

Tidak ada biaya untuk daftar PayPal dan juga untuk transfer dari Bank Account ke Account PayPal. Pengguna tidak akan dikenakan biaya, untuk account PayPal Personal, sedangkan account Premier atau Business, akan dikenakan biaya setiap menerima pembayaran.

Pembayaran Google Adsense melalui Western Union

2009-08-04T01:39:00.000-07:00

Pembayaran Google Adsense dapat dilakukan melalui layanan pengiriman Western Union. Adanya pilihan pembayaran pendapatan Google Adsense melalui Western Union ini merupakan kabar baik bagi para pemilik account Google Adsense mengingat pilihan Western Union akan memungkinkan penerimaan uang dilakukan lebih cepat, biaya lebih murah, dan dapat diterima di berbagai agen Western Union yang jumlahnya banyak.

Pembayaran uang melalui Western Union merupakan metode pembayaran yang memberikan anda bonus dari Google Adsense dalam bentuk uang atau cek dengan menggunakan layanan tranfer Western Union. Pembayaran dapat dilakukan dari agent Western Union lokal setelah cek dikirim tergantung pada jadwal pembayaran normal.

Ini berarti anda tidak perlu menunggu lama untuk datangnya cek ke email. Memilih untuk bertransaksi dengan western union juga membantu anda mengurangi potongan dari bank dan lama waktu pencairan.

Pembayaran melalui Western Union adalah dalam kurs dolar Amerika. Walaupun demikian pada Bank Western Union lokal anda dapat menerima pembayaran dalam mata uang setempat.

Pembayaran hanya diberikan kepada individu yang namanya tertera pada cek. Pembayaran dengan memakai cek perlu menyertakan KTP sehingga nama pada KTP sesuai dengan nama yang tertera pada cek. Pembayaran Google Adsense harus diambil selama 35 hari sebelum kadaluarsa dan tidak dapat dicairkan. Jika anda belum sempat mengambilnya maka akan dimasukan kembali ke rekening Google Adsense anda.

Mengdulang Dolar dari Google Adsense

2009-08-04T01:37:00.000-07:00

Cari uang di rumah, atau membangun bisnis berbasis rumah milik anda. Sudahkah anda pernah mencoba? Jika belum, anda perlu mendengar tentang Google Adsense, dimana beribu-ribu orang sepanjang hari dan diseluruh dunia membuat uang dari Google Adsense program tiap bulan.

Bagaimana cara pekerjaan ini? Sederhana, anda hanya menempatkan suatu iklan pada suatu webpage atau blog. Ketika seseorang mengklik pada iklan Google yang ada pada halaman webmu kamu akan mendapatkan bayaran. Kamu akan dibayar untuk setiap klik pada iklan yang anda pasang. Berikut adalah langkah-Langkah bagaimana cara memulai mencari uang dari Google Adsense dan memulai bisnis berbasis rumah milikmu.

1. Untuk memulai membuat uang dari Google Adsense kamu harus membuat account Google. Account ini gratis dan dalam beberapa hari anda akan diterima dan dikirimkan password dan kode iklan untuk ditampilkan di webpage atau blog anda

2. Dapatkan blog gratis dari situs Google blog atau cari website yang menyediakan layanan hosting gratis.

3. Ikuti aturan sederhana bagaimana anda dapat memaksimalkan potensi iklan untuk meningkatkan pendapatan.

4. Gunakan tips-tips yang tersedia pada web bagaimana meningkatkan trafik pada blog atau website anda sehingga memberikan peluang bagi pengunjung untuk mengklik iklan anda.

Itu merupakan langkah yang sangat sederhana bagaimana anda dibayar perbulan ke rekening bank atau diberikan cek Dollar. Banyak orang yang telah menjadi milionre hanya dengan bergabung bersama Google Adsense. Jika anda masih belum percaya mengenai Google Adsense bergabunglah dari sekarang......

Membuat Zoom pada Gambar

2009-07-13T02:33:00.000-07:00

Trik yang satu ini pasti anda tidak akan lewatkan....iya kali ini kita akan membuat efek zoom dari gambar. Gambar akan diperbesar apabila cursor anda berada diatasnya. Nah trik ini mungkin jarang digunakan tapi jika blog anda memiliki gambar-gambar yang banyak tentunya trik ini perlu dicoba....Mau tau gimana caranya...

Oke tanpa basa-basi langsung aja to the point.
1. Login ke blogger
2. Pilih Tata Lelak dan Klik edit HTML
3. Backup template anda terlebih dahulu
4. Klik expand template widget
5. Cari kode ini ]]></b:skin>

6. Kalo udah dapat paste kode di bawah ini diatas kode tadi

/* Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

7. Simpanlah template anda.

8. Nah jika anda memposting sisipkan kode ini pada gambar anda.

<a class="thumbnail" href="#thumb">

URL Gambar Anda....

<span><img src="http://lh6.ggpht.com/_w3vbLlHM5kg/SbKHhnSNdoI/AAAAAAAAABY/VB8hrsxdHjg/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Oke deh selamat mencoba!!

Menambah Icon Smiley di Shoutmix

2009-07-13T00:54:00.000-07:00

Anda mungkin udah familiar apa itu shoutmix.....Yah shoutmix juga sering disebut sebagai buku tamu. Ketika pengujung melihat2 blog anda maka mereka dapat memberikan pesan singkat pada shoutmix. Shoutmix memiliki fungsi dalam menjalin teman sehingga ini akan membuat blog anda lebih sering dikunjungi....nah itu berdasarkan pengalaman saya juga loh....Shoutmix juga berfungsi untuk memperikan pesan saling tukaran link.....kalo anda ingin menjalin teman sesama blogger jangan lupa nambah gadjet ini.

Oke masih didalam topik tersebut saya ingin memberikan tips bagi teman2 gimana untuk menambah emoticon dalam shoutmix sehingga pengujung atau anda gak bosan memberi komentar...Oke langsung aja.

1. Klik di website ini ...http://www.getsmileyface.com/
2. Jika anda ingin menambahkan emoticon smiley klik link "smiley"

3. Klik gambar yang anda sukai...
4. Pada bagian kotak diatas akan muncul url gambar anda...langsung aja dikopi ....ingat kopi hanya url gambarnya..misalnya .......gif

5. Selanjutya anda buka windows baru dan pergi ke situs Shoutmix

6. Udah gitu login dulu....
7. PAda menu tab klik setting sehingga muncul kotak pilihan.
8. Pilih atau klik link "Smiley"
9. Pada kotak dibawahnya disitu anda akan dimintai url gambar smiley....jadi langsung aja paste gambar smiley yang tadi anda kopi kemudian klik "add"

10. Jika anda ingin tambah icon smiley..kopi gambar yang lain dan paste pada kotak tersebut.

11. Terakhir jangan lupa untuk menyimpan setting anda..

Nah anda udah bisa melihat icon smiley yang baru,,,....selamat mencoba!!!

Menampilkan Icon Animasi Sebelum Judul Posting

2009-07-12T06:03:00.000-07:00

Blogging adalah salah satu cara untuk menyediakan informasi yang berharga bagi pengunjung. Untuk itu anda dapat menampilkan blog anda dengan tampilan yang menarik sehingga pengunjung suka terhadap isi konten anda. Jadi saya akan memberikan tips bagi anda untuk membuat tampilan blog anda lebih menarik. Tips ini yaitu menambahkan icon sebelum judul posting blog anda. Tentunya anda dapat membuatnya dengan mengedit kode HTML. Yuk belajar gimana caranya...

1. Cari gambar yang anda ingin tampilkan. Atur ukuran gambar sehingga ukurannya 50*50 piksel. kemudian upload gambar tersebut dan kopi link gambar.

2. Buatlah HTML code untuk gambar anda. Berikut ini masukan link anda yang diperoleh dari hasil upload gambar.

<img src="http://www.blogger.com/LINK%20TO%20YOUR%20IMAGE%20HERE" style="border-width: 0px;" />

3. Login ke blogger
4. Pilih Tata Letak dan klik edit HTML kemudian Expand Widget Template.
5. Carilah kode berikut ini <b:if cond='data:post.url'>

6. Tambahkan kode HTML yang anda kopi tadi diatas kode <b:if cond='data:post.url'> sehingga terlihat seperti ini

<b:if cond='data:post.url'>

<img src="http://www.blogger.com/LINK%20TO%20YOUR%20IMAGE%20HERE" style="border-width: 0px;" />

7. Simpanlah template anda.

Sekarang ini anda dapat melihat gambar beranimasi sebelum judul posting. Anda juga dapat menerapkan trick ini unttuk membuat keterangan sebelum judul posting. Selamat mencoba!!!

Menampilkan Twitter Update pada Blogspot

2009-07-12T05:42:00.000-07:00

Jika anda memiliki blog pada blogger dan anda juga sering menggunakan Twitter, anda mungkin ingin menambahkan twitter update pada blog di side bar. Menunjukan Twitter update akan mengundang pengunjung untuk mengikuti anda di twitter. Dengan adanya twitter update anda dapat melihat kiriman pesan bagi anda langsung dari blog anda sendiri.

Ingin tau gimana cara buatnya......Ikuti aja langkah berikut ini:
1. Login ke blogger.
2. Pilih tata letak
3. Tambahkan gadjet anda.
4. Klik HTML JavaScript
5. Tambahkan kode dibawah ini:

<div id=”twitter_div”>
<ul id=”twitter_update_list”></ul>
<a id=”twitter-link” style=”display:block;text-align:right;” href=”http://twitter.com/indra“>follow me on Twitter</a>
</div>
<script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script>
<script src=”http://twitter.com/statuses/user_timeline/indra.json?callback=twitterCallback2&count=5” type=”text/javascript”>
</script>

6 Simpan template anda

Keterangan:
Isi tulisan berwarna merah dengan ID twitter anda...dan sebagai keterangan anda dapat menganti tulisan yang berwarna biru yang adalah jumlah twitter update

Membuat Tombol Digg pada Blog

2009-07-12T05:34:00.000-07:00

Situs Social Bookmarking mempunyai bagian yang penting dalam menyediakan cukup banyak trafik dan Page Rank yang lebih baik. Anda sebaiknya menggunakan icon social bookmarking pada setiap posting blog anda sehingga pengunjung akan berbagi posting anda ke situs networking yang berbeda. Tombol Digg adalah yang populer saat ini dan dapat meningkatkan banyak trafik. Jika anda ingin membuat posting anda lebih dikenal maka sebaiknya tambahkan tombol ini. Menambahkan tombol Digg cukup sederhana, hanya butuh lima menit dan semuanya akan jadi

1. Login ke blogger.
2. Pergi ke Tata Letak dan klik Edit HTML
3. back up template anda.
4. Expand widget template
5. cari kode ini <data:post.body/>

6. Tambahkan kode dibawah ini sebelum kode diatas:

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

7. Simpan template anda maka semuanya udah selesai

Sekarang ada pun bisa melihat tombol digg pada Postingan anda!!

Menambahkan Tombol Twitter pada Posting

2009-07-12T04:55:00.000-07:00

Ada berbagai cara untuk kita mempromosikan blog dalam meningkatkan trafik. Tetapi sebenarnya promosi blog anda itu semuanya terletak pada posting atau isi dari artikel anda. Anda bisa mempromosikan blog anda dengan menambahkan icon sosial bookmarking sehingga artikel anda dapat disebarkan. Ada berbagai macam jenis tombol yang dapat dipasang seperti Digg, yahoo, Twitter dan lain sebagainya. Saya disini akan memberikan tips bagaimana menunjukan tombol Twitter ke posting blog.

Jika seseorang menyukai posting anda, mereka akan menklik pada Twetter untuk memposting topik anda pada akun mereka sehingga teman mereka akan mendapatkan informasi tentang topik anda. Ada dua jenis tombol twitter yang tersedia yang anda dapat tempatkan pada posting blog. Nah berikut akan ajarkan cara menempatkan tombol ini:

1. Login ke blogger.
2. Klik Tata Letak dan klik Edit HTML
3. Expand Widget Template
4. Cari kode dibawah ini: <data:post.body/>
5. Tambahkan kode dibawah ini sebelum atau sesudah kode diatas

Untuk tombol twitter Full seperti diatas tambahkan kode ini

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>Retweet this button on every post blogger
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>

Sedangkan tombol twitter Compact tambahkan kode ini:

<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Jika anda ingin menempatkan tombolnya disisi kanan gunakan kode ini:

<div style='float:right; margin-left:10px;'>
>>>>Retweet Button Code Here<<<<
</div>

Jike anda ingin menempatkan tombol di sisi kanan pakai kode ini:

<div style='float:right; margin-left:10px;'>
>>>>Retweet Button Code Here<<<<
</div>

Selamat mencoba yahh...

Cara Pasang Snapshots pada Blog

2009-07-12T02:13:00.000-07:00

Apa anda mengenal apa itu snapshot? Snapshot adalah semacam screen shot ketika cursor anda berada diatas sebuah link. Blogger memang tidak memiliki fasilitas ini, namun kita bisa membuatnya sendiri.Ingin tau gimana cara membuatnya...Ikuti aja langkah berikut ini:

1. Daftarkan diri anda pada Snapshot atau klik disini http://account.snap.com/signup.php
2. Klik continue
2. Kita bisa melakukan pengaturan untuk snap shots, mulai dari tema (theme), logo, dan bahasa (language) yang akan digunakan. Jika anda tidak ingin mengaturnya klik Skip.

3. Isi formulit pendaftaran dengan lengkap dan beri tanda centang pada I agree to Terms & Condition Above.
4. Klik continue
5. Setelah itu akan tampil halaman untuk menginstal Snapshot pada blogger kemudian klik tombol Instal Now

6. Anda akan diiringi pada Blogger kemudian masukan user name dan password
7. Lalu akan tampil halaman menambah widget dan akan ditambahkan secara otomatis...

Sekarang coba lihat blog anda....jika muncul maka pengaturannya berhasil....met mencoba!!

Domain Gratis co.cc di Blogspot

2009-07-12T02:08:00.000-07:00

Apakah anda tahu bahwa anda bisa memiliki domain baru yang gratis yaitu co.cc. Dengan co.cc domain anda akan lebih mudah dikenal, selain itu anda bisa mengontrol DNS Records, A, MX, dan CNAME records. Anda udah bosan domain yang sekarang dan ingin beralih ke domain ini....

Caranya mudah kok....ikuti aja langkah berikut ini. Langkah ini saya akan golongkan ke dalam 2 tahap yang berbeda. Ingin tau.....??

Tahap I
1. Klik di sini co.cc
2. klik "create an account now"
3. Kemudian anda akan disuruh untuk mengisi formulir pendaftaran. Isi formulir dengan lengkap dan jangan lupa klik tanda centang pada I accept the Terms of Service yang artinya anda menyetujui layanan mereka.

4. Anda akan diiringi ke halaman selanjutnya dan klik pada "Getting A New Domain"
5. Cek domain yang tersedia dengan memasukan nama domain yang anda inginkan, klik tombol Check Availability.
6. Jika domain tersedia maka akan tertulis Domain Available jika gak tersedia atau Unavailable cobalah cari domain baru..
7. Klik continue to registration.
8. Klik Set Up untuk melanjutkan setting pada host nya.
9. klik pada Please Domain Setup Now

10. Kita akan menggunakan hosting gratisan, maka sobat klik yang Zone Record,
11. Isi nama domain anda kemudian isi data sebagai berikut TTL = 1 D, type = CNAME, value = ghs.google.com, setelah itu klik Setup dan akan ada pemberitahuan bahwa domain baru akan aktif kurang lebih 2 hari.

Tahap II.
1. Login ke blogger
2. klik "pengaturan" dan klik lagi pada Publikasikan

3. Klik pada tulisan berpindah ke custom domain
4. Kemudian klik Beralihlah ke Pengaturan Lanjut
5. Isi domain anda yang tadi didaftar di co.cc
6. Selesai

Nah udah selesaikan....mudah bukan....he3 met mencoba....!!!!

Membuat Dock Menu Horizontal

2009-07-11T05:15:00.000-07:00

Mungkin anda udah pernah membaca salah satu posting saya bagaimana cara membuat menu dock vertikal....menu dock adalah menu navigasi yang mempunyai animasi. Apabila cursor anda berada diatasnya maka menu dock akan bergerak dan membuat zoom.

Jika anda tertarik untuk membuatnya ikuti aja trik berikut ini>......
1. Login ke blogger
2. Pilih Tata Letak dan klik Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode ini dibawah kode <head>

<script src='http://iblographics.com/jquery.js'
type='text/javascript'/>
<script src='http://iblographics.com/interface.js' type='text/javascript'/>

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

.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

6. Terakhir cari kode <body> dan tambahkan kode dibawah ini dibawah kode ini:

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)

}
);

</script>

7. Terakhir simpan template anda....

Selamat mencobanya!!!!

Cara Memasukan Widget Social Bookmarking

2009-07-11T04:40:00.000-07:00

Seperti yang anda lihat pada beberapa blog, mereka memasukan social bookmarking widget dibawah judul posting atau pada akhir posting (yaitu pada footer). Jika anda belum tau apa2 tentang tombol social bookmarking bisa mengunjungi Social Bookmarking Widget Provider. Sekarang bagaimana anda memasukan tombol ini pada template dibawah postingan. Yah itu mudah hanya ikuti saja langkah berikut ini:

1. Masuk ke website Addthis.com untuk mendaftar
2. Isi data-data yang diperlukan dan klik create account
3. Klik Get Your Button.
4. Silakan pilih kode HTML nya dan di copy.

5. Login ke blogger.
6. Klik Tata Letak dan klik edit HTML
7. Klik expand widget template
8. Cari kode ini: <b:includable id='post' var='post'> dan paste kode social bookmarking dibawahnya
9. Simpan template anda.....dan lihat hasilnya

Selamat mencoba!!!

Membuat Recent Post dengan Gambar

2009-07-11T03:59:00.000-07:00

Anda mungkin sering mencari artikel mengenai cara atau trik untuk membuat recent post atau posting terbaru....Nah anda beruntung membaca trik ini karena anda dapat membuat recent post yang disertai dengan gambar. Gambar yang muncul adalah gambar yang berasal dari posting anda. Dan gambar tersebut ditampilkan secara otomatis.

Nah kita akan membuat judul recent post dengan gambar......Pasti anda udah gak sabar untuk membuatnya.....kalo gitu ikuti aja trik berikut ini:

1. Login ke blogger.
2. Pilih Tata Letak
3. Tambahkan gadjet.
4. Klik HTML JavaScript

5. Tambahkan kode dibawah ini:

<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 = 25;
thumbheight = 25;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 4;
home_page = "http://blogtrikdantips.blogspot.com/";
</script>
<script src="http://ankitbajaj151.googlepages.com/recentposts_thumbnail.js" type="text/javascript"></script>

5. Ganti http://blogtrikdantips.blogspot.com/ dengan url blog anda
5. Simpanlah template anda dan selamat mencoba!!!

Keterangan:
numposts = 4; Jumlah posting yang ingin ditampilkan
thumbwidth = 25; ukuran lebar gambar
thumbheight = 25; ukuran tinggi gambar

Membuat Readmore dengan Gambar

2009-07-11T03:10:00.000-07:00

Kita sebelumnya telah belajar apa itu fungsi dari readmore yaitu untuk memperpendek posting pada home page anda. Nah kali ini ada trik yang baru yaitu membuat readmore yang beserta gambar. Setiap postingan anda akan muncul gambar walaupun anda menaruh gambarnya dibagian bawah posting. Secara otomatis apabila anda memposting maka gambar akan nampak pada home page.

Mau tau cara buatnya,,,ikuti aja langkah berikut
1. Login ke blogger
2. Pilih Tata letak dan klik edit HTML
3. Klik Expand Widget Template

4. Cari kode ini <data:post.body/>
5. Kopi kode ini dan paste dibawah kode diatas:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://ankitbajaj151.googlepages.com/readmore.js' type='text/javascript'/>
<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:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

4. Terakhir adalah simpan template anda...

Keterangan:
summary_noimg = 430; adalah potingan posting tanpa gambar
summary_img = 340; adalah potongan posting dengan gambar
img_thumb_height = 100; adalah tinggi gambar
img_thumb_width = 120; adalah lebar gambar

Mencari Link yang Rusak pada Blog

2009-07-11T02:18:00.000-07:00

Link yang mati (atau juga disebut link yang rusak) adalah link pada WEB yang menunjukan suatu halaman web atau server yang tidak ada atau tidak ditemukan secara permanen.Hasil yang nampak dari link yang rusak adalah munculnya 404 error, yang menunjukan tidak ditemukannya halaman yang spesifik

Mungkin bagi anda sulit untuk menemukan setiap link pada blog anda yang udah rusak. Saya akan memberikan tips kepada anda untuk mengecek link pada blog yang udah tidak digunakan atau rusak. Anda dapat mencari link tersebut dengan mudah dan cepat. Jika anda mencari link tersebut satu per satu maka anda akan membuang banyak waktu

Nah ....ini adalah alat bagi anda yang ingin mengecek link mana yang tidak bekerja....

Alat itu bernama "Broken Link Checker".

Anda hanya perlu memasukan URL website. Setelah itu akan muncul daftar link dari blog anda. Link yang rusak akan ditandai dengan tanda silang sedangkan link yang tidak rusak diberi tanda centang....

Apabila ada link anda yang ditemukan rusak atau tidak bekerja maka anda hanya perlu menghapusnya atau memperbaikinya

Mudah bukan ......selamat mencoba.......

Membuat Kotak Terpisah Siderbar

2009-07-10T17:58:00.000-07:00

Anda udah tau apa itu sidebar.....itu toh kolom pada sisi template anda yang biasanya anda menambahkan gadjet, menaruh iklan, dan lain sebagainya. Tau gak kalo side bar anda bisa dibuat terpisah.....nah itu dia menarik bukan......kalo anda ingin membuatnya jangan beranjak dari kursi tempat duduk anda.....ikuti aja trik berikut ini:

Nah untuk memulainya.....anda harus persiapkan kopi hangat, roti bakar....eh udah keluar dari topik nih....Bagi anda yang penasaran mari liat aja cara buatnya....

1. Login ke blogger.
2. Pilih Tata Letak dan Klik edit HTML
3. Backup dulu template anda.
4. klik pada expand widget template
5. Cari kode ini:

.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

6. Kalo udah dapat pisahkan kode diatas menjadi seperti ini sesuai dengan urutan.

.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

7. Lalu rubah kode yang pertama diatas menjadi seperti ini:

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}

8. Jika anda ingin membuat sidebar kolom anda dengan garis melengkung tinggal tambahkan kode ini:

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

Oke bos selamat mencoba....

Cara Mengganti Background Template

2009-07-10T17:38:00.000-07:00

Anda bosan dengan latarbelakang atau background pada template. jadi jangan tunggu lagi segera gantikan warnanya......Selain anda dapat mengganti background dengan warna misalnya biru, hijau dll, ....anda juga dapat mengantinya dengan gambar...he3 menarik bukan...Jika anda melihat template saya pada bagian header saya menggantinya dengan gambar yang saya dapat dari situs ini: Da Background Labs

Untuk memulai mengganti background ikuti aja langkah berikut ini:
1. Login ke blogger.
2. Pilih Tata letak dan Klik edit HTML
3. Jangan lupa backup template anda.
4. Pada template jika anda scroll ke bawah anda akan melihat kode-kode untuk bagian tubuh template.

5. Nah misalnya saya mengganti background pada header jadi saat saya scroll kebawah ada kode ini:

/* The Header */

#top {
height:104px;
margin:auto;
background:url(http://www.backgroundlabs.com/backgrounds/126.jpg)top repeat-x;
width:1000px;
}

6. Kode yang berwarna merah andalah url gambar, anda dapat menggantinya jika anda ingin gambar yang lain...

7. Jika ingin menggantinya dengan warna maka kode diatas akan berubah menjadi seperti ini:

/* The Header */

#top {
height:104px;
margin:auto;
background:#5D0909;
width:1000px;
background:#5D0909;

Perhatikan bahwa saya menghapus dan menyisipkan kode warna....Anda dapat mengganti kode warna sesuai dengan selara.

Selamat mencoba .....

Membuat Garis Melengkung Kolom Posting

2009-07-10T17:19:00.000-07:00

Seperti yang saya perhatikan pada beberapa template terdapat kotak postingan dengan garis yang melengkung. Kotak postingan ini berfungi untuk memisahkan artikle satu dengan yang lain. Lebih menariknya jika kotak postingan ini memiliki border atau garis luar yang melengkung.

Jika anda tertarik gimana cara membuat kolom postingan dengan garis melengkung silahkan ikuti trik berikut ini.

1. Login ke blogger.
2. Pilih Tata Letak dan klik edit HTML
3. Back up template anda
4. Cari kode ini atau yang mirip dengan ini h2.date-header {
Jika kode tersebut belum dapat cari dengan menekan CTRL F

5. Kopi kode dibawahnya seperti ini:

border-left:3px solid #0080FF;
border-right:3px solid #0080FF;
border-top:3px solid #0080FF;
border-bottom:0px solid #0080FF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;

6. Lalu cari kode ini .post-body {

7. Kopi kode dibawah inidan letakan setelah kode .post-body {

border-right:3px solid #0080FF;
border-left:3px solid #0080FF;

8. Lalu cari lagi kode .post-footer {
9. Letakan kode dibawah ini setelah kode .post-footer {

border-left:3px solid #0080FF;
border-right:3px solid #0080FF;
border-top:0px solid #0080FF;
border-bottom:3px solid #0080FF;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

10. Kode yang berwarna merah adalah warna border, anda dapat menggantinya sesuka anda. Selamat mencoba!!!

Teks Area Unik

2009-07-08T05:36:00.000-07:00

Sebelumnya kita udah membuat teks area, tapi kali ini kita akan membuat teks area yang lebih unik lagi. Fungsi dari teks area yaitu menaruh tulisan anda dalam sebuah kotak khusus.

Uda gak sabar mau buat teks area ikuti aja langkah berikut....eh langkah.... anda hanya perlu menambah script pada template anda. Ini langkahnya dulu nanti kodenya di bawah:

1. Login ke blogger.
2. Pilih tata letak dan klik edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode teks area ini diatas kode ]]></b:skin>
5 Ketika memposting jangan lupa menambahkan kode teksarea pada tulisan anda seperti ini

<textarea>
Tulisan anda disni
</textarea>

6. Simpan Template anda....selamat mencoba!!

Berikut adalah jenis teks area beserta kodenya didalam:

textarea {background: #000; font: 13px Verdana, sans-serif; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;}	textarea {background:#DAFFBF; font: 13px Comic Sans MS, Comic Sans, Arial; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;}
textarea {background:#BFFAFF; font:13px Tahoma; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;}	textarea {background: #EF0090; font: 13px Georgia; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;}
textarea {background: #FFDAAF; font: 14px Papyrus, Georgia; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;}	<br /><br />textarea {background:#FF000A; color:#fff; border:3px double #fff; line-height:1.5em; padding:5px;}<br /><br />
textarea {background: #FBEFFF; font: 13px Tahoma; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;}

Bagus2 kan met mencoba........!!!!! Happy blogging

Membuat Blockquote

2009-07-08T05:17:00.000-07:00

Sudahkah anda pernah mendengar istilah blockqute....bagi beberapa newbie istilah ini belum familiar jadi mari kita cari tau apa itu block quote. Blockquote adalah sebuah kotak atau sebuah tag khusus untuk highlighting sebuah kalimat/pernyataan yang kita ingin buat terkesan "penting" pada pembaca. Nah blockquote seperti saya buat dibawah:

Namun demikian tampilan default blockquote yang kita dapatkan dari Blogger memang kelihatan sangat standar. Namun, dengan sedikit pengubahan yang mudah pada kode CSS, kita bisa mempercantiknya. Anda ingin tau gimana caranya, ikuti tips berikut ini.

1. Login ke blogger.
2. Pilih Tata Letak dan klik pada edit HTML
3. klik expand widget template.
4. Cari kode ini ]]></b:skin> kemudian letakan script ini diatasnya...

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;

background: #e0ffff;

border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

Keterangan:
- color: #000000; » pewarnaan teks di dalam kotak blockquote. Ganti #000000 dengan kode warna yang anda inginkan.
- background: #e0ffff; » pewarnaan latar belakang (background) kotak blockquote. Ganti #e0ffff dengan kode warna yang diinginkan.
- border: 2px solid #4aa02c; » pewarnaan garis tepi (border) kotak blockquote. Ganti #4aa02c dengan kode warna sesuai selera anda.

5. Simpan perubahan
6. Ketika anda memposting jangan lupa menyertakan kode ini

<blockquote>
Tulisan posting anda sini
</blockquote>

Membuat Menu Hubungi Saya atau Menu Slide

2009-07-08T01:02:00.000-07:00

Sudahkah anda pernah melihat menu hubungi saya....beberapa blogger memasang menu hubungi saya ini sehingga saran atau pertanyaan dari pengunjung dapat dikirim melalui email. Menu ini dapat ditampilkan pada sisi kiri maupun kanan tergantung dari pengaturannya. Menu ini akan bergerak ketika anda mengscroll halaman ke bawah.

Pencipta Menu ini Bernama MaXimus nama asli menu ini "Dynamic-FX Slide-In Menu (v 6.5)" original source code serta contoh dari menu tersebut bisa anda lihat di dynamicdrive.com Tapi hanya untuk menampilkan Link. Disini saya menggantinya dengan gambar, yang pastinya lebih memberikan informasi bagi pengunjung blog kamu.

Mari ikuti cara membuatnya....:
1. Download scriptnya klik disini
2. Ekstraklah file itu dengan menggunakan WinZip, WinRAR
3. Setelah di ekstrak, akan menghasilkan dua file (ssm.js & ssmItems.js) yang akan kita edit hanya file ssmItem.js saja, buka file itu dengan menggunakan program teks editor tidak harus yang bagus-bagus NotePad saja sudah cukup.

4.Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad.
5.Isi file ssmItem.js adalah sebagai berikuk. Kode-kode ini adalah untuk mengatur tampilan menu hubungi saya.

YOffset=200;
XOffset=0;
staticYOffset=150;
slideSpeed=20
waitTime=100;
menuBGColor="#d1d8ec";
menuIsStatic="yes";
menuWidth=180;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="300";
barBGColor="#86629f";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="center";
barWidth=15;
barText="Hubungi saya";
ssmItems[0]=["<center><img src=http://domain.com/gambarfoto.jpg><br>kata-kata-kamu<br><img src=http://domain.com/gambaremail.jpg> "]
buildMenu();

Untuk lebih jelasnya penjelasan dari kode diatas adalah sebagai berikut ini:

00.mengatur posisi menu pada baris y axis layar monitor (vertical)
01.mengatur posisi menu pada x axis layar monitor (horizontal)
02.untuk mengatur posisi vertical menu, pada layar monitor
03.kecepatan slide
04.waktu tunggu lamanya menu muncul setelah mouse menjauhi menu
05.untuk mengatur warna background menu, gunakan kolor picker dibawah posting ini untuk melihat kodenya
06.untuk men-set apakah menu harus tetap statis pada layar
07.Mengatur lebar menu. Harus kelipatan dari angka 10! Tanpa tanda kutip
08.jumlah kolom
09.jenis huruf header
10.ukuran huruf header
11.warna teks header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
12.warna backround header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
13.perataan teks header
14.perataan teks vertikal header
15.tinggi header
16.warna background bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
17.jenis huruf bar
18.ukuran huruf bar
19.warna huruf bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
20.perataan teks bar secara vertikal
21.lebar bar
22.kata2 yang akan muncul pada bar (hubungi saya)
23/24. ganti http://domain.com/gambarfoto.jpg dan http://domain.com/gambaremail.jpg dengan url dimana kamu upload gambar foto dan gambar email.dan jangan lupa ganti kata-kata-kamu dengan yang kamu inginkan
26. Buat menu

6. Jika sudah selesai mengedit file ssmItem.js simpan file tersebut, lalu upload-lah kedua file javascript itu ke server kamu, kamu bisa menggunakan googlepage atau 000webhost untuk menghosting file itu

7. Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.
8. Sekarang saatnya memasukkan file java script tadi kedalam blog kita, silahkan ikuti langkah-langkah berikut ini :
9. Login ke Blogger klik Layout/Tata Letak ----> Edit HTML
10. Copi dan paste kode/Script berikut di atas kode </head>

<script src='http://agungosx.googlepages.com/ssm.js' type='text/javascript'></script>
<script src='http://agungosx.googlepages.com/ssmItems.js' type='text/javascript'></script>

Silahkan ganti teks berwarna merah dengan url dimana kamu upload file javascript-nya

10. Simpan dan lihat blog kamu.

http://agungosx.blogspot.com/

Cara Membuat Pop Up

2009-07-08T00:30:00.000-07:00

Teman-teman sekalian sebelumnya kan kita udah belajar gimana membuat script alert welcome dan goodbye .....kali ini kita juga akan membuat hal yang sama ....yaitu pop-up. Pop up ini dapat berfungsi untuk menampilkan iklan, pesan dan lain-lain. tapi ingat ya jangan buat pop up terlalu banyak nanti pengunjungnya malah lari semua...jadi buatlah pop up seadanya aja.

Nah ini loh cara buatnya. .....Ikuti aja langkah berikut ini semoga dapat bermanfaat.
1. Login ke blogger.
2. Klik tata letak dan klik edit template.
3. Masukan kode ini dibawah kode <body>

<script type="text/javascript">
var popurls=new Array()
popurls[0]="http://blogtrikdantips.blogspot.com/"
popurls[1]="http://blogtrikdantips.blogspot.com/"
popurls[2]="http://blogtrikdantips.blogspot.com/"
popurls[3]="http://blogtrikdantips.blogspot.com/"

function openpopup(popurl){
var winpops=window.open(popurl,"","width=,height=,toolbar,location,status,
scrollbars,menubar,resizable")
}

openpopup(popurls[Math.floor(Math.random()*(popurls.length))])
</script>

4. Silahkan ganti kode warna merah dengan alamat url dari ID adsense, dll. Kode warna hijau adalah kode untuk lebar dan tinggi pop up.
5. Juga jangan lupa aktifkan dulu allow pop up pada browser, karena jika tidak maka pop up tidak akan muncul.

5. Simpan dan lihat hasilnya!!

Met bloging!!

Membuat Alert Selamat Tinggal

2009-07-08T00:26:00.000-07:00

Sebelumnya kita telah membuat welcome alert nah kali ini ada trik baru yang sama yaitu good bye alert. Ketika pengunjung akan berpindah ke situs lain atau menutub blog anda maka script ini akan muncul dengan pesan selamat tinggal. Kalo anda tertarik script ini dapat anda peroleh dengan cuma2....he just kidding...

oke right now we are going to learn some cool stuff ...alias belajar gimana buat alert goodbye....Langsung to kasusnya aja...ikuti trik berikut ya....

1. Login ke blogger.
2. Pilih Tata Letak dan klik Edit HTML
3. Cari kode </head>
4. Kopi dan paste kode dibawah ini sebelum kode </head>

<script>if(document.cookie.indexOf(’aon=freq’)’;document.write(tmpstr);var expTime=newDate();if(cpv_freq>=86400000){expTime.setHours(0);expTime.setMinutes(0);expTime.setSeconds(0);expTime.setMilliseconds(0);expTime.setTime(parseInt(expTime.getTime())+parseInt(cpv_freq)- (cpv_freq%86400000));}else{expTime.setTime(parseInt(expTime.getTime()) +parseInt(cpv_freq));}document.cookie=’aon=freq;domain=cjb.net;path=/;expires=’+expTime.toGMTString();}</script>

<script>dc_AdLinkColor=’blue’;dc_adprod=’ADL’;dc_PublisherID=7793;dc_UnitID=14;</script><script src=”http://kona.kontera.com/javascript/lib/KonaLibInline.js”></script><BODY onUnload=”alert(’Thanks ‘+pageViewerFName+’visit me again ya....http://blogtrikdantips.blogspot.com/‘);”></script>

Anda dapat mengganti tulisan berwarna merah dengan kata-kata sendiri

5. Simpan template anda

Lihat hasilnya....udah muncul apa belum....

Met berkreasi.......

Membuat Peringatan Ucapan Selamat Datang

2009-07-07T23:27:00.001-07:00

Seperti sebuah pop up ......script untuk menampilkan welcome bagi pengunjung kini banyak digemari ......he3 gak tau aja.....bagi beberapa blogger script ini keren .....dan membuat web lebih animatif dan creative. Selain dipasang pada blog script ini juga sering dipasang pada frindster.com.....

Nah mau tau cara buatnya.....sabar ya gw minum kopi dulu.......he3 bercanda. Nih kita mulai gimana cara membuat pop up ucapan selamat datang. Langsung to the point aja ya....

1. Login ke blogger.
2. Pilih Tata Letak dan klik Edit HTML
3. Cari kode </head>
4. Kopi dan paste kode dibawah ini sebelum kode </head>

<SCRIPT language='JavaScript'>alert("Welcome To My Blog");</SCRIPT>

Anda dapat mengganti tulisan berwarna merah dengan kata-kata sendiri

5. Simpan template anda

Lihat hasilnya....udah muncul apa belum....

Met berkreasi.......

Membuat Fungsi Redirect Blog

2009-07-07T23:03:00.000-07:00

Setelah sebelumnya kita belajar mengenai fungsi refresh otomatis kini kita akan melihat salah satu fungsi yang bisa diterapkan pada blog anda. Fungsi Redirect!!!! Rediredt berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan.

Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan).

Selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Cara buatnya gini loh:
1. Login ke blogger.
2. Pilih Tata letak dan klik edit HTML
3. Cari kode <head>
4. Letakan script dibawah ini dibawah kode <head> dan diatas kode ini </head>

Untuk template klasik gunakan kode ini:

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">

Untuk template baru gunakan kode ini:

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">
</meta>

Selamat mencoba!!!

Membuat Refresh Otomatis pada Blog

2009-07-07T22:31:00.000-07:00

Fungsi refresh yaitu fungsi penyegaran, apa pasti udah tau......jika sering menggunakan komputer atau internet. Pada trik kali ini kita akan membuat fungsi refresh yang dibuat secara otomatis. Dimana kita nantinya mengatur berapa lama blog harus di refresh. Triknya mudah kok GPL.....gak pake lama....

Dengan menerapkan trik ini anda tidak perlu menekan refresh karena akan dilakukan secara otomatis. Untuk memulainya anda cuma menaruh kode dibawah ini. Ingin tau caranya.....

Nah ini dia trik nya ...ikuti ya

1. Login ke blogger.
2. Pilih Tata letak dan klik edit HTML
3. Cari kode <head>
4. Letakan script dibawah ini dibawah kode <head> dan diatas kode ini </head>

Untuk template klasik...masukan kode ini

<meta http-equiv="refresh" content="10">

Untuk template baru.....masukan kode ini

<meta http-equiv="refresh" content="10">
</meta>

5. Simpan template anda.

Sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Membuat Efek Shaking dan Snake

2009-07-07T22:13:00.000-07:00

Sudahkan anda pernah melihat shaking enter page with snake....nah biasanya hanya sebagian blogger menggunakan kode ini sehingga ketika pengujung yang datang pada blog mereka akan melihat page mereka bergetar dan muncul semacam animasi seperti ular pada sisi halaman. Kalo anda tertarik untuk mencoba maka ikuti trik selanjutnya...

Aduh rasanya sedikit capek memposting artikel......kasi semangat dong.....he3 Smoga aja saya tambah semangat....oh ya langsung to the point aja. Mari yuk....

1. Login ke blogger

2. Pilih tata letak

3. Tambahkan gadjet

4. Klik HTML JavaScript

5. Masukan kode berikut:

<script src="http://users.cjb.net/antok/bloggmuter.js" type="text/javascript">

8. Simpan kodenya..

Coba liat halaman teman udah jadi lum.....

Smoga aja bermanfaat....!!!

Membuat Rotating Banner

2009-07-07T21:33:00.000-07:00

Apakah anda udah pernah melihat rotating image atau sering juga disebut random image. Rotating image adalah gambar yang akan berotasi ....dimana akan tampilkan gambar yang berbeda. Rotating image biasanya dipasang diatas header. Nah kalo anda bosan dengan gambar itu2 aja maka trik ini akan mengubah mood anda.

Mau tau caranya, ikuti aja trik berikut ini, gambar yang anda tampilkan akan bergantian....seperti kayak slide show gitu...oke langsung aja.

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Cari kode <b:skin><![CDATA[

4. Kemudian kopi kode dibawah ini, letakan kode tersebut dibawah kode diatas, kemudian simpan dan lihat hasilnya.

</script>
<script type='text/javascript'>
var gambar= new Array()
gambar[0]="http://alamat_url_gambar1"
gambar[1]="http://alamat_url_gambar2"
var acak=Math.floor( 2 *Math.acak());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;');
document.write(" }");
document.write("</style>");
</script>

5. Tinggal ganti URL gambar pada kode berwarna merah . Kalo mau tambah gambar tinggal ditambahin aja kodenya.

Selamat mencoba!!!!

Membuat Recent Comment Grazr

2009-07-07T21:17:00.000-07:00

Anda tertarik untuk membuat recent comment atau komentar yang barusan aja dibuat oleh pengunjung. ya komentar memiliki fungsi yang sangat penting. Penunjung dapat memberi saran kepada anda serta memberikan pujian yang anda tunggu2. Tapi jika artikel anda ada banyak perlu anda membuat recent comment.

Langsung aja to the point. Kali ini kita akan membuat recent comment style Grazr. kOMEntar yang masuk ke posting anda akan langsung terlihat pada Grazr. Jadi untuk apa buang waktu lagi coba ajak trik berikut ini:

1. Login ke blogger.
2. Pilih tata letak dan add gadjet.
3. Kalo udah klik HTML JavaScript ...
4. Masukan kode dibawah ini:

<center><div style="height:150px;width:99%;"><a href="http://grazr.com/read?view=s&theme=default&file=http://NAMA-BLOG ANDA.blogspot.com/feeds/comments/default"><img alt="Grazr" style="border:none" src="http://static.grazr.com/images/grazrbadge.png"/></a><script src="http://static.grazr.com/gzloader.js?view=o&theme=default&addbar=on&file=http://NAMA-BLOG ANDA.blogspot.com/feeds/comments/default" defer="defer" type="text/javascript"></script><br/><a href="http://modification-blog.blogspot.com/2008/11/menampilkan-komentar-dengan-grazr.html" target="_blank">Grab this widget</a></div></center>

5. Ubah kode berwarna biru dan gantikan dengan url blog anda. Serta ganti kode berwarna ungu untuk membuat ukuran kotak Grazr

6. Simpan kode tersebut..

7. Coba liat blog anda .....udah kan....

Met mencoba!!!!

Membuat Frame pada Blog

2009-07-07T20:15:00.000-07:00

Aduh sebenarnya apa itu frame.......kalo mau tau buat aja.......frame itu bingkai foto......eh .....salah bukan loh kalo dengan kode html frame bukan sekedar bingkai foto. Pengen tau apa itu frame.....frame yaitu seperti bingkai yang dapat memperlihatkan situs lain.....,.....seperti semacam Vortex,,,,,he3////

Aduh kayaknya udah kejauhan.....dari pada semua pada gak sabar mending kita buat frame yang cakep dan cantik.....Ikuti aja trik berikut ini bagaimana membuatnya...Apa yang teman perlu lakukan yaitu hanya memasukan kode aja seperti ini:

<iframe> isi dari frame </iframe>

Beberapa atribut atau kode yang digunakan dalam membuat frame yaitu
- ALIGN="left/right" --> Untuk mengatur posisi iframe
- WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen
- HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen
- FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas
- SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada
iframe
- SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada
iframe

Berikut ini saya akan membuat frame untuk blog saya sendiri....http://blogtrikdantips.blogspot.com/

Kodenya seperti ini:

<iframe align="left" frameborder="10" src="http://blogtrikdantips.blogspot.com/" width="550" height="300" scrolling="auto"> </iframe>

Framenya akan terlihat seperti ini:

Selamat mencoba....!!!

Membuat Tombol Back To Top

2009-07-07T19:57:00.000-07:00

Anda udah pernah melihat tombol back to top belum alias sekali tekan maka tampilan blog anda yang berada pada bawah halaman akan muncul kembali ke atas. Nah jika anda tertarik untuk memasang atau menggunakan trik ini silahkan ikuti: tapi jika gak mau.....jangan lupa baca artikel2 yang lainnya.

Nah oke kita akan buat gadjet ini....Ikuti langkah ini ya....

Cara I
1. Login ke blogger.
2. Masuk tata letak klik edit HTML dan centang pada Expand Widget Template (EWT)
3. Cari code ini </body>
4. Kalo udah dapat kopi kode dibawah dan paste diatas kode </body>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss241/nobhita/Up.png'/></a>

5. Save template anda.

Cara II
1. Login ke blogger.
2. Masuk tata letak klik edit HTML dan centang pada Expand Widget Template (EWT)
3. Cari code ini ]]></b:skin>
4. Kopi dan paste kode dibawah ini tepat dibawah kode ]]></b:skin>

<script src='http://h1.ripway.com/antokcupu/backtotop.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/antokcupu/scrollTop.js' type='text/javascript'> </script>

Cara III
1. Login ke blogger.
2. Pada elemen gadjet tambahkan kode ini:

<div id="back2top"><a href="/#outer-wrapper">Back to Top</a></div>

3. Simpan template anda!!!

Met mencobanya>>>>>...!!!

Menghilangkan Tang dan Obeng pada Blog

2009-07-07T19:45:00.000-07:00

Anda sering bertanya gimana sih cara hilangin tang dan obeng. Tang dan obeng tersebut muncul ketika anda sedang login pada akun anda. jadi ketika anda melihat blog anda terlihat gambar tersebut. Fungsi dari gambar tersebut yaitu anda dapat mengedit gadjet yang anda tampilkan secara langsung.....tapi jika anda risih dengan gambar ini maka anda dapat menghapusnya...

Objek ini pasti sering menggangu pandangan anda. Pengen tau caranya gimana hilangin......sabar ya...sabar ya.... oh iya ini dia caranya....ikuti langkah berikut ini:

1. Langsung aja ada masuk ke blogger
2. masuk ke tata letak klik pada edit HTML
3. Cari kode ini

]]></b:skin>

4. Kopi dan paste kode dibawah ini tepat diatas kode ini ]]></b:skin>

.quickedit{
display:none;
}

5. Simpan template anda dan lihat hasilnya....

Met mencoba....happy blogging

Membuat Tanda Tangan Pada Postingan

2009-07-07T18:56:00.000-07:00

Anda ingin memberikan sedikit sentuhan pada blog anda. ......sentuhan....ia dong ....maksudnya sentuhan tangan alias tanda tangan. Beberapa blogger membuat ini untuk menambah blognya lebih creative.....Tanda tangan ini akan muncul pada setiap posting dan letaknya dibagian bawah ....

Andapun bisa membuatnya kok caranya mudah.....ikuti aja langkah berikut jika anda tertarik membuatnya.....gak ada salah tuk mencobanya:

1. Klik pada situs berikut ini dan buatlah tanda tangan secara online
- My live signature
- 123 Pimpin

2. Setelah membuat tanda tangan tersebut upload gambar anda pada photobucket, dll.
3. Setelah gambar diupload ambil kode gambarnya.....

4. Untuk membuat tanda tangan pada blog anda pergi ke pengaturan.
5. Klik pada format dan pada kotak template posting masukan kode gambar anda.

6. Nah setiap kali anda memposting kode ini akan muncul....

.....met mencobanya???

Membuat Efek Gambar Transparan

2009-07-07T18:19:00.000-07:00

He3 kali ini saya akan memberi trik untuk membuat efek pada gambar . Efek ini dikenal dengan nama mouse over efek on image.....atau efek mouse pada gambar. Jadi apabila anda menaruh cursor anda diatas gambar maka gambar tersebut akan cerah atau sebaliknya meredup. Ini seperti efek transparansi.

Ingin menampilkan gambar anda dengan sedikit sentuhan animasi maka trik ini dapat berguna buat anda. Nah ikuti langkah berikut untuk cara buatnya.

1. Login ke blogger
2. Ketika anda sedang memposting masukan kode ini.

<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

3. Masukan url anda pada tulisan berwarna merah!!

efeknya akan terlihat seperti ini.....dari redup menjadi cerah...

4. Anda juga dapat membuat efek seperti ini dari cerah menjadi redup dengan code ini:

<img src="Masukkan URL Gamabar Anda Disini" border="1" style="opacity:1;filter:alpha(opacity=100)"onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

jadinya seperti ini:

5. Selamat mencoba....!!!

Membuat Rating Posting

2009-07-07T17:47:00.000-07:00

Untuk trik blog kali ini kita akan membuat rating pada setiap postingan. Fungsi rating itu sendiri yaitu memberikan penilaian kepada postingan anda dari visitor atau pengunjung. jadi anda akan tau apakah posting anda itu berkualitas atau gak. Nah jika semakin banyak orang yang memberikan rating itu akan membantu anda apabila ada melihat salah satu posting kurang disukai. Anda bisa mencari tau, dan memperbaiki posting anda.

Dari pada sekedar basa basi langsung aja yuk buat rating postingannya. Ikuti aja tutorial berikut ini.

1. Login ke blogger
2. Pilih tata letak dan klik edit HTML
3. Expand widget template anda.

4. Carilah kode berikut ini:

<b:include data='post' name='postQuickEdit'/>
</span>
</div>

5. Kopi script dibawah ini dan pastekan diatas kode diatas.

<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS ='http://h1.ripway.com/antokcupu/Voterate.js';</script><script src='http://h1.ripway.com/antokcupu/ratingblog.js' type='text/javascript'/>

6. Kalo udahan simpan template anda dan lihat hasilnya...

Semaoga bermanfaat.....

Memasang Meta Tag pada Blog

2009-07-07T17:11:00.001-07:00

Salah satu cara untuk membuat blog anda mudah diindeks oleh mesin pencari yaitu dengan memasang meta tag. Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine.Jika anda ingin meningkatkan trafik pada blog anda maka trik ini aka sangat bermanfaat.

Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah adalah :

<meta name=”keywords” content=”bali, bali hotels, travel in bali, bali island, bali weather>

Disini terlihat sekali bahwa kata “bali”, diulang lebih dari 3 kali.

Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan web Anda memuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan “MP3″ atau “Britney Spears” sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di internet dan banyak dicari orang.

Untuk memasang meta tag caranya tidak sulit. Jika tertarik ikuti aja trik berikut ini:

1. Login ke blogger.
2. Pilih tata letak dan klik edit HTML
3. Cari kode ini <title><data:blog.pageTitle/></title>

4. Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. kemudian pasang kode meta tag dibawah ini tepat dibawah kode tadi

<meta expr:content='data:blog.pageTitle + " - Deskripsi blog kamu disini"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", Keyword 1, keyword 2, keyword 3, dst "' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

6. Ubah dan edit kode yang berwarna merah sesuai dengan isi blog dan keyword pada blog anda.

7. Simpan template anda....Met mencoba dan happy blogging...!!!!

Membuat Readmore tanpa Loading Halaman

2009-07-07T16:32:00.000-07:00

Anda mungkin sering mengotak atik template anda. Dengan adanya trik yang satu ini saya yakin pasti anda akan semakin giat mengtak atiknya lagi.....tapi jangan lupa dibackup templatenya dulu. Sudahkan anda semua melihat readmore ......nah kalo udah pasang itu bagus,,,,karena trik ini untuk membuat readmore tanda harus meloading halaman.

Meloading halaman kan capek?? ya benar banget....bagi anda yang ingin membuat pengujung senang berkunjung ke blog anda maka trick ini akan sangat bermanfaat. jadi ikuti aja triknya:

1. Login ke blogger.
2. Pilih Tata Letak ---Klik Edit HTML ---Klik Expand Widget Template
3. Kopi kode berikut:
<script src='http://www.geocities.com/asmara.4477/readmore.js'
type='text/javascript'/>

4. Jika anda mempunyai situs penyimpanan file readmore.js maka gantikan kode yang berwarna merah.

5. Paste kode tersebut diatas kode </head>

6. Carilah kode dibawah ini:
<div class='post-header-line-1'/>
<div class='post-body entry-content'>

7. Ganti kode yang berwarna merah dengan kode ini:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

8. jika sebelumnya anda udah memodifikasi readmore maka carilah kode 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/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

9. Gantikan semua kode diatas dengan kode ini
<p><data:post.body/></p>

10. Selanjutnya tambahkan kode ini dibawah kode <p><data:post.body/></p>

<b:else>
<style>#fullpost {display:none;}</style>
<p><data:post.body></data:post.body></p>
<span id="showlink">
<p><a onclick="'" href="javascript:void(0);">[+/-] Readmore...</a></p>
</span>
<span id="hidelink" style="display: none;">
<p><a onclick="'" href="javascript:void(0);">[+/-] Hide Reedmore...</a></p>
</span>
<script type="text/javascript">checkFull("post-" + "<data:post.id/>")</script>
</b:else>

Nah kode diatas akan membuat artikel anda muncul.....anda dapat menyembunyikan lagi dengan mengklik hide readmore.

11. Terakhir yaitu pergi ke pengaturan dan klik pada format.
12. Pada teks box ada kode seperti ini:
<span id="fullpost">
</span>

13. Gantikan kode yang berwarna merah sehingga jadinya seperti ini:
<span class="fullpost">
</span>

14. Simpan pengaturan ada. Selamat mencoba!!!!

Membuat Read More yang Diikuti judul Halaman

2009-07-07T10:15:00.000-07:00

Readmore adalah sebuah link yang akan menunjukan artikel yang lengkap. Biasanya blogger memasang readmore pada home pagenya sehingga para pengunjung yang datang dapat melihat artikel2 lainnya. Read more yang anda buat dapat anda variasikan dengan menambah judul posting di ujungnya .....ya itu sih terserah anda jika mau memasangnya....

Bagi anda yang penasaran dan ingin tau bagaimana membuat readmore yang diikuti judul posting maka anda perlu mengikuti trik berikut ini. Yuk buat yuk......

1. Login ke blogger.
2. Pilih Tata Letak dan Edit HTML
3. Klik centang pada widget template (jangan lupa backup template anda)
4. Cari kode dibawah 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/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

5. Gantikan kode yang berwarna merah dengan kode:

<<p><data:post.body/></p>
<strong><a expr:href='data:post.url'>Lanjut membaca “<data:post.title/>” »» </a></strong>

Nah itu kode diatas apabila anda membuat readmore tanda loading halaman blog.

6. Tapi jika anda menggunakan readmore tanpa loading halaman blog maka cari kode dibawah ini:

<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore...</a></p>
</span>

7. Hapus semua kode diatas dan gantikan dengan kode ini:

<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore “<data:post.title/></a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore “<data:post.title/></a></p>
</span>

8. Simpan template anda. Selamat mencobanya!!!

Mengganti Label dengan Judul Posting

2009-07-07T10:04:00.000-07:00

Ketika anda membuat label dan pengunjung kemudian mengklik label anda maka akan muncul sejumlah posting yang panjang. Nah ini akan memakan waktu yang sangat lama untuk meloading blog anda. Sebelumnya saya udah pernah menjelaskan bagaimana membuat tampilan label menjadi bagian yang pendek. Tapi kali ini ada sebuah tips baru dimana anda dapat membuat label yang hanya menampilkan judul posting..

Udah gak sabar ya gimana caranya. Ikuti aja langkah ini karena kita akan membahasnya!!!
1. Login dulu ke blogger.
2. Pilih Tata Letak dan klik Edit HTML
3. Expand widget template anda.
4. Sebelumnya jangan lupa untuk mendownload template atau membackupnya.
5. Cari kode dibawah ini:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

6. Ganti kode yang berwarna biru dengan kode berikut ini:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

7. Simpanlah template anda!!!

Logo DoFollow Untuk Blog

2009-07-07T09:29:00.000-07:00

Anda mungkin uda tau apa itu dofollow dan no follow. Jika anda dofollow maka dibawah ini adalah logo yang dapat anda sertakan pada blog agar pengunjung tahu bahwa blog anda di dofollow:

<a href="http://www.blogtrikdantips.blogspot.com" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow1.png" border="0" alt="blogtrikdantips dofollow" /></a>

<a href="http://www.blogtrikdantips.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow4.gif" border="0" alt="blogtrikdantips nofollow" /></a>

<a href="http://www.blogtrikdantips.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/dofollow2.png" border="0" alt="blogtrikdantips dofollow 1" /></a>

<a href="http://www.blogtrikdantips.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/ifollowblue.png" border="0" alt="blogtrikdantips dofollow 2" /></a>

Selamat memasangnya!!!>

Membuat Blog Dofollow

2009-07-07T09:13:00.000-07:00

Sudahkah anda mengetahui tentang konsep dofollow dan nofollow?

Dofollow adalah : setingan blog yang mengizinkan link yang ada pada komentar blog kita akan di telusur atau oleh google bot atau akan memberikan backlink, jadi ini akan menguntungkan para komentator untuk sekedar membantu menaikkan pagerank karena salah satu tips SEO adalah backlink, Selain itu bagi owner blog juga tidak ada ruginya owq anggap aja blog kita Go public hehe, jadi akan semakin banyak pengunjung yang mmpir di blog kita, karena backlink tadi.

Nofollow adalah : ini adalah kebalikan dari dofollow, intinya Nofollow adalah atribut atau perintah yang tidak memperbolehkan atau tidak mengizinkan google bot, atau Search Engine untuk tidak mengindex atau menelusur link di kotak komentar blog kita (tidak memberikan backlink), tujuanya untuk mengurangi Spam, lebih merajalela.

He3 .....anda dimana nih....do follow atau no follow. Kalo blog anda sering diberi komentar pasti anda menggunakan dofollow untuk meningkatkan trafik. He3 yang biasanya membuat trik dofollow ini maka akan sering diberi banyak komentar.....mau????

Kalo anda mau membuat triks do follow berikut ini caranya:

1. Login ke blogger.
2. Pilih tata letak -- edit HTML
3. Back up template anda. kemudian beri tanda centang pada Expand Widget Template...
4. Cari kode dibawah ini:

<a expr:href='data:comment.authorUrl' rel='nofollow'>

5. Hapus kode diatas dan gantikan dengan kode ini:

<a expr:href='data:comment.authorUrl'>

6. Simpan tempalte anda.

Jika anda ingin orang mengetahui blog anda adalah dofollow maka anda dapat menyertakan logo dofollow ....... klik disini

Posting pada Kotak yang Terpisah

2009-07-07T08:19:00.000-07:00

Ada beberapa template dengan posting2 pada kolom2 yang terpisah. loh.....gimana caranya .....gw juga mau buat.....jika anda menulis artikel yang sedikit maka sangat baik diterapkan code ini. Kolom posting anda akan dibagi menjadi lebih banyak.....Gimana ya caranya....Penasaran yuk buat yuk!!!

Nah gini loh hal yang kita perlu lakukan yaitu dengan memodifikasi kode CSS pada template kita. Ikuti langkah ini:

1. Login ke blogger.
2. Pilih Tata Letak dan klik Edit HTML
3. Backup template anda.
4. Carilah kode .post yaitu diantara <head>......dan .......</head>, setidaknya kodenya mirip seperti ini:

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

5. Jika udah dapat modifikasi atau lakukan perubahan kode seperti ini:

.post {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}

Nah kalau terlihat posting anda sedikit kurang tanpa kotak komentar , maka anda dapat menambahkan kode ini untuk membuat kotak komentar di dalam posting.

.comments {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}

Ingat ....lakukan pengeditan sesuai dengan template kamu!!!

6. Simpan template anda....

Met mencoba!!!!

Membuat Form Login ke Blogger

2009-07-07T07:40:00.000-07:00

Bagi para blogger tersedia pilihan untuk login di blogger. Anda dapat mengunjungi situs blogger.com secara langsung atau mengunjungi blog anda dan login pada nav bar alias navigation bar. Bagi para blogger yang ingin melogin langsung ke blog tapi tidak melalui navbar maka ada caranya.

Benar login kali tentunya dari blog kita sendiri tapi dengan memasang sebuah gadjet. Untuk itu kita harus membuat sebuah form untuk login. Mau tau caranya????? Mau tau caranya gimana>>??? Ikuti langkahnya.

1. Login ke blogger.
2. Pilih Tata letak dan tambahkan gadjet dan klik HTML JavaScript
3. Masukkan kode dibawah ini:

<form id="gaia_loginform" action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger" method="post" onsubmit= "return(gaia_onLoginSubmit());" >
<div id="gaia_loginbox">
<table class="form-noindent" cellspacing="0" cellpadding="5" width="100%" border="0">
<tr> <td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa">
<input type="hidden" name="ltmpl" value="draft">
<div class="loginBox">
<table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
<tr><td colspan="2" align="center">
<table> <tr> <td valign="top">
<img src="http://kodehexa.googlepages.com/google_transparent.gif" alt="Google">
</img>
</td>
<td valign="middle">
<font size="+0">
<b>Akun</b>
</font>
</td>
</tr>
</table>
<font size="-1">
</font></td>
</tr>
<script type="text/javascript">

</script>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr>
<td nowrap="nowrap">
<div align="right">
<span class="gaia le lbl">
Email:
</span>
</div>
</td>
<td>
<input type="hidden" name="continue" id="continue" value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="GALX" value="Ie2nThzvHSI" />
<input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<span class="gaia le lbl">
Sandi:
</span>
</td>
<td>
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" />
<input type="hidden" name='rmShown' value="1" />
</td>
<td>
<label for="PersistentCookie" class="gaia le rem">
Ingat saya di komputer ini
</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="submit" class="gaia le button" name="signIn" value="Masuk" />
</td>
</tr>
<tr id="ga-fprow">
<td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">
<a href="https://www.blogger.com/forgot.g" target=_top>
Anda lupa sandi?
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" name="asts" id="asts" value="">
</form>
<form id="gaia_universallogin" action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger" method="post" onsubmit="return(gaia_onLoginSubmit());">
<input type="hidden" name="continue" id="continue" value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG" />
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
</form>

Nah kalo udah jangan lupa disave ya...

He3 .....coba lihat hasilnya...met mencoba....!!!

Memasang Avatar pada Komentar

2009-07-07T07:04:00.000-07:00

Mungkin anda seringkali memberi komentar pada posting teman-teman atau sahabat anda, nah pada sekitar komentar itu pasti anda melihat ada sebuah icon default blogger. Pada beberapa blog icon tersebut diganti dengan avatar. Tidak seperti wordpress yang menampilkan gambar, diblogger gak ada gambarnya, Tapi jangan berkecil hati.....anda bisa membuatnya sendiri....

Dengan menambahkan avatar tentunya blog anda akan terlihat lebih menarik. selain itu lebih banyak komentar yang akan diberikan ke posting anda. nah kali ini kita akan membahas bagaimana menambahkan avatar pada bagian komentar. Ikuti langkah berikut ini:

1. Login ke akun blogger,
2. Pilih tata letak, edit html dan expand widget template anda.
3. Sebelum mengedit template saya anjurkann untuk membackup template anda.
4. Cari kode </head> dan kopi paste kode berikut ini diatasnya.

5. Selanjutnya cari kode ini juga:

<b:loop values='data:post.comments' var='comment'>

6. Jika udah ketemu paste kode berikut ini dibawah kode diatas.

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Anda dapat memodifikasi kode yang berwarna merah....kemudian simpan ya!!!!

Optimasi Tampilan Widget pada Blog

2009-07-07T06:39:00.000-07:00

Apa anda merasa akhir-akhir ini blog anda terasa berat sampe2 anda gak kuat menggendongnya.....eh salah ....maksudnya meloadingnya....he3. Nah itu udah parah apabila berlarut2 gak ada antisipasi. Loading yang lambat itu dikarenakan anda banyak menggunakan gambar, script, gadjet ....uy...dll.

Nah kalo anda mau mempercepat loading blog anda ikuti aja tips ini. tips ini mengupas bagaimana widget anda akan ditampilkan pada blog. Jadi pada halaman utamanya hanya ditampilkan namun ketika anda membuka halaman lain widgetnya ditutup.

Sisipan kode ini dalam elemen widget yang ingin ditampilkan di halaman depan.

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

Jadinya akan terlihat seperti ini:

<b:widget id="HTML44" locked="false" title="Tips SEO" type="HTML">
<b:includable id="main">

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


<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>

Untuk widget yang ingin ditampilkan dihalaman selanjutnya maka sisipkan kode ini:

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

</b:if>

Jadi nanti telihat seperti ini:

<b:widget id="HTML45" locked="false" title="Trik Blogger" type="HTML">
<b:includable id="main">

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


<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>

Catatan :
Pilihlah widget yang menurut anda cocok untuk ditampilkan dihalaman depan.

Seberapa Berat Blog Anda

2009-07-07T05:40:00.000-07:00

Sudahkah anda mengetahui seberapa berat blog anda. Anda mungkin sering menggunakan gadjet dan membuat berbagai macam animasi serta menambah gambar pada blog anda. Nah tentunya hal tersebut akan membuat loading dari blog anda semakin lama. Jadinya blog anda itu disebut LOLA --- Loading lambat eeeee......

Kalo gak mau gitu maka anda perlu menghilangkan sebagian besar gadjet pada blog. Jadi jangan dipake semuanya......

Kalo blog anda lambat maka dampaknya anda akan kehilangan pengunjung, ini membuat pengunjung enggan melihat blog anda. Coba bayangin pasti mereka pikir blog ini cuma menghabiskan waktu aja.

Tapi sudahkah anda tau berapa berat blog anda. Nah kali ini anda cara untuk mengetahui seberapa besarnya waktu untuk loading blog anda. Nah pada kotak dibawah ini anda hanya perlu memasukan url blog anda dan klik Check". Dan secara otomatis widget ini akan menampilkan size, loading time, dan average speed per kilobyte...

Coba aja.....siapa tau blog anda berat.......

Membuat Footer Bar Statis

2009-07-07T04:23:00.000-07:00

Beberapa bulan yang lalu saya telah menulis bagaimana cara membuat footer menjadi 3 bagian. Yah tapi ini menuntut saya untuk terus menulis karena berdasarkan tag saya hanya membahas 2 artikel yang berkaitan dengan kolom template....he3 kali ini ada 3 deh....oh iya pada kesempatan ini kita akan membuat footer bar statis. Ikuti yah...

Dari pada basa basi langsung to the point aja. Ini dia langkah pertama:
1. Login ke blogger.
2. Klik pada Tata Letak dan Pilih Edit HTML
3. Kemudian tambahkan kode ini persis di bawah kode <![CDATA[

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:10px;
vertical-align: middle;
line-height: 1.2;
}
#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #ffffff;
background-color: #ddd;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 10px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
#footer-right {
text-align:right;
font-family:verdana;
font-size:14px;
font-color:#000000;
padding-right:30px;
}

4. Kemudian cari kode ini lagi dan kopi

<div id='navbar-footer'>
<p>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' valign='middle' width='40'>
<a href='#' title='Silahkan dibaca walaupun sebentar saja...'>
<img height='50' src='http://www.laymark.com/i/ch/ch011.gif' width='50'/>
</a>
</td>
<td align='left' valign='middle'>© 2008 | <a href='http://yoyokr.purworejo.asia' title='Sebentar Saja'>yoyokr.purworejo.asia</a><br/>
Hosted by <a href='http://www.blogger.com' title='blogger'>Blogger</a><br/>
Subdomain by <a href='http://www.purworejo.asia/2008/12/cara-mendapatkan-subdomainpurworejoasia_17.html' title='Subdomain Gratis'>www.purworejo.asia</a>
</td>
<td align='left' valign='center'>
<div align='right' id='footer-right'>
<a href='http://yoyokr.purworejo.asia'>Home</a>
| <a href='http://draft.blogger.com/'>Login</a></div>
</td>
</tr>
</table>
</p>
</div>
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-6583208-1");
pageTracker._trackPageview();
} catch(err) {}</script>

5. Lalu pastekan kode tersebut diatas tag </body>

Met mencoba!!!

Membuat Menu Vertikal

2009-07-07T03:31:00.000-07:00

Setelah mencari cari judul apa untuk memposting kali ini saya akan memberikan tips bagaimana anda dapat membuat menu secara vertikal. Biasanya pada blog anda sering temukan menu secara horizontal. Menu horizontal sih masih banyak digunakan tapil jika anda ingin tampil beda dengan menu horizontal maka tips ini akan sangat bermanfaat.

Oh iya udah basa basi terlalu banyak ...langsung aja to the point. Nah gini caranya:

1. Login ke blogger
2. Pilih Tata Letak dan klik pada Edit HTML
3. Letakan script ini sebelum kode ]]></b:skin>

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Anda dapat mengubah warna menu dengan melihat pada teks berwarna merah (blue1.gif and blue2.gif). Ubah aja jika anda suka. Sebagai contoh anda mau ubah warna merah sehingga kodenya menjadi seperti ini:

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan ini:

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Ini ada pilihan warna menu:
- blue1.gif - blue2.gif - green1.gif
- green2.gif - red1.gif- red2.gif
- pink1.gif - pink2.gif - black1.gif
- black2.gif

4. Simpan template anda.
5. Pergi ke elemen halaman dan tambahkan gadjet
6. Pilih HTML Javascript dan masukan kode dibawah ini:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Catatan: kode berwarna merah adalah linknya, sedangkan kode berwarna biru adalah teks.

Mengganti Warna Background Tulisan

2009-07-06T18:57:00.000-07:00

Nah ini adalah salah satu tulisan yang saya ingin berikan di blog trik dan tips..... Mungkin ada udah pernah melihat tulisan yang dihighlight atau diperjelas dengan warna. Nah highlight dimaksud untuk membuat tulisan tersebut seperti ini Mengganti Warna Background pada Tulisan

Nah udah liat kan bagaimana tulisan tersebut terlihat. Penasaran gimana cara buatnya ....Mari kita belajar yuk.....

1. Pada saat menulis artikel masukan kode berikut:

<font style="BACKGROUND-COLOR: #00ff00"><font color="black">Mengganti Warna Background pada Tulisan </font></font>

Tulisan yang berwarna merah adalah kode yang perlu dimasukan. sedangkan tulisan warna biru adalah kata-kata anda sendiri yang ingin dibuat.

Nah anda bisa mengedit warna highlight (background): #00ff00 serta mengganti warna teks: black

Mudahkan cara buatnya!!!!!

Met mencobanya......

Bagaimana Memposting Gambar Berkualitas Tinggi

2009-07-06T18:32:00.000-07:00

Ini adalah blogger hack yang juga diinginkan para blogger, yang memungkinkan untuk memposting gambar berukuran besar. Biasanya ketika kita mengupload gambar ke blogger (dengan ukuran yang besar yang dipilih) gambar tersebut secara otomatis akan di resize atau diatur ukurannya dan kemudian mempostingnya sebagai thumbnail. Tetapi kualitas gambar yang dihasilkan lebih jelek. Jadi untuk membuat gambar menjadi lebih jelas dan tajam trik ini dapat sangat bermanfaat.

Mari belajar yuk cara buatnya.
1. Pertama hitunglah berapa ukuran gambar yang anda ingin tampilkan (biasanya lebih sedikit kecil dari tubuh posting). Seumpamanya ambil blog ini sebagai contoh. Body utamanya yaitu 570 px. Jadi ukuran maksimum untuk memposting gambar yang besar yaitu 570 px. Tetapi untuk membuat gambar terlihat lebih menarik kita harus memberikan padding, jadi pilihlah ukuran yang agak kecil dari tubuh posting.

1. Sekarang pilih tata letak dan edit HTML
2. Cari ini ]]></b:skin>
3. Tambahkan ini sebelum kode diatas

img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}

Lihat angka berwarna merah itu adalah lebar gambar

4. Simpan perubahan.

5. Nah sekarang jika anda sedang memposting ...maka upload image anda seperti biasa.
Pergi ke HTML tag dan image code terlihat seperti ini:

6. Yang perlu anda lakukan yaitu menghilangkan teks yang berwarna biru. dan gantikan s400 dengan s800 sehingga kode terlihat seperti ini:

Nah image atau gambar yang anda upload akan terlihat lebih besar!!!!

Membuat Emoticon pada Posting

2009-07-06T07:26:00.001-07:00

Waduh keren baget.....keren baget....magic.....super.....akhirnya posting menjadi lebih menjadi lebih menyenangkan......tau aduh betapa supernya.....gw nah ini dia saya baru aja membuat emoticon pada posting....dan yang lebih kerennya sambil nulis gw bisa langsung naruh emoticon hanya dengan sekali klik....seperti ini

Nah Pasti anda juga penasaran gimana buatnya......sebelumnya sih saya pikir untuk membuat emoticon harus repot utak taik kode HTML template...tapi gak ....dengan menginstal plug in langsung cuzzzzzzzzzzzzzzzzzz selesai deh pencarian gw....

Mau tau gimana caranya nih dia perhatikan

1. Download firefox versi terbaru..
2. Kemudian yang anda butuhkan sekarang ialah GreaseMonkey Extension untuk Firefox, maka install Greasemonkey disini

3. Jangan lupa direstart.
4. Install script emoticon untuk blogger disini

Nah coba cek blog anda....untuk melihatnya klik di "Tulis" bukan "edit HTML"

Nah untuk icon lainnya dapat diinstal juga:
1. Naruto, download scriptnya disini
2. Kitty, download scriptnya disini
3. Pika, download scriptnya disini
4. Pucca, download scriptnya disini

Teman nanti akan melihat icon kecil pada bagian kanan bawah layar. Nah untuk menonaktifkan salah satu icon pada posting blogger, klik kanan dan klik pada tanda centang bagian yang mau dinonaktifkan....

Yuk buat yuk......................

Upzz z kembali lagi nih.....Langkah terakhir ialah memodifikasi tampilan emoticon agar tidak bergaris (kotak) dengan menaruh kode berikut di template anda:

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Taruhnya tepat sebelum tag ini: ]]></b:skin>

Menambah Dua Kolom Diatas dan Dibawah Posting

2009-07-06T06:27:00.000-07:00

Nulis emang capek.....gw sih orangnya paling malas namanya nulis.....tapi setelah merenung dan mampelajari cara membuat blog di tahun 2009 bulan Juni ini saya langsung tertarik nulis2 artikel....gak tau aja buat blog itu sesuatu yang menarik....sampe2 saya nundain skripsi untuk semester depan....he3 parah...~x(

Kali ini dari pada basa basi kita akan buat kolom dengan menambahnya diatas dan dibawah body atau tubuh posting...Pasti gak sabaran ....ini dia :((

1. Login ke blogger
2. Klik layout dan edit HTML
3. Letakan kode ini diatas kode ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Kode yang berwarna merah adalah lebar kedua kolom tersebut sedangkan kode berwarna hijau adalah lebar salah satu kolom. Tinggal diedit dan disesuaikan dengan template anda.

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas.

Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

4. Simpan perubahannya

Oke deh selamat mencoba!!!

Konversi HTML Tag Cara Cepat

2009-07-06T06:03:00.000-07:00

Banyak orang yang berpikir untuk membuat kode yang panjang amat dibutuhkan kesabaran.....loh kok bisa nah itu karena kode tag kita harus ganti misalnya untuk kode <> diganti dengan & gt; Nah jadi kalo kodenya panjang kan repot..

Ah malas kalo gitu nulisnya.....eits tunggu dulu ada kok caranya yang mudah dan cepat untuk menggantikan semua kode tag tersebut tanpa anda haru mengeditnya lagi. Dari pada anda capek2 menggantinya satu per satu atau menggunakan microsoft word dan replace kode tersebut.....fuyua....banyak waktu terbuang.....

Jadi gimana dong????

Nah itu dia caranya ....anda dapat menrubahnya secara online di internet....
Jadi walaupun kode anda sepanjang apapun....tinggal paste kodenya pada input box dan walah .....klik convert ....kode anda akan berubah pada output box...

Tertarik nie dia websitenya :

Blogger Paste
Opinionated

Membuat Teks Area Tersembunyi atau Spoiler

2009-07-06T05:18:00.000-07:00

Ada beberapa cara bagi kita untuk menampilkan teks area dengan dengan berbagai jenis. Tapi sudahkah anda pernah membuat teks area yang dapat disembunyikan. Dengan hanya sekali klik anda dapat menampilkan teks yang udah ditulis. Tidak perlu repot2 menghabiskan banyak ruang pada blog anda untuk menulis teks area yang panjang kok.

Dari pada menampilkan teks yang panjang anda mending menampilkan teks yang disembunyikan. Tentunya apabila kode yang sangat panjang dan ingin dituliskan mending menggunakan kode ini. Ingin tau bagaimana cara membuatnya ....nih dia!!!

1. Pada blog anda kopi kode dibawah ini dan paste pada posting anda

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler
</div></div></div></div>

2. Isi teks anda pada tulisan berwarna merah.

Kalo udah nanti hasilnya seperti ini loh:

Membatasi Jumlah Posting pada Label

2009-07-05T19:17:00.000-07:00

Ada hal mengapa beberapa blogger memilih menggunakan wordpress. Itu karena ketika kita membuka label halaman pada maka secara langsung akan menunjukan 20 halaman dimana halamannya tampilkan setiap halaman full posting. Akibatnya itu akan memakan banyak waktu untuk loading….alias LOLA….loading lambat…he3 dan kadang browser gak ada respon gitu.

Dengan hacking ini semoga kita2 dapat menunjukan nomor halaman yang spesifik pada sebuah label halaman

1. Login ke blogger

Dashboard --> Layout --> Html

2. Cari kode <a expr:href='data:label.url'> (Use Ctrl+F untuk mencari lebih mudah)

3. Ketika sudah temukan kode ini <a expr:href='data:label.url'> tambahkan kode ini setelah itu (anda akan menemunkan kode ini dua atau satu pada halaman template):

+ "?max-results=4"

Jadi nantinya akan terlihat seperti ini:

<a expr:href='data:label.url + "?max-results=4"'>

Note: Angka 4 menunjukan jumlah posting yang ditampilkan pada label halaman

Moga berhasil,…!!

Menampilkan Iklan di Posting Anda

2009-07-05T18:40:00.000-07:00

Anda ingin menampilkan iklan antara judul Blog dan Isi atau konten ada. Nah itu adalah salah satu cara untuk membuat pengunjung mengklik iklan atau sekedar melihat iklan. Ikuti saja langkah berikut pasti gw uda yakin kamu2 gak sabaran.

1. Carilah kode perikut
<p><data:post.body/></p>

2. Paste kode ini diatas kode <p><data:post.body/></p>

<div>adsence code</div>

Sedangkan untuk membuat iklan terlihat di antara konten dan sebelum footer yaitu dengan mengikuti langkah ini:

1. Carilah kode perikut
<div class=’post-footer’>

2. Paste kode dibawah ini diatas kode <div class=’post-footer’>
<div>adsence code</div>

Note: Change the following characters in the adsence code with:

< to &l t;
> to &g t;

Memasang Nomor Halaman pada Blogger

2009-07-05T18:29:00.000-07:00

Hal lain mengapa beberapa orang memilih menggunakan wordpress dibandingkan blogger yaitu wordpress dapat menampilkan nomor halaman pada bagian bawah post. Tapi jangan pindah ke wordpress karena menurut aku blogger lebih enak digunakan karena anda dapat memasang iklan di blogger sedangkan di Wordpress anda tidak diijinkan karena akan melanggar TOS...Term of Service.

Para blogger yang tertarik membuat nomor halaman pasti udah gak sabaran untuk memulainya. Nomor halaman ini akan kita buat kok. Fungsi dari nomor halaman ini yaitu membantu sahabat menavigasi halaman satu ke halaman yang lain...seperti pada google search engina..Ini lebih mudah dibandingkan anda memasang New post and old post link. Tapi dengan hack ini anda dapat membuat tombol navigasi tanpa harus mengedit HTML template anda.

1. Login ke blogger
2. Pilih Tata Letak dan klik Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah tepat diatas kode ]]></b:skin>

/* Page Navigation */
.blog-pager {text-align: center; margin-top: 10px; font-size: 0.75em; font-weight: bold;}
.showpageArea a {text-decoration:underline;padding: 2px 6px 2px 6px;color: #333;background: #fffff4;margin: 2px;}
.showpagePoint {padding: 2px 6px 2px 6px;color: #FFF;background: #a0c800;border: 1px solid #ccc;margin: 2px;} /*Current page*/
.showpageOf {padding: 2px 6px 2px 6px; color: #333;background: #fffff4;border: 1px solid #ccc;margin: 2px;} /* Page (1), Page(2) ... */
.showpageNum a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #fffff4;border: 1px solid #ccc;margin: 2px;}
.showpageNum a:hover {border: 1px solid #aaa;background-color:#ccc;color: #ff9600;}
.showpageNum a:link {text-decoration:none;color:#333;}
.showpage a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #FFF;border: 1px solid #ccc;margin: 2px;} /* Next, Prev...*/
.showpage a:hover {padding: 2px 6px 2px 6px;color: #ff9600;background-color:#ccc;border: 1px solid #aaa;margin: 2px;}
.showpage a:link {text-decoration:none;color:#333;}

5. Cari lagi kode dibawah ini:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

6. Kopi dan paste kode berikut tepat dibawah kode diatas

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. Jika sudah simpan kodenya...

Keterangan: Pada Script ada kode var displayPageNum=3; menunjukan jumlah nomor halaman yang ingin ditampilkan. Selamat mencoba

Dapatkan Website dengan Domain Gratis .com

2009-07-05T18:14:00.000-07:00

HyperWebEnable is penyedia layanan blogging bagi generasi kita-kita ini. ia menyediakan websiite gratis bagi anda semua yang ingin membuat website. anda akan memperoleh domain dan bukan sub domain seperti punya saya ini... Hyperwebenable adalah penyedia layanan yang terbaik dikelasnya dengan menyediakan web domain yang complete....(yoursitename.com)dengan pilihan anda.

Yang paling menguntungkan bagi semua teman yaitu gratis layanannya loh....dari pada anda membeli domainn mahal-mahal mending menggunakan layanan ini. selain gartis feature yang ditawarkan juga menarik dan menggirukan. featurenya ada dibawah ini

Features:
========

1. Website gratis dengan domain sendiri (yoursitename.com).
2. 1GB untuk volume website anda
3. Unlimited bandwidth.
4. Unlimited emails (info@yoursitename.com,contact@yoursitename.com).
5. Script dengan piihan anda (Blog,CMS,Forum ..).
6. Dukungan teknis dengan email
7. Tips & tricks untuk meningkatkan trafik anda
8. Domain yang dapat diperbaharui
9. Tidak ada pembayaran apapun yang tersembunyi gratis loh
10. Iklan dapat ditaruh pada website

Kunjungi: http://www.hyperwebenable.com/

Membuat Watermark pada Gambar

2009-07-05T17:50:00.000-07:00

Anda tertarik membuat watermark pada gambar yang anda hasilkan dari tangan sendiri. Nah kali ini ada caranya membuat watermark atau semacam tulisan pada gambar yang menggambarkan suatu hak cipta.

Watermark ini dapat anda membuatnya secara online yaitu yaitu pada PicMarks. PicMarkr memberi tawaran kepada anda untuk membuat watermark pada gambar secara online dan untungnya itu semua gratis loh...

Watermark ini sangat berguna bagi anda jika ingin membuat hak cipta pada gambar atau membuat komentar pada gambar tersebut. Anda dapat menyampaikan pesan melalui gambar. Sangat mudah digunakan anda tidak perlu menginstal atau mendownload apapun.

Anda hanya hanya perlu mengupload gambar dari komputerFlickr, Facebook, atau Picasa. Tertarik selamat mencoba!!!

PicMarkr Features:

* Prosesing gambar
* Menambah teks watermark, watermark gambar atau tiled watermark
* Mudah digunakan, pengaturan minimum, tidak perlu instal apapun
* dan terakhir itu gratis tapi jika anda ingin yang Pro bisa dibeli

Visit: http://picmarkr.com/

Cara Mudah Membuat Banner

2009-07-03T02:38:00.001-07:00

Anda cara yang mudah dan cepat bagi anda untuk membuat banner. Anda membuat banner beranimasi dan menampilkannya pada header di blog anda. T

entunya dengan banner yang menarik pengujung akan lebih mengenal blog anda. Penampilan banner sangat penting dalam mengiasi blog anda.

Anda yang tidak memiliki ahli dalam membuat dan mendesain gambar pun dapat memiliki banner yang mantap...Tapi bagaimana caranya...ada kok caranya ....Cukup mengunjungi situs ini anda akan mendesain bannner cepat, mudah dan cantik...

1. Langkah pertama adalah kunjungi situs http://bannerbreak.com/

2. Pilih Banner anda.
3. Edit Banner Background, Banner Teks, Posisi Banner, Ukuran Teks pada Banner, dan Lan sebagainya sesuai dengan keinginan anda.

4. Klik Generate Jika Banner anda telah selesai di edit
5. Lihat Hasil Banner anda pada Banner Preview.

Mudah bukan caranya.....Coba deh...

Tips Bagaimana Anda Memasukan URL Website atau Blog Pada Google Search

2009-07-01T20:35:00.001-07:00

Untuk memasukan URL ke dalam daftar pencarian Google search cukup mudah dan sederhana. Langkah awal yang anda perlu lakukan yaitu masuk situs google www.google.com.id (untuk bahasa indonesia). Pada bagian bawah layar ada sebuah link dengan tulisan "About Google". Klik link tersebut dan anda akan memasuki halaman baru.

Pada bagian tengah kanan halaman tersebut ada sebuah link yaitu "Submit your content to Google" dibawahnya ada kalimat "Add your site, Google Base, Google Sitemaps..". Klik link diatas dan anda akan melanjutkan ke halaman berikut. Pada halaman baru ini anda akan melihat pada sisi kanan dalam kotak yang judulnya Here's how to get started". Klik link pada no 1. pada tulisan "submit a URL".

Pada halaman selanjutnya anda hanya perlu mendaftarkan url dari web atau blog anda dan dan mengisi kode dibawahnya. selamat mencoba.....

Bagaimana Cara Membuat Blog

2009-07-01T20:34:00.000-07:00

Blog adalah situs web Anda yang mudah-di-gunakan, di mana Anda dapat dengan cepat memposting pemikiran Anda, berinteraksi dengan orang lain, dan banyak lagi. Ada beberapa situs di internet yang menawarkan anda untuk membuat blog. Kali ini saya akan menjelaskan kepada anda bagaimana cara membuat blog yang mudah dan cepat. Anda cukup masuk ke situs www.blogger.com. Pada situs ini anda dapat membuat blog dengan mudah dengan adanya tampilan bahasa Indonesia. Jika bahasanya dalam bahasa ingris anda cukup mengubahnya pada bagian kanan atas. Untuk membuat blog anda harus memiliki alamat email. Untuk membuat blog anda cukup melakukan 3 langkah yang mudah.

1.Klik pada tanda panah “Ciptakan Blog Anda”. Isi formulir pendaftaran yang terdiri dari email anda, password, nama tampilan. Pilihlah password yang anda mudah ingin yang memiliki minimal 6-8 huruf. Ketik kode yang sama seperti yang tertera untuk verifikasi. Selanjutnya contreng pada ketentuan dan kebijakan dari blog. Kemudian lanjutkan kehalaman selanjutnya dengan menekan link lanjutan pada sisi kanan bawah.

2.Isi Judul dari blog ada, dimana judul ini berkaitan dengan apa Isi konten blog anda. Tulislah alamat blog url anda yang berkaitan dengan judul anda. Pilih url yang singkat dan mudah diingat. Kemudian lanjutkan ke halaman berikutnya.

3.Langkah terakhir yaitu memilih templete. Pada halaman ini tersedia beberapa jenis templete. Pilihlah templete yang ada sukai untuk ditampilkan pada blog anda. Setelah itu klik lanjutkan sehingga blog anda telah terdaftar dan anda dapat langsung menggunakannya.

Cara Membuat Marquee (Scrolling text)

2009-07-01T20:32:00.000-07:00

Anda ingin membuat scrolling text atau gambar yang bergerak pada layar dalam sebuah kotak. Ada dapat menkopi kode marquee dan membuat blog anda menjadi lebih cantik. Berikut codenya.