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...
Özellikle bloglarında tanıtım yazısı yayınlayan kullanıcıların işine yarayacak bir yöntemin anlatımını yapacağım. Bu sayede istediğimiz etikete sahip yazıların ana sayfada görüntülenmesini engelleyebileceğiz. Yalnızca ana sayfada gizlenen yazı yine index almaya, 
Benzer yazılar eklentisi, yazılarınıza eklediğiniz etiketleri baz alarak okuduğunuz yazıyla aynı etikete sahip yazıları sıralı şekilde gösterme temeline dayanır.
Temayı değiştirdikten sonra sayfa hızına daha fazla önem vermeye başladım. Başta farklı eklentilerle sağ menüde son yazı ve yorumları görüntüleyebiliyordum ama eklentilerin içerdiği javascript kodları az da olsa blogun hızına olumsuz etki ediyordu. Bende uzun zamandır bildiğim bir yöntemi denedim ve ve hiç kod kullanmadan basit şekilde son yorumları ve yazıları ekledim.
Bu anlatımın benzerlerine daha önce bir çok kez denk geldiğinize eminim. Hatta Hit Adam'ın önceki yayın döneminde bu konuya bende değinmiştim. Yalnız benimki de dahil anlatımların hiçbirinde resime tıklandığında yazıya gitme gibi bir özellik yoktu. Yani ya "yazının devamını oku" gibi bir bağlantı oluşturuyordunuz ya da başlığa tıklıyordunuz. Bu sefer tüm özellikleri içeren bir eklenti kuracağız.
.jpg)