Percantik Blog

1.Buat Pesan Pembuka Dan Penutup

Login ke akun Blogger anda,

klik Layout-Edit HTML lalu pada bagian atas cari kode <head> dan masukan script berikut ini dibawahnya.

Text yang berwarna Kuning bisa sobat ganti sesuai keinginan sobat, klik pratinjau atau preview sebelum menyimpannya. Kalau anda sudah berhasil, silahkan di simpan Templatenya. Bagaimana, mudah bukan? Anda cukup menambahkan sedikit kode Java script pada halaman blog anda dan anda sudah tampil beda

2.Buat Lipatan Pada Blog

Masuk Ke Edit HTML lalu Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

3.Buat Buku Tamu

Langkah pertama yang perlu dilakukan adalah membuka panel blog yang biasa disebut dasbor kemudian pilih rancangan untuk menambah widget dan masukkan kode dibawah ini kedalam Html/javascript;

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script><style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}#wadah #abdursytes {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}#tutupan {
padding:2px 0 0 0;
}</style><ul><center> <a href="#abdursytes" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="150" /></a> </center><div dir="ltr" style="text-align: right;" trbidi="on"> widget by;<a href=''http://alif-laam-miim.blogspot.com/2011/12/cara-membuat-buku-tamu-atau-widget.html''>www</a></div></ul><div id="wadah"> <div id="abdursytes" class="window">

KODE SHOUTMIX

</div><div id="semah"></div></div>
Dan simpan,

ukuran shoutmix yang sesuai adalah (width;262 height;383) diatas ukuran ini akan menutup bingkai bukutamu dan merusak tampilan buku tamu begitu juga ukuran dibawah ukuran ini.

4.Buat Menu Navigasi

Langkah Pertama:

1. Log in ke account Blogger anda

2. Pada Menu Dashboard klik "Design", setelah itu klik "Edit HTML"

3. Centang kolom "Expand widget template", jangan lupa klik "Download template lengkap" ini memudahkan anda mengembalikan template ketika anda melakukan kesalahan saat pengeditan

4. Cari kode di bawah ini, untuk mempermudah pencarian tekan Ctrl + F lalu masukkan yang anda cari

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

Cat: jika anda tidak menemukan kode-nya, tolong anda perhatikan 'no'/> yang terdapat pada kode di atas, ganti menjadi 'yes'/> setelah itu anda cari kembali kode tersebut, sudah dapat ? Jika sudah dapat silahkan anda lanjut ke Langkah kedua.

5. Setelah ketemu kode-nya, maka kurang lebih tampilan seperti kode di bawah ini, tergantung dari template anda

6. Ubah kode showaddelement='no'/> menjadi showaddelement='yes'/>

7. Jika sudah selesai, klik "Save template"/simpan template anda

Langkah kedua:

1. Untuk Langkah kedua, klik "Page Elements", posisi-nya tepat di samping kiri "Edit HTML"

2. Klik "Add a Gadget" yang terdapat di bawah Header/Judul Blog anda, jika di template anda tidak terdapat pilihan "Add a Gadget" tepat di bawah Header, silahkan klik disini Membuat Elemen Halaman Di Bawah Header

3. Setelah anda klik "Add a Gadget", pilih "HTML/JavaScript" lalu masukkan kode di bawah ini

<a href="http://www.ivennuary.com " class="navigation">Home</a>
<a href="http://www.ivennuary.com " class="navigation">Contact</a>
<a href="http://www.ivennuary.com " class="navigation">About Me</a>
<a href="http://www.ivennuary.com " class="navigation">Daftar Isi</a>
<a href="http://www.ivennuary.com " class="navigation">Facebook</a>
<a href="http://www.ivennuary.com " class="navigation">Twitter</a>
<a href="http://www.ivennuary.com " class="navigation">RSS</a>
<a href="http://www.ivennuary.com " class="navigation">Back Link</a>

4. Untuk Link http://www.ivennuary.com silahkan di ganti dan sesuaikan dengan Link anda, ganti tulisan yang berwarna Biru dengan judul Menu Blog yang anda inginkan

5. Setelah itu klik "Save/Simpan" dan lihat hasil-nya

Sedikit tambahan, jika anda ingin memodifikasi Menu Navigasi Di Blog yang anda buat sehingga menimbulkan efek warna dan background, ikuti langkah-langkah di bawah ini:

1. Masuk kembali ke "Edit HTML"

2. Cari kode di bawah ini, untuk mempermudah anda dalam mencari tekan Ctrl + F

]]></b:skin>

3. Setelah anda menemukan kode di atas, Copy kode di bawah ini dan Paste tepat di atas-nya

a.navigation {
background: #3333ff;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Ket: Ganti angka yang berwarna Merah di atas untuk menyesuaikan jarak antara Menu yang anda buat, untuk mengubah warna tampilan baik saat anda sentuh maupun tidak silahkan ganti tulisan yang berwarna Biru dengan kode warna yang anda inginkan.

4. Jika anda mengerti tentang CSS, anda dapat memodifikasi tampilan Menu seperti pada Gambar di atas, setelah selesai klik "Save template" anda, dan lihat hasil-nya.

5.Mengubah Domain

Domain Com

Cara menggnati nama domain blogspot ke dotcom sebenarnya tidak terlalu sulit. Asalkan Anda sudah punya nama domain, blogsot siap untuk dicustom. Ada 2 versi cara custom domain blogspot, 1. Yang tidak ribet, 2. Yang ribet

1. Jika ente mau yang tidak ribet, sewaktu ente beli domain pada layanan jual domain, ente mintakan setting custom domain. memang tidak semua layanan jual domain memberikan setup custom domain secara gratis. Namun jika ente ingin yang gratis, silahkan ke layanan jual domain disini. Dijamin gratis!

2. Namun jika ente ingin yang ribet sedikit, ya setting sendiri. Gini caranya:

- Beli dulu domainnya, lalu jika domain nya sudah ente miliki
- Silahkan buka web https://www.dnspark.net/register/
- Isi semua form yang diminta dengan benar
- Jika sudah selesai silahkan Login
- Pada Configuration Menu pilih DNS Hosting -> Add Domains
- Pilih no.2 yaitu Enter a domain:
- Pada Enter new domain:, masukkan domain ente yang ingin dicustom tanpa www. Contoh: feryfadly.com
- Jika sudah lalu klik "Add Now"
- Pada Domain List, pilih nama domain yang baru ente masukkan
- Lali klik Alias Records
- Pada Add new alias records for (contoh:feryfadly.com) masukkan WWW pada HostName dan ghs.google.com pada Destination Name.
- Lalu klik Add Alias
- Selamat... Konfigurasi DNS domain ente sudah selesai....

Selanjutnya lakukan setting pada blogger.com

- Masuk ke Tab Pengaturan
- lalu masuk Publikasikan
- Kemudian masukkan domain ente
- Lalu klik Simpan

Tunggu hingga 1x24 jam untuk resolved.

Domain Co.cc

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.

6.Buat Widget Daftar Isi

Widget daftar isi ini akan memudah kan pembaca dalam mencari artikel yang ingin dibaca di blog Anda sehingga memungkinkan artikel blog Anda semakin populer. Untuk memasang widget ini cukup dengan menekan tombol di bawah ini.

Kemudian Blogger akan menambahkan widget otomatis pada blog Anda!.

Cara di atas adalah cara untuk memudahkan Anda memasang widget tersebut dan di dalam widget tersebut berisi kode seperti berikut ini:

<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>

Kode tersebut akan menampilkan daftar isi artikel blog ini. Silahkan ganti ~~http://harbudimp.blogspot.com~~ dengan alamat blog masing-masin.

Kode yang berwarna merah adalah kode CSS untuk memperindah tampilan daftar isi dan silahkan atur sesuai denga selera masing masing.
Silahkan seting pada border untuk garis pinggir dan warnanya dan jika perlu tambahkan kode width: 200px; sebelum height, untuk mengatur lebar widget tersebut. Di bawah ini adalah screenshot widget daftar isi yang sudah di pasang.

7.Buat Meteor Jatuh

Masuk Ke Elemen Laman, Add Gadget Lalu Terakhir Copy :

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js">
</script>

8.Buat Lebah Terbang

Add Gadget

<script language="JavaScript">
var no = 5;
var speed = 15;
var snowflake = "http://1.bp.blogspot.com/-CbK9z99AHPA/TeMEICcpXUI/AAAAAAAAABc/vzHeUAQ3mWI/s1600/lebah_madu.gif";
</script>
<script language="JavaScript" src="http://my-wayan-katel.googlecode.com/files/lebah.js"></script>

9.Buat Chat Facebook Di Blog

Add Gadget

<script type="text/javascript">
var envoSn=51920;
var envProtoType = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + envProtoType + "d.envolve.com/env.nocache.js' type='text/javascript'%3E%3C/script%3E"));
</script>

10.Nama Mengikuti Mouse

Add Gadget

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "HARBUDI MP";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Rubah Teks Yang Berwarna Merah Dengan Tulisan Sesukamu

Harbudi Manggala Putra

Percantik Blog

Artikel Terkait :)

0 komentar:

Posting Komentar

Arsip Blog

Label

Mengenai Saya

Pengikut