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

Ekim 30, 2015
blogger-hakkimda-sayfasi-yapimi

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 :)



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.

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

14 Yorum
avatar

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
avatar

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 :)

Yanıtla
avatar

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

Yanıtla
avatar

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

Yanıtla
avatar

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?

Yanıtla
avatar

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

Yanıtla
avatar

İ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 ?

Yanıtla
avatar

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.

Yanıtla
avatar

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.

Yanıtla
avatar

merhabalar.. yardımcı olabilirmisiniz. bu eklentiyi ekledim fakat saydam görünüyor.. bunu nasıl düzeltebilirim

Yanıtla
avatar

blogum: tolga-akar.blogspot.com

Yanıtla
avatar

niçin saydam gösteriyor anlamadım tema kodlarınızla alakalı bir durum olsa gerek.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