Blogger Anasayfasına Açılış Resmi Eklemek

İnternetin vazgeçilmezi haline gelen bloglar, artık ilginç tasarımlarıyla birlikte populerliğini artırmaya devam etmektedir.Hemen hemen her konuda bir blog bulmak mümkün.Spor, sinema, müzik, resim vb. örnekleri çoğaltmak mümkün.Durum böyle olunca blog kullanıcıları ziyaretçilerine daha hoş bir tasarım sunmanın telaşına girmiş durumda.Ben de bu yazımda blogger sahiplerine, sitelerinin anasayfasında ziyaretçilerine bir karşılama mesajı olacak şekilde resim nasıl eklenir onu göstermeye çalışacağım.Bu yöntemle sayfanıza giren ziyaretçilere, onların görmesi gereken bir duyuru veya sadece bir karşılama mesajı gösterebileceksiniz.

Şimdi ilk olarak 3 dosyaya ihtiyacımız var.Aşağıdaki dosyaları Codebook sitesinden indiriyoruz.

• leightbox.css
• leightbox.js
• prototype.js

Bu dosyaları bilgisayarımıza kaydettikten sonra dosyaları upload ediyorsunuz. Hesap oluşturduktan sonra dikkat etmeniz gereken nokta: Dosyaları ortak kullanıma açmayı unutmayın. Yani orada private ve public seçenekleri var.Siz klasörünüzü public olarak ayarlayacaksınız.

Evet buraya kadar sorun yoksa şimdi blogger dan hesabımıza giriş yaparak Yerleşim(Layout) /// Html yi Düzenle(Edit Html) kısmına gelerek “</head>” kodunu Ctrl+f tuşları yardımıyla buluyoruz.Hemen bu kodun üzerine aşağıdaki kodu yapıştırıyoruz.

<!–Welcome-UnderConstuction-Page-Starts–>
<link rel=”stylesheet” type=”text/css” href=”http://*****/leightbox.css“/>
<script type =”text/javascript” src=”http://*****/prototype.js“></script>
<script type=”text/javascript” src=”http:///*****/leightbox.js“></script>
<style type=’text/css’>
div.leightbox {
color: #fff;
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -240px 0 0 -380px;
width: 745px; //Keep the WIDTH 5px LESS than the actual width of the image you are planning to use…
height: 400px;
padding: 0 0 0 5px;
border: 1px solid #FFFFFF;
background: url(****.jpg) no-repeat;
z-index: 101;
overflow: none;
}
</style>
<!–Welcome-UnderConstuction-Page-Stops-HELP—>

Yukarıda kırmızı renkli yerlere gerekli linkleri, (yukarıda verildi.) mavi renkli kısımda genişliği ve yüksekliği ve hemen onun altındaki mor renkli kısıma da hangi resmi göstereceksek onun adresini yazıyoruz.

Şimdi şablonu kaydedip Layout(Yerleşim) /// Page Elements(Sayfa Elemanları) /// Add a Gadget(Gadget Ekle) seçeneğinden Html/JavaScript seçeneğini seçerek aşağıdaki kodu yapıştırıp kaydediyoruz.

<!———-// POPUP (AUTOLOAD) //———->
<div id=”pop01″>

<div>

<h1>Welcome To My Blog</h1>

<p>A blog by <a href=”http://bloggerstop.net”>BloggerStop.Net</a></p>
</div>
<a href=”#” rel=”deactivate”>Enter The Blog</a></div>

<!———-// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //———->
<script type=”text/javascript”>
lb = new lightbox();
lb.initCallable(‘pop01’);
lb.activate();
</script>

Evet hepsi bu kadar.Buraya kadarki işlemleri doğru yaptıysanız eğer blogunuzun önizlemesini yaptığınızda anasayfanızdaki değişikliği görmeniz gerekir.Ben iki ayrı blog için yaptım ve ikisinde de herhangi bir problemle karşılaşmadım.
Yalnız gadget eklerken mümkünse konu yayınladığınız yerin üstündeki bir yere (resimdeki gibi navbarın hemen altına) Html/JavaScript gadget’ı ekleyin.Çünkü diğer widget lardan önce yüklenmeli.