Blogger için ‘Giriş Sayfası’ hazırlamak!

Blogger için hazırlanmış en profesyonelce eklentilerden birisini anlatmak istiyorum. Kaldı ki, bir çok blogger kullanıcısınında bu eklentiyi seveceğini düşünüyorum. Eklentiden kısaca bahsetmek gerekir ise; bu eklenti sayesinde blogunuza giriş sayfası yapabiliyorsunuz. Yani ben diyim giriş sayfası, sizler diyin ziyaretçiler için hoşgeldiniz sayfası, hiç farketmez. Fakat anlatım biraz uzun olacağı için, lütfen gözünüz korkmasın. Aşağıdaki adımları, yavaş vedoğru bir şekilde uyguladığınız zaman eklentiyi sorunsuz bir şekilde kullanabileceksiniz. Şimdiden herkese kolay gelsin demek istiyorum.

Öncelikle, adımları uygulamadan Widget Şablonlarını Genişlet seçeneğinin yanındaki kutucuğu işaretliyoruz.

Öncelikle aşağıdaki kodu buluyoruz;

</head>

Daha sonra, aşağıdaki kodu yukarıdaki koddan önce ekliyoruz;

<!--Welcome-UnderConstuction-Page-Starts-->
<script src='http://teknobeyin.googlecode.com/files/prototype.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/leightbox.js' type='text/javascript'/>
<!--Welcome-UnderConstuction-Page-Stops-HELP-http://bloggerstop.net-->
<style type='text/css'>
/*----------close button----------*/
a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}
/*----------popup div styling----------*/
div.leightbox {
color: #fff;
display: none; /* toggle display to show/hide the popups when designing and previewing */
position: absolute;
top: 50%;
left: 89%;
margin: -150px 0 0 -450px;
width: 745px;
height: 400px;
padding: 0 0 0 5px;
border: 1px solid #FFFFFF;
background: url(http://i36.tinypic.com/2w4n40k.jpg) no-repeat;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}
div.lightbox[id]{ /* IE6 and below Can&#39;t See This */    position:fixed;    }
div#overlay[id]{ /* IE6 and below Can&#39;t See This */    position:fixed;    }
</style>

Daha sonra temamızı kaydediyoruz.

Temamızı kaydettikten sonra, Tasarım >> Sayfa Ögeleri >> Gadget Ekle >>HTML/JavaScript Ekle bölümüne aşağıdaki kodları ekliyoruz. Ve aşağıdaki kodları ekledikten sonra, eklediğimiz Widget’i isimlendirerek, Blog Kayıtları‘nın üzerine yerleştiriyoruz.

<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">
<div class="scrollbox">
<h1>Blogunuzun Adı</h1>
<p>Blogunuzun Sloganı</p></div>
<a href="#" class="lbAction" rel="nofollow deactivate">Blog'a Giriş</a></div>
<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

Not 1: Yukarıda Blog’a Giriş adlı yazının yanında yer alan rel=”nofollow deactivate” kodundakinofollow yazısını kaldırmayı unutmayınız. Yani yukarıda yer alan rel=”nofollow deactivate”kodunu, rel=”deactivate” şeklinde değiştiriniz. Ve deactive yazısının sağ ve sol kısmında boşluk bırakmayınız.

Not 2: Giriş sayfasının CSS kodlarındaki arkaplan resmini istediğiniz herhangi bir arkaplan resmi ile değiştirebilirsiniz. Arkaplan resim kodu aşağıda yer almaktadır. Aşağıdaki kodu yukarıda yer alan CSS kodları içerisinde kolayca bulabilirsiniz.

background: url(http://i36.tinypic.com/2w4n40k.jpg) no-repeat;

Not 3: “Blogunuzun Adı” ve “Blogunuzun Sloganı” alanları da kendi blogunuza göre değiştirmeyi unutmayınız.