BH Okuyucularına Özel Droplink Widget
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.
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.
Yine süpersin serdar abi !
YanıtlaSilHarika bir şey bu ya! Ben de en kısa zamanda düzenleyip eklemek istiyorum :) Teşekkürler emek ve paylaşım için.
YanıtlaSilHı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çok hoş
YanıtlaSilhocam iyi günler. Benim başka bir sorum olacaktı
YanıtlaSilBlogumun altında buna benzer diğer yazılar şeklinde bir gadget eklemek istiyorum ne yapabilirim?
Şimdiden teşekkürlerimi sunuyorum.
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@Dilek Dursun
YanıtlaSilBağ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 :)
Serdar;
YanıtlaSilSüpermiş, ama kategoriler halıinde yapacaksak olursak nasıl olacak.
Herzamanki Gibi mükemmelsin Hocam , sağolasın
YanıtlaSil@Sevda Şen Ünsev
YanıtlaSilÖ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.
Teşekkürler hocam bende değiştirmeyi düşünüyordum.
YanıtlaSilçok kullanışlı görülüyor. emeğine sağlık. bayramda deneyeceğim. sevgiler
YanıtlaSilYukarı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..
YanıtlaSilOrjinal Blog linki http://bloqlar.blogspot.com/
Kopya Blog linki http://blogtanitici.blogspot.com/
Üzerinde biraz değişiklik yaptım. Nasıl olmuş bakarmısın? Fikir babası olarak sana çok teşekkürler
YanıtlaSil@ŞAFAKIN DÜNYASI
YanıtlaSilBlogunuzla uyumlu, başarılı olmuş. Tebrik ederim.
teşekkürler serdar bey..
YanıtlaSilHocam 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
YanıtlaSilhttp://i.imgur.com/S0uHZ6S.png sitem furkanozkanweb.blogspot.com
çok güzel ama yapadım diğer gadegetin üzerine geliyor anlamadım :S
YanıtlaSilBlogun instagramda paylaşılması için ("share it" var ama orada instagram bulunmuyor) ne yapabilirim?
YanıtlaSilTeşekkür ederim çok güzel bir widget
YanıtlaSilBen de yapamadım ismi değiştirdim ama tıklayınca blog hocamın twitter adresine yönlendiriyor
YanıtlaSilHocam 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?
YanıtlaSilLütfen bize o lazım...