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.
6. Şimdi <body> kodunu bulun.
7. Bu kodun alt satırına aşağıdaki kodları yapıştırın.
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.
/* 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.
