Senin, 08 Oktober 2012

Membuat Halaman Pembuka Masuk Ke Blog

Maksud dari judul diatas yaitu apabila pengunjung datang ke web / blog akan berhadapan dahulu dengan background halaman yang umumnya berisi pesan selamat datang atau tulisan dengan kreasi dari pengguna blogger sendiri, jadi tidak langsung ke homepage. Bagaimana cara membuat halaman Pembuka Masuk Ke Blog?

Cara Pasang Script Halaman Pembuka ke Blogger

1. Login ke blogger
2. Klik Template
3. Klik Edit HTML
4. Backup dahulu template untuk jaga-jaga kalau trouble
5. Gunakan Ctrl +F untuk cari kode ]]></b:skin> lalu paste kode berikut diatasnya

#intro{
  background:#CAD8C9 url(http://2.bp.blogspot.com/-jILG8O5rDto/UHOJutNC2EI/AAAAAAAAHzA/O22ps9A_aHM/s1600/rd-gradien.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
}

6. Lalu cari kode </head> dan letakkan kode berikut diatasnya

<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
***********************************************/
/*************************************************
* dioprek oleh http://cirikhusus.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>

7. Dilanjutkan dengan mencari kode <body> lalu paste kode berikut dibawahnya

<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://1.bp.blogspot.com/-UgNspWIOepA/UHOOxXtq0iI/AAAAAAAAHzw/1_DNoJLDr0s/s1600/gerbong-maut.jpg' title='go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Klik Menuju Homepage</a></div>
</div>

8. Selesai dan simpan template lalu lihat hasilnya

Keterangan :
Anda dapat merubah kode gambar yang berwarna merah dengan kreasi anda sendiri, seperti dengan gambar animasi atau dalam bentuk flash atau dengan teks saja.

Jika pengunjung atau anda sendiri sudah masuk ke halaman utama blog, maka anda tidak dapat melihat kembali halaman pembuka tersebut. Halaman pembuka bisa kembali terbuka / dilihat apabila browser yang anda pakai ditutup dengan syarat komputer yang anda pakai tidak mematikan fungsi cookie sebab script diatas meninggalkan jejak di cookie pada komputer sebagai pengingat. Atau bisa juga pada komputer anda terpasang program Shadow Defender atau DeepFreeze.

Selamat membuat halaman pembuka masuk ke blog, semoga bermanfaat.

Tidak ada komentar:

Poskan Komentar