Ticker

6/recent/ticker-posts

Pasang Script Intro Di blogger

Intro adalah seperti ucapan selamat datang dan sebuah animasi gif dari winnie the pooh, dan untuk melihat halaman asal blog tersebut anda boleh klik klik tulisan “Go to Homepage” atau pada animasi winnie the pooh nya.

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. Bila halaman intro tersebut boleh dilihat semula? 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 kerana script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.

Cara Pemasangan Script Intro Ke blogger

Silahkan ikuti langkah-langkah berikut ini :


Langkah 1

  1. Login ke blogger
  2. Klik Design.

  3. Klik tab Edit HTML

  4. Anda disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

  5. Silahkan cari kode berikut pada template anda :
]]></b:skin>

6. Silahkan copy, lalu paste kode berikut diatas kode ]]></b:skin>

#intro{
background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkwjbszXtraKXdWJ8LaWFh1v-avoQajb3J4OOhmSV-OZDjAniR5HpEZVUPob6WEgrXsnHtfPxjDbVyLNs3sa1wOUBEVn3RJTQfHzgAyIqlsnmx9Y_KYnOeEbo8XX-2vvo-uDZ6G3XMKU/) 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
}

Langkah 2
1. Silahkan cari kode berikut pada template anda :
</head>

2. 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.jeritanblog.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>

3. Cari kode berikut pada template anda <body>
4. Copy, lalu paste kode berikut dibawah kode <body>

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

5. Akhir sekali klik butang simpan.

Info :-
Anda juga boleh mengubah kode intro diatas ini seperti gambar atau ayat mengikut kehendak anda .

Catat Ulasan

35 Ulasan

  1. alhamdulillah saya berjaya letak..
    terima kasih

    BalasPadam
  2. kalau buat..mmg gamba pooh ja ka?? kalau nak tukar mcm mna??

    BalasPadam
  3. @TintApEna
    boleh kat kode tu ada link gambar ..
    tukar je link gambar tu

    BalasPadam
  4. saya pakai code tu untk blog saya :D

    BalasPadam
  5. nape saya nyer html xde part yang last tu...huhu...yang len sume ok...bila part tu trus x dpt.cdeh nye =(

    BalasPadam
  6. npew sy pye xlps nk wt???
    yg laen ok..cme yg body 2 xjpe la..
    cmne yerk??

    BalasPadam
  7. Ulasan ini telah dialihkan keluar oleh pengarang.

    BalasPadam
  8. klau nk ltak gmbr len blh x??
    xnk gmbr pooh..

    BalasPadam
  9. da jd..
    thanks cngt2...
    but..
    mcm ne nak tukar kan warne hijau tu kpd warne itam?...

    BalasPadam
  10. 1st time buat, jdik..
    lpas tu mmg dh xjd.. nape ek ?

    BalasPadam
  11. @@dmin kalau org lain boleh buat tapi u x boleh buat nie mesti ada ksilapan yang dah u buat

    BalasPadam
  12. @Taufiqz boleh u kena tukar gamabr URL http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif pada langkah ke 2 no 4

    BalasPadam
  13. @BeyBie_cHa2 boleh anda perlu tukar url gambar ini http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg pada langkah 1 no 6

    BalasPadam
  14. @Cik Nad sebab kalau keluar banyak kali nanti serabut..

    BalasPadam
  15. Ulasan ini telah dialihkan keluar oleh pengarang.

    BalasPadam
  16. alhamdullilah .. saya berjaya meletakkannya :)

    BalasPadam
  17. boleh x kalau nak letak tepi die gambar ... ? kalau boleh tolong bagi tahu ... :P this blog memang best ...

    BalasPadam
  18. code "body"
    xada dlm template saya ...mcm mne yer?

    BalasPadam
  19. nk tukar color hitam n oren bley x?
    n nk ltak pic sndri?..mcm mne ye?..plz..tlg

    BalasPadam
  20. gambar yang cool skit xada ke,pooh xsesuai tuk lelaki mcm sye ni

    BalasPadam
  21. @Ayiep Eqal kena tukar gambar happo tu sekalilah..edit guna photoshop.
    tukar link gambar

    BalasPadam