Tampilkan postingan dengan label tutorial blogger. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blogger. Tampilkan semua postingan

Sabtu, 21 Mei 2011

Cara Membuat Hidden Chatbox

 Haii para sobat blogger Slam Sejahtera ...? Pada malam hari ini saya akan memposting cara membuat Chatbox auto hide seperti milik saya ini. Gak usah basa-basi ..nih langsung aja..


1. Loggin ke blogger
2. Pilih rancangan >> Tambah Gadget
3. Copy and paste script dibawah ini










<!-- right hidden chatbox by http://anima-generation.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
padding:56px 0 20px 5px;
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnYlOWUmFTDntNkYy6BqYG6xq8GCfH-Ix_y69bd3X2z9RGoUhO_7i4qyHTRv50nPCL2puhRvJpmDZgbJ0IyEBrmPAO3O-sbsMF8FmKZQi6t-VFjEPyXZXaPUQnGmGRAwo8jRMWplnBwU/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

"CODE CBOX ANDA DISINI"


<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>

<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://anima-generation.blogspot.com END -->


4. Simpan template anda tanpa nama yah...
5. Selesai...Lihat blogger anda...
 
Note : 
Code warna hijau adalah tempat icon Chatbox anda, itu bisa anda ganti icon sesuka anda.. 
top:100px letak hidden chatboz dari atas
height:100px; tinggi kotak chatbox
 width:30px; lebar dari kotak chatbox
 float:left; letak hidden chatbox anda. jika ingin berada di kanan silahkan ganti "left" dengan right

Cara Memasang Widget Banner

Langsung aja yahhhhh...........
1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang expand template widget
4. Cari kode ]]></b:skin>5. Letakkan kode di bawah ini dan taruh di atas ]]></b:skin>

/*-----------ADSENSE------------------*/
.adspost {
background:#fff;
float: left;
width: 578px;
margin-bottom:5px;
padding: 10px;
overflow:hidden;
border:1px solid #f3f1eb;
}
/* Ads Spots 125x125 */
#adspot {
overflow: hidden;
padding:0;
}
.ad1, .ad3, .ad5, .ad7{
float: left;
margin-bottom: 5px;
padding-left:0px;
}
.ad2, .ad4, .ad6, .ad8{
float: right;
margin-bottom: 5px;
padding-right:0px;
}


6. Simpan

eiitss.. itu aja belum cukup..! selanjutnya

7. Langsung menuju tata letak > elemen laman
8. Tambah gadget > HTML/javascript
9. Copy kode di bawah ini
<div id='adspot'>
<!-- Ad1 start -->
<a class='ad1' href='URL Tujuan Banner'><img height='125' src='URL Banner?imgmax=800' width='125'/></a>
<!-- Ad2 start -->
<a class='ad2' href='URL Tujuan Banner'><img height='125' src='URL Banner?imgmax=800' width='125'/></a>
<!-- Ad3 start -->
<a class='ad3' href='URL Tujuan Banner'><img height='125' src='URL Banner?imgmax=800' width='125'/></a>
<!-- Ad4 start -->
<a class='ad4' href='URL Tujuan Banner'><img height='125' src='URL Banner?imgmax=800' width='125'/></a>
<div class='clearer'/>
</div>

10. Paste lalu simpan

ket:
URL Tujuan Banner : alamat tujuan, dimana alamat akan terpanggil jika banner di klik.
URL Banner : URL alamat gambar berasal atau di upload.

Cara membuat Form Email Subscriber/Berlangganan

Form tersebut fungsinya adalah untuk mempermudah para pembaca Blog kita agar bisa berlangganan atau mendapatkan info terbaru posting-an kita melalui email mereka.Jadi jika mem-posting artikel baru,maka para pelanggan/pembaca yang sudah memasukkan email mereka melalui form tersebut akan secara otomatis mendapatkan kiriman email berisi postingan terbaru kita.Beginilah cara membuat form Email subscriber:

1.Kunjungi situs http://www.feedburner.com/
2.Saat pertama kali datang anda akan langsung disodori kotak untuk mengisikan alamat Feed blog anda yang akan dibakar

Contoh alamat feed blog:
http://namabloganda.blogspot.com/feed/posts/default
*Ganti tulisan namabloganda dengan nama alamat blog anda masing-masing.

3.Isikan nama Feed Blog anda tadi dalam kotak yang disodorkan tersebut.Jika blog anda itu isinya hanya video-video,maka beri tanda centang pada kotak "I am a podcaster",jika tidak ada,tidak perlu dicentang.Kemudian klik tombol "next".

4.Setelah itu anda akan disodori lagi dengan form pendaftaran,isikan data-data yang diperlukan disana,lalu klik tombol "Acticate Feed".

5.Jika berhasil nanti akan ada informasi "Congrats!your....".

6.Dibawahnya akan ada tombol "next" dan link "Skip directly to feed management".Pilih link "Skip directly to feed management",sebenarnya lewat tombol "next".

7.Kemudian nanti akan ada beberapa menu,pilih menu "Publicize"

8.Setelah itu disebelah kiri akan muncul beberapa menu.Pilih menu "Email Subscriptions".

9.Kemudian klik tombol "Activate".

10.Setelah itu nanti akan ada beberapa kotak yang berisi kode-kode.Kalau anda menginginkan yang berntuk form,maka pilih kode yang ada di kotak "Subscriptions Form Code".

11.Copy kode yang ada dalam kotak tadi ,lalu klik tombol "Save" untuk mengaktifkan layanan tersebut.

12.Cara memasangnya,Login ke Blogger,pilih "Layout -> Tambah gadget->HTML/Javascript" lalu paste kode yang sudah anda copy kedalam konten HTML tersebut

Sekarang coba lihat blog anda,form untuk "Email Subcriber" sudah tersedia.Jika anda ingin meampilkan jumlah reader yang berlangganan berikut caranya:

-Login ke feedburner kemudian pilih Feed blog anda.
-Lalu masuk ke menu "Publicize" -> FeedCount".Di situ scriptnya harus anda copy dan pasang di blog anda.

Cara Membuat Recent Comment (Komentar Terbaru) di Blog

Fungsi dari recent comment atau komentar terbaru ini, agar kita dapat mengetahui siapa yang baru saja berkomentar dan dipostingan kita yang mana pengunjung meninggalkan komentarnya.

Nah berikut tutorial untuk membuat recent comment atau komentar terbaru:

1. Login ke blogger lalu pilih menu tata letak lalu plih elemen halaman
2. Kemudian copy script berikut ini :


<script style="text/javascript" src=" http://h1.ripway.com/oktri/recents.comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://yourblog.blogspot.com"/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti http://yourblog.blogspot.com dengan nama blog anda!
3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

5.Simpan! Selesai, lihat hasilnya diblog anda!

Membuat Efek Bintang dan Daun Berjatuhan

Postingan Ini merupakan sudah editan dari yang sebelumnya karena JS nya sudah tidak jalan lagi,Pertama  Membuat Efek Bintang Berguguran di blog kita
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten

<!-- Star Fall effect by http://www.oktri.co.cc -->
<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img6.imageshack.us/img6/4945/pinginbelajar.gif";
// Configure below to change number of snow to render
var no =20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 400;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>


7. Klik Simpan
8. Selesai 



Kedua  Membuat Efek daun berjatuhan  di blog kita
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten

<!-- script daun berguguran http://www.oktri.co.cc/ -->
<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img300.imageshack.us/img300/4945/pinginbelajar.gif";
// Configure below to change number of snow to render
var no =20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 400;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script> 


7. Klik Simpan
8. Selesai 



Keterngan :


Apabila anda Ingin berkreatifitas atau anda ingin merubah gambar yang akan berguguran /floating pada blog tinggal ganti sendiri  link yang berwarna merah dengan alamat gambar anda 
Terima kasih buat temen blogger telah memberi konfirmasi JS  yang sebelumnya tidak berjalan lagi

Cara Membuat Text Berjalan Pada Menubar

Dari judul postingan saja sudah terlihat bahwa kali ini saya akan membahas tentang "text berjalan pada bar menu", basi ya..biarin. Dalam tutorial kali ini lagi-lagi sobat harus mengotak-atik HTML template sobat, jadi sekali lagi saya sarankan lebih baik membackup terlebih dahulu template sobat ke dalam hardisk. Sudah siap ? yuk kita lanjutkan.

  1. Login ke Blogger dengan ID kalian.
  2. Klik Tata Letak.
  3. Lalu klik Edit HTML.
  4. Kemudian letakkan kode berikut ini setelah kode <head>


    <script language='JavaScript'>
    var txt=&quot;kepekzblog.blogspot.com&quot;;
    var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
    </script>
  5. Save Template dan lihat hasilnya.
  6. Tulisan yang berwarna merah silahkan sobat ganti dengan tulisan sobat.

Cara membuat Link Berkedip Ketika Cursor Melintas.

Jika kita perhatikan begitu banyak link-link yang terdapat di halaman blog kita. Saya sedikit ada trik cara membuat agar link-link tersebut berkedip ketika mouse melintas di atasnya.

Silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode </head> di dalam template anda
6. Tambahkan script berikut ini sebelum kode tersebut 

----------------------------------------------------------------------------------
<style>
a:hover { color:#00FFFF; text-decoration:blink; border-bottom:1px dotted #FF0000; }
</style>

----------------------------------------------------------------------------------
7. Kode #00FFFF adalah menyatakan warna link tersebut dan kode #FF0000 adalah warna garis bawahnya
8. Silahkan anda variasikan sesuai dengan warna kesukaan anda
9. Klik Simpan Template
10. Selesai

cara mengganti backgroud header blog

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info
merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya  

#header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width
adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.


7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih
Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.
9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

cara merubah domain blog ke co.cc

CO.CC:Free Domain

Biasanya ketika membuat blog di blogger, kita akan mendapat nama blog http://namablog.blogspot.com, kita bisa merubah nama domain blog dengan yang lebih bagus. Salah satu layanan penyedia domain gratis yaitu co.cc. Jadi nantinya nama domain blog kita akan menjadi http://namablog.co.cc. Kemarin saya coba mengganti domain blog saya ke co.cc, dan ternyata berhasil dengan mudah.

Ok, marilah kita mulai saja, caranya adalah sebagai berikut :
1. Langkah pertama yang perlu dilakukan adalah mendaftar pada layanan co.cc ini.
2. Dapatkan nama domain terlebih dahulu dengan mengisi pada kotak yang tersedia, dan
klik Check Availability. Atau lebih mudahnya gunakan kotak dibawah ini (Isikan domain yang ingin kamu daftarkan!) :

3. Setelah mendapatkan nama domain, selanjutnya Masuk pada menu Domain setting >>
Manage Domain dan klik Setup
4. Abaikan Menu 1>> manage DNS / kosongkan name servernya anda langsung klik menu
2>> Zona Record
5. Isi add record dengan isian sebagai berikut :
Host : isi dengan nama domain yang sudah anda daftarkan misal : www.namablog.co.cc
TTL : 1 D (tidak perlu dirubah)
Type : cname
Value : ghs.google.com
6. Kemudian klik Setup

Kita telah selesai setting pada co.cc, kemudian tinggal setting di blogger:
1. Masuk / login ke blogger.com.
2. Masuk menu Setting >>> Publishing (Pengaturan >> Publikasikan)
3. Kemudian pilih “Switch to: • Custom Domain” (Berpindah ke : Domain Ubahsuaian)
4. Klik “Already own a domain? Switch to advanced settings” (Beralihlah ke pengaturan lanjut)
5. Isikan pada kolom “Your Domain” dengan domain co.cc yang anda daftarkan tadi.
6. Use a missing files host? pilih No.
7. Masukan Word Verivication dan klik Save setting.

Yapzz, sudah selesai, mudah bukan Blog kita sekarang sudah berganti nama domain menjadi co.cc, tinggal menunggu proses sinchronisasinya dari co.cc ke Blogspot maksimal 24 jam setelah itu kita sudah bisa mengakses url blogspot.com anda dengan nama domain co.cc yang telah kita buat tadi.

Cara membuat Tab View Menu di Blog

Tab Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.Hot

  1. Silahkan login ke blogger dengan ID sobat tentunya.
  2. Tuju Tata Letak.
  3. Klik Edit HTML.
  4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
  5. Kemudian letakkan kode javascript berikut sebelum kode </head>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
      var Tab = Tabs.firstChild;
      var i   = 0;
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>

  6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Lebar Menu Utama Atas */
    text-align: center;
    height: 30px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* Warna Font Menu Utama Atas */
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #E6E6E6; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

  7. Kemudian Simpan Template.
  8. Langkah selanjutnya, silahkan sobat klik Tata Letak.
  9. Klik Elemen Halaman dan tambahkan Gadget.
  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>

    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />

    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

  11. Kemudian Simpan.

Keterangan :
  • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
  • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  • Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.
Oke sobat, selamat mencoba. Semoga berhasil.

Cara Pasang Alexa Toolbar:Ketahui rank blog yang kamu kunjungi !

Pada postingan kali ini saya akan memberi tahu bagi yang belum tau untuk pemasangan alexa toolbar yang dapat menampilkan ranking alexa dan pagerank pada blog yang anda kunjungi atau blog anda sendiri.Toolbar ini akan terletak pada browser internet anda(Terutama untuk mozila).Pemasangan ini juga dapat membantu peningkatan ranking alexa blog anda tersendiri.Langsung saja pada tutorial pemasangan:

1.Tuju ke: www.alexa.com
2.Cari sidebar alexa yang menunjukan untuk pemasangan toolbar,atau bisa langsung klik disini
3.Lalu klik Install Alexa Toolbar
gambarnya seperti ini:



4.Lalu anda akan dibawa ke halaman tentang ketentuan dan persyaratan(privacy policy)
5.Kemudian anda harus klik "Accept and Install"
6.Setelah itu pada browser anda akan muncul gambar seperti ini pada browser anda

7.Klik allow.tunggu beberapa saat
8.Lalu akan muncul pop up,klik saja ok
9.Setelah itu add-ons mozila akan muncul seperti ini(sedang proses install toolbar)
10.Langkah terakhir,tinggal klik "restart firefox" untuk penerapan pada browser anda.

Sekian dulu untuk sobat yang ingin memudahkan melihat rank blog anda atau yang lainnya.Semoga berhasil!

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More