Pop-up etkisi ile blogger'da şık bir bilgi widget'ı nasıl eklenir - Hakkımızda, sayfa her blog için diğer önemli sayfalardan biridir çünkü okuyucularımızın blog yazarı hakkında bilgi sahibi olmasına yardımcı olur. Bu yüzden bugün sizinle blogunuz için yeni ve şık bir bilgi widget'ı paylaşacağım. Bu widget duyarlı ve pop-up etkisi ile geliyor ve bu widget en iyi parçası "Bu sadece bir hakkımızda sayfası değil, bu bizim hakkımızda bir widget dinamik".
Bu widget'ın özellikleri, blog yazarının fotoğrafını gösterecek, blog makalelerinin toplam sayısını gösterecek, sosyal medya bağlantılarıyla blog açıklamasını gösterecektir. Bu sosyal medyanın en iyi yanı - "Sosyal medya, ziyaretçilerin yaklaşması ve blog sahibiyle iletişim kurması için bir araç olabilir".
Tamam, kendi blogunuza yüklemek istiyorsanız, aşağıdaki adımları izleyin ve bu dinamik hakkımızda bilgi widget'ını herhangi bir sorun yaşamadan kendi blogunuza ekleyin.
İlk olarak blogger kontrol panelinizi ziyaret edin, "Şablon" bölümüne gidin ve "Html'yi Düzenle" düğmesini tıklayın.
Bu widget'ın özellikleri, blog yazarının fotoğrafını gösterecek, blog makalelerinin toplam sayısını gösterecek, sosyal medya bağlantılarıyla blog açıklamasını gösterecektir. Bu sosyal medyanın en iyi yanı - "Sosyal medya, ziyaretçilerin yaklaşması ve blog sahibiyle iletişim kurması için bir araç olabilir".
Tamam, kendi blogunuza yüklemek istiyorsanız, aşağıdaki adımları izleyin ve bu dinamik hakkımızda bilgi widget'ını herhangi bir sorun yaşamadan kendi blogunuza ekleyin.
İlk olarak blogger kontrol panelinizi ziyaret edin, "Şablon" bölümüne gidin ve "Html'yi Düzenle" düğmesini tıklayın.
Şablonda, editör aşağıdaki kodu klavyenizden Ctrl+f tuşunu kullanarak ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.
/* CSS Widget Info About Us */.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;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:#e74c3c}kepala{background:#de9b31;height:50px;width:100%;position:inherit}#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:61%;box-sizing:initial;}#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}#left a{color:#bdc3c7;}#left a:hover{color:#fff;}.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;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,#left .taber7:hover a{color:#fff}#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;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:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}a.popup-close:hover{color:#fff}.totalposts{margin:auto;display:table;text-align:center}.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}li.smartpik{border:0;float:right;list-style:none}li.smartpik a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-size:15px;font-family:'Roboto Condensed';transition:background-color .3s}i.smartpik a:hover{background:#e67e22;color:#fff;}@media (min-width:768px){.popup-container{width:600px}}@media (max-width:767px){.popup-container{width:100%}}
Aşağıdaki kodu bir kez daha arama kutusunun yardımıyla </body> kodunu yazalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki HTML kodlarını ekleyelim.
<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'><data:blog.title/></span><a class='popup-close' href='#closed' title='Close'>×</a></kepala><br/><div class='scrollbarbox'><div class='innerone'><div id='aboutus'><img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDFzVSttxVJFzRQ3wfbIG8ofKRqXQzyubKmDJl5FX-D58LO4SaGRGQqi6KeRDaQus2f2dWGglBZ9Hdc9UC3ngERLFAYeCIttEeiiW-IJih1zCPxqhEYVLlONxDeGCCXuSvnpbxmIYWWk/s250-Ic42/smartpik_admin.jpg'/><br/><script src='/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/><br/><b>www.smartpik.in</b><br/><br/>Type your blog description here<br/><br/>You can write anything here (According to your need)<br/><br/></div></div></div><div id='left'><div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div><div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'><i class='fa fa-google-plus'/> Google+</a></div><div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div><div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a></div><div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen'/> Codepen</a></div><div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-envelope-o'/> Join this blog</a></div></div></div></div></div></div>
Şimdi yine Ctrl+f yardımıyla son olarak </head> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JavaScript kodunu ekleyelim.
... <script type='text/javascript'>//<![CDATA[// Total Postsfunction getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Publish Articles</span></div>');}//]]></script>Ardından, aşağıdaki HTML kodunu kopyalayın ve bu bilgi widget'ini göstermek istediğiniz yere yapıştırın.
<li class='smartpik'><a class='popup-link' href='#popup'>Info</a></li>
Bütün işlemler bu kadar eklentiyi ekledikten sonra herhangi bir sorunla karşılaşırsanız yorum bölümüne yazabilirsiniz.