Değerli Blog Geliştiricim takipçileri bu yazımızda sizlere işinize yarayacak ve sitenize şık bir görünüm sağlayacak açılıp / kapanan sosyal paylaşım butonlarını nasıl ekleyeceğinizden bashedeceğim. Bu eklentiyi aşağıdaki anlattığım gibi adımları takip ederek doğru bir şekilde doğru yerlere eklerseniz sorunsuz kullanacağınızdan emin olabilirsiniz.
Peki Bu Eklentiyi Eklediğimizde Bizi Ne Bekliyor?
Bu eklentiyi eklediğiniz zaman ekranın sağ alt kenarında Paylaşım (Share) butonu yer alacak ve butona tıkladığınızda yukarı doğru açılan sosyal paylaşım ikonlarını göreceksiniz. Kulağa oldukça hoş geliyor değil mi? O zaman şimdi bu eklentiyi nasıl ekleyeceğimize geçelim.1. Adım : Öncelikle Blogger yönetim paneline giriş yapın ve ardından Tema > HTML'yi Düzenle ye tıklayarak Kod Editörünü açın. Daha sonra CTRL + F tuş kombinasyonu ile <b:includable id='post' var='post'> kodunu aratın.
Örnek Kod
<b:includable id='post' var='post'>
.............
.............
.............
//HTML Kodu buraya eklenecek
</b:includable> //Kapanış Kodu2. Adım : Bulduğunuz kodun kapanış kodunun bir satır üzerine aşağıda vermiş olduğum HTML Kodunu ekleyin.
HTML Kodu
<b:if cond='data:blog.pageType == "item"'>
<div class="ss_tool">
<h4 class='show-share'>
<div class="show-more rotateIn">
<svg viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /></svg>
</div>
<div class="show-less rotateIn">
<svg viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
<path d="M0 0h24v24H0z" fill="none" /></svg>
</div>
</h4>
<ul class='ss-btn'>
<li class='ss-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Facebook" alt="Facebook">
<path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Twitter" alt="Twitter">
<path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-googleplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Google+" alt="Google+">
<path d="M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-tumblr'>
<a expr:href='"https://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Tumblr'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Tumblr" alt="Tumblr">
<path d="M19.59 22.176c-.392.186-1.14.348-1.695.362-1.682.045-2.008-1.18-2.022-2.07V13.93h4.218v-3.18H15.89V5.403h-3.076c-.05 0-.138.044-.15.157-.18 1.636-.947 4.51-4.133 5.66v2.71h2.124v6.862c0 2.35 1.733 5.688 6.308 5.61 1.544-.028 3.258-.674 3.637-1.23l-1.01-2.996" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-linkedin'>
<a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LinkedIn" alt="LinkedIn">
<path d="M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-pinterest'>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Pinterest'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="Pinterest" alt="Pinterest">
<path d="M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="WhatsApp" alt="WhatsApp">
<path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Line'>
<span class='ss-icon'>
<svg viewBox="0 0 32 32" title="LINE" alt="LINE">
<path d="M27 14.926C27 10.006 22.065 6 16 6S5 10.005 5 14.926c0 4.413 3.913 8.11 9.2 8.808.358.077.845.236.968.542.112.278.073.713.036.995l-.157.942c-.048.28-.22 1.088.953.593 1.174-.494 6.334-3.73 8.642-6.386C26.236 18.67 27 16.896 27 14.925zm-4.247-.41a.577.577 0 0 1 0 1.153h-1.61v1.03h1.61a.578.578 0 0 1 0 1.155h-2.186a.578.578 0 0 1-.577-.577v-4.37c0-.32.26-.578.577-.578h2.186a.578.578 0 0 1 0 1.153h-1.61v1.033h1.61zm-3.537 2.762a.575.575 0 0 1-.578.577.58.58 0 0 1-.46-.23l-2.24-3.05v2.703a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.038-.347l2.24 3.05v-2.703a.578.578 0 0 1 1.154 0v4.37zm-5.26 0a.577.577 0 0 1-1.154 0v-4.37a.577.577 0 0 1 1.153 0v4.37zm-2.262.577H9.508a.577.577 0 0 1-.576-.577v-4.37a.577.577 0 0 1 1.153 0V16.7h1.61a.577.577 0 0 1 0 1.155z" fill-rule="evenodd"></path>
</svg>
</span>
</a>
</li>
<li class='ss-bbm'>
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Blackberry'>
<span class='ss-icon'>
<svg class="icon BlackBerry-Icon" viewBox="25 25 450 450">
<path style="fill:#fff" d="M372.294,247.24c-20.741,0-43.104,0-43.104,0l11.749-54.368c0,0,30.344,0,41.403,0 c26.859,0,33.22,13.207,33.22,23.66C415.562,231.319,406,247.24,372.294,247.24z M399.519,293.991 c0,14.786-9.562,30.708-43.268,30.708c-20.741,0-43.104,0-43.104,0l11.748-54.407c0,0,30.346,0,41.364,0 C393.118,270.292,399.519,283.579,399.519,293.991z M271.945,198.585c-20.742,0-43.064,0-43.064,0l11.749-54.368 c0,0,30.304,0,41.323,0c26.899,0,33.3,13.207,33.3,23.659C315.254,182.663,305.651,198.585,271.945,198.585z M300.263,249.711 c0,14.787-9.561,30.708-43.268,30.708c-20.722,0-43.063,0-43.063,0l11.728-54.327c0,0,30.344,0,41.383,0 C293.903,226.092,300.263,239.259,300.263,249.711z M284.262,334.949c0,14.827-9.562,30.708-43.188,30.708 c-20.783,0-43.166,0-43.166,0l11.748-54.408c0,0,30.345,0,41.404,0C277.9,311.249,284.262,324.497,284.262,334.949z M156.607,198.585c-20.723,0-43.044,0-43.044,0l11.688-54.368c0,0,30.345,0,41.404,0c26.86,0,33.281,13.207,33.281,23.659 C199.935,182.663,190.313,198.585,156.607,198.585z M184.986,249.711c0,14.787-9.622,30.708-43.247,30.708 c-20.803,0-43.166,0-43.166,0l11.771-54.327c0,0,30.363,0,41.362,0C178.585,226.092,184.986,239.259,184.986,249.711z" /></svg>
</span>
</a>
</li>
</ul>
</div>
</b:if>3. Adım : Aşağıdaki vermiş olduğum CSS Kodunu bloğunuzun Kod Editör sayfasındaki </head> tagının bir satır üzerine ekleyin.
CSS Kodu
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.ss-btn,
.ss_tool,
.ss_tool h4 {
height: 50px;
width: 50px
}
.ss_tool {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999
}
.ss-btn,
.ss-btn li,
.ss_tool h4 {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
padding: 0
}
.ss_tool h4 {
z-index: 2
}
.ss-btn {
z-index: 1
}
.ss-btn:after {
clear: both
}
.ss-btn:after,
.ss-btn:before {
content: ' ';
display: table
}
.ss-btn li {
box-sizing: border-box;
height: 100%;
line-height: 50px;
list-style: none;
transition: all .3s ease-in-out;
opacity: 0
}
.ss-btn li.ss-line a {
background: #00c300
}
.ss-btn li.ss-facebook a {
background: #3d5a9c
}
.ss-btn li.ss-tumblr a {
background: #37455c
}
.ss-btn li.ss-linkedin a {
background: #0077b5
}
.ss-btn li.ss-twitter a {
background: #1da1f2
}
.ss-btn li.ss-googleplus a {
background: #d64b3f
}
.ss-btn li.ss-pinterest a {
background: #cb2027
}
.ss-btn li.ss-whatsapp a {
background: #4dc247
}
.ss-btn li.ss-bbm a {
background: #222
}
.ss-btn a:hover {
opacity: 0.9
}
.ss-btn li a,
.ss_tool .show-share .show-less,
.ss_tool .show-share .show-more {
background: #ccc;
box-sizing: border-box;
display: block;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
height: 50px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
width: 50px;
border-radius: 100%;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3)
}
.ss_tool .show-share .show-less,
.ss_tool .show-share .show-more {
line-height: 50px;
margin: 0;
top: 0;
left: 0;
cursor: pointer;
background: #0ca8ec
}
.ss_tool .show-share .show-less {
display: none
}
.ss-btn li a .ss-icon {
display: block;
cursor: pointer
}
.ss-btn li a .ss-icon svg {
height: 34px;
width: 34px;
vertical-align: middle
}
.ss_tool .show-share svg {
height: 24px;
width: 24px;
vertical-align: middle
}
.ss-btn li.ss-bbm a,
.ss-btn li.ss-line a {
padding: 0
}
.ss-btn li.ss-bbm a .ss-icon,
.ss-btn li.ss-line a .ss-icon {
padding-top: 0
}
.ss-btn li a .ss-icon svg circle,
.ss-btn li a .ss-icon svg path {
fill: #fff
}
.ss_tool .show-share svg {
fill: #fff
}
.ss-btn li a .ss-text {
color: #fff
}
.ss-btn li a:active {
box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, .25)
}
.ss_tool .show-share .rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -600deg);
transform: rotate3d(0, 0, 1, -600deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -600deg);
transform: rotate3d(0, 0, 1, -600deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
/*]]>*/
</style>
</b:if>
NOT: İkonların Blog Sayfanızın sol tarafında gözükmesini istiyorsanız CSS Kodunda minik bir değişiklik yapmanız gerekecektir. CSS Kodlarınızın arasıda ".ss_tool" classının altında yer alan "right: 20px;" komutunu "left: 20px;" olarak değitşirmeniz yeterli olacaktır.
4. Adım : Aşağıda vermiş olduğum JavaScript Kodunu blog sayfanızın kodları arasında yer alan </body> tagının bir satır üzerine ekleyin.
JavaScript Kodu
<b:if cond="data:blog.pageType == "item"">
<script type="text/javascript">
//<![CDATA[
$(function() {
$(".ss_tool .show-share .show-more").click(function() {
$(".ss_tool .show-share .show-more").hide();
$(".ss_tool .show-share .show-less").show();
$(".ss-btn li.ss-facebook").css({
bottom: "468px",
opacity: "1"
});
$(".ss-btn li.ss-twitter").css({
bottom: "416px",
opacity: "1"
});
$(".ss-btn li.ss-googleplus").css({
bottom: "364px",
opacity: "1"
});
$(".ss-btn li.ss-tumblr").css({
bottom: "312px",
opacity: "1"
});
$(".ss-btn li.ss-linkedin").css({
bottom: "260px",
opacity: "1"
});
$(".ss-btn li.ss-pinterest").css({
bottom: "208px",
opacity: "1"
});
$(".ss-btn li.ss-whatsapp").css({
bottom: "156px",
opacity: "1"
});
$(".ss-btn li.ss-line").css({
bottom: "104px",
opacity: "1"
});
$(".ss-btn li.ss-bbm").css({
bottom: "52px",
opacity: "1"
});
});
$(".ss_tool .show-share .show-less").click(function() {
$(".ss_tool .show-share .show-more").show();
$(".ss_tool .show-share .show-less").hide();
$(".ss-btn li.ss-facebook,.ss-btn li.ss-twitter,.ss-btn li.ss-googleplus,.ss-btn li.ss-tumblr,.ss-btn li.ss-linkedin,.ss-btn li.ss-pinterest,.ss-btn li.ss-whatsapp,.ss-btn li.ss-line,.ss-btn li.ss-bbm").css({
bottom: "0",
opacity: "0"
})
})
});
//]]>
</script>
</b:if>Bütün kodları ekledikten sonra son olarak Temayı Kaydet butonuna basın.
Açılıp Kapanan Sosyal Paylaşım Butonları ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
