Pages

03/12/11

Cara Membuat Halaman Sambutan / Intro di Blogspot


Cara membuat welcome page di bloggerHalaman Intro / Sambutan di blogspot. apa yang di maksud dengan halaman intro? secara sederhana adalah sebuah halaman baru dimana saat ada orang membuka blog tidak langsung menuju halaman utama  / Home tetapi terlebih dahulu di suguhkan halaman palarel yang bisa kita modifikasi sesuai dengan keperluan. Pada umumnya adalah ucapan welcome to my blogwelcome to my life, dan ucapan selamat datang lainnya. Halaman replika ini ada yang berupa gambar saja, animasi, sampai ada yang mengunakan flash. dan ini semua tergantung anda dan kemampuan yang anda miliki.





Informasi ini Ahmas dapat dari kang rohman, dan  mudah-mudahan keduanya mendapatkan pahala dari Allah SWT atas ilmu yang di sebarkannya. Baiklah sekedar intermezo aja, sebenarnya membuat halaman intro di blogger sedikit sulit, berbeda dengan wordpress dan blogsome dengan php nya yang jauh lebih mudah. namuan bukan berarti hal itu tidak kita terapkan di blogspot, ternyata bisa loh! dengan sedikit memodifikasi script dari blognya kang Jaloe.

Sobat informasi maya disini kita akan melakukan modifikasi  dengan bermodalkan sebuah scriptiklan dari dynamicdrive, dan tentu saja dengan modifikasi dibeberapa titik, dengan begitu  halaman yang mirip intro bisa juga dibuat. Yang penasaran mungkin bisa melihat halaman demonya  Disini 1. dan Demo 2

Namun Sebelum anda memulainya terlebih dahulu anda harus tau apa kelebihan dan kekurangan dari tutorial membuat halaman sambutan :

1.  Kelebihan Script Intro Blogger

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

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

Silahkan ikuti langkah-langkah berikut ini :

   1.  Silahkan login ke blogger.

   2.  Klik Rancangan.

   3.  Klik tab menu Edit HTML

   4.  Jangan lupa  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/AVvXsEgqb1Wo6AoZuzK8LL6Xvra5UNwmOzCh24pG5efxXdluRdaTmouv6MumNgqpvlpixk-EU_QVHqJgEtxJSW6y65mIHVcXYJxMawBIskubDi9lEc5dQ7a8AcbiZvSQEyDkckqgD-_lol3BofNp/s1600/templatemo_bg.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

  }

NB: Ganti tulisan link berwarana hijau di atas dengan link latar belakang yang ingin di tampilkan.

     7.  Silahkan cari kode berikut pada template anda :
 </head>
     8.  Silahkan copy, lalu paste script berikut diatas kode </head>

     9.   Cari kode berikut pada template anda
<body>
    10.  Copy, lalu paste kode berikut dibawah kode <body>
<div id='intro'><div class='welcome'>Welcome to kocomon.blogspot.com</div>

<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdYEuvb_MRl1Lkvruo2gR6_lZDqeAKRE1FGzieIOyhEoWeFGYQLtJ4TgqREm5Xj5xgtPycs4sBBpwY_EQHfdAbDn8MaBgIFTg_OG9mg_jZq2hY3Ht6nEqKePqYRx0EWxPGfpV9pBVDEg/s1600/gaara-y-naruto-shippuden.gif' title='Go to my homepage'/></a>

<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>

</div>
NB : -  Gantilah tulisan berwarna Hijau dengan link gambar, animasi atau flash.

         -  Ganti tulisan warna orange dengan katakata yang ingin di minculkan.



   11.  Klik tombol SIMPAN SETELAN.

   12.  Silahkan lihat hasilnya.

Jika sesuai skenario di atas, pada halaman tersebut anda disuguhi sebuah
halaman intro berupa ucapan selamat datang dan sebuah animasi gif dari gaara dan naruto, dan untuk melihat halaman asli dari blog tersebut anda
bisa klik tulisan “Go to Homepage” atau pada Naruto dan Gaara.

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.

Kalau anda bertanya, "Kapan anda bisa melihat kembali halaman intro tersebut?"

Jawab : "halaman intro tersebut akan muncul kembali apabila anda menutup browser yang digunakan, dan mengunjungi kembali halaman blog tadi".


Catatan : 
1.   Efek tersebut berlaku apabila komputer yang anda
gunakan tidak mematikan fungsi cookie karena script yang digunakan
menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.
2.   Script diatas hanyalah sebuah contoh saja, anda dapat berbagai variasi tampilan dengan memodifikasi bagian CSS.
3.   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.

Nah sobat informasi maya sekian dulu ya mudah-mudahan bermanfaat dan kang salman harap anda dapat memaksimalkan dan mengembangkan script halaman intro / sambutan.

Assalamulaikum ^_^

0 komentar:

Posting Komentar

Blog Ini Sudah Do Follow. Jadi Anda Dapat Komentar Sepuasnya.

Hal-Hal Yang Tidak Boleh Dilakukan Ketika Berkomentar :
1. Berkata Jorok.
2. Berkata yang mengandung/berbau porno.
3. Jangan Tidur sambil komentar.

--->JADI SILAHKAN TINGGALKAN KOMENTAR<---