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.
Yorumlar
Yorum Gönder