Cara Mempercantik Tampilan Blog

Assalamu'alaikum Para Pembaca dan para Pencari Berita :)

Di Pos san saya kali ini Akan membahas Tentang Cara Mempercantik Tampilan Blog Anda dengan Simpel dan Nggak Ngebosennin..

Pertama tama dan paling Utama Sebuah Blog nggak perlu terlalu Menor,, taukan artinya Menor? Sebuah Blog itu nggak harus Banyak Ini itunya, itu malah Bikin Tampilan Blog jadi lebih Jelek dan Menyilaukan Mata.

1. Pilihlah template yang Cocok untuk tema Blog Kalian,, biasanya sih Saya Nyari Template Blog di btemplates.com,, Semangat Ya gan Cari Template yang bagus. kalau belum ngerti silahkan klik Cara Mengganti Templates dengan Templates Pilihan Anda

2. Setelah Menyesuaikan Templates berikutnya Bisa menambahkan Kreasi Misal Seperti Manambahkan Efek Gelembung Pada Kursor Blog Anda klik Cara Membuat Efek Gelembung Pada Kursor blog Anda

3. Bisa Juga Anda Tambahkan Likebox Twitter Anda baca di Cara Membuat Like Box Twitter

Segini Dulu Deh Kapan Kapan Disambung :)

Cara Membuat Likebox Twitter dan Facebook

Langsung Aja

1. Login Ke blogger Anda
2. Klik Rancangan Ata Tata Letak
3. Tambahkan Gadget
4. pilih HTML/Javascript
5. Kemudian Masukkan Kode

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Like And Follow Me ya biar saling kenal :)</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Patiah-Listiana/326539420727663?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=patiah_listiana&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a></div>

Klik Simpan

catatan; Tulisan berwarna PINK Silahkan Ganti Dengan Nama Twitter dan fanfage kalian

Terimakasih

Baca Juga

Cara Mengganti Templates Blog Sesuka Anda

Cara Membuat Efek Gelembung Pada Kursor Blog 

Cara Mempercantik Tampilan Blog Anda 

Contoh-contoh Makalah 

Pulsa Gratis dari Mcent 

Pulsa Gratis Dari Nusaresearch 

Pulsa Gratis Dari Pulsacyber 

Pulsa Gratis dari Ann-kate

 

 

Cara Membuat Kursor Gelembung Pada Blog

Singkat Aja  ...

1. seperti Biasa Buka Blog sobat
2. kemudian Pilih Tata Letak/Rancangan
3. Pilih Tambahkan Gadget
4. Pilih yang HTML/Javascript
5. Copy Pastekan Kode Berikut Ke kolom Javascript

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://ade-tea.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
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>


Kode yang Berwarna Pink Bisa Kalian Ganti Dengan Warna Kesukaan Kalian


Kemudian Simpan
Selesai


Semoga Bermanfaat :)



Baca Juga:
Cara Mempercantik Tampilan Blog Anda 

Contoh-contoh Makalah 

Pulsa Gratis dari Mcent 

Pulsa Gratis Dari Nusaresearch 

Pulsa Gratis Dari Pulsacyber 

Pulsa Gratis dari Ann-kate

Cara Mengganti Template dengan Template Pilihan Anda

Sesuai Judul Disini Saya Akan ajarkan cara mengganti Template sesuai keinginan anda,, baiklah singkat aja..

1. masuk ke btemplates.com atau di www.splashytemplates.com
2. Pilih Templates yang kamu Mau

3. Pilih Download

4. Buka Folder dimana kamu menyimpan templates tadi

5. Klik Kanan Pada templates Tersebut

6. Pilih Extrak yang ada nama Templates tersebut

7. buka blog kamu

8. pilih mana blog yang ingin kamu ganti templatesny

9. Klik Template

10. pilih Cadangkan/pulihkan biasanya diatas sebelah kanan

11. klik browser, cari folder templates kamu yang sudah diextrak kemudian klik

12. pilih File yang ber status XML

13. Klik Unggah


SEMOGA BERMANFAAT :)
TERIMAKASIH


Mau Pulsa Gratis? Klik disini atau Disini



Baca Juga:
Cara Mempercantik Tampilan Blog Anda 

Contoh-contoh Makalah 

Pulsa Gratis dari Mcent 

Pulsa Gratis Dari Nusaresearch 

Pulsa Gratis Dari Pulsacyber 

Pulsa Gratis dari Ann-kate