Blogger Responsive Paylaşım Butonları
Kategori :
Blogger
Responsive (Duyarlı) tasarım, kısaca farklı ekran boyutlarıyla uyumlu tasarıma verilen isimdir. Bu tasarımlar sayesinde masaüstü, tablet ve mobil cihazlarda okunaklılığın sürekliliği sağlanmış olur. Bu yazıda ise tasarımın tamamıyla değil yalnızca tek bir eleman üzerinde çalışacağız: Paylaşım Butonu. Bu paylaşım butonları sayfa genişleyip daralsa ya da farklı cihazlarla sitenize giriş yapılsa bile uygun pozisyonda yerini alacak.
Önceki gün jquery plugins sayfasında karşılaştığım bu butonlar çok hoşuma gitti ve bloggera uyarlamak istedim. Aşağıda yapmanız gereken tüm işlemleri olabildiğince basit şekilde anlatmaya çalıştım, umarım işinize yarar. Blogger'da daha önce paylaşılmamış, tamamı pop-up şeklinde çalışan ve ek hiçbir ayar gerektirmeyen oldukça kullanışlı butonlara sahip olmak isterseniz aşağıdaki adımları takip etmeniz yeterli olacaktır.
› Blogunuzu seçip sol menüden Şablon kısmına gelin.
› Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.
<head> kodunun hemen altına aşağıdaki kodu yerleştirin. Bu kod sayesinde butonlarımız responsive yani duyarlı hale gelecek.
› İkinci adımda ise stil kodlarını yerleştireceğiz. Bunun için aşağıdaki kodu bulun.
› Ve yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını yerleştirin.
› Daha sonra yine Ctrl+F komutu ile aşağıdaki kodu bulun.
</head> kodunun hemen üzerine aşağıdaki kodları yerleştirin.
Burada dikkat etmeniz gereken kısım yukarıdaki kodda bulunan <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> uzantılı js dosyasının temanızda daha önceden eklenmiş olup olmadığınız kontrol etmek. Eklenmişse silip bununla değiştirebilirsiniz.
Dördüncü ve son adımda ise aşağıdaki kodu bulun.
Yukarıdaki kodun hemen üzerine aşağıda kodları ekleyin ve temanızı kaydetmeden bir önizleme yapın.
Eğer hata almadıysanız ve önizlemede temanızın sol kısmında butonları görüntülediyseniz işlem tamamdır temanızı kaydedebilirsiniz. Güle güle kullanın...
Responsive (Duyarlı) tasarım, kısaca farklı ekran boyutlarıyla uyumlu tasarıma verilen isimdir. Bu tasarımlar sayesinde masaüstü, tablet ve mobil cihazlarda okunaklılığın sürekliliği sağlanmış olur. Bu yazıda ise tasarımın tamamıyla değil yalnızca tek bir eleman üzerinde çalışacağız: Paylaşım Butonu. Bu paylaşım butonları sayfa genişleyip daralsa ya da farklı cihazlarla sitenize giriş yapılsa bile uygun pozisyonda yerini alacak.
Önceki gün jquery plugins sayfasında karşılaştığım bu butonlar çok hoşuma gitti ve bloggera uyarlamak istedim. Aşağıda yapmanız gereken tüm işlemleri olabildiğince basit şekilde anlatmaya çalıştım, umarım işinize yarar. Blogger'da daha önce paylaşılmamış, tamamı pop-up şeklinde çalışan ve ek hiçbir ayar gerektirmeyen oldukça kullanışlı butonlara sahip olmak isterseniz aşağıdaki adımları takip etmeniz yeterli olacaktır.
------------------------------ ÖNİZLEME ------------------------------
Responsive paylaşım butonlar nasıl kurulur?
› Blogger paneline giriş yapın.› Blogunuzu seçip sol menüden Şablon kısmına gelin.
› Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.
<head><head> kodunun hemen altına aşağıdaki kodu yerleştirin. Bu kod sayesinde butonlarımız responsive yani duyarlı hale gelecek.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
› İkinci adımda ise stil kodlarını yerleştireceğiz. Bunun için aşağıdaki kodu bulun.
]]></b:skin>
› Ve yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını yerleştirin.
#share-wrapper {margin-top: 0px;position:fixed;left: 0;}
#share-wrapper ul.share-inner-wrp{list-style: none;margin: 0px;padding: 0px;}
#share-wrapper li.button-wrap {background: #E4EFF0;padding: 0px 0px 0px 10px;display: block;width: 140px;margin: 0px 0px 1px -117px;}
#share-wrapper li.button-wrap > a {padding-right: 60px;height: 32px;display: block;line-height: 32px;font-weight: bold;color: #444;text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
#share-wrapper .facebook > a{background: url(http://1.bp.blogspot.com/-Gv3BqqUhRTM/UlPMggT1K9I/AAAAAAAAAUE/7ZEezzkdDXg/s1600/facebook.jpg) no-repeat right;}
#share-wrapper .twitter > a{background: url(http://4.bp.blogspot.com/-QpCtqnyo614/UlPONyfPYMI/AAAAAAAAPFs/XaZIowsEnkI/s1600/twitter.jpg) no-repeat right;}
#share-wrapper .digg > a{background: url(http://3.bp.blogspot.com/-VrVVbdEdM8w/UlPMgFIcjjI/AAAAAAAAAUc/ZYcbYMl7ueU/s1600/digg.jpg) no-repeat right;}
.stumbleupon > a{background: url(http://3.bp.blogspot.com/-7sQ6VpTdwpY/UlPMhBwJBWI/AAAAAAAAAUU/RGkjWIb3WDk/s1600/stumbleupon.jpg) no-repeat right;}
#share-wrapper .delicious > a{background: url(http://2.bp.blogspot.com/-7stGcE_YlgE/UlPMgAc8_4I/AAAAAAAAATw/kYSqFKivyqo/s1600/delicious.jpg) no-repeat right;}
#share-wrapper .google > a{background: url(http://3.bp.blogspot.com/-AkssGGH8cdQ/UlPMg1hevxI/AAAAAAAAAUA/DTHkjobgm_g/s1600/google.jpg) no-repeat right;}
#share-wrapper .email > a{background: url(http://4.bp.blogspot.com/-iUozBwNj_K8/UlPMgeCv8RI/AAAAAAAAAT0/Eems0xwo6W0/s1600/email.jpg) no-repeat right;}
@media all and (max-width: 699px) {
#share-wrapper {bottom: 0;position: fixed;padding: 5px 5px 0px 5px;background: #EBEBEB;width: 100%;margin: 0px;-webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);-o-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);}
#share-wrapper ul.share-inner-wrp {list-style: none;margin: 0px auto;padding: 0px;text-align: center;overflow: auto;}
#share-wrapper li.button-wrap {display: inline-block;width: 32px!important;margin: 0px;padding: 0px;margin-left:0px!important;}
#share-wrapper li.button-wrap > a {height: 32px;display: inline-block;text-indent: -10000px;width: 32px;padding-right: 0;float: left;}
}
› Daha sonra yine Ctrl+F komutu ile aşağıdaki kodu bulun.
</head></head> kodunun hemen üzerine aşağıdaki kodları yerleştirin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
var pageTitle = document.title; //HTML page title
var pageUrl = location.href; //Location of the page
//user hovers on the share button
$('#share-wrapper li').hover(function() {
var hoverEl = $(this); //get element
//browsers with width > 699 get button slide effect
if($(window).width() > 699) {
if (hoverEl.hasClass('visible')){
hoverEl.animate({"margin-left":"-117px"}, "fast").removeClass('visible');
} else {
hoverEl.animate({"margin-left":"0px"}, "fast").addClass('visible');
}
}
});
//user clicks on a share button
$('.button-wrap').click(function(event) {
var shareName = $(this).attr('class').split(' ')[0]; //get the first class name
switch (shareName) //react to different class name
{
case 'facebook':
var openLink = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'twitter':
var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
break;
case 'digg':
var openLink = 'http://www.digg.com/submit?phase=2&url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'stumbleupon':
var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'delicious':
var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'google':
var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'email':
var openLink = 'mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl;
break;
}
//Parameters for the Popup window
winWidth = 650;
winHeight = 450;
winLeft = ($(window).width() - winWidth) / 2,
winTop = ($(window).height() - winHeight) / 2,
winOptions = 'width=' + winWidth + ',height=' + winHeight + ',top=' + winTop + ',left=' + winLeft;
//open Popup window and redirect user to share website.
window.open(openLink,'Share This Link',winOptions);
return false;
});
});
</script>
Burada dikkat etmeniz gereken kısım yukarıdaki kodda bulunan <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> uzantılı js dosyasının temanızda daha önceden eklenmiş olup olmadığınız kontrol etmek. Eklenmişse silip bununla değiştirebilirsiniz.
Dördüncü ve son adımda ise aşağıdaki kodu bulun.
<b:section class='main1' id='main1' showaddelement='no'>
Yukarıdaki kodun hemen üzerine aşağıda kodları ekleyin ve temanızı kaydetmeden bir önizleme yapın.
<div id='share-wrapper'>
<ul class='share-inner-wrp'>
<!-- Facebook -->
<li class='facebook button-wrap'><a href='#'>Facebook</a></li>
<!-- Twitter -->
<li class='twitter button-wrap'><a href='#'>Tweet</a></li>
<!-- Digg -->
<li class='digg button-wrap'><a href='#'>Digg it</a></li>
<!-- Stumbleupon -->
<li class='stumbleupon button-wrap'><a href='#'>Stumbleupon</a></li>
<!-- Delicious -->
<li class='delicious button-wrap'><a href='#'>Delicious</a></li>
<!-- Google -->
<li class='google button-wrap'><a href='#'>Plus Share</a></li>
<!-- Email -->
<li class='email button-wrap'><a href='#'>Email</a></li>
</ul>
</div>
Eğer hata almadıysanız ve önizlemede temanızın sol kısmında butonları görüntülediyseniz işlem tamamdır temanızı kaydedebilirsiniz. Güle güle kullanın...
Bir önceki yazımız olan "Blogger Resimli Benzer Yazılar Eklentisi" başlıklı makalemizde resimli benzer yazılar eklentisinin kurulumu hakkında bilgi edinebilirsiniz.
Yorumlar