Widget blog keren

Cara Membuat Border Image Radius Otomatis pada Blog

2012-04-03T16:11:00.000-07:00

Menggunakan border image dengan efek radius menampilkan kesan yang bagus dan keren, selain itu akan memberi kesan rapi pada postingan dengan ditambahi gambar yang dihiasi border image radius (sisi kanan, kiri, atas, dan bawah pada image akan terdapat boder berwarna abu-abu dan dengan bingkai melengkung setiap sudutnya). Jika kalian ingin menambahkan kode border image kedalam blog Anda silahkan simak tutorial di bawah ini.

Lagkah-langkah memasang Border Image Radius Otomatis

--> Login ke blogger,
--> Pilih Template Â» Edit HTML
--> Silahkan cari kode di bawah ini,

]]></b:skin>

--> Selanjutnya, letakan CSS di bawah ini sebelum kode di atas,

.post-body img{background-color:#F0EFEF;border:2px solid #CACECF;margin:0 4px 2px 0;padding:4px;border-radius:5px;}

--> Terakhir, Simpan Template.

Cukup mudah bukan, hanya 2 menit sudah selesai membuat border image radius kedalam blog kalian.

Widget Untuk Mengetahui Jumlah Visitor dari Seach Engine

2012-04-01T15:48:00.000-07:00

Feedjit adalah tool yang mempunyai fungsi untuk melihat pengunjung yang berkunjung ke blog kalian secara lengkap dan detail. Feedjit akan memperlihatkan pengunjung yang datang dari mesin pencari seperti Google, Yahoo, Bing, Msn, dan lain-lain dengan kata kunci / keywords yang berbeda-beda.

Widget blog keren ini sangat membantu kalian untuk melihat artikel / postingan mana yang paling banyak dibaca dan dikunjungi dari mesin pencari. Feedjit juga memiliki tampilan yang keren dan dapat dirubah sesuai dengan warna blog kalian.

Cara Memasang Feedjit Pada Blog

Langkah Pertama
--> kunjungi web Feedjit resmi disini
--> Pilih Choose Your Feedjit » Sign Up for Free,
--> Isi formulir yang masih kosong dengan data lengkap Anda (Tips, agar lebih baik jangan mengisi data Anonim)

Keterangan: Your first and last name : Isikan nama depan dan nama belakang Anda. What country are you in : Negara mana yang kamu tempati. Enter your email address : Isikan alamat email Anda.

--> Jika sudah pilih »Get your Traffic Feed!»
Selanjutnya kalian diminta untuk menyesuaikan tampilan Traffic Feedjit tersebut agar sesuai dengan tampilan blog kalian.

--> Lalu pilih » Other blog or website » GO
Kalian akan mendapatkan kode dari Feedjit tersebut, silahkan copas kode tersebut pada notepad.

Langkah kedua
(meletalkan kode Feedjit tersebut kedalam blog agar Feedjit dapat tampil pada blog kalian).

--> Login pada blogger Anda,
--> Pilih Tata Letak » Tambah Widget » HTML/Javascript,
Masukan kode yang sudah Anda copas tadi kedalam HTML/Javascript tersebut,
--> Terakhir, Simpan.

Sekarang Kalian dapat melihat berapa banyak pengunjung yang datang pada blog kalian dari mesin pencari dengan Cara Memasang widget Feedjit keren ini.

Widget Recent Post Dengan Thumbnail/Gambar Keren

2012-03-29T15:33:00.000-07:00

Widget Recent Post Dengan Thumbnail/Gambar Keren ini bisa menjadi pertimbangaan untuk melengkapi widget keren pada blog kalian, dengan tampilan keren dilengkapi dengan gambar dan jumlah komentar serta judul artikel terbaru. Widget ini sangat cocok buat blog yang mengusung tema elegant, simple, dan web 2.0.

Ayo langsung saya ikuti langkah berikut:

--> Login dulu ke blogger sobat,
--> Pada Dasboard blogspot sobat pilih Tata Letak,
--> Pilih Tambah Widget => HTML/Javascript, Lalu, copas dan masukan kode script di bawah ini,

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";
imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";
imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";
imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";
imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";

showRandomImg = true;
boxwidth = 230;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "transparent";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://widgetblogkeren.blogspot.com/";
</script>
<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

--> Terakhir, Simpan deh.

Catatan : untuk tulisan yang bercetak tebal alias bold, silakanuntuk diganti dengan alamat blog sobat.

Panduan Membuat Reply Pada Kotak Komentar Blog

2012-03-27T06:49:00.000-07:00

Ternyata banyak juga dari para blogger yang bingung bagaimana cara membuat reply pada kotak komentar di blogspot, kali ini Widget blog keren akan mebahas bagaimana cara membuat reply pada kotak komentar di blog kalian.

Langsung Saja Lihat Tutorialnya Cara Membuat Reply Pada Kotak Komentar Blog :

Cara Memasang Reply pada Komentar Blog :

1. Login blog

2. Rancangan --> edit HTML (centang "Expand Widget Template")

3. Cari kode (Ctrl + F) <data:commentpostedbymsg> atau kode

<data:comment.timestamp>
4. Letakkan kode dibawah ini diatas kode diatas
<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=BloggerIdSobat&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450"); return false;'>[Reply Comment]</a></span>

Ganti tulisan BloggerIdSobat dengan id blog sobat bila sobat belum mengetahuinya, coba sobat buka menu rancangan lalu perhatikan digit angka pada address bar sobat, dan jangan lupa ganti dengan id blog sobat.

Langkah terakhir save template dan sobat bisa langsung melihat hasilnya, bila sobat ingin tampilannya lebih menarik sobat bisa ganti tulisan [Reply Comment] dengan icon gambar, caranya cukup ganti tulisan [Reply Comment] diatas dengan kode gambar dibawah ini .

Cara Proteksi posting Artikel dari Copy Paste

2012-03-25T16:04:00.000-07:00

Hai sobat setelah saya posting artikel tentang bagaimana caranya memproteksi gambar posting dari copy paste para blogger yang tidak bertanggung jawab, widget blog keren kembali akan memposting bagaimana cara agar artikel dalam postingan di blog kita tidak akan bisa di copy paste, cara ini cukup sederhana hanya dengan memasang kode pada widget HTML di blog kalian.

Ayo langsung saya pasang widget Anti copy paste artikel plus icon camera keren tersebut dan ini dia caranya:

--> Login ke blogger Anda
--> pilih Tata Letak dan klik Tambah Widget
--> Pilih HTML/Javascript, selanjutnya masukan masukan (copy paste) kode di bawah ini

<script type="text/javascript"> if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } </script><br /> <br /> <br /> <div style="position: fixed; top: 0px; right:0px;width:110px;height:140px;"><a href="http://x-atributespc.blogspot.com/2012/02/cara-agar-blog-tidak-dapat-di-copy.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKWg8eUzPx7jgJ1JFRnX6Vys-cOwRODWafJQknH1BKoB5RIL_R3L9z7brYxpedIIrAZvIWWszNceH7CepmpasTaH5JHr-QLj_NfVXNDoggkMURYAj-dbbqgtA-uGyP-Hh5uofs2uRew4/s1600/cctv.gif" title="Copy and Paste guard" /></a></div>

--> Langkah selanjutnya Save, dah akhirnya selesai sudah cara pasang kode/widget Anti copy paste isi artikel plus icon camerakeren ini.

Cara Membuat Kode Warna di Blogspot

2012-03-23T06:58:00.000-07:00

Kode Warna sangat berperan penting dalam kegiatan mengedit blog, dalam dunia blogger pasti membutuhkan kode warna yang berguna untuk mengedit warna pada Css, mengubah warna, dll.

Membuat kode warna di blogspot ini bertujuan agar kita tidak kebingungan mencari kode warna di search engine karena kode warna sudah ada di blog kita.

Dengan menggunakan kode warna ini memudahkan author atau pemilik blog berkreasi sesuai dengan pikiran dan kreativitasnya.

Cara Membuat kode warna di blogspot:

Langkah Pertama:

--> Login terlebih dahulu ke blogger kalian,
--> Pilih Rancangan - Elemen Edit - Tambah Gadget - HTML/Javascript,kemudian copas script di bawah ini dan taruh pada blog kalian,

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

<script type='text/javascript'>

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}

function hueUpdate(newVal) {

var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}

</script>

--> Kemudian di Save .

Langkah Kedua:

--> Buatlah entri baru atau artikel baru
--> Pada entri tersebut ada dua pilihan Edit HTML dan Compose
--> Pilih Edit HTML pada artikel tersebut dan copas script di bawah ini pada artikel baru kalian.

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form><p><a href="http://menujublog.blogspot.com/2010/03/cara-membuat-kode-warna-di-blog.html" target="new">Get it</a></p></center>

--> Kemudian TERBITKAN ENTRI.
Apabila ada peringatan silahkan kalian ceklist "Hentikan galat HTML" kalian ceklist saja.

--> TERBITKAN ENTRI.

Selesai sudah dan kalian sudah mempunyai kode warna sendiri!.

Widget Recent Comment with Scroll Keren

2012-03-21T06:42:00.000-07:00

Widget Recent Comment with Scroll Keren berfungsi untuk melihat komentar terbaru yang mengomentari salah satu artikel pada sebuah blog yang dapat dilihat pada sidebar blog. hal ini sangat bermanfaat untuk melihat artikel mana yang paling banyak dikomentari.

Cara Widget Recent Comment with Scroll Keren:

--> Login ke blogger Anda
--> pilih Tata Letak dan klik Tambah Widget
--> Pilih HTML/Javascript, selanjutnya masukan masukan (copy paste) kode di bawah ini

<div style="overflow:auto;width:270px;height:300px;border:1px solid #eee;padding:8px;margin:10px 0 0"> <script style="text/javascript" src="http://files.bloggerplugins.org/widgetcomments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=true;var n_rc=true;var o_rc=60;</script><script src="http://widgetblogkeren.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> <div style="font-size:9px; padding:8px 0px 0px 0px"></div></div>

Keterangan : width:270 : Adalah lebar dari widget Recent Comment. height:300 : Adalah tinggi dari widget Recent Comment. Angka 10 : Adalah jumlah Recent Comment. Angka 60 : Adalah jumlah karakter/kata dari widget Recent Comment. border:1px solid #eee : Adalah ukuran border/bingkai dan warna border/bingkai.

--> Klik Simpan template, selamat mencoba dan silahkan ganti ganti dan sesuai kebutuhan blog dan selera Anda.

Widget Recent Comments dengan Avatar Keren

2012-03-19T06:27:00.000-07:00

Widget Recent Comments / Komentar Terbaru dengan Avatar Unik baru-baru ini sudah populer dan banyak dipasang pada blog pribadi, tampilan yang simple dan unik sangat menonjol pada Mini Avatar yang unik dan keren.

Cara Memasang Recent Comments dengan Mini Avatar pada Blogger

--> Login ke Blogger Anda,
-->Pilih Tata Letak, kemudian Tambah Gadget dan Pilih HTML/Javascript, selanjutnya copy paste lalu masukan script Recent Comments di bawah ini

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 25,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://widgetblogkeren.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Keterangan: 5 Â» Jumlah komentar yang muncul. 30 Â» Ukuran Mini Avatar yang tampil. 25 Â» Jumlah karakter komentar yang akan tampil.
http://widgetblogkeren.blogspot.com --> Ganti dengan alamat blog kalian.

-->Terkahir, Pilih Simpan. Selamat mencoba.

Cara Memasang Read More Otomatis plus Gambar di Blogspot

2012-03-17T06:05:00.000-07:00

Read more otomatis berfungsi untuk meringkas artikel postingan yang terdapat pada homepage atau halaman utama blog.

Fitur Read More otomatis ini dilengkapi dengan gambar dan dapat mengatur jumlah karakter yang muncul pada homepage. Dengan menggunakan fitur Read More Otomatis jumlah karakter pada homepage tidak akan fullpost dan tidak akan memakan banyak tempat pada template, jika Template Blogspot kalian belum dilengkapi denga fitur Read More Otomatis, kalian dapat menggunakan script Read More Otomatis ini dengan mudah dan gratis.

Cara Menyisipkan Read More Otomatis pada Template Blogspot:

