Mempercantik Blog Anda dengan Hal.Intro

Mempercantik blog sudah menjadi suatu keharusan untuk seorang peblogger yang mengutamakan pengunjung agar lebih betah, sebelum mempercantik blog dengan halaman intro alangkah baiknya sobat membaca artikel kang roni yang berjudul Cara Membuat Blog Cantik dan Menarik dengan Benar.Tutorial Blog kali ini kang roni akan share sebuah posting yang cukup keren yaitu cara membuat halaman intro, mengenai tentang apa itu halaman intro kang roni akan sedikit menjelaskan agar sobat blogger yang baru nwebie mengerti gambarannya sebelum menerapkan halaman intro pada blog yang di miliki, yang dimaksud dengan halaman intro adalah halaman blog yang pertama kali muncul sebelum masuk pada home page atau bisa disebut sebagai halaman pembuka yang berfungsi untuk mengenalkan blog pada pengunjung.Untuk melihat demonya sobat klik disini.

Cara membuat halaman Intro

1.Login Blogger.com -> Buka Rancangan/Desain -> Pilih Edit HTML
2.Download Template Lengkap Sebelum mengedit template Anda
3.Beri centang pada kotak Expand Template Widget
4.Cari kode ]]></b:skin>
Setelah ketemu taruh kode dibawah ini tepat di atasnya

#intro{

background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUke0QYBKZ4QTCB4XxTsYpLzJL01H8vf_-AZQhA59zwMH2bcupuQbPAzpPeA9vocSGVU5VcMdqOsd6kaLbvinvZ9K2gJAy-nwib3pqUPi80PeFxj48ATlyyu7JzV1olNTZWhAWHGdRJo/) repeat-x top left fixed;

position:fixed;

width:100%;

height:100%;

margin:0;

padding:0;

z-index:100;

text-align:center;

visibility:hidden;

}

* html #intro{

position:absolute;

width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}

#intro .welcome{

color: rgb(255, 0, 0);

font-weight: bold;

font-style: italic;

font-size:30px;

margin-top:10%;

margin-bottom:1%;

text-shadow:1px 1px 1px #fff;

}

#intro a img{border:none}

.gohome, .gohome a,.gohome a:visited,.gohome a:active{

color: rgb(255, 0, 0);

font-weight: bold;

font-style: italic;

margin-top:4%;

font-size:25px;

text-shadow:1px 1px 1px #fff

}

.gohome a:hover{

color:#ffffff;

text-shadow:1px 1px 1px #f00;

text-decoration:none

}

5.Langkah selanjutnya sobat cari kode </head>
Setelah ketemu taruh kode dibawah ini tepat di atasnya

<script type='text/javascript'>

//<![CDATA[

/***********************************************

* Blogger intro by http://roningasinanblog.blogspot.com

**************************************************/

var persistclose=1

var startX = 0

var startY = 0

var verticalpos="fromtop"

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

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}}return returnvalue;}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("intro").style.visibility="hidden";}

function staticbar(){

barheight=document.getElementById("intro").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY; }

return el; }

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y == (pY + startY - ftlObj.y)/0;}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y == (pY - startY - ftlObj.y)/0;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10); }

ftlObj = ml("intro");

stayTopLeft();}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

//]]>

</script>

6.Langkah untuk membuat halaman intro selanjutnya sobat cari kode <body>
Setelah ketemu taruh kode dibawah ini tepat dibawah kode <body>

<div id='intro'><div class='welcome'>Blogger Indonesia</div>

<a href='' onclick='closebar(); return false'><img alt='Kang roni' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPc7eNFrgJW_TbHvzZFDBC6oLWnU7ZpGHGzchY0KaLphjEcqW1rW2YHJaQKjb3lMAP09fRWSpo4alxJfo7cFKSBhq-KS6UufmWMo3XUjDUxGZp_WOAqIBXRz-NnMW57pehZ_5eAmpdBwH/s1600/gambar-peta_indonesia.jpg' title='TULISAN MUNCUL'/></a>

<div class='gohome'><a href='' onclick='closebar(); return false'>KLIK DISINI</a></div>

</div>

7.Save/simpan template dan lihat hasilnya untuk tips mempercantik blog dengan halaman intro.
Ket: Untuk tulisan yang diberi warna merah boleh sobat ganti dengan kata-kata yang sobat inginkan dan kode yang diberi warna biru itu adalah gambar untuk halaman intro sobat bisa menggantinya untuk menyesuaikan tema blog.