12 Ekim 2013 Cumartesi

BH Okuyucularına Özel Droplink Widget

22 yorum

Blogunuzun sidebarını güzelleştirecek ve işlevsellik katacak, yine BH okuyucularına özel bir eklentiyi sizlerle paylaşmak istiyorum.

 

Bu droplink eklentisi bildiğiniz açılır menü mantığıyla çalışıyor ancak görsellik olarak oldukça orijinal ve dikkat çekici.  İmaj olarak eklediğim ve bizzat hazırladığım “Bağlı Kalın” (isterseniz değiştirebilirsiniz) yazısına tıklandığında, ziyaretçilerin sizinle bağlantı kurabileceği sosyal hesaplarla takip kanalların listesi çıkıyor. Her seçeneğin yanında da o kanala ait ikon bulunuyor.  Olabildiğince fazla kanal eklemeye çalıştım ancak kullanmadıklarınızı kaldırabilir veya yeni kanallar ekleyebilirsiniz.

 

Blogger Droplink Widget

 

Bu widgetı blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

 

<!--Blog Hocam Droplink Widget-->
<div class="droplink">
    <h3><a href="#"><img src="https://lh6.googleusercontent.com/-FrKVx8l3YQw/VCABym1LzLI/AAAAAAAALBw/XRQwk5Vh2ck/s178/bagli-kal.png"/></a></h3>
    <ul>
      <li class="facebook"><a href="http://www.facebook.com/bloghocam" target="_blank">Facebook</a></li>
      <li class="twitter"><a href="http://twitter.com/bloghocam" target="_blank">Twitter</a></li>
      <li class="google"><a href="https://plus.google.com/108761595756468128383/" target="_blank">Google+</a></li>
      <li class="pinterest"><a href="http://pinterest.com/bloghocam" target="_blank">Pinterest</a></li>
      <li class="instagram"><a href="http://instagram.com" target="_blank">Instagram</a>
</li>
      <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank">LinkedIn</a>
</li> 
      <li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
</li>
      <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target="_blank">RSS</a></li>
      <li class="mail"><a href="http://bloghocam.blogspot.com/p/iletisim.html" target="_blank">E-Mail</a></li>
     
    </ul>
</div>
<style>
.droplink {
    width: 200px;
    position:absolute;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;}
.droplink ul, .droplink h3, .droplink h3 a{
    padding: 0px;
    margin: 0px;}
.droplink:hover {
    height: auto;
    background-color: #3E403D;
    border: solid 1px #3A3C39;}
.droplink h3 a {
    text-align: center;
    width: 100%;
    display: block;
    padding: 2px 0px;
    color: #333;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;}
.droplink h3 a img{
    border: none;}
.droplink:hover h3 a {
    color: #FFF;
    font-weight: bold;}
.droplink:hover h3 a {
    position: absolute;
    left: -1px;
    top: -1px;}
.droplink ul{
    list-style: none;   
    display: none;}
.droplink:hover ul{
    display: block;
    margin-top: 40px;}
.droplink li{
    display: block;}
.droplink li a{
    padding: 5px 12px 4px 34px;   
    margin: 1px;
    background-color: #484A47;
    display: block;
    color:#FFF;
    text-decoration: none;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background-repeat:no-repeat;
    background-position: 10px 3px;}
.droplink li a:hover {
    background-color: #CC3B1F;}
.droplink .facebook a {
    background-image:url("https://lh4.googleusercontent.com/-KzTKstOp318/VCAByqhpeKI/AAAAAAAALA0/pwtoX2U0eh4/s16/facebook.png");}
.droplink .linkedin a {
    background-image:url("https://lh3.googleusercontent.com/-cFgDoxi0ZB0/VCABzuUcKLI/AAAAAAAALBA/ChM6V5HG2hE/s16/linkedin.png");}
.droplink .twitter a {
    background-image:url("https://lh5.googleusercontent.com/--j67Syvmlz4/VCAB0UsLT8I/AAAAAAAALBY/qOpmfEpYwKw/s16/twitter.png");}
.droplink .google a {
    background-image:url("https://lh6.googleusercontent.com/-QS94_dsOZzc/VCAByzYCDTI/AAAAAAAALBk/RqZ2DHeFBDA/s16/gplus.png");}
.droplink .youtube a {
    background-image:url("https://lh5.googleusercontent.com/-_-k528bhRNc/VCAB0zxVwHI/AAAAAAAALBc/YdDXjCs7o9c/s16/youtube.png");}
.droplink .rss a {
    background-image:url("https://lh6.googleusercontent.com/-0mwZ7_KvNjM/VCAB0LnJ7TI/AAAAAAAALBU/Uo_jB0znLAA/s16/rss.png");}
.droplink .pinterest a {
    background-image:url("https://lh4.googleusercontent.com/-I2HW2L9RluY/VCABzoOppAI/AAAAAAAALBI/OSAqZyp3U24/s16/pinterest.png");}
.droplink .instagram a {
    background-image:url("https://lh6.googleusercontent.com/-rP194VHDcaw/VCABzDy1OzI/AAAAAAAALBg/PImQx6YUOZ8/s16/instagram.png");}
.droplink .mail a {
    background-image:url("https://lh6.googleusercontent.com/-PrKbxJ4UPjU/VCAByfwke8I/AAAAAAAALBo/6pS8JfcumwM/s16/email.png");}
</style>
<!--Blog Hocam Droplink Widget-->

 

Düzenlenecek yerler:

Kodlarda kırmızı renkle gösterdiğim link “Bağlı Kalın”  ikonuna ait link. Buraya kendi hazırlayacağınız “takip et, iletişim kur, sosyalleşelim… vb” şeklindeki ikonların linkini koyabilirsiniz. Mavi renkle gösterdiğim yerlere ise kendi hesap adreslerinizi yazcaksınız.

 

Listeden bir öğeyi kaldrmak:

Yazının başında da belirttiğim gibi olabildiğince fazla kanal eklemye çalıştım ancak siz bunların hepsini kullanmak istemeyebilirsiniz. Listeden kaldırmak istediğiniz öğe hangisiyse o öğenin <li> ve </li> kodları arasında bölümünü silmeniz yeterli. Örneğin bir Youtube kanalınız yoksa ve YouTube öğesini listeden kaldırmak istiyorsanız şu kodları silmeniz yeterli olacaktır:

<li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
</li>

 

Listeye yeni öğe eklemek:

En çok kullanalan sosyal ve iletişim kanallarını eklemeye çalıştım ama bunların dışında bir öğe de eklemek isteyebilirsiniz. Bunu 2 adımda gerçekleştireceksiniz. Bir örnekle anlatırsam daha alaşlır olacak sanırım. Flickr hesabımızı listeye eklemek istediğimizi düşünelim.

 

1. Adım: Öncelikle kodların HTML bölümünde </ul> taginin hemen üstüne Flickr’ın HTML kodunu şu şekilde ekleyeceğiz:

 

<li class="flickr"><a href=http://flickr.com/kullanıcıadı target="_blank">YouTube</a>
</li>

 

2. Adım: Şimdi de listedeki Flickr öğesinin yanında gösterilecek ikonu tanıtacağız. Bunun için </style> taginin hemenüzerine şu kodu ekliyoruz:

 

.droplink .flixkr a {
    background-image:url(http://flickr.png);}

 

İşlem bu kadar.

 

Bu widgetı sadece sosyal kanallar için kullanmak zorunda değilsiniz. Farklı amaçlarla da kullanabilirsiniz. Örneğin favori sitelerinizi listeleyebilir, blogunuzun kategorilerini listeleyebilir veya blogunuzun sabit sayfalarını bu menüde toplayablirsiniz.

 

Kafanıza takılan soru veya bir öneriniz olursa yorum bölümünden sorabilirsiniz. Aşağıdaki sosyal paylaşım butonlarını kullanarak yazıyı arkadaşlarınızla paylaşırsanız memnun olurum.

22 yorum:

  1. Yine süpersin serdar abi !

    YanıtlaSil
  2. Harika bir şey bu ya! Ben de en kısa zamanda düzenleyip eklemek istiyorum :) Teşekkürler emek ve paylaşım için.

    YanıtlaSil
  3. Hızır hocam,harikasınız yine. Çok teşekkür ederim. Benim sayfam lila rengi biliyorsunuz. Bağlı kalın yazısını ve arka siyah fon rengi değiştirilebilir mi?

    YanıtlaSil
  4. hocam iyi günler. Benim başka bir sorum olacaktı

    Blogumun altında buna benzer diğer yazılar şeklinde bir gadget eklemek istiyorum ne yapabilirim?

    Şimdiden teşekkürlerimi sunuyorum.

    YanıtlaSil
  5. Serdar ağabey röportajını okudum.Röportajın yapıldığı sıralar mayıs 2013 te evleneceğim demişin kısmet oldu mu?

    YanıtlaSil
  6. @Dilek Dursun
    Bağlı kalın yazısını imaj olarak hazırlamıştım. Kırmızı renkle gösterdiğim imaj urlsinin yerine başka bir imajın urlsini yazabilirsiniz. Arka plan rengi için ise şu iki bölümdeki renk kodunu değiştirebilirsiniz.

    .droplink:hover { background-color:

    .droplink li a{ background-color:

    @Miss Tiffany
    Şu yazıları inceleyin, sanırım bu tarz bir şey istiyorsunuz.

    http://bloghocam.blogspot.com/2013/06/bh-okuyucularna-ozel-sosyal-paylasm.html

    http://bloghocam.blogspot.com/2012/07/blog-yazlar-icin-sosyal-paylasm-kutular.html

    Bu arada evet evlendim :)

    YanıtlaSil
  7. Serdar;
    Süpermiş, ama kategoriler halıinde yapacaksak olursak nasıl olacak.

    YanıtlaSil
  8. Herzamanki Gibi mükemmelsin Hocam , sağolasın

    YanıtlaSil
  9. @Sevda Şen Ünsev
    Örneğin menüde Facebook yazan yerde spor kategorisini göstermek istediğimizi varsayalım. Bunun için öncelikle <a href="http://www.facebook.com/bloghocam" target="_blank">Facebook</a> satırını şu şekilde değiştiriyoryz:

    <a href="http://blogunuz.blogspot.com/search/label/spor" target="_blank">Spor</a>

    Facebook ikonu yerine spor kategorisiyle ilgili bir ikon göstermek için de https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/facebook.png bu urlyi değiştiriyoruz.

    YanıtlaSil
  10. Teşekkürler hocam bende değiştirmeyi düşünüyordum.

    YanıtlaSil
  11. çok kullanışlı görülüyor. emeğine sağlık. bayramda deneyeceğim. sevgiler

    YanıtlaSil
  12. Yukarıdaki "Blog Reklami" isimli olan sayfa hakkında google politikalarına uymadığı, tamamen çalıntı ve spam yayınlar yaptığı gerekçesiyle yasal işlem başlatılmıştır..
    Orjinal Blog linki http://bloqlar.blogspot.com/
    Kopya Blog linki http://blogtanitici.blogspot.com/

    YanıtlaSil
  13. Üzerinde biraz değişiklik yaptım. Nasıl olmuş bakarmısın? Fikir babası olarak sana çok teşekkürler

    YanıtlaSil
  14. @ŞAFAKIN DÜNYASI
    Blogunuzla uyumlu, başarılı olmuş. Tebrik ederim.

    YanıtlaSil
  15. Hocam bu gadgeti bloggerın kendi temasında uyguladım olmadı ancak altta gadget yok oraya ekleyince oluyor ancak popüler yayınlar gadgetinin üstüne ekleyince vb gadgetlerin üzerine ekleyince yazı kayıyor :( yardım
    http://i.imgur.com/S0uHZ6S.png sitem furkanozkanweb.blogspot.com

    YanıtlaSil
  16. çok güzel ama yapadım diğer gadegetin üzerine geliyor anlamadım :S

    YanıtlaSil
  17. Blogun instagramda paylaşılması için ("share it" var ama orada instagram bulunmuyor) ne yapabilirim?

    YanıtlaSil
  18. Teşekkür ederim çok güzel bir widget

    YanıtlaSil
  19. Ben de yapamadım ismi değiştirdim ama tıklayınca blog hocamın twitter adresine yönlendiriyor

    YanıtlaSil
  20. Hocam her hangi bir yazınızın altında buna benzer, ilginizi çekebilir, veya Diğer yazılar diye bir eklenti var, onu nasıl yapıyorsunuz? @Miss Tiffany size bunu sormak istemiş ancak siz sosyal paylaşım anlamışsınız?
    Lütfen bize o lazım...

    YanıtlaSil

Picardes

LİNKLER