-->Login ke Blogger Anda
--> Pada Dashboard Pilih Template dan Edit HTML
--> Centang Expand Template Widget, selanjutnya silahkan cari kode di bawah ini (Ctrl+F)

</head>

--> Letakan script di bawah ini sebelum kode di atas,

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

Keterangan:
summary_noimg = 430; : Jumlah Karakter jika tidak memiliki Gambar / Thumbnail summary_img = 340; : Jumlah Karakter jika memiliki Gambar / Thumbnail img_thumb_height = 100; : Tinggi Gambar / Thumbnail. img_thumb_width = 120; : Lebar Gambar / Thumbnail.

--> Selanjutnya, silahkan cari kode di bawah ini,

<data:post.body/>

--> Selanjutnya hapus kode tersebut lalu ganti dengan kode di bawah ini,

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

--> Terakhir, Simpan Template.

Mencegah Copy Paste Gambar Blog

2012-03-15T05:27:00.000-07:00

Proteksi Gambar, Mencegah Copy Paste Liar merupakan hal yang sangat penting untuk mencegah Copy Paste khususnya pada Gambar / Image, dalam hal ini akan memberikan efek gambar kosong / gambar tidak muncul saat di Copy Image atau Save Image As.

Intinya gambar pada postingan sobat jika di copy paste atau di simpan, gambar tersebut akan hilang dan blank, tetapi trik tersebut tidak akan berjalan otomatis dan Anda harus menyisipkan sedikit kode pada alamat url Gambar / Image pada postingan blog.

Gunakan kode image di bawah ini jika Anda menambahkan Gambar / Image pada postingan,

<img style="background-image:url('AlamatURL Image/Gamabar');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="256" height="256"/>

Catatan : Yang perlu kalian ganti dan sesuaikan hanya Tulisan yang berwarna merah dan usahakan lebar dan tinggi gambar sesuai dengan ukuran gambar asli.

Cara Merubah Blog NoFollow jadi DoFollow

2012-03-13T05:06:00.000-07:00

Sebelumnya kita wajib mengetahui apa itu blog NoFollow dan Blog DoFollow.

Blog NoFollow adalah istilah dalam dunia blogging apabila kalian memberikan komentar dengan link yang tercantum pada komentar tersebut dan tidak dianggap backlink / link balik oleh mesin pencari seperti Mbah Google. Blog NoFollow juga menghindari komentar yang SPAM alias tidak ada sangkut pautnya dengan artikel / postingan.

Blog DoFollow adalah istilah dalam dunia blogging apabila memberikan komentar dengan link yang tercantum pada komentar tersebut akan dianggap backlink / link balik oleh mesin pencari seperti Mbah Google. Jika blog sudah di setting menjadi Blog DoFollow maka kalian siap-siap untuk ratusan komentar dari para pencari backlink gratis dengan sebuah komentar, tetapi tetap waspada sebagai admin, karena banyak pula komentar berbau SPAM alias tidak ada sangkut pautnya dengan artikel / postingan.

Nah jika Anda tertarik dengan pengaturan Blog DoFollow pada blog Anda, maka ikuti langakah berikut ini:

--> Login ke blogger Anda,
--> Pada Dashboard Anda pilih Menu Template.
--> Edit HTML (Centang Expand template Widget), Silahkan cari kode di bawah ini Ctrl + F)

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

--> Jika tidak ada, silahkan cari kode di bawah ini

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

--> Selanjutnya, ganti kode tersebut dengan kode DoFollow di bawah ini,

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

--> Terakhir, Simpan Template.

Sangat mudah bukan Merubah Blog NOFOLLOW Menjadi DOFOLLOW ini, siap siap saja blog kalian kebajiran pengunjung.

Cara Meningkatkan Alexa Rank

2012-03-09T04:23:00.001-08:00

Alexa Rank adalah merupakan bagian yang tidak terpisahkan bagi pengguna blog yaitu blogger dan wordpress yang berfungsi menaikan traffik dari blog itu sendiri dengan Alexa Rank.

Bisa dikatakan hampir seluruh pengguna blogger menggunakan Alexa Rank sebagai alternatif untuk menigkatkan rank blog.

Berikut ini beberapa cara Menaikan Alexa Rank

1. Memasang Alexa Toolbar

Dengan memasang Alexa Toolbar dapat dijadikan alternatif lain untuk menaikan Alexa Rank dan juga kita bisa memasang website atau blog kita sendiri di dalam toolbar itu sendiri dan juga situs social lainnya dengan akun yang kita miliki seperti Facebook dan Twitter.
Alexa Toolbar yang sudah terinstal dalam browser sedikit demi sedikit akan menambahkan point ranking suatu blog atau blog yang kita miliki (Alexa Toolbar ini bisa diinstal dengan browser Mozilla Firefox dan Intenet Explore saja).

2. Alexa Widget

Alexa Widget merupakan salah satu cara untuk meningkatkan Rank Alexa dan Juga Rank Blog. Apabila ada pengunjung yang mengklik Alexa Widget yang dipasang dalam blog kalian maka Alexa akan menggangap sebagai point tambahan apabila pengunjung yang mengklik Alexa widget yang kita miliki belum menginstal Alexa Toolbar.

3. Claim site

Melakukan claim site maka proses ini sama seperti melakukan webmaster/tools yang membuat Meta Tag sesuai dengan blog kita sendiri. Calim site dari Alexa rank ini juga menyediakan Meta Tag sesuai dengan blog kita, dimana meta tag Alexa bisa ditaruh tepatdi bawah <head>

4. Artikel yang Original

Artikel yang original dan sudah terindex dalam mesin pencari, dan dikunjungi oleh pengunjung melalui search engine merupakan poit lebih dan diharapkan oleh para blogger karena selain akan meningkatkan traffic tentu saja akan meningkatkan alexa rank.

5. Update Blog

Update pada artikel atau membuat artikel baru minimal dalam satu minggu ada 3 atau 4 artikel yang baru dalam blog kita maka Alexa Rank kita juga akan bertambah dan tentu saja akan memperbesar peluang blog kita terindex google.

6. Melakukan Ping

Melakukan Ping terhadap artikel yang menurut kita layak untuk dibaca maka artikel kalian akan cepat masuk ke dalam mesin pencari, hal ini juga bisa menaikan alexa rank sedikit demi sedikit.

7. Alexa Artikel

Buatlah artikel yang berkaitan dengan Alexa Rank dengan karyamu sendiri, karena masih banyak orang di luar sana yang belum mengerti tentang Alexa Rank dan melakukan ping terhadap artikel yang berkaitan dengan Alexa Rank tersebut.

8. Label Alexa

Dalam membuat artikel yang berkaitan dengan Alexa sebaiknya kalian membuat label baru tentang Alexa rank.

9. Social Bookmark

Share artikel kalian ke situs sosial yang ada, seperti Facebook, Twitter, Plurk, Tumlr dll. Atau buatlah posting dalam situs social tentang blog kalian.

10. Blogwalking

Blogwalking di sini maksudnya kalian dalam bekunjung ke blog orang lain dibiasakan untuk meninggalkan komentar terhadap blog tersebut dan juga berkomentarlah terhadap blog yang mempunyai Rank yang tinggi karena sebagai metode lain untuk menaikan Rank Alexa.

11. Tukaran Link

Dengan melakukan tukaran link juga bisa membantu untuk menaikan Alexa Rank.

12. Short Url

Dalam membuat artikel dan didalam artikel tersebut terdapat beberapa link atau Url yang menuju ke situs lain, sebaiknya kalian menggunakan shorten url. Hal ini juga bisa mempercepat Alexa Rank Meningkat.

Mudah mudahan cara meningkatkan Alexa Rank ini bisa membantu kalian semua.

Hostinger Hosting Gratis 2GB dengan PHP dan MSQL

2012-03-07T05:57:00.002-08:00

Hello sobat semua, kali ini saya mau share informasi mengenai Hosting gratis, buat kalian para blogger yang mempunyai website dan terutama yang berbayar pasti tidak asing dengan namanya domain dan hosting...

Domain berarti penamaan untuk website kita dengan akhiran .com, .org, .info dan lainya contoh www.detik.com dan untuk menampung segala isi data file yang dibutuhkan diperlukan sebuah hosting dan tentu saja ada yang berbayar dan gratisan. Jangan menganggap remeh hosting gratisan lho? karena tidak semua hosting gratisan jelek (ada iklan, lelet, dkk).

Seperti yang satu ini, Hostinger Hosting Gratis dengan fitur seperti dibawah ini:

Space 2GB, Bandwidth 100GB
Support PHP dan MySQL
Script dan CMS Auto Installer
Tidak ada iklan maupun banner di website
Website builder yang mudah digunakan

Support PHP dan MySQL
Berbeda dengan hosting gratis lainnya, Hostinger mendukung PHP dan MySQL tanpa batasan. juga akalian akan mendapatkan akses penuh terhadap PHP dan MySQL kalian.

Script dan CMS Auto Installer
Hanya dengan melakukan beberapa klik, kalian dapat menginstall Wordpress, Joomla, forum, toko online dan banyak lagi. Sebuah website profesional pun dapat kalian buat hanya dalam beberapa menit saja!

Tidak ada iklan maupun banner di website kalian
Tidak ada iklan teks, pop-ups maupun banner yang sangat mengganggu. Website kalian 100 persen bebas dari iklan selamanya!

Website builder yang mudah digunakan
kalian dapat membuat website dengan sangat mudah. Bahkan seorang pemula pun dapat membuat website yang bagus dengan menggunakan website builder. Silahkan pilih satu dari 100 template profesional yang disediakan di Hostinger .

Nah gimana? mantapkan dan untuk info lebih lanjut silakan klik banner dibawah ini

Oya ampir lupa, selain fitur mantap diatas Hostinger juga mempunyai bisnis Afiliasi/refferal dengan reward hadiah yang keren keren dengan cara mengundang teman kalian untuk bergabung dengan Hostinger dan dapatkan hadiah yang luar biasa seperti MP3 Players, LED Powerballs, USB Flash Disk, Kamera Pengintai, Domain Gratis, Tablet Google Android dan banyak lagi.

Cara Pasang Widget FeedBurner di Bawah Postingan

2012-03-07T05:05:00.001-08:00

Widget FeedBurner atau Email Berlangganan ini berfungsi untuk melihat artikel terupdate yang dikirim pada inbox email, tetapi jika kalian ingin memasang Widget ini kalian wajib memiliki account feedburner.

Widget ini memiliki tampilan yang bagus dan menarik, untuk demonya dapat Anda lihat di bawah postingan ini pada artikel ini. Widget ini dilengkapi dengan Halaman Facebook, Twitter, dan RSS Feed.

Cara Pasang FeedBurner Email di Bawah Postingan

--> Login ke Bloger
--> Jangan lupa pilih Template
--> Edit HTML,
Selalu ingat centang Expand Template Widget dan Find kode di bawah ini (Ctrl + F)

<data:post.body/>

Selanjutnya, mari kita letakan kode di bawah ini sebelum kode tersebut

<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{display:block;clear:both;margin:20px 0 0}.mbttext{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4T9GKIbg45FwMLQmTButLLYR7S9Nu3N0xEUuROn3CWACCbIbDOBIeDC27pFrPIbBCFIvGaHSUgqFDW1qsJATGLffm2UDpPCqTVEdbRTkLfF04u_WreIzSvIumjlH2DPoMtBYXBpi2nr3/s28/w2b-mail.png) no-repeat scroll 4px center transparent;color:#666;font-weight:700;text-decoration:none;border:1px solid #D3D3D3;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:1px 1px 2px #CCC inset;-webkit-box-shadow:1px 1px 2px #CCC inset;box-shadow:1px 1px 2px #CCC inset;padding:7px 15px 7px 35px}.mbtbutton{color:#666;font-weight:700;text-decoration:none;border:1px solid #D3D3D3;cursor:pointer;-moz-border-radius:4px;-webkit-border-radius:4px;-goog-ms-border-radius:4px;border-radius:4px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB',endColorstr='#F4F4F4',GradientType=0);background:linear-gradient(top,#fbfbfb0%,#f4f4f4100%);padding:6px 15px}#doulike-outer{-moz-border-radius:10px;-webkit-border-radius:10px 10px 10px 10px;-goog-ms-border-radius:10px 10px 10px 10px;border-radius:10px;background:none repeat scroll 0 0 transparent;border:1px solid #D3D3D3;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;width:480px;padding:8px}#doulike-outer:hover{background:none repeat scroll 0 0 #FFF;-moz-box-shadow:1px 1px 2px #CCC inset;-webkit-box-shadow:1px 1px 2px #CCC inset;box-shadow:1px 1px 2px #CCC inset}#doulike-outer td{padding:3px 0}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FeedBurner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FeedBurner'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/ID FeedBurner' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIaqaRVTQRuoAyhHJvmySb278toszIc4LTo-4XVAtUuqVQxNrxe3EDDIV0AzCP6g9MGhc4bHAIFgTYCXuWaVfKDWEePL7S2vc7_7X1gKM2qFRV8UjKK3KAZsA-o_BltkSOJDAV8m22BJp/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/ID Twitter' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybngd0gIfbArzG_1C3gYaI-lSPgg2td0V8m31rpZqqrKYf1JL7yCM21bZqprp88SHUtCW2aidyWzAnIlBCaBvfnAG4aMbw7u2YE_UEZYHU6YG6YQjwklnUXD8xnVbA76wQ9Pj3JSnTcDg/s40/w2bTwitter.png'/></a>
<a href='URL Facebook Page' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hyphenhyphenwNwOMUOHS0t0uV3cu0pPkFJKSFujkWwWpkkrJTolkoIvYm5gaK_kJ7OBWr0VrjEBbrIqKNBpajO7Rn339iY8W9D4VQtysMCYtbGQZVvFbGEsoRHTL-iHN1ZRouEPs6ALr2hbVI-S0h/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

Keterangan dalam Mengedit kode.
Silahkan Ganti "ID FeedBurner" dengan nama Feedburner Anda.
Silahkan Ganti "ID Twitter" dengan URL TwitterAnda
Silahkan Ganti "URL Facebook Page" dengan URL Facebook Page kalian.

--> Terkahir, Simpan Template.

Note : Hati-hati dalam mengedit sob, soalnya rawan sekali.

Cara Menyisipkan Iklan Di Atas Postingan Pada Blog

2012-03-05T04:38:00.000-08:00

Pada umumnya iklan biasanya berada pada sidebar/samping kiri atau kanan blog, pada header/bagian atas blog, bahkan pada footer/bagian bawah blog, nah bagaiman jika iklan berada tepatnya di atas postingan dan di bawah judul artikel?.

Posting kali ini kita akan membahas bagaimana cara meletakan iklan tepatnya di atas postingan dan di bawah judul artikel. Cara ini memudahkan pengunjung untuk melihat iklan tersebut dan dengan senang hati jika pengunjung tersebut melakukan klik pada iklan tersebut, karena selain membaca artikel pengunjung juga dapat melihat iklan yang tepat berada di atas postingan. Tetapi cara ini belum tentu bisa di pakai di semua template, biarpun begitu apa salahnya jika kita coba.

Untuk contohnya bisa kalian lihat di blog Online File Sharing Free

Ok kita langsung saja mulai Langkah-langkahnya

--> Pertama, silahkan Anda login dahulu ke Blogger kesayangan Anda,

--> Pada dasbor blogger Anda, silahkan klik tanda panah kebawah lalu pilih Template,

--> Edit HTML, jangan lupa untuk ceklist Expand Widget Template dan silahkan cari kode css di bawah ini dengan menekan di ctrl-f pada keyboard,

]]></b:skin>

Selanjutnya, letakan kode di bawah ini sebelum kode di atas,

/* -- (Googe Adsense) -- */
.ads{margin-bottom:10px;border-top:solid 1px #DEDEDE;padding-top:10px;font-size:13px}
.ads-right-min{border-left:solid 1px #DEDEDE;height:250px;padding-left:10px}
.ads-right-min a:link,.ads-right-min a:visited,.bottom-share-links a:link,.bottom-share-links a:visited{font-size:12px;color:#222;display:block;height:22px;line-height:22px;margin-bottom:16px;padding-left:32px}
.ads-right-min a:hover,.bottom-share-links a:hover{color:#666}

Sekarang kalian cari kode di bawah ini. Kode di bawah ini kode penting, karena dengan memasukan kode ini maka akan memunculkan iklan pada postingan Anda,

<div class='post-body entry-content'>

Selanjutnya, letakan kode di bawah ini sesudah/di bawah kode di atas,

<b:if cond='data:blog.pageType == "item"'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='300'>
Kode Iklan
</td>
<td width='300'><div class='ads-right-min'>
Kode Iklan
</div>
</td>
</tr>
</table>
</div></b:if>

Keterangan,
Kode Iklan : Masukanlah kode iklan yang Anda miliki dari situs penyedia iklan,
<td width='300'> : Lebar kotak iklan sebelah kiri,
<td width='300'><div class='ads-right-min'> : Lebar kotak iklan sebelah kanan, Silahkan Anda ganti sendiri angka 300 tersebut, sesuaikan dengan template Anda,

Gampang dan simple bukan, selamat mencoba sobat.

Auto Backlink Software Gratis | Jalan Mudah Mendapatkan 3000 Backlinks Gratis

2012-03-04T16:46:00.012-08:00

Auto backlink gratis membuat blog kalian cepat memproleh backlink gratis dalam sekejap. auto backlink graits dapat anda lakukan bilamana umur blog anda sudah lebih dari 3 bulan.

Jika blog kalian masih baru, saya sarankan jangan agar tidak terkena banned dari Google. kalian harus melakukan ini satu minggu sekali. Jika sudah menanam backlink gratis pada Indonesia Auto Backlink. Satu minggu kemudian lakukan penanaman backlink pada no.2 Backlink Builder + Ping dan seterusnya. Jangan lakukan hal-hal dibawah ini dalam satu hari. Website kalian akan dibanned, dan silakan tanggung sendiri resikonya.

Situs-situs yang menyediakan layanan gratis auto backlink gratis adalah sebagai berikut :

1. Indonesia auto backlink – 104 Free Backlinks.

Auto backlink ini buatan anak bangsa dari Kediri. Salut untuk anak bangsa ini.

2. Backlink Builder + Ping

Selain melakukan penanaman backlink. Wesite ini juga melakukan ping terhadap backlink yang terbentuk sehingga anda cepat mendapatkan backlink.

3. Backlink Generator – Free 324 Instant backlink !

Website ini menyediakan sebanyak 324 bakclink gratis.

4. Free 663 Backlinks

Anda akan mendapatkan 663 lebih backlink. Pada page one anda akan mendapatkan 100 backlink, page two 100 backlink dan seterusnya page eight.

Lakukan submit 1 bulan sekali per page, misal page one pada bulan pertama, page two bulan kedua dan seterusnya agar tidak dicurigai oleh search engine

5. Auto approve web directories + pagerank

LittlewebDirectory.com – PR3 (Squidoo friendly)
Gishworld.com – PR2
Mtnmix.com – PR2
Cycsail.com – PR2
Dupront.com – PR2
Cerako.com – PR2
Dlogicwebsolutions.com – PR2
Mwebsolutions.com – PR2
Webdowap.com – PR2
Webmasteradspace.com – PR2
Vosnethosting.com – PR2
Softecnet.com – PR2
Pattayaza.com – PR1
Websenkar.com – PR1
Zonicanetwork.com – PR0
Theyyouweblog.com – PR0
Jinicms.com – PR0
Minautica.com – PR0
Brandsintheair.com – PR0
Ronimiami.com – PR0
Revoludesigns.com – PR0

6. Free automatic backlinks

Here are a few sites that will automatically link back to your web sites.

7. Free 2534 Backlinks

Website ini menyediakan layanan gratis sampai 2534 bakclink. Untuk website baru. Batasi backlink anda hanya pada top 50. Jika website andan sudah berumur lebih dari 6 bulan, Baru boleh daftar ke 2534 backink.

8. Free 342 Backlinks dari http://www.webmasterdeck.com/tools/wsbacklinker/

Website ini menyediakan layanan gratis sampai 342 backlinks.

9. Free 1600 Backlinks dari – http://verifiedfile.com/seo/

Website ini menyediakan backlink gratis sebanyak 1600 backlinks.

10. Free 500 Backlink dari http://backlink.gudang-script.cz.cc/

Website bikinan anak bangsa ini menyediakan 500 backlinks gratis.

11.Auto Backlinks dari high pagerank website :

http://topseolink.com
http://freebacklink.vacau.com
http://automatic-backlinks.co.cc
http://freebacklinks.co.tv
http://autobacklink.co.tv
http://freebacklink.cz.cc
http://kfunigraz.com
http://freebacklinks.webuda.com
http://autobacklink.cz.cc
http://1000backlinks.cz.cc

12. Free 100 Auto Backlink + Social Bookmark dari http://www.bl01.co.cc

13. Free Backlinks + Ping Services dari http://www.profitinstruments.com/quickindex

14. High Quality Auto Backlinks dari http://www.autobacklinks.co.cc/auto-back-links.html Anda harus memasukkannya kode HTML dan memasukkan ke widget text di WordPress blog.

15. Free Backlink dari http://www.iraqpictures.org/a/backlinker.php

16.Free Social Bookmarking http://www.socialposter.com/generator.php

Menyediakan fasilitas untuk mendaftarkan website anda ke puluhan situs social bookmarking.

Nah sobat silakan mencoba, oya info ini saya dapat dari blog (http://caramembuatblog.info).

Cara Pasang Ping Otomatis di Setiap Artkel

2012-03-03T06:06:00.004-08:00

Melakukan Ping otomatis pada setiap artikel/posting yang baru di update sangatlah penting. Dengan melakukan Ping Otomatis ini setiap artikel baru akan diping atau dikirim pada social bookmark terkenal. Pastinya kalian siap-siap untuk menerima traffik pembaca artikel/posting kalian dari pembaca interlokal/lokal.

Melakukan Ping Otomatis juga tidak membuang-buang waktu daripada Anda melakukan ping secara manual. Dengan Ping Otomatis ini Anda hanya disuruh klik 1x dan artikel baru Anda otomatis di Ping pada situs social bookmark.

Caranya sangat mudah dan simple.
--> Login ke blogger (Opsi bahasa pilih bahasa indonesia supaya gampang)
--> Klik Rancangan
--> Pada Element laman klik Tambah Gadget dan Pilih Add HTML/Javascript
--> Tambahkan kode berikut:

  <!-- auto ping by http://www.auto-ping.com/ --> <a href="http://www.auto-ping.com/ping683" target="_blank"><img src="http://www.auto-ping.com/iping.php?aut=EF14380489BD68B224A7D8B87239455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="Ping your blog, website, or RSS feed for Free" border="0" /></a> <!-- auto ping by http://www.auto-ping.com/-->

--> Klik Simpan

Kunjungi website resminya » disini, copy paste kode pada website tersebut dan silahkan ganti tampilan Auto Ping sesuai dengan kebutuhan Anda.

Catatan:
Jika Anda ingin melakukan Auto Ping atau Ping Otomatis pada artikel/posting baru, silahkan buka artikel/posting Anda lalu klik widget Auto Pingnya.

Meletakan Iklan Plus Social Bookmark di Bawah Judul Posting

2012-03-02T19:07:00.005-08:00

Meletakan iklan di bawah judul artikel/posting merupakan cara strategis karena Anda meletakan iklan di tempat yang sering dilihat visitors/pengunjung sedangkan social bookmark berfungsi untuk mebagikan artikel kalian ke media jejaring sosial, jadi artikel kalian tidak hanya pada blog saja tetapi di situs jejaring sosial pun ada dalam hal lain bisa buat promosiin blog sehingga trafiik berjibun ke blog kalian..

Langkah-langkahnya di bawah ini.

Untuk demonya silahkan lihat di blog Widget Blog Keren ini atau di blog Online File Sharing Free

--> Silahkan kalian login dengan email dan password kalian ke blogger
--> Pada dasboard blog Anda silahkan pilih Template,
--> Edit Html dan jangan lupa ceklist Expand Template Widget (Silahkan gunakan ctrl-F untuk mencari kode di bawah ini)

]]></b:skin>

--> Letakan kode Css di bawah ini sebelum kode di atas atau kode yang sudah kalian temukan

/* -- Bookmark -- */
.ads{margin-bottom:35px; border-top:solid 1px #DEDEDE; padding-top:8px; font-size:11px;}
.ads-right-min{border-left:solid 1px #DEDEDE}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{font: normal 12px Arial, Helvetica, sans-serif;display: block;color:#222;height:28px;line-height:16px;padding-left:20px}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#B40404}
.mini-feed{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhaU-YbiK_poFawO_CxyWLB6WJFMKU9_GugGYa98eUFxxiVDp7euPMHYaxfe_cioYdnEh5wMSCG7KB4tMZhy4WdWbW7M_1suqdfEeZq98uDjT0-Tmi_hGJdtXwqdGFGLHkp5z2-AQtMo/s400/feed.png) no-repeat;}
.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XStGhnkkliSEeJk-KQg-viVQXO-G4rJZ9tW4DuYH8A4gwFLasQK73lyktcP86ofKyR1ajrVZhOzIuBoA6a0xW36rxd6ZpKPX_H64UzdY98LHzzWOUWpyFJa6-jyJ0h9BOVsM14ieiR0/s400/twitter.png) no-repeat;}
.mini-stum{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfSf4XX2eQQI9Sm0utWZmhpeorI0LwKyVTChNZ1eksqU57dHMC_QUFyUi61nk6Fawzjh37Likix-EhxIKcgyXHX8EVCIT-YYOCoaL_fGtmtgDrfvMoA2lWd2TrJFtN1UdMIt76a8-s5mT/s400/stumbleupon.png) no-repeat;}
.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXAqA5F9ORAivJbE2FapXh5peWoQm1VD20qvffXHDuzvHvuKMqPuRrzUkiBBVjqlyXj40m_7H0Hns9E8xKrBE6NQbMCMffFTvJiJ2N_aCGIaBB_Cu976VS_RCXGM3N6sl7aTZep0HuKwk/s400/facebook.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqT7_0DGhjQ-JiuVgwY-Rgw36_oyz9ed4BszM96Lx_nBRN_xc8pYY0hzhePbw64-4yKTkEms_OZdYeRFteRuMC-0pvAyfC_pVwKgJ7FzOXu2DLUh8aNGWDrQp9oNQcgmQqgBczKlicL3a/s400/digg.png) no-repeat;}
.bottom-share-links{height:50px; clear:both; padding-top:10px}
.bottom-share-links .mini-feed{float:left; margin-right:13px;}

--> Untuk memasang iklan dan social bookmarknya silahkan cari kode di bawah ini

<div class='post-body entry-content'>

--> Lalu letakan kode di bawah ini di atas/sebelum kode tersebut,

<b:if cond='data:blog.pageType == "item"'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='375'>
Kode Iklan Anda
</td>
<td><div class='ads-right-min'>
<h2><b>Do you want to share?</b></h2>
<a class='mini-feed' href='http://feeds2.feedburner.com/FEEDURL'>Subscribe RSS Feed</a>
<a class='mini-tweet' expr:href='"http://twitthis.com/twit url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Tweet on Twitter</a>
<a class='mini-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'>Share on Facebook</a>
<a class='mini-stum' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumble This Article</a>
<a class='mini-digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg this Article</a>
</div>
</td>
</tr>
</table>
</div></b:if>

Keterangan !
Kode Iklan Anda : Silahkan Anda masukan kode iklan Anda,
FEEDURL : Silahkan Anda ganti dengan nama feedburner Anda

Nah iklan kalian akan muncul berdampingan dengan situs social bookmark, jadi selamat menunggu earning Ga dan traffic bejibun.

Cara Meletakan Iklan AdSense Di Tengah Postingan

2012-03-02T18:31:00.004-08:00

Meletakan iklan AdSense berada di tengah atau diantara postingan menurut senagian blogger adalah trik untuk menaikan CTR dan tentusaja klik iklan.

Cara ini memungkinkan pengunjung dapat melihat dengan mudah iklan yang berada di antara postingan, lebih mantap lagi jika iklan dengan format text yang ditampilkan karena sewaktu-waktu pengunjung mengira iklan tersebut adalah postingan dan berniat untuk melakukan klik.

Cara ini juga sangat jitu, karena meletakan iklan di tempat yang banyak dilihat oleh pengunjung.

Iklan akan muncul seperti contoh di bawah ini.

Judul Postingan
Isi postingan......................
Isi Postingan......................

<== Iklan AdSense ==>

Isi Postingan......................
Isi Postingan......................

Dengan cara ini posisi iklan AdSense akan berada di antara area postingan dan iklan akan muncul setiap halaman postingan, agar iklan terlihat lebih rapi dan indah aturlah jarak iklan dan postingan.

Cara Memasang Iklan AdSense Di Tengan Postingan.

Memasang iklan Google AdSense ataupun situs yang menyediakan iklan untuk publisher dan Advertise dalam area HTML, hal yang wajib adalah melakukan convert iklan agar iklan muncul di Area postingan, silahkan kunjungi toolsnya pada link di bawah ini.
Convert Kode Iklan Convert Disini.

1. Buka Blogger Anda,
2. Pilih Template lalu Edit HTML
3. Cari kode di bawah ini,

<data:post.body/>

4. Hapus dan ganti kode tersebut dengan kode baru di bawah ini,

<div expr:id='"iklan1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">

<= Letakan Kode Iklan AdSense di Sini =>

</div>
<div expr:id='"iklan2" + data:post.id'>

<data:post.body/>

</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

"Ganti tulisan berwarna merah denga kode iklan yang sudah di convert".

5. Selanjutnya, Simpan Template.

Agar Iklan Anda hanya tampil pada halaman postingan gunakan kode di bawah ini,

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

Kode Iklan AdSense Anda

</b:if>

Gimana Sobat? mudah dan simple kan, selamat mencoba.

Cara Menghilangkan Navbar pada Blog

2012-03-02T18:07:00.004-08:00

Susah susah gampang buat mengilangkan Navbar pada blog, dan terkadang memang untuk sebagian blogger Navbar ini bisa dibilang mengganggu.

Nah berikut cara untuk menghilangkan Navbar pada blog

--> Login ke account blogger kalian
--> Klik dasbor dan select blog yang akan kalian hilangkan Navbarnya
--> Klik menu Rancangan
--> Klik menu Edit HTML
Jangan lupa untuk mencetang Expand Template Widget ( fungsinya untuk menjaga jaga jika blog kita error atau gagal dalam memasukan kode HTML kita bisa mengembalikan keadaan semula dengan mengklik lagi Expand Template Widget) atau cara yang lebih aman dengan mendownload template kalian terlebih dahulu untuk menjaga jaga terjadi error.
--> Cari kode ]]></b:skin>
Biar lebih gampang dan cepat copy kode diatas kemudian tekan tombol Ctrl + F di keybord kalian dan paste di menu tadi maka kode tersebut akan segera ketemu.
--> Letakkan kode di bawah ini di atas kode ]]></b:skin> pada halaman html

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa dengan cara lain dengan meletakkan kode di bawah ini tepat di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Lalu Simpan Template.

Cara Memposting Video di Blogspot

2012-03-02T17:26:00.007-08:00

Memposting sebuah video gampang gampang susah ada banyak cara untuk melakukannya dan meskipun pada blogspot/blogger sudah menyediakan toolbar upload gambar, ga ada salahnya kita mengunakan metode lainya. kali ini kita akan memposting video dari Youtube menggunakan kode HTML

Langkah langkahnya:

Siapkan URL video Youtube yang akan kalian posting dan kode HTML untuk memasukan alamat URL video sebagai berikut :

<iframe allowfullscreen="" src="Kode URL video yang akan dimasukan" frameborder="0" height="400" width="400"></iframe>

Contoh alamat URL alamt video Youtube :

http://www.youtube.com/embed/gh7OcnBzdcE

Jadi kode HTMLnya :

<iframe allowfullscreen="" src="http://www.youtube.com/embed/gh7OcnBzdcE" frameborder="0" height="400" width="400"></iframe>

Hasilnya:

Mudah bukan? dan ada cara lain yang lebih gampang dengan cara copy paste kode EMBED URL video langsung dari youtube jadi tinggal copy dan paste deh di potingan kalian (karena kode diatas mirip dengan kode Embed video URL di youtube).

Cara Memposting Gambar di Blogspot

2012-03-02T16:09:00.003-08:00

Ada banyak cara yang dapat dilakukan untuk memposting gambar, diantaranya:

Cara pertama (Memposting gambar menggunakan alamat URL gambar) :

Siapkan alamat URL gambar yang ingin anda masukkan

https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQ68GLFKCM2IyHqWgdivnHOx452EYKBCOQ-yPN6TaEgPgJ0T7ttnKLpJM5I

Maka untuk menampilkan di halaman blog anda,anda bisa menuliskan kode di bawah ini di halaman HTML anda tentunya :

<img src="Halaman URL anda">

Contoh pemakaian kode :

<img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQ68GLFKCM2IyHqWgdivnHOx452EYKBCOQ-yPN6TaEgPgJ0T7ttnKLpJM5I">

Hasil dari kode diatas seperti di bawah ini :

Cara Kedua (memposting gambar dengan melakukan insert dan upload melalui toolbar di menu posting)

Silakan kalian melakuakan posting gambar baru di Blog dengan cara Buat Posting Baru dan klik Toolbar / Icon yang berbentuk Pemandangan seperti ini

Selanjutnya akan muncul jendela pilihan Browse File yang akan menanyakan anda file mana yang ingin kalian masukkan. Dalam kasus ini kalian bisa upload / meletakkan gambar baik dari komputer anda maupun alamat URL yang kalian inginkan.

Selanjutnya tunggu proses upload selesai kemudian klik tombol selesai dan kalian bisa melihat hasilnya, selanjutnya bisa diedit sesuai selera.

Cara Posting atau Membuat Artikel di Blogspot

2012-03-02T15:47:00.003-08:00

Memposting suatu artikel kedalam blog gampang gampang susah dan tentu saja masih banyak dari sahabat yang belum mengerti betul tentang melakukan posting atau membuat artikel di blogspot terutama arti dan fungsi dari toolbar yang ada pada menu lembar kerja posting pada blogspot.

Di dalam menu posting ada beberapa toolbar yang bisa kalian gunakan :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar (upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

--> Sebaiknya klik terlebih dahulu " Edit HTML ", jika langsung di mode "Compose/Tulis", sering terjadi hang pada komputer (pengalaman saya pribadi).

--> Copy artikel yang telah kalian buat sebelumnya selanjutnya paste di area posting dan Edit sesuai dengan kemauan.

--> Klik tombol "Compose / Tulis " untuk melakukan editing (jika anda masih bingung dengan kode HTML).

--> Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi postingan anda.

--> Klik tombol " Preview " untuk melihat hasil posting yang nantinya akan tampil di dalam blog barangkali masih ada yang perlu di edit.

--> Klik tombol " Publish ".

Nah gimana? gampang bukan silakan berposting ria hehehehe!.

sumber --> http://pelajaran-blog.blogspot.com

Kode Dasar HTML

2012-03-02T07:48:00.003-08:00

Ada berbagai macam format kode dasar HTML seperti pemformatan text berupa tebal, miring, garis bawah, membuat tabel,dll yang hanya dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML.

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

Belajar

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4<sub>2</sub></p>hasilnya seperti ini:

4₂

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

4²

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

~~Belajar~~

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1

DOT 2

DOT 3

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

Belajar

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel>

hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel>
hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

sumber --> http://pelajaran-blog.blogspot.com

Pengertian Javascript

2012-03-02T07:30:00.002-08:00

Kalau pengertian Javascript yaitu kode yang berfungsi untuk membedakan suatu variable

Secara umum kode ini akan menjalankan suatu tugas yang mana kode ini sangatlah sensitive. Lain seperti HTML yang tidak terpengaruh adanya tulisan <b> dan </b> (tanda "/" pada kode).

Javascript tidak mempunyai tolerant dengan kode seperti diatas contoh lain; penulisan kata "var" tidak bisa ditulis "VAR" maupun "Var".

Jika anda pusing karena baca artikel di bawah ini tentang pengertian Javascript oleh Bp.Supono :

http://supono.wordpress.com/2006/09/05/apa-itu-javascript/ Pelajaran Blog

JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya."