Mempercantik Blog dengan Halaman Intro

Mempercantik Blog dengan Halaman Intro

Mempercantik blog sudah menjadi suatu keharusan untuk seorang peblogger yang mengutamakan pengunjung agar lebih betah, sebelum mempercantik blog dengan halaman intro alangkah baiknya sobat membaca artikel kang roni yang berjudul Cara Membuat Blog Cantik dan Menarik dengan Benar.Tutorial Blog kali ini kang roni akan share sebuah posting yang cukup keren yaitu cara membuat halaman intro, mengenai tentang apa itu halaman intro kang roni akan sedikit menjelaskan agar sobat blogger yang baru nwebie mengerti gambarannya sebelum menerapkan halaman intro pada blog yang di miliki, yang dimaksud dengan halaman intro adalah halaman blog yang pertama kali muncul sebelum masuk pada home page atau bisa disebut sebagai halaman pembuka yang berfungsi untuk mengenalkan blog pada pengunjung.Untuk melihat demonya sobat klik disini.

Cara membuat halaman Intro

1.Login Blogger.com -> Buka Rancangan/Desain -> Pilih Edit HTML
2.Download Template Lengkap Sebelum mengedit template Anda
3.Beri centang pada kotak Expand Template Widget
4.Cari kode ]]></b:skin>
Setelah ketemu taruh kode dibawah ini tepat di atasnya
#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
}
5.Langkah selanjutnya sobat cari kode </head>
Setelah ketemu taruh kode dibawah ini tepat di atasnya
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Blogger intro by http://roningasinanblog.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>
6.Langkah untuk membuat halaman intro selanjutnya sobat cari kode <body>
Setelah ketemu taruh kode dibawah ini tepat dibawah kode <body>
<div id='intro'><div class='welcome'>Blogger Indonesia</div>
<a href='' onclick='closebar(); return false'><img alt='Kang roni' src='http://3.bp.blogspot.com/_MgfFnb8nlkU/TKMQMjbDbpI/AAAAAAAAEa8/f5k3HvpckFg/s1600/gambar-peta_indonesia.jpg' title='TULISAN MUNCUL'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>KLIK DISINI</a></div>
</div>
7.Save/simpan template dan lihat hasilnya untuk tips mempercantik blog dengan halaman intro.
Ket: Untuk tulisan yang diberi warna merah boleh sobat ganti dengan kata-kata yang sobat inginkan dan kode yang diberi warna biru itu adalah gambar untuk halaman intro sobat bisa menggantinya untuk menyesuaikan tema blog.

Related Post:

49 comments:

Jacqueline said...

hi =)

roni said...

thanks for visiting Jacqueline

Fendy Ahmad Thahir said...

Makasih banyak mas bro.. its work.! sekali lagi terima kasih.

roni said...

SAMA2 SOB...........

Gigih Sasmito said...

mas aku pake template bawaan google, tp kok kodenya yang ]]> ga ketemu ya? ada solusi p ga?

roni said...

Coba dulu sob tekan F3,untuk menampilkan kolom pencarian bila sobat pake firefox kemudian copas code yang dicari kedalam kolom yang tampil dibagian bawah browser sobat

P H Y A said...

hasil ku koq error yah??

roni said...

SUDAH KANG RONI CEK BLOG SOBAT AND SUKSES HALAMAN INTRONYA, CUMAN BLOG SOBAT MEMERLUKAN LOAD PAGE YANG AGAK LAMA JADI BILA MAU MELIHAT APAKAH BERHASIL ATAU TIDAK SILAHKAN BUKA BLOG SOBAT TERUS BIARKAN LOADING PAGENYA BERHENTI SENDIRI.OKE SELAMAT DAH BERHASIL MEMBUAT HALAMAN INTRONYA.

Yehezkiel said...

ko saya ga ada element body ya mas? d search ga kluar

Yehezkiel said...

Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:
keluar tulisan itu

roni said...

Coba sobat ulangi lagi dengan teliti dan pastikan saat itu speed internetnya bagus

roni said...

pasti ada elemen body sob. coba klik F3 lalu ketik body pada kolom pencarian yang telah muncul

Sukarim said...

Terima Kasih Dan Salam Kenal gAN.., langsung Jadi ni.., .Dan Sudi Kiranya Jenengan(aGAN)Mampir ke Blog Saya gAN.. Ntuk Cek
Dan Mohon Ijin Juga Copas(Nyripil) Artikel ini..,?

Salam bY Sukarim
sukarim.blogspot.com

roni said...

Silahkan sob kang roni ijinkan sobat copas artikel ini and moga bermanfaat.

Sukarim said...

Sangat Bermanfaat gAN.., ni Artikel. Dan Sudah Ane Copas Ke Blog & Postinganya Bisa aGAN Lihat ke Blog ane. Di Situ ane Posting Beserta Petunjuk Gambarnya gAN...., sebelim & Sesudah makasih....,

........................................Salam bY Sukarim ....................................sukarim.blogspot.com

Dzulmar said...

Gambarnya bisa dijadiin slide gak?

roni said...

Sorry sob kang roni belum mengadakan penelitian utk itu, tapi kang roni yakin pasti bisa

Rachmad Danny said...
This comment has been removed by the author.
roni said...

SUDAH KANG RONI CEK BLOG SOBAT AND SUKSES HALAMAN INTRONYA, CUMAN BLOG SOBAT MEMERLUKAN LOAD PAGE YANG AGAK LAMA/memerlukan speed yang agak cepat JADI BILA MAU MELIHAT APAKAH BERHASIL ATAU TIDAK SILAHKAN BUKA BLOG SOBAT TERUS BIARKAN LOADING PAGENYA BERHENTI SENDIRI.OKE SELAMAT DAH BERHASIL MEMBUAT HALAMAN INTRONYA.

Rachmad Danny said...
This comment has been removed by the author.
Rachmad Danny said...

Ok makasih Mas,
Lalu bagaimana cara mengedit HALAMAN INTRONYA Mas ???
Kalo bisa tolong buatin Tutorialnya dong Mas ?

roni said...

semisal mau di apakan sob?

Rachmad Danny said...
This comment has been removed by the author.
roni said...

Utk mengubah gambar sgt mdh sekali ,sobat tinggal ganti url gambarnya saja.

Cari kode di atas yg seperti ini http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg (gambar background)ganti saja dengan url gambar yg sobat suka.
---------------------------------------
Dan utk mengganti gambar utama/yg terletak di tengah layar sobat cari saja kode url spt ini http://3.bp.blogspot.com/_MgfFnb8nlkU/TKMQMjbDbpI/AAAAAAAAEa8/f5k3HvpckFg/s1600/gambar-peta_indonesia.jpg ubah dg url gambar milik sobat.
----------------------------------------
Kalau tulisan yg bisa di ubah sobat perhatikan saja kode pada langkah nomor 6 di atas yg kang roni beri warna merah,sobat bisa mengganti dengan kata2 yg sobat suka.Oke ditanyakan lagi bila ada yg kurang jelas.

Kantor Advokat said...

makasih kang roni informasinya

sandy bagus limanto said...

gan kan warna intronya hijau kalauu ganti hitam gimana caranya

Ruki Zone said...

keren sob.. izin praktek ya sob.. hehe

roni said...

Untuk mengganti warna background menjadi hitam sangat mudah sob,anda bisa menggunakan dari salah satu dua cara dibawah ini:
-----------------------------
1.Cari kode url gambar seperti dibawah ini pada kode langkah no 4 diatas tepat pada baris kedua:
http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg
Kemudian sobat cari gambar di Google yang berwarna hitam kemudian copy url/alamat gambarnya untuk menggantikan url diatas.
----------------------------
2.Cara kedua lebih mudah dan bagus.sobat cari kode seperti dibawah ini:
background:#CAD8C9 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg)

Setelah ketemu ganti dengan kode dibawah ini:
background:#000000
Save dan lihat hasilnya.

bloggers info said...

apa ini tidak membuat loading blog jdi lambat yahhh

roni said...

Memang benar sob,tapi ada juga yg suka karena mereka hanya mentarget pengguna internet dgn speed tinggi aja jd utk Halaman Intro mrk tdk mempunyai masalah.thanks atas kunjungannya sob.

Heart to Heart said...

mantap nih kayaknya

Ugie Juni Lestari said...

awalnya bisa, tapi untuk yang kedua kalinya, ga muncul intro. langsung ke home page.

ini blog-ku glamsheens.blogspot.com

roni said...

ya emang gitu sob,tapi kalo mau lihat halaman intronya lagi sobat harus clear recent history pada browser dulu setelah itu masuk ke home page lagi.

cara mengobati dermatitis said...

cara nya lumaya mmudah dan perlu di coba hahaha:)

Pus Yakiz said...

Thx Infonya Gan ..... Sangat Bermanfaat Dan Sangat Menarik

Mantab ! Tingkatkan Terus Ya Gan :D


Bagi Yang Suka Koleksi Hot Wheels, Silahkan Mampir Ke Blog Saya Oke !
Kunjungi Blog Saya Ya Gan : http://Pusyakiz.blogspot.com/

Terimakasih

galih said...

Keren Artikelnya.. Mkasih Ya Atas Sharenya

Indo Telematika Education said...

ijin coba dulu bro, thanks

Iqra mullah said...

Mas blog anda kerenn,, bermanfaat bagi para pemula seperti saya,, lihat blog saya mas,, saya masih belajar,, beri komentar nya apa kekurangan dari blog saya http://nadasyahreza.blogspot.com

Kangroniblog said...

oke langsung menuju lapangan

zii 911 said...

maturnuwun buat materinya, keren Mas Bro ^_^
izin copy paste ya kang, maturnuwun atas share ilmunya,

Kangroniblog said...

Thanks sob atas kunjungannya,,copas aje nggak ape2....

betara said...

Thank,,

Anonymous said...

gan minta tolong pencerahan dkit dong, mau supaya awal ato kedua dst bisa muncul gimna cara nya,
thanks agan yang sudah baik hati berbagi ilmu

Kangroniblog said...

Kalo di komputer orang lain kangroni belum bisa sob tpi klo di pc sobat sendiri tinggal di Clear Recent History kemudian sobat masuk ke blog lagi

Anonymous said...

terimakasih kang roni buat penjelasan ny, jadi inti nya klo untuk d komputer lain, cuma org yg pertama kali ngunjungi blog ny yg bisa lihat, klo udah bisa minta tolong buat agan yg baik ini kasih tau ya, natarupa.blogspot.com

Kangroniblog said...

kang roni dah cek blog sobat and sangat bagus sekali halaman intronya,bahkan halaman intro sobat sangat keren and kreatif , blognya sendiri juga bagus simple dan informatif.

Anonymous said...

wah, di puji nya berlebihan bgt gan, masih newbie soal blog gan,
hatur nuhun, (thanks)

Gudang game PS2 | PS3 | PC said...

terima kasih atas info nya,sangat bermanfaat

karimun jawa said...

kereeen, sangat membantu ini nih, yesss

Post a Comment