Blogunuza görsellik ve işlevsellik katacak yeni bir Blogger eklentisi daha paylaşmak istiyorum. Aşağıda detaylarını bulabileceğiniz Jquery Sliding Panel yani açılır kapanır panel eklentisi ile ziyaretçilerinize güzel bir kullanıcı deneyimi sunacak, aynı zamanda blogunuza çeşitli faydalar sağlayacaksınız.
Eklentinin nasıl ekleneceğine geçmeden önce özelliklerinden ve ne işe yaradığından bahsetmek isterim.
Blogger Jquery Açılır/Kapanır Panel Eklentisinin Özellikleri Eklentiyi ekledikten sonra bloga girdiğinizde sayfanın en üstünde bir bar gözükecek ve üzerinde “Merhaba” karşılama mesajı ile paneli açıp kapayan bir buton olacak. Bu butona tıklayarak paneli atığınızda pek çok özellik barındıran harika bir menü göreceksiniz. 3 sütuna bölünmüş bu menüde şunlar var:
- “Hoşgeldiniz” mesajı, profil resmi, yazar hakkında kısa bilgi ve blog içi arama yapılmasını sağlayan bir arama kutusu.
- Ziyaretçileri İitediğiniz yazı veya sayfalara yönlendireceğinz linkler bölümü.
- Blogunuzu e-mail, Rss, Facebook, Twitter ve Google+ ile takip etmelerini sağlayacak bir abonelik bölümü.
Blogger Jquery Açılır/Kapanır Panel Eklentisini Bloga Ekleme Bu harika eklentiyi blogunuza eklemek için şu adımları takip etmelisiniz:
1. Adım: Blogger kumanda panelinde
Şablon > HTML’yi Düzenle yolunu takip edin ve
</head> kodunun üzerine şu kodları yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>
2. Adım: ]]></b:skin> kodunun üzerine aşağıdaki kodları yapıştırın.
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}
.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwitQ4AIbjnI6cW_8o5SF0skZ29dj3pvM0egOiGTlb-i9aFkqo4LgH5Psa3CcUCeMgm9s7H34feXsfEIjMKlMUzQAce2a3AcWM4J_wcZTdC1dY39ufDzjArdtwCaPyKb8omRHwLffc9WqL/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSk0YhgqWkSPjcPixMPFYJgGjcA395bTPlUdafMmXuw-v-V2fR6XLdJOHmaKG7QffniQjX9VJvGDgZo913fmu4OZnqiS2IAHKp310qEBxGJpGvtEsV3IOJ-9Hg2vW55V9uBRsJxIk8JFl/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KMw4eGd2dh1MQ1A_myeWEwCaVr9E_wUrwjVLd01SugcS3vNn32s9fetiTQRhAoRqJu8Q0kdmJBWo1KFEY5d0n8s7EX6vSbAd5OVF3It5m2fsMIGUCSrZ1N2v1THTH3-qG0dUoVYdfEOJ/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVWhP3EJ-PJ5ea7eW2mUZ9RljDgcOTfl2Fny49xVRytq6mKBdSVvOFG1PHksI7llGaTZtb6TSxOk5Q3vwz-vFARxhrYO8XKwvSFV_VRPORtPlSQXIrVYOcB8HJje-AAf-nVoVb-5AKZmL/s1600/sliding-panel-tab.png) repeat-x 0 0;
}
.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiNSk872I5Cum8gS26lCcg00wQB6JeEuyzainCR84s3zHQcxYlmkQqUmM0XYCptzsT74t85E5xQGJ0QlI9_vFYZkTby3eyLI7E0K4w4wylZpfJCjOumkXgk1V6A0-t8iKZ0nazVLlZbaZ5/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyLcvKGTskY6AS0oohBQhVuDNzPNGJ81e8SXpGPbEN-yarYjDFxSDZK-oMw3Xz4CVS50Y6A2iyFnCx-bzOo3bG9UvgP4s1_p-XHovcT-I5g6zCgcwJjSoGSb6yYdFMI-WneHS0_YBsaIx/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiNSk872I5Cum8gS26lCcg00wQB6JeEuyzainCR84s3zHQcxYlmkQqUmM0XYCptzsT74t85E5xQGJ0QlI9_vFYZkTby3eyLI7E0K4w4wylZpfJCjOumkXgk1V6A0-t8iKZ0nazVLlZbaZ5/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyLcvKGTskY6AS0oohBQhVuDNzPNGJ81e8SXpGPbEN-yarYjDFxSDZK-oMw3Xz4CVS50Y6A2iyFnCx-bzOo3bG9UvgP4s1_p-XHovcT-I5g6zCgcwJjSoGSb6yYdFMI-WneHS0_YBsaIx/s1600/button-close.png) no-repeat left -19px;}
#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #fff;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #cc3333;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: #F1921A;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
cursor: pointer;
border: 1px solid #fff;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://lh3.googleusercontent.com/-QfpM_erK1Hs/VW7Bae7s8NI/AAAAAAAALeg/Sqrj7lPAryg/s24/bullet-star-icon.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}
#search-box22{
margin-top: 20px;
}
#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search-box22 input[type="text"]:focus {
width: 190px;
}
.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
3. Adım: Şablonda
<body> veya
<body expr:class='"loading" + data:blog.mobileClass'> kodlarından hangisi varsa onun altına aşağıdaki kodları yapıştırın. Kendinize göre düzenlemeniz gereken yerleri
kırmızı renkle gösterdim.
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left' style='width:240px !important'>
<h4>Blog Hocam’a Hoşgeldiniz!</h4>
<div class='about-author'>
<div class='authorbox'>
<div class='authorinfo'>
<img src='http://lh5.googleusercontent.com/-kdgXVUeKv8o/AAAAAAAAAAI/AAAAAAAAGKo/To7qbwbiwKo/s80-c/photo.jpg'/>
<h3 class='boxtitle'>Ben Serdar</h3>
<p>Blog Hocam’ın kurucusu ve tek yazarıyım. Blog yazarlığı, SEO, sosyal medya, dijital pazarlama, girişimcilik ve kişisel gelişim konularıyla ilgileniyor ve bu konularda yazılar yazıyorum.</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>Aradığınız birşey mi var?</p>
<form action='/search' id='search-box22' method='get'>
<input name='q' placeholder='Ara...' size='40' type='text'/>
</form>
</div>
<div class='left' style='width:320px !important'>
<h4>Öne Çıkan Yazılar</h4>
<div id='sliding-panel'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/15-ucretsiz-online-fotograf-editoru.html'>Fotoğraf Editörleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/adm-adm-iyi-bir-blog-sitesi-kurmak.html'>Adım Adım Blog Kurmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/12/az-zamanda-cok-ziyaretci-getiren-siteler.html'>Hit Getiren Siteler</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/09/affiliate-marketing-nedir.html'>Affiliate Marketing</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/blog-yazarak-para-kazanmak-mumkun-mu.html'>Blogdan Para Kazanmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/bloglar-icin-ziyaretci-trafigi-rehberi.html'>Ziyaretçi Trafiği Rehberi</a></li>
</ul>
</div>
<div id='sliding-panel2'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2013/08/google-adsense-reklamlar-icin-baslangc.html'>Google AdSense Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/01/blog-yazarlar-icin-swot-analizi.html'>SWOT Analizi</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/07/link-insaas-calsmalarnda-dikkat-edimesi.html'>Link İnşası</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/11/analiz-icin-kullandgm-seo-araclar.html'>SEO Araçları</a></li>
<li><a href='http://hur.so/dbzjxe'>Trafik Hayattır</a></li>
<li><a href='http://hur.so/dbznw7'>Galaxy S6</a></li>
<li><a href='http://hur.so/dbzvke'>LG G4</a></li>
</ul>
</div>
</div>
<div align='center' class='left right'>
<h4>Blog Hocam’ı Takip Edin!</h4>
<p style='padding:0px 30px;'>Yeni yazıların e-mail adresinize gelmesini istiyorsanız kutuya mail adresinizi yazıp abone olun.</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='tr_TR'/>
<input class='button-register' type='submit' value='Abone Ol'/></form>
<div align='center' style='clear: both;'>
<a href='http://feeds.feedburner.com/BlogHocam'><img src='https://lh3.googleusercontent.com/-OzTMC5N1pYo/VW7Cxnv-5kI/AAAAAAAALe0/s9lkntgtftk/s48/RSS-icon.png' style='padding:5px;' title='RSS Beslemeleri' width='32'/></a>
<a href='http://www.facebook.com/bloghocam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTMKkzpNhakaMvFAy94r4PDtfMGiM5WFcmYdVqKpULUli5Cnf9X6wBePVryyWyaZdlK09jSwU_ehiAfYXgtfiYR1C89_OiY6QXhNLqxJChVmJkKsLjhz0oFFQVhdmnZlfE6LzxzeQd4Xo/s48/Facebook-icon.png' style='padding:5px;' title='Facebook Beğen' width='32'/></a>
<a href='http://twitter.com/bloghocam'><img src='https://lh3.googleusercontent.com/-1Wpv9cElOiA/VW7CzQqU6VI/AAAAAAAALe8/xhrLL6pf6TM/s48/Twitter-icon.png' style='padding:5px;' title='Twitter Takip' width='32'/></a>
<a href='https://google.com/+BloghocamBlogspot'><img src='https://lh3.googleusercontent.com/-aV1TNuPx8QY/VW7C1uAXqeI/AAAAAAAALfE/MmrC42-YI6g/s48/Google-plus-icon.png' style='padding:5px;' title='Google+ Takip' width='32'/></a>
</div>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Merhaba!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Menüyü Aç</a>
<a class='close' href='#' id='close' style='display: none;'>Menüyü Kapat</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
Şablonu önizleme yapın, eğer bir sorun veya hata mesajı yoksa kaydedin ve blogunuzu tekrar ziyaret edin.
Kodları bloga ekleme, düzenleme veya eklentiyi çalıştırma ile ilgil sorunlar yaşrsanız yorum bölümünden sorabilirsiniz.
