İ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. Burayı tıklayarak bir önizleme yapabilirsiniz.

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

leightbox. css    ( http://mydatanest. com/files/teslaa/14051_cosvv/leightbox. css)

leightbox. js        (http://mydatanest. com/files/teslaa/14048_nyxts/leightbox. js)

prototype. js      (http://mydatanest. com/files/teslaa/14050_eh73x/prototype. js)

Bu dosyaları bilgisayarımıza kaydettikten sonra dosyaları upload etmek için MyDataNest sitesinden ücretsiz hesap oluşturuyoruz. (Neden bu site derseniz her site . css ve . js uzantılı dosya upload etmenize izin vermiyor. )Ben sizler için bu dosyaları ekledim. Yukarıdaki linkleri de kullanabilirsiniz. Yok eğer ben kendi hesabımı oluşturmak istyorum diyorsanız anasayfada sign up yazısını tıkladığımızda karşımıza gelen ekranda free olanı seçip gerekli bilgileri girerek hesabımızı oluşturuyoruz. 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 ayarlıyacaksı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://mydatanest. com/files/*****/leightbox. css"/>

<script type ="text/javascript" src="http://mydatanest. com/files/*****/prototype. js"></script>

<script type="text/javascript" src="http://mydatanest. com/files/*****/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(http://i36. tinypic. com/2w4n40k. jpg) no-repeat;

z-index: 101;

overflow: none;

}

</style>

<!-Welcome-UnderConstuction-Page-Stops-HELP-http://bloggerstop. net->


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>