Daha önce AMP blog kullanıcıları için açılıp kapanan sosyal paylaşım butonlarını paylaşmıştık. Bu yazımızda AMP olmayan blog siteleri için jQuery destekli açılıp kapanan sosyal paylaşım butonlarını paylaşacağım.
Sayfanın sağ alt köşesinde bulunan paylaş simgesine tıklandığında Facebook, Twitter, Google+ ve diğer sosyal paylaşım butonları dikey olarak açılır ve görüntülenir. Aynı zamanda, mobil zihazlarda da SVG simgesini kullanarak paylaşım yapabilmek için, Whatsapp ve diğer mobil paylaşım butonları da eklenti içerisinde yer almaktadır. Sosyal paylaşım butonlarını eklemeden önce aşağıdaki butona tıklayarak ön izleme sayfasında inceleyebilirsiniz.
Açılıp kapanan SVG sosyal paylaşım butonları blogunuza eklemek için aşağıdaki adımları takip edin.
Açılıp Kapanan SVG Sosyal Paylaşım Butonları Bloga Nasıl Eklenir?
1- Aşağıdaki CSS kodlarını blogunuzun şablon editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.
<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>Sosyal paylaşım butonlarını ekranın sol alt köşesinde görüntülemek için, yukarıdaki CSS kodları arasında belirtilen right: 20px CSS kodunu left: 20px CSS kodu ile değiştirin.
2- Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.
<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>3- Sosyal paylaşım butonları HTML kodunu eklemek için, blogunuzun şablon editör sayfasında CTRL+F yardımıyla aşağıdaki belirtilen kodunu bulun.
<b:includable id='post' var='post'>
.............
.............
.............
</b:includable>Yukarıdaki kodun (bulunan kodun) kapanış kodunun bir satır üzerine aşağıdaki HTML kodu ekleyin.
<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>Yukarıdaki adımları doğru bir şekilde tamamladıktan sonra şablonu kaydedin.
Bknz: Blogger AMP Sosyal Paylaşım Butonları
Açılıp kapanan sosyal paylaşım butonları blogunuza eklendi. Eklenti ile ilgili görüş ve sorularınız için yorum formunu kullanabilirsiniz.
0 komentar: