if (window.jstiming) window.jstiming.load.tick('headEnd');
Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

Cara membuat Entry Atau Halaman Ucapan Selamat Datang Sebelum Masuk Blog

Sebelum membaca lebih lanjut artkel ini sebaiknya arahkan kursor sobat blogger mania pada gambar dan klik DEMO yang ada dibawah Ok deh.. Pada postingan kali ini Education For All akan posting artikel tentang Cara Memasang  entry atau welcome page sebelum masuk blog. Jadi para tamu blogger sobat harus klik "ENTER" sebelum masuk blog. hal ini tentunya akan lebih menarik, sebenarnya hampir sama dengan alert, tetapi yang ini lebih cool, dan menarik. nah bila sobat berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:
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='&quot;loading&quot; + 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
=> Klik edit pada text gadget dan masukan text ucapan selamat datang atau apa saja sesuai selera sobat
=> 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(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">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 «


3comments:

  1. sepertinya seru, berat ga?

    ReplyDelete
    Replies
    1. Pro@NF, Ucapan selamat datang vesi ini, sudah diujicobakan dan sama sekali tidak mempengaruhi loading blog,

      Delete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev