Seo Google

Tutorial buat Efek Gelembung di Blogspot

Posted by Unknown at 10:33 AM { No comments }

Tutorial buat Efek Gelembung di Blogspot
Kali ini saya bagikan Tutorial Cara buat Efek Gelembung di Blogspot. Untuk contohnya bisa dilihat di gambar dibawah ini

Cara buat efek Gelembung di blogspot adalah:
1. Buka dashboard blogger.
2. Buka tata letak.
3. Pilih Tambahkan Gadget.
4. Kemudian pilih HTML/Java Script
5. Copy paste kode dibawah ini

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background dari gelembung
var bubbles=100; // banyaknya jumlah gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;

function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;

function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;

function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

</script>

6. Simpan/save

Kode Warna HTML

Posted by Unknown at 8:44 PM { No comments }

Kode Warna HTML
Kali ini saya bagikan Kode HTML warna. Kode HTML warna ini berguna bagi kita untuk memasukkan kode warna pada widget, template, script CSS maupun javascript.
Silakan dipilih warna dan kode HTML terletak diatas nama warna tersebut.

#FOF8FF
Aliceblue

#FAEBD7
Antiquewhite

#00FFFF
Aqua

#7FFFD4
Aquamarine

#F0FFFF
Azure

#F5F5DC
Beige

#FFE4C4
Bisque

#000000
Black

#FFEBCD
Blanchedalmond

#0000FF
Blue

#8A2BE2
Blueviolet

#A52A2A
Brown

#DEB887
Burlywood

#5F9EAD
Cadetblue

#7FFF00
Chartreuse

#D2691E
Chocolate

#FF7F50
Coral

#64950
Cornflowerblue

#FFF8DC
Cornsilk

#DC143C
Crimson

#00FFFF
Cyan

#00008B
Darkblue

#008B8B
Darkcyan

#B8860B
Darkgoldenrod

#A9A9A9
Darkgray

#006400
Darkgreen

#8B008B
Darkmagenta

#BDB76B
Darkkhaki

#556B2F
Darkolivegreen

#FF8C00
Darkorange

#9932CC
Darkorchid

#8B0000
Darkred

#E9967A
Darksalmon

#8FBC8B
Darkseagreen

#483D8B
Darkslateblue

#2F4F4F
Darkslategray

#00CED1
Darkturquoise

#9400D3
Darkviolet

#FF1493
Deeppink

#00BFFF
Deepskyblue

#696969
Dimgray

#1E90FF
Dodgerblue

#B22222
Firebrick

#FFFAF0
Floralwhite

#228B22
Forestgreen

#FF00FF
Fuchsia

#DCDCDC
Gainsboro

#F8F8FF
Ghostwhite

#FFD700
Gold

#DAA520
Goldenrod

#808080
Gray

#008000
Green

#ADFF2F
Greenyellow

#F0FFF0
Honeydew

#FF69B4
Hotpink

#CD5C5C
Indianred

#4B0082
Indigo

#FFFFF0
Ivory

#F0E68C
Khaki

#E6E6FA
Lavender

#FFF0F5
Lavenderblush

#7CFC00
Lawngreen

#FFFACD
Lemonchiffon

#ADE8E6
Lightblue

#F08080
Lightcoral

#E0FFFF
Lightcyan

#FAFAD2
Lightgoldenrodyellow

#90EE90
Lightgreen

#D3D3D3
Lightgray

#FFB6C1
Lightpink

#FFA072
Lightsalmon

#20B2AA
Lightseagreen

#87CEFA
Lightskyblue

#778899
Lightslategray

#B0C4DE
Lightsteelblue

#FFFFE0
Lightyellow

#00FF00
Lime

#32CD32
Limegreen

#FAF0E6
Linen

#FF00FF
Magenta

#800000
Maroon

#66CDAA
Mediumaquamarine

#0000CD
Mediumblue

#BA55D3
Mediumorchid

#9370DB
Mediumpurple

#3CB371
Mediumseagreen

#7B68EE
Mediumslateblue

#00FA9A
Mediumspringgreen

#48D1CC
Mediumturquoise

#C71585
Mediumvioletred

#191970
Midnightblue

#F5FFFA
Mintcream

#FFE4E1
Mistyrose

#FFE4E1
Moccasin

#FFDEAD
Navajowhite

#000080
Navy

#FDF5E6
Oldlace

#808000
Olive

#6B8E23
Olivedrab

#FFA500
Orange

#FF100%0
Orangered

#DA70D6
Orchid

#EEE8AA
Palegoldenrod

#98FB98
Palgreen

#AFEEEE
Paleturquoise

#DB7093
Palevioletred

#FFEFD5
Papayawhip

#FFDAB9
Peachpuff

#CD853F
Peru

#FFC0CB
Pink

#DDA0DD
Plum

#B0E0E6
Powderblue

#800080
Purple

#FF0000
Red

#BC8F8F
Rosybrown

#4169E1
Royalblue

#8B4513
Saddlebrown

#FA8072
Salmon

#F4A460
Sandybrown

#2E8B57
Seagreen

#FFF5EE
Seashell

#A0522D
Sienna

#C0C0C0
Silver

#87CEEB
Skyblue

#708090
Slategray

#FFFAFA
Snow

#00FF7F
Springgreen

#4682B4
Steelblue

#D2B48C
Tan

#008080
Teal

#D8BFD8
Thistle

#FF6347
Tomato

#40E0D0
Turquoise

#EE82EE
Violet

#F5DEB3
Wheat

#FFFFFF
White

#F5F5F5
Whitesmoke

#FFFF00
Yellow

#9ACD32
Yellowgreen

Tutorial Cara buat blog di Blogspot

Posted by Unknown at 7:46 PM { No comments }

Tutorial Cara buat blog di Blogspot
Ada dua jenis platform yang terkenal dalam membuat suatu blog, yaitu blogspot dan wordpress. Kali ini saya akan bagikan tutorial atau Cara buat blog di Blogspot.
Langsung saja tutorial buat blog di blogspot saya mulai.
1. Silakan menuju ke Blogger.com
2. Klik Sign Up dibagian pojok kanan atas.

3. Anda akan masuk ke halaman seperti ini dan isikan data-data yang diperlukan.

4. Setelah itu anda akan masuk ke halaman seperti dibawah ini. Klik next step atau anda ingin upload foto.

5. Setelah itu klik back to blogger.

6. Continue to blogger.

7. Akun blogger anda telah siap digunakan.

Demikian Tutorial Cara buat blog di blogspot.

Cara membuat teks berjalan-marquee di Blogspot

Posted by Unknown at 6:47 PM { 1 comment }

Cara membuat teks berjalan-marquee di Blogspot
Pada kesempatan ini saya akan share tentang Cara membuat teks berjalan-marquee di Blogspot. Perumpamaannya seperti teks berjalan di televisi bagian bawah.

Untuk memasukkan script-script dibawah ini kedalam postingan harus di copy paste pada postingan versi HTML dan bukan Compose atau bisa juga dengan menambahkan widget pada tata letak.

1. Script teks berjalan dari kanan ke kiri.

<marquee direction="left">Teks berjalan dari kanan ke kiri</marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger

2. Script teks berjalan dari kiri kekanan.

<marquee direction="right">Teks berjalan dari kiri ke kanan</marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 3. Script teks berjalan dari bawah ke atas.

<marquee direction="up">Teks berjalan dari bawah ke atas</marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 4. Script teks berjalan dari atas ke bawah.

<marquee direction="down">Teks berjalan dari atas ke bawah</marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 5. Script teks bergerak bolak balik dari kiri ke kanan.

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Teks bergerak bolak balik dari kiri ke kanan </marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 6. Script teks bergerak bolak balik dari kanan ke ke kiri.

<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Teks bergerak bolak balik dari kanan ke ke kiri </marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 7. Script teks bergerak bolak balik dari atas ke bawah.

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Teks bergerak bolak balik dari atas ke bawah </marquee>

Contoh : Seo Google - Tutorial, Tips/Trik Blogger 8. Script teks bergerak zig - zag memantul.

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Teks bergerak zig - zag memantul </marquee></marquee></center>

Contoh :
Seo Google - Tutorial, Tips/Trik Blogger 9. Script teks bergerak zig - zag menembus.

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Teks bergerak zig - zag menembus </marquee></marquee></center>

Contoh :
Seo Google - Tutorial, Tips/Trik Blogger

Cara buat Spoiler kaskus di Blogger

Posted by Unknown at 10:31 AM { No comments }

Cara buat Spoiler kaskus di Blogger.
Kali ini saya share Cara buat Spoiler kaskus di Blogger yang sering kalian lihat di forum kaskus. Spoiler tersebut bisa diterapkan juga pada blogger.

Contohnya seperti dibawah ini:

Judul Spoiler

Keuntungan dari memakai ini spoiler ini isi postingan terlihat lebih rapi, ringkas dan paling tidak mengurangi berat blog.
Caranya adalah :
1. Copy paste kode dibawah ini ke postingan anda dalam bentuk HTML ( bukan Compose)

<div><div style="margin-bottom: 2px;"><i><b><small>Judul Spoiler </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 50px; font-size: 10px;" 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 style="border:inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI SPOILER AGAN-AGAN DIMARI

</div></div></div>

2. Simpan atau di Publish

Daftar List CPM-Cost Per Million

Posted by Unknown at 12:51 PM { 3 comments }

Daftar List CPM-Cost Per Million
Setelah sebelumnya saya share Daftar List PPC-Pay Per Click maka kali ini saya bagikan Daftar List CPM-Cost Per Million.

CPM atau Cost Per Million (Cost Per Impression) merupakan jaringan periklanan yang membayar kita (sebagai publisher) per 1000 impresi yang terlihat di blog kita yang telah dipasang banner iklan CPM.
Sama dengan PPC- Pay Per Click yang jumlahnya banyak sekali di dunia internet, CPM juga memiliki jumlah yang banyak. Berikut dibawah ini daftar CPM-Cost Per Million yang berhasil saya kumpulkan dan juga telah saya nikmati Payment Out beberapa dari mereka.

Casale Media – Casale Media - Home
Valueclick – http://www.valueclick.com
Tribal Fusion – Home « Tribal Fusion
Traffiq – http://www.trafficq.com
Yahoo AdReady - AdReady - Online Display Advertising Campaign Software for Agencies, Advertisers & Publishers | AdReady
Ask – http://www.ask.com/products/
Illyx - illyx Network | Affiliate platform Pay per install, impression, click
MegaClick - NOTICE
GoTraffic.com – Online traffic marketplace, where website owners and online marketers do business.
Advertising.com – Shopping Search | Ask.com
BuySellAds – Buy Ads | BuySellAds
DoubleClick – DoubleClick: The technology foundation for digital advertising
Burst Media - BURST MEDIA
Dashboard Ad - Dashboard Ad
Adengage - AdEngage - Engaging Internet Advertising
CPX Interactive - Welcome to CPX
Undertone - Undertone
Ad Pepper - ad pepper media: Home
ybrantdigital - www.ybrantdigital.com
Media Traffic – www.mediatraffic.com
Trafficvance – www.trafficvance.com
DirectCPV – www.directcpv.com
AdOnNetwork – www.adonnetwork.com
Lead Impact – www.leadimpact.com
Yllix - www.yllix.com
Surfactif - www.surfactif.fr
cpmleader - www.cpmleader.com
Axill - www.axill.com

Daftar List PPC-Pay Per Click

Posted by Unknown at 12:32 PM { 5 comments }

Daftar List PPC-Pay Per Click.

PPC ( Pay Per Click ) adalah metode kerjasama periklanan di internet dimana pemilik blog/situs akan dibayar atas setiap klik dari pengunjung/visitor blog/situs pada link iklan yang terpasang di situs web/blog miliknya.

Banyak sekali PPC yang ada di dunia internet yang bisa memberi kita uang/dollar tapi kita harus pinta-pintar dalam memilih, karena terkadang mereka memberikan syarat yang lumayan berat bagi blog pemula.

Berikut adalah Daftar List PPC-Pay Per Click :
PPC-Pay Per Click Luar Negeri :

Google Adwords – http://adwords.google.com
MSN Adcenter - https://adcenter.microsoft.com
Looksmart – LookSmart > Pay-Per-Click Search Advertising
7Search – 7Search | Pay-Per-Click Search Engine Advertising Network
Facebook Ads – Advertising | Facebook
MyAds – http://www.myads.com
Clicksor – Contextual Online Advertising and Behavioral Marketing Company
Marchex - Marchex : Pay Per Click
AdSide – AdSide
Adblade – Adblade - Online Advertising and Monetization Services
Adbrite – adBrite Exchange
AdSonar – http://www.adsonar.com
POF Ads - https://ads.pof.com
Advertise.com – Online Advertising Company : PPC : Email Traffic : Remarketing : Display Advertising : Online Ads : Pay Per Click Advertising : Advertise.com
Pulse360 – Pulse 360 - The Leader in Content Targeted Sponsored Links on the Web's Best Sites
AdClickMedia – AdClickMedia Advertising Network - Pay Per Click Advertising, online text advertising, banner advertising, and Interstitial advertising.
Bidvertiser – BidVertiser - Pay Per Click Advertising On Sites Of Your Choice.
Adknowledge – Adknowledge.com | The leading long tail marketplace
Findit-quick - Pay Per Click | Pay Per Click Advertising | PPC | PPC Advertising | Pay Per Click Search Engine
AdManage – Admanage affiliate and advertising network - PPC, CPC Banner, In Text, Display Ads, CPV, Domain Parking
Findology – http://www.findology.com
AdMarketplace – Performance-Driven Search Advertising | adMarketplace.com
Ezanga - http://www.ezanga.com/
Innity - www.innity.com

PPC-Pay Per Click Dalam Negeri/lokal :

Tutorial Menghasilkan Uang dari Blog

Posted by Unknown at 12:17 PM { 2 comments }

Tutorial Menghasilkan Uang dari Blog.

Saat ini kita membuat blog tidak hanya berbagi ilmu dan artikel. Kita bisa mendapatkan uang atau dollar melalui blog yang kita miliki. Terserah itu platform blog anda adalah Blogspot, Wordpress, Drupal atau yang lainnya.

Banyak cara agar kita bisa mendapatkan pendapatan dari blog atau website yang kita miliki.

Ada 3 macam yaitu:

1. PPC ( Pay Per Click ) adalah metode kerjasama periklanan di internet dimana pemilik blog/situs akan dibayar atas setiap klik dari pengunjung/visitor blog/situs pada link iklan yang terpasang di situs web/blog miliknya. Untuk list daftar PPC lengkap bisa lihat di Daftar List PPC-Pay Per Click.

2. CPM atau Cost Per Million (Cost Per Impression) merupakan jaringan periklanan yang membayar kita (sebagai publisher) per 1000 impresi yang terlihat di blog kita yang telah dipasang banner iklan CPM. Untuk list daftar CPM lengkap bisa lihat di SINI

Saya rasa cuma dua ini saja yang cukup menjanjikan dalam menghasilkan uang dari blog.

Tutorial Dropdown Menu-Sub Menu Blogger

Posted by Unknown at 11:43 AM { 1 comment }

Tutorial Dropdown Menu Blogger
Pada kesempatan ini saya bagikan Cara Tutorial Dropdown Menu Blogger. Dengan ini anda bisa menambahkan menu dan sub menu untuk kategori di blogger.

Caranya adalah:
1. Buka dashboard blogger
2. Buka Edit template
3. Centang expand widget template
4. Cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )

]]></b:skin>

5. copy paste kode dibawah ini sebelum kode diatas.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

6. Kemudian cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )

</head>

7. Lalu copy paste kode ini diatas kode point no. 6

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

8. Lalu klik Save/simpan template.

9. Buka Tata letak.

10. Tambahkan gadget terserah dimana. kemudia pilih HTML/java script kemudia masukkan kode dibawah ini.

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

11. Ganti tulisan Drop 1-2 dan seterusnya dengan nama kategori blog anda.
12. Ganti juga tanda # dengan link kategori blog anda.
13. Save/simpan.

Tutorial menambahkan Google Translate di Blogger

Posted by Unknown at 11:11 AM { No comments }

Tutorial menambahkan Google Translate di Blogger
Kali ini saya share tentang Tutorial menambahkan Google Translate di Blogger, dengan ini anda bisa menambahkan Google translate/Penerjemah Google dengan fitur penambah adanya bendera negara.
Ini berfungsi agar pengunjung/visitor blog anda dari luar negeri yang tidak mengerti bahasa Indonesia bisa menerjemahkan secara langsung tanpa kesulitan harus membuka software penerjemah.

Caranya adalah :
1. Buka dashboard blogger
2. Buka Tata letak
3. Pilih tambahkan gadget
4. Pilih HTML/Java script
5. Masukkan kode dibawah ini

<style>

 .google_translate img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        border:0;
        }
        .google_translate:hover img {
        filter:alpha(opacity=30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
        .google_translatextra:hover img {
        filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
  </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxrmX6kPDIRrH2cdxEKG9C-sZ0wePhqZaXJOP4mTwrGsNun22MQ5FIiJkYXbopiO2ry62ZkVfoWV-UEwPHitBT-GZvbcEaKLcaujque0oiWbvAkFrXHWQFbE1iFbQ_2F_8hUUQyJB6Uw/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnB_B7qdf22Uhis7Xy1dgNGWP_WRY1ex97ZVBxiuX0STnoaMjs62bki0EWeSRgCy8kSj1O80JifBygD4Om3320y2yqQpmFKY7-EXj5C91ovqyiuLryhw6r9T5J3p1pTEEcu9GE9fT1A/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMam6MZX5hSunSdFYVP6ORPh37_Oqd1lpVSAVBayz2cVwLvqw_LclC3uyOWudl39eM3PEFOKszsTV8zZynnKMb9FFHX-1SHTeWhzuvmZaDNG8DERvactbpp3XGBEV2merFUfoWokweEg/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bQGrHyCUOUCwQHA-q_eTi_-5PbCU4-EBCsMT6yNAG_H-wQZrinWjFoZvxbf0kxxAXaw3GIHK4kE-xrMiMzsW5WLal6jGykglfKEUoOiw6e3gaR_hnMAnXhFh3xBbVKa9tvAMX417XA/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiILsrDHCmsEhzfYD6i69W-GVL4T9wYFVKPWWngsde4jBIPTQ-A7lkinV8YBpOW9E6nHmhdP_Qyx3OknT4MT2qB2bl12H2KHZVYzc40Wgsz1XEnT_MHuGAIAXEiEDfZbzIjdy84M5X6Lg/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgku5yrL0mUUgumxzWfYOaq8w7vfcN6mf5o3ZyHnh6HCYz5kG5etMBTswCxIB_6crmo18DqNgkw-BuCQXlKJOePp7LBxS_fuL9YDFzmKgX6rsKaT7Evi2aY4eWcdl9cfoOPXu6QJ6AR_A/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhUEiuFfxYBKZhr0agEwuP5dy1pfYrfhJBhu9WFPhUR_rpPi-q_gsD25_993G-fUKugU_1IjQ3_pC9gWD5lfRlzSiu055u-EYyALFK67eW9mtS-JirdWDH8qf9Uceb56UHkD6i69kPQ/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtYhyphenhyphenz4zfkpT31pDbYwRGgSQyIz_-QqjCurOjADPAwsfHKoPVI8mDe9rBwash2I_mz-ATto59Vfif2t7UzOSnwwZ2FP4SuMmuO3iUs6-Opz5WNR1JPefKK4z7_wR_Y0onxdQfgz2-OA/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI7B0aaUiQmS2leTzq4F8nXyD4ymDEagQMdKXEEyMIwKf8oW8-70CSqn4y_mBupc9-mSZ377iLwbNEVRRc7WQZsTHCcwXR83Af0h0-8I_lQ7pJaF4iUEMHiRKZP8p1875lsUgn0iUPaw/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3Sk68S2OmAYWqDEIP0LPl8cw5YbLJZ909m-8bZ3aSLfjT95wmp_C35YXfRlSZ5-zi_O_NObaXTiiTxWo3dhEMZbJq_lGX4aRLgAFeCn5Llafy3tJtoG66Fh0i6ZsRg0V6wYlFMecqg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3r2LiclfB8vkqUt_ZAbl1NBjg8quTSPOjudAKyFRIJEdl1azHz_aoIVJWlBPSAct6dn1v74th_PfRvWwpVik5B_G_287b30OionIh9lFRiqdQgsPG3juU07OnfNhI5kzomWwa946rxA/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxow_-14bwMHjsfS2XOu2jbP5W2bitWmWWV2S7uPaKBx2o09yfS_jwEoy1U9j6ei42P2iEHbChB4MYxV9wlUwSf_F9-yYgBxqbHwRbiKVonDJ1ACrAwI49nlCkCNp_tnJC1n4y4kdig/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>      </div> 
  <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

 <br/>
        <a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>

5. Save/simpan

Tips membuat Page Views - Post Views Counter Widget

Posted by Unknown at 10:56 AM { No comments }

Tips membuat Page Views - Post Views Counter Widget
Kali ini saya akan share tutroial Tips membuat Page Views - Post Views Counter Widget seperti dibawah ini yang berguna unutk melihat berapa banyak halaman posting kita telah dilihat pengunjung/visitor blog kita.

Caranya adalah:
1. Untuk Style 1 kode scriptnya ( dengan grafik) adalah :

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/> <a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

2. Untuk Style 2 kode scriptnya ( tanpa grafik) adalah:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

3. Sebelum memasukkan salah satu kode diatas buka dashboard kemudian pilih template, lalu jangan lupa centang expand widget template ( selalu centang apabila anda ingin mengedit template).

4. Kemudian cari kode dibawah ini ( supaya mudah mencari tekan Ctrl+F ).

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

Atau jika tidak menemukan kode diatas ( point 4 ) bisa cari kode dibawah ini

<data:post.body/>

5. Kemudian copy paste kode point 1 atau 2 dibawah point ke 4

6. Save/simpan.

Cara membuat Navbar Transparan Blogger

Posted by Unknown at 10:36 AM { 1 comment }

Cara membuat Navbar Transparan Blogger.
Kali ini saya share bagaimana Cara membuat Navbar Transparan Blogger seperti dibawah ini:

Ada dua pilihan yaitu
1. Transparan Light
2. Transparan Dark
Caranya adalah:
1. Buka dashboard blogger
2. Klik tata letak
3. Lihat dipojok kanan navbar klik edit

4. Kemudian pilih new navbar.
5. Save/simpan.

Cara menambahkan Flash Animated Label Tags Cloud Widget For Blogger

Posted by Unknown at 10:00 AM { No comments }

Cara menambahkan Flash Animated Label Tags Cloud Widget For Blogger.
Bagi kalian yang ingin menambahkan widget blogger seperti gambar dibawah ini silakan ikuti cara dibawahnya.

Caranya:
1. Login ke akun blogger
2. Masuk ke dashboard -> template
3. Cari kode dibawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

4. Jika kesulitan mencari kode diatas bias menggunakan Ctrl+F
5. Lalu copy paste kode dibawah ini tepat diatas kode diatas

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6. Klik save/simpan.

Bubblicons Social Media Sharing Widget

Posted by Unknown at 1:33 AM { No comments }

Bagi kalian yang ingin menambahkan Facebook, twiiter atau social media sharing dengan menggunakan Bubblicons Social Media Sharing Widget bisa mencoba cara dibawah ini: