Blogger Jquery Açılır/Kapanır Panel Eklentisi

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.

jquery blogger panel


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() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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/AVvXsEiBXkZDZvxUVYHjLSdSOec8TruBDLnLBXX4_nNrEkCABJHP0usY0lQiczIbAEn23i9Pye6mvPedQnG_PYdADuNsUZNTlKOqxkw_mvaUQ6tZO2fxqCCij3KdkEQNjpZgTbLxA8929TZCQsdE/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/AVvXsEikfFZnum3x8Y7Wz0O-6IkS9iRRdT-rqIkALhAN_xD6nZI13QEKZ1jOk7_kssnkpR_D2vbjBz5XjuW5MK-S4iBsdCfzEKMz-dUSan7P7yEOPUBy-QMk9vwST9RNzAMCvR88deRqtEYYy-y9/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/AVvXsEhw07DewBpRkhNl5yxQEz2qiYHBdRmIFsMb9h_AnqLCg5oWg9q-wG02aXW32by2I8jvDLy-uJXHx4iLhBoppqNgOUDlspD3t1Bg1UHn957UavY1xSmLUhzan9ma6ZAozQNMufgilsJUDjxK/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/AVvXsEiLOIE9juBcwXTwSfcL-0YRjzHg8EAfxg1cH6kmN_8UzWLmb319WjNTCOoS2jImRC6uuKGBfYKIbrlVue682NltvnikP9gNMavjjcLiQh5dccdVC1kJ3jDpA6oVfDbO5MmtqU409ZXlNol6/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/AVvXsEgw3iaURtQY_MxNvuGx0SNMmymwzkyKR6VXwfv7Aa_zwhuE5LJtWpoFXiF29S6Hkc-LSwNt7cj9acw-HVLFJG50MA__goBKraoNsRdhbSzaWHKKDNv3nZvrbA6ZYg1RnP975X1na3ur_gcH/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCXrbbGxvj67cVLGPIGrQEgE5LtR9btB6v-qQIT5Yv-92wewqePd9RU44KscPkHCKTVLG1UFIUY49j9ztWHtKrd-vZwM5yhge6-zKra8t0KPWdVlwaFMLisDjPMp_hkkapOyfn2lU3X_b/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw3iaURtQY_MxNvuGx0SNMmymwzkyKR6VXwfv7Aa_zwhuE5LJtWpoFXiF29S6Hkc-LSwNt7cj9acw-HVLFJG50MA__goBKraoNsRdhbSzaWHKKDNv3nZvrbA6ZYg1RnP975X1na3ur_gcH/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCXrbbGxvj67cVLGPIGrQEgE5LtR9btB6v-qQIT5Yv-92wewqePd9RU44KscPkHCKTVLG1UFIUY49j9ztWHtKrd-vZwM5yhge6-zKra8t0KPWdVlwaFMLisDjPMp_hkkapOyfn2lU3X_b/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='&quot;loading&quot; + 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/AVvXsEh_36sVh2kjZcJtRgssi4Prx3gVxdC0q2ElPCkGS1KpcvhK7ntbAi52uBy11IZrDh7nrwebHnYiM3wMA3DfanAidBad5V92OJg0PBJA-WlevHRvyeYG-QsiBc8SQQEKBljyGHi-zwoHxsI/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.

20 yorum:

  1. Çok güzel bir eklenti olmuş belki biraz değiştirip kullanabilirim. Eyvallah Hocam.

    YanıtlaSil
  2. Denem yaptığım blogumda birşeyler olmadı :)
    Menüyü Aç ve kapat kısmından sonrasında div'ler ul' lar aldı başını gitti :) Birden çoğaldılar :D
    Geniş zamanda tekrar deneyeceğim ;)

    YanıtlaSil
  3. @Yeni Gelin Yeni Hayat
    Kodlarda bir sıkıntı yok ben denedim gayet güzel çalışıyor. Muhtemelen bir yerde hata yapmış olabilirsiniz.

    YanıtlaSil
  4. Güzel eklenti. Umarım bir geniş zamanımda deneme imkanım olur.Elinize sağlık

    YanıtlaSil
  5. Güzel eklenti teşekkürler vakit olsa hemen yapardım

    YanıtlaSil
  6. Güzel bir eklenti, siteyi yavaşlatmaz İnşallah

    YanıtlaSil
  7. Çok kullanışlı bir eklentiye benziyor, blogger kullanmayı bıraktım ama ne olur ne olmaz diye arşive ekledim teşekkürler :)

    YanıtlaSil
  8. İlerleyen zamanlarda kullanabilirim.Teşekkürler hocam.

    YanıtlaSil
  9. Güzel bir şey, hemen deneyeceğim.

    YanıtlaSil
  10. Teşekkürler değişik ve hoş bir görünüm:)

    YanıtlaSil
  11. Hocam çok güzel bir eklenti olmuş,ellerinize sağlık

    YanıtlaSil
  12. head'ın üzerine nasıl yapıştırıyoruz, yanınamı yoksa head kelimesini seçip, sağ tıklayıp yapıştırmı diyoruz?
    Başarısız olduğum tek konu bu? :/

    YanıtlaSil
  13. @Harun İstenci
    head kodu kalacak.Onun öncesine yapıştırabilirsiniz.

    YanıtlaSil
    Yanıtlar
    1. Allah razı olsun hocam, işte aradığım ve tahmin ettiğim cevap, çok sağolun, ilgilenmezsiniz diyodum ama cevap verdiniz, tekrar sağolun. :)

      Sil
  14. Hocam benim html kısmında 2. de verdiğiniz kod gözükmüyor sorun nedir acaba

    YanıtlaSil
  15. olmuyor hocam dedigin gibi yaptim olmuyor.. eklenti guzel cok isime yaracakti ama ..

    YanıtlaSil
  16. Gerçekten çok güzel bir paylaşım olmuş siteme yeni yerleştirdim mükemmel oldu paylaşım için tşk ederım bloghocam'a burdanda kontrol edebilirsiniz http://saglik-bilginiz.blogspot.com.tr/

    YanıtlaSil
  17. ustadım bıu yardımcı olsan.ben dedını yaptın.head onune yapıstırdım sonra ıkıncıyıde aynı koudn ıcıne yapıstırdım..ucuncuyude kendıme gore duzenleyıp space yapıp altına yapıstırdım ama kabul etmedı hata verıyo.bı yardımcı olsan ustadım ya

    YanıtlaSil

Blogger tarafından desteklenmektedir.