Selasa, 24 Agustus 2010

Buat Halaman Intro (selamat Datang di Blogger)

Pingin buat Blog kamu jadi menarik layaknya Website besar, aku baru dapat ilmu baru dari kang Rohman dan langsung asya terapkan pada blog saya. Hasilnya Bisa anda lihat ketika pertma kali anda berkunjung ke blog saya, ada tamilan gambar selamat datang di blog saya. Langsung saja caranya:
Silahkan ikuti langkah-langkah berikut ini :
   1. Silahkan login ke blogger dengan ID anda.
   2. Klik Rancangan.

3. Klik menu Edit HTML
 4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
 5. Silahkan cari kode berikut:

]]></b:skin>
6. Silahkan Copy Kode Dibawah ini kemudian paste diatas kode ]]></b:skin>

Lihat




#intro{
background:#CAD8C9 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg) 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
}
7. Silahkan cari kode berikut:

</head>

8. Silahkan copy, lalu paste script berikut diatas kode </head>


Shinchan Indonesia




<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.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>

9. Cari kode berikut pada template anda <body>
10. Copy, lalu paste kode berikut dibawah kode <body>



Lihat






<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif' title='go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>
11. Klik tombol SIMPAN SETELAN.
12.  Silahkan lihat hasilnya. Selesai.
Penjelasan

Script diatas hanyalah sebuah contoh saja, anda dapat berbagai variasi tampilan dengan memodifikasi bagian CSS.

Anda dapat mengubah tulisan yang ada dengan tulisan anda sendiri, selain itu jika anda penggemar flash, tentu saja dapat mengganti gambar animasi gif diatas dengan kode flash yang anda miliki.
Kelebihan Script Intro Blogger

Script ini menggunakan cookie sebagai pengingat, sehingga karekteristiknya hampir mendekati sebuah intro sungguhan seperti pada website-wbsite tertentu.
Kekurangan Script Intro Blogger
Kekurangan yang dirasa cukup mencolok adalah intro ini menggunakan script untuk menutup halaman utama yang dalam kenyataannya halaman blog anda yang lebih dahulu di load daripada script intro yang sedikit lambat untuk di load, sehingga halaman yang terbuka lebih dahulu adalah halaman blog anda kemudian beberapa saat kemudian disusul dengan halaman intro. Ini tentunya terbalik dengan tujuan utama dari sebuah intro.

Walaupun demikian, ini tentunya bisa jadi sebuah ide atau inspirasi bagi anda yang mahir tentang pemrograman untuk menciptakan script intro yang lebih ringan di load ataupun cara-cara lain untuk membuat sebuah halaman intro yang lebih mantap surantap

ok semoga artikel ini bermanfaat:
Sumber: http://kolom-tutorial.blogspot.com/2010/08/buat-halaman-intro-di-blogger.html

1 Comments
Tweets
Komentar

1 komentar:

Blog Info Teknologi Dan Tips Komputer on 14 Desember 2010 23.41

tipsnya mantebb bos,..btw demo penampakan dimana bos bisa dilihat..???

Leave a Comment

Klik Iklannya Donk