Blogger CSS Sosyal Paylaşım Buton Eklentisi
 |
| CSS SOSYAL PAYLAŞIM BUTONLARI EKLENTİSİ |
İlk önce Tema > HTML DÜZENLE diyoruz. Ardından </head> kodunu CTRL+F ile aratıp buluyoruz. Daha sonra aşağıda verdiğim kodu </head> kodunun bir satır üstüne ekliyorsunuz.
<b:if cond='data:blog.pageType == "item"'> <style> .ShareButtons { margin: 0; padding: 0; width: 100%; margin-bottom: 12px; list-style-type: none; background: #ccc; -ms-box-orient: horizontal; display: -webkit-box; display: -ms-flexbox; display: -moz-flex; display: flex } .ShareButtons svg { display: inline-block; height: 30px; margin: 4px 0; vertical-align: top; width: 30px; fill: #fff } .ShareButtons .gp-btn svg { margin: 2px 0; height: 34px; width: 34px } .ShareButtons li { height: 38px; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .ShareButtons li a { height: 38px; display: block; text-align: center; cursor: pointer; } .ShareButtons li.fb-btn a { background: #3b5998 } .ShareButtons li.tw-btn a { background: #42a4f5 } .ShareButtons li.in-btn a { background: #008cc9 } .ShareButtons li.in-btn a { background: #0077b5 } .ShareButtons li.gp-btn a { background: #d74314 } .ShareButtons li.pin-btn a { background: #cb2027 } .ShareButtons li.ws-btn a { background: #4dc247 } .ShareButtons li.print-btn a { background: #959595 } .ShareButtons li.mail-btn a { background: #acacac } .ShareButtons li.ws-btn a:hover { background: #43ad3d; } .ShareButtons li.fb-btn a:hover { background: #05345c } .ShareButtons li.in-btn a:hover { background: #008cc9 } .ShareButtons li.tw-btn a:hover { background: #3678af } .ShareButtons li.gp-btn a:hover { background: #791407 } .ShareButtons li.pin-btn a:hover { background: #8f2217 } .ShareButtons li.print-btn a:hover, .ShareButtons li.mail-btn a:hover { background: #797979 } </style> </b:if>
Bu işlemleri gerçekleştirdikten sonra tekrardan Tema > HTML DÜZENLE kısmından bu sefer shareButtons aratıp buluyoruz. Ardından bu bulduğumuz kod ile aşağıda verdiğim kodu değiştiriyoruz.
<b:includable id='shareButtons' var='post'> <ul class='ShareButtons'> <li class='fb-btn'> <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Facebook'> <svg alt='Facebook' title='Facebook' viewBox='0 0 32 32'> <title>Facebook</title> <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' /> </svg> </a> </li> <li class='tw-btn'> <a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Twitter'> <svg alt='Twitter' title='Twitter' viewBox='0 0 32 32'> <title>Twitter</title> <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' /> </svg> </a> </li> <li class='in-btn'> <a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Linkedin'> <svg alt='LinkedIn' title='LinkedIn' viewBox='0 0 32 32'> <title>LinkedIn</title> <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' /> </svg> </a> </li> <li class='gp-btn'> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Google+'> <svg alt='Google+' title='Google+' viewBox='0 0 32 32'> <title>Google+</title> <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' /> </svg> </a> </li> <li class='pin-btn'> <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'> <svg alt='Pinterest' title='Pinterest' viewBox='0 0 32 32'> <title>Pinterest</title> <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' /> </svg> </a> </li> <b:if cond='data:blog.isMobileRequest == "true"'> <li class='ws-btn'> <a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Whatsapp'> <svg alt='WhatsApp' title='WhatsApp' viewBox='0 0 32 32'> <title>WhatsApp</title> <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' /> </svg> </a> </li> </b:if> <b:if cond='data:blog.isMobileRequest == "false"'> <li class='print-btn'> <a href='javascript:print(document)'> <svg alt='Yazdır' title='Yazdır' version='1.1' viewBox='0 0 32 32'> <title>Print</title> <path d='M24.67 10.62h-2.86V7.49H10.82v3.12H7.95c-.5 0-.9.4-.9.9v7.66h3.77v1.31L15 24.66h6.81v-5.44h3.77v-7.7c-.01-.5-.41-.9-.91-.9zM11.88 8.56h8.86v2.06h-8.86V8.56zm10.98 9.18h-1.05v-2.1h-1.06v7.96H16.4c-1.58 0-.82-3.74-.82-3.74s-3.65.89-3.69-.78v-3.43h-1.06v2.06H9.77v-3.58h13.09v3.61zm.75-4.91c-.4 0-.72-.32-.72-.72s.32-.72.72-.72c.4 0 .72.32.72.72s-.32.72-.72.72zm-4.12 2.96h-6.1v1.06h6.1v-1.06zm-6.11 3.15h6.1v-1.06h-6.1v1.06z' /> </svg> </a> </li> <li class='mail-btn'> <a expr:href='"mailto:url=" + data:post.url + "&title=" + data:post.title'> <svg alt='E-posta' title='E-posta' viewBox='0 0 32 32'> <title>Email</title> <path d='M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z' /> <path d='M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z' /> </svg> </a> </li> </b:if> </ul> </b:includable>
Son olarak da <data:post.body/> aratıp buluyoruz. Ve bir satır altına aşağıda verdiğim kodu ekliyor ve kayıt ediyoruz. İşte hepsi bu kadar ..
<b:if cond='data:blog.pageType == "item"'> <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/> </b:if>
İyi bloglamalar :)
YORUM EKLE