Posted byTeacher's Message
Halaman Ucapan Selamat Datang Sebelum Masuk Blog ini, hanya muncul sekali dan akan menghilang jika tamu blogger sobat mania menekan "ENTER" dan masuk Blog untuk lebih jelasnya silahkan klik link demo ini
Kita tidak akan menambahkan widget di halaman page element. Kita akan menambahkanya dengan cara menambahkan kode dihalaman EDIT HTML template Blog Sobat Blogger Mania. dengan cara ini nantinya halaman Page Elemen akan secara otomatis bertambah dengan sendirinya. Yaitu terdapat dua widget tambahan. Widget pertama adalah TEXT widget, yang kita gunakan untuk memasukan pesan ucapan selamat datang dan sebagianya tergantung keinginan sobat. sedangkan yang satunya lagi yaitu HTML/JAVASCRIPT gadget untuk melakukan KODE yang akan ditransfer ke Text Gadget kehalaman ucapan selamat datang.
Cara Membuat Entry Atau Halaman Ucapan Selamat Datang Sebelum Masuk Blog
=> Login ke Blogger
=> Back Up Template
=> Dihalaman "Dashboard Klik Design/Rancangan => Klik Edit HTML
=> Cari Kode <body> Dihalaman template sobat blogger mania jika sobat blogger mania menggunakan Lay Out Template
=> Cari Kode <body expr:class='"loading" + data:blog.mobileClass'> jika sobat Blogger mania menggunakan Template Designer
Copy Code dibawah ini lalu pastekan setelah kode diatas/dibawahnya.
Kode :
<!-- Welcome page Start --> <div id='welcome-wrapper'> <b:section class='welcome' id='welcome' showaddelement='no'> <b:widget id='Text88' locked='false' title='' type='Text'/> <b:widget id='HTML88' locked='false' title='' type='HTML'/> </b:section> </div> <!-- Welcome page End -->
Selanjunya aadalah "Cara Menambahkan Isi Gadget"
=> Kembali lagi kehalaman Page Elemen, dan perhatikan pada gambar dibawah ini. Bila gambar kurang jelas arahkan kursor sobat blogger mania pada gambar
=> Selanjutnya proses HTML/Javascript Gadget (HTML88) pastekan kode dibawah ini didalam content box
Kode :
<!-- Welcome page Start (c) 2010 Education For All. Original code by http://fajar7siblings.blogspot.com/. Please do not remove this credit and the �Get this widget� link at the bottom of the widget. -->
<!-- HTML part -->
<div style="padding-top:5px;">
<a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">KLIK ENTER MASUK BLOG</a>
</div>
<div id="EPGrab"><a href="http://fajar7siblings.blogspot.com/" target="_blank">Get this widget</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:80%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {:background:transparent;
font-size:40px;
font-family:Serif,Times New Roman;
color:lawngreen;
text-shadow:1px 1px 2px #ccc;
position:fix;
line-height:35px;
font-weight:bold;
text-align:center;
display:block;
margin-left:auto;
margin-right:auto;
background:-moz-linear-gradient(top,#111 0,#666 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
background:-webkit-linear-gradient(top,#111 0,#666 100%);
background:-o-linear-gradient(top,#111 0,#666 100%);
background:-ms-linear-gradient(top,#111 0,#666 100%);
background:linear-gradient(top,#111 0,#666 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
opacity:.6;
filter:alpha(opacity=60);
-ms-filter:alpha(opacity=60);
;border:10px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background:#000;
border:10px solid #666;
border-bottom:30px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;
opacity:.99;
filter:alpha(opacity=99);
-ms-filter:alpha(opacity=99);
top:0px;left:0px;/*bs-aewp*/z-index:500;
position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:solid 2px #fff;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!-- Javascript part -->
<script type="text/javascript">
YourBlogUrl="http://smpmuhda.blogspot.com/"; //enter your blog url here
fromInternal=document.referrer.search(YourBlogUrl); //check come from where
getDarkLayer=document.getElementById("EPDarkLayer").style;
getText88=document.getElementById("Text88").style;
getHTML88=document.getElementById("HTML88").style;
if (fromInternal == -1)
{ //if visitor comes from external page
getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
getHTML88.display="block"; //show DarkLayer
getText88.display="block"; //show message
}
else
{ //if visitor comes from internal page
getHTML88.display="none"; //hide HTML gadget
getText88.display="none"; //hide message
}
</script>
<!-- Welcome page End -->Note:
=> Ganti URL http://smpmuhda.blogspot.com dengan URL Blog sobat Blogger mania
=> Width:80% bisa dirubah sesuai selera
=> opacity scale 0 sampai 1 filter alpha opacity scale 0 dari 100.
Untuk Bahan Percobaan Silahkan Coppy pastekan text dibawah ini di Add gadget text, Kalau OK silahkan dirubah sesuai Selera
Text percobaan :
<div class="widget-content"><div style="text-align: center; font-size: 40px; color: rgb(51, 51, 51); text-shadow: 1px 1px 2px rgb(204, 204, 204);">Welcome to Blogger Berbagi Untuk Anak Negeri</div></div><div class="widget-content"><div style="text-align: justify;"><p style="font-variant: normal; text-align: justify; font-size: 20px; color: lawngreen;">Selamat Datang di Blog Berbagi Untuk Anak Negeri. Blog tentang berbagai tip-trik Blogging untuk Blogger pemula seperti BUAN. Silahkan nikmati artikel artikel di Blog ini. Bila Bermanfaat silahkan disebar luaskan. Jangan lupa Comment, Sebelum Meninggalkan Blog BERBAGI UNTUK ANAK NEGERI</p></div></div>
Selamat Mencoba Semoga Berhasil.
Source : Sumber : Modified By Fajarsvensiblings
The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :
» Selamat Berkreasi - E F A «
Makasih sob, visit back
ReplyDeletesepertinya seru, berat ga?
ReplyDeletePro@NF, Ucapan selamat datang vesi ini, sudah diujicobakan dan sama sekali tidak mempengaruhi loading blog,
Delete