08 Agustus 2010

Pin It

Membuat Intro Page Pada Blogspot

Membuat Intro Page Pada Blogspot - khamardos blog
Apa itu Intro Page ?
Intro Page merupakan sejenis tampilan yang nantinya akan muncul pertama kali di halaman utama (home) blog kita. (defenisi menurut saya) untuk lebih jelasnya silahkan lihat previewnya di ICT SMANSA's BLOG

Pada halaman tersebut anda disuguhi sebuah halaman intro berupa ucapan "welcome to my blog" dan sebuah animasi gambar "Selamat Datang" , dan untuk melihat halaman asli dari blog tersebut anda bisa klik tulisan “Go to Homepage” atau pada animasi gambar "Selamat Datang".

Apabila anda telah masuk ke homepage halaman aslinya, anda tidak akan melihat kembali halaman intro tersebut, dengan kata lain anda tidak akan diganggu lagi oleh kehadirannya. Kapan anda bisa melihat kembali halaman intro tersebut? halaman intro tersebut akan muncul kembali apabila anda menutup browser yang digunakan, kemudian mengunjungi kembali halaman tersebut. Namun efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.

Bagaimana Cara Membuatnya ?
Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada .
 
3. Copy kode CSS dibawah ini, dan paste diatas kode ]]></b:skin>
#intro{
background:#FFFFFF 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
}
Note :  Pada kode yang berwarna merah, merupakan warna background intro tersebut. Anda bisa menggantinya dengan warna yang sesuai/kesukaan anda. Untuk melihat kode warna Css silahkan check di KODE WARNA HTML

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

<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>

5. Copy kode dibawah ini, lalu paste kode tersebut dibawah kode <body>
<div id='intro'><div class='welcome'><font size='7'>Welcome to my blog</font></div>
<a href='/' onclick='closebar(); return false'><img alt='go to my homepage' height='85' src='http://students.ou.edu/S/Budi.Santosa-1/selamat_datang2.jpg' title='go to my homepage' width='700'/></a>
<div class='gohome'><a href='/' onclick='closebar(); return false'>Go to homepage</a></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Want this Intro <a href='http://khamardos.blogspot.com/2010/08/membuat-intro-page-pada-blogger.html' target='_blank' >Click Here</a>
</div>
Note : Anda juga dapat memodifikasi kode tersebut sesuka anda
          -            : Ubah Dengan Kata-Kata Anda
          -           : Sebuah alamat (url) gambar, ganti dengan gambar yang anda inginkan.   

6. Lalu klik Save/Simpan

Kelebihan Dan Kekurangan Menggunakannya
Kelebihan
Script ini menggunakan cookie sebagai pengingat, sehingga karekteristiknya hampir mendekati sebuah intro sungguhan seperti pada website-wbsite tertentu.

Kekurangan
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.

Thank To...
Saya sangat berterima kasih sekali kepada Kang Rohman, karena tutor ini saya peroleh dari beliau. Saya memposting ini ke blog saya karena saya menganggap tutor ini sangat menarik (karena sangat langka dan susah dicari di google) dan terkesan unik sekali !!! Dan sekali lagi tujuan saya memposting ini hanya untuk berbagi bukan hanya untuk maksud yang g berguna... (hahahah... g ngerti mksudnya). Sekali lagi Thanks untuk Kang Rohman.


Selamat Berkreasi Yach Sobat
Jangan Lupa Komentarnya


----------------------------------------------------------------------------------------------
Marhaban Ya Ramadhan - Selamat menunaikan ibadah puasa - khamardos blog

Marhaban Ya Ramadhan - Selamat menunaikan ibadah puasa - khamardos blogSebagai Sajian Penutupnya, berhubungan akan memasuki bulan ramadhan, Saya Beserta Keluarga ingin mengucapkan Marhaban Ya Ramadhan, Mohon maaf atas segala kekhilafan dan kesalahan saya selama ini, karena tidak ada manusia yang sempurna di dunia ini. Samua manusia pasti selalu dihantui oleh dosa-dosa baik yang sengaja maupun tidak sengaja.

Selamat Menunaikan Ibadah Puasa, Semoga Amal dan Ibadah Kita Diterima Oleh Allah SWT, dan Manfaatkanlah Bulan Ramadhan Tahun Ini Sebagai Motivasi dan Penyemangat kita Untuk Berbuat Lebih Baik Lagi !!!
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

31 comments:

Klik Untuk Lihat Komentar

tips dan informasi terkini on 9 Agustus 2010 20.55 mengatakan...

keren banget gan triknya

Mufi_ed on 9 Agustus 2010 21.21 mengatakan...

@ tips dan informasi terkini
Sama2 sob !!! trick ini bisa kita kembangkan sesuka hati kita sob !!!

dan menambah kesan bagus blog kita tentunya !!!

alfi on 9 Agustus 2010 22.02 mengatakan...

thank sob tipsnya..
mohon maaf lahir dan btin y..
dan slamet mnkalankn ibdah puasa..

Mufi_ed on 9 Agustus 2010 22.15 mengatakan...

@ alfi
Sama2 sobat !!!
Iya !! saya minta maaf jika selama ini ada salah yach bang !!!
Semoga amal n ibadh kita diterima oleh Allah SWT !!!

Akoey on 9 Agustus 2010 23.06 mengatakan...

triknya mau saya pelajari, makasih dah share yah...
moga sukses slalu sobat.. :-)

achmad taher on 10 Agustus 2010 00.20 mengatakan...

Pernah dulu sy nemuin blog yg ada intronya, sempet kaget dan jadi bikin lama. tapi boleh juga sih hanya tuk moment tertentu aja kale yah...thanks kawan share infonya...met menunaikan ibadah puasa !

Asis Sugianto on 10 Agustus 2010 11.31 mengatakan...

Ow,,, begitu toh cara buatnya sob, biasanya saya sering menemukan hal seperti ini di beberapa blog sahabat saya, tapi kira2 gak mempengaruhi load blog kita gak sob??? soalnya blog saya agak berat....

ntiems on 10 Agustus 2010 12.26 mengatakan...

nanti aku pelajari... mohon maaf lahir batin ya sob,,, mudah2an puasanya lancar

fajri on 10 Agustus 2010 13.41 mengatakan...

postingannya bagus...
salam kenal..
minta koment nya yaa

Fajri Alhadi-Funny Blog and Fresh Image for sharing

Rchymera on 10 Agustus 2010 14.20 mengatakan...

Mohon maaf lhr batin jg fied meskipun lom hr raya dan slmt menunaikan ibadah puasa, btw maknyus nich tutornya kpn2 akan langsung dipraktekan dan kayaknya akan puyeng nich otak xixixi...:D

deny on 10 Agustus 2010 20.13 mengatakan...

hhmmmmmmmmm....boleh jua tu di coba

Andri Reborn on 10 Agustus 2010 21.05 mengatakan...

mantap ni sob,, tar aku coba dah

Mufi_ed on 11 Agustus 2010 22.04 mengatakan...

@ ntiems
Amin !!! kamu juga sobat !!! happy fasting yach !!!

@ achmad taher
Hmmm....
yupt!!! mungkin bsa di gunakan utk moment tertentu !!!
apa lagi saat ini kita sedang melaksanakan puasa !!! mungkin kita bisa memanfaatkan intro ini !!!!

@ Akoey
Sama2 sobat !! thanks !!!

@ Asis Sugianto
klo itu sih mungkin agak berpengaruh !!!!
tapi g terlalu berat kok sob !!!
habis intro loading ini muncul di sesi terkhir loading blog !!!

Mufi_ed on 11 Agustus 2010 22.07 mengatakan...

@ Andri Reborn
Ok Ok, smoga bermanfaat yach !!

@ deny
Silahkan sobat !!! somga bermanfaat !!!

@ Rchymera
maaf pesan mas waktu di YM g kebales !!! waktu tu cman ol di hp !!!
Ok ok, smoga bermanfaat !!!

@ fajri
Ok sobat !!! segera ke TKP !!!
Thnks sudah koment !!!!

Rizky2009 on 11 Agustus 2010 22.35 mengatakan...

trik in sob yang saya, cari maksih yh dah d share, kalau sayadah punya waktu luang akan saya coba.

selamat menjalankan ibadah puasa kawan

Coretan Felix on 12 Agustus 2010 08.25 mengatakan...

mantep nih, kapan-kapan bisa dicoba

secangkir teh dan sekerat roti on 12 Agustus 2010 11.47 mengatakan...

yang gambar putih itu ya...?

Mufi_ed on 12 Agustus 2010 14.29 mengatakan...

@ secangkir teh dan sekerat roti
Yupt, pada blog saya yang warna putih juga "intro selamat berpuasa" itu....

Klo preview di ICT smansa's blog yang warna putih yang ada "selamat datang"

(bingung menjelaskannya sob... hehehehee....)

@ Coretan Felix
Ok Ok .....
Smoga bermanfaat yach !!!

@ Rizky2009
Ok sobat !!!
Happy fasting juga sob !!!

uniekeinfo.co.cc on 12 Agustus 2010 14.47 mengatakan...

mantabs tipsnya om , ikutan nyobain ahh ntar :P

Mufi_ed on 14 Agustus 2010 23.32 mengatakan...

@ uniekeinfo.co.cc
Silahkan sob !!!

Gila Tutor on 14 Agustus 2010 23.37 mengatakan...

Thnks sob !! keren !!!

Koko Bota on 18 Agustus 2010 14.09 mengatakan...

wahh yang seperti ini saya mau belajar hehhehheheee.....mantap abis nich sobat yang satu hehhhehehehee..ajarin donk bro...tips yang menarik.........

Bang Koko on 18 Agustus 2010 15.03 mengatakan...

info yang menarik sobat...........salam knl ya,jgn lupa mmapir balik di blog saya ya...

Mufi_ed on 19 Agustus 2010 17.40 mengatakan...

@ Bang Koko
Ok sob !!!

@ Gila Tutor
Sama2 sob !!!

@ Koko Bota
Haahahaha....
Selamat di coba dech sob !!!

гoisнolic on 3 Oktober 2010 17.27 mengatakan...

makasi,. silakan mampir gan,. http://www.indocheatshared.co.cc/
di tunggu,. hahahaha

obat keputihan on 11 Januari 2011 09.31 mengatakan...

wah asik juga ni infonya,, langsung aja ke tkp

xamthone plus on 26 Februari 2011 15.11 mengatakan...

oke juga tuh gan, makasih banyak ya gan, salam kenal aja gan

kumpulan Software Komputer on 27 Maret 2011 14.00 mengatakan...

terima kasih atas infonya..
link back donk...

jelly gamat on 25 April 2011 15.09 mengatakan...

thank you sob buat informasinya , sangat bermanfaat sekali gan
:) :( :X =(( :-o :-/ :-* :|
8-} ~x( :-t b-( :-L x( =))

Muhammad Tegar Al Firdausy on 20 Juli 2011 14.05 mengatakan...

terima kasih infonya....

. .Awal Rizkina Permana on 28 Juni 2012 22.36 mengatakan...

wah tutorialnya bagus sob, saya udah coba langkah langkah yang sobat khamardos kasih. makasih banyak ya, teruskan berbagi sob :)

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied