10 Adımda Farklı Tarzda Hakkımda Sayfası Yapımı

Blogger Popup Açılır Hakkımda Sayfası Yapımı. Tüm blogların ve internet sitelerinin vazgeçilmezleri arasındadır hakkımda sayfaları. Yazar burada kendisi hakkında veya bloğu hakkında bilgiler verir; sosyal medya hesaplarını gösterir, okuyucularının kendisine ulaşabilmesi için telefon numarasını veya mail adresini verir. Tüm bunları dağınık şekilde okuyucuya aktarmak yerine derli toplu bir şekilde sunar ki rahatça ulaşma imkanı olsun.

Hakkımda sayfalarını gösteren link yolu kolayca görülebilsin diye genelde üst yatay menüde bir buton ekleme yoluyla işe koşulur.

Şimdi sizinle paylaşacağım pop up açılır hakkımda sayfasıda bir buton yardımıyla açılıyor. Bunun faydası okuyucu sayfanıza geldiğinde kendiliğinden açılmaz ve sıkıcı bir hal almaz. Biliyorsunuz bazı blog sayfaları varki sağdan soldan fışkıran popup pencelerinden kına getiriyor. Bu yüzden hakkımda sayfasına buton eklemek çok akıllıca ve insaflıca :)

DEMO

Hakkımda Sayfası Nasıl Yapılır?

1. Blogger yönetici panelini açın.

2. Şablon

3. HTML'yi Düzenle

4. Açılan kodlar üzerinde bir yere tıklayın ve CTRL F tuşlarına basarak arama kutucuğunu açın.

5. ]]></b:skin> kodunu bulun.

6. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.

/* Blog Bakkalı Hakkımda Sayfası */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#333;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#555}
kepala{background:#00adca;height:50px;width:100%;position:inherit}
#textlogo{color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;background:#00bcdc;height:70%;width:61%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#aaa;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{cursor:pointer;font-size:15px;padding:15px 25px;color:#aaa;border-bottom:1px solid #444;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#D92121;color:#fff}.taber3:hover{background:#0B76B9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:15px auto;display:table;border-radius:100%;max-width:200px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:18px;border-radius:50px;left:5px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

6. Şimdi <body> kodunu bulun.
7. Bu kodun alt satırına aşağıdaki kodları yapıştırın.

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>HAKKIMDA</span>
<a class='popup-close' href='#closed' title='Close'>X Kapat</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3yxEKvVz1aY4buQhFxoXx7ex43ElU2cy6677a0BcH380NbLpzIvrlRhXuWxfJsMCVQ2JKbx_YgEE6UgrmmhejSwZG7f3p93guQX0LxDD_8wXdwe_4Nr0TEb5P6mx7-iscANkG_fXklKbP/s1600/indzign.jpg'/><br/>
<b>Blog Bakkalı</b><br/><br/>
Blog Bakkalı bloğumu 2015 yılının Temmuz ayında açtım.<br/><br/>
Beş yıldır blog işleriyle uğraşıyorum, edindiğim tecrübeleri sizlerle paylaşıyorum. Blog Bakkalı bloğumda Blogger eklentileri ve ipuçları hakkında yazılar hazırlıyorum. Blog Bakkalı'na hoşgeldiniz.<br/><br/>
</div></div></div>
<div id='left'>
<div class='taber1'><a href='http://blogbakkali.blogspot.com' target='_blank' title='blogbakkali.blogspot.com'>blogbakkali.blogspot.com</a></div>
<div class='taber2'><a href='https://plus.google.com/u/0/117314262477655253180/about' target='_blank' title='Takip Et Google Plus'>Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/blogbakkali' target='_blank' title='Takip Et Facebook'>Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/blogbakkali' target='_blank' title='Takip Et Twitter'>Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/>Telefon:  012345xxx</div>
<div class='taber6'><a href='/' target='_blank' title='email'>mail@outlook.com</a></div>
</div></div></div></div></div>

Kırmızıyla işaretlediğim yerleri kendi bilgilerinizle değiştirin.

8. Şimdi aşağıda paylaştığım link yolunu istediğiniz yere koyabilirsiniz. Bu link hakkımda sayfasına götüren buton linki. Tavsiyem üst yatay menünüz varsa oraya eklemenizdir.

<li><a class='popup-link' href='#popup'>Hakkımda</a></li>

9. Şablonu Kaydediyoruz.
10. Tebrikler Popup Açılır Hakkımda Sayfanız hazır.

Blogger bloglar için hakkımda sayfası yapımını anlattım. Takıldığınız yerleri yorumla lütfen sorun. Karmaşık gelmesin adımları uyglayın çok basit.

Bloğumu izlemeni istiyorum bedava bu ya :) İyi bloglamalar.

14 Yorum

Blog Yazarlığı Dersleri Pazar, Kasım 01, 2015

Tarz meselesi olsa gerek. Çoğu insanın işine yarayacağını ve bloglarında görmelerinden dolayı mutlu olacaklarını düşünüyorum. Benim gibi bloglarının sade olmasını seven insanlar için olmasada hayatında daha fazla renk isteyenler için ideal. Paylaşımın için teşekkür ediyorum.

Yanıtla

Unknown Pazar, Kasım 01, 2015

Tarz olmak isteyen blogcular için iyi bir eklenti diye düşünüyorum ben de teşekkür ediyorum ziyaretiniz ve konuya güzellik kattığınız için :)

Unknown Salı, Aralık 01, 2015

Bizlere hep yeni bilgiler kattığınız için teşekkürler.Standartlar ancak farklı olunursa aşılır.

Teşekkür ederim. Yorumlarınız güç veriyor :)

Unknown Pazar, Ocak 10, 2016

güzelşmiş

EMJAN Çarşamba, Şubat 10, 2016

Bunun sayfaya falan girince otomatik açılacak veya her hangi bir sayfada tıklıyınca gelebilecek ama sadece bu o sayfanın HTML ı içinde olacak, olabilir mi?

Unknown Cuma, Şubat 12, 2016

Pop up açılır pencereler ziyaretçilere büyük sıkıntı verdiği için malesef yok.

Unknown Perşembe, Mart 31, 2016

İlk önce paylaştığınız kod için çok teşekkür ederim çok şık bir tasarımı var fakat < body > kodu ben bulamadım bulmuyor yani yardımcı olur musunuz ?

Unknown Cuma, Nisan 01, 2016

kodları açınca üzerine tıklayın ctrl ve f tuşlarına aynı anda basın arama kutusu çıkacak oradan aratın. ve <> işaretleriyle body tagı arasında boşluk olmamasına dikkat edin.