Sosyal paylaşım eklentisi artık her blog sayfasında bulunması gereken eklentiler arasında olmazsa olmazlarından. Blogunuzda sosyal paylaşım eklentisi kullanmıyor iseniz facebook whatsapp gibi sosyal paylaşım sitelerinden trafik gelmemesine nedendir. Kendi fikrim ben bir blog a girdiğim zaman yazı aradığım bir konuyla alakalı ve gerçekten güzel ise o makaleyi facebook hesabımda muhakkak paylaşırım.
BLOG SAYFANIZA ŞIK CSS SOSYAL PAYLAŞIM EKLENTİSİ
KULLANIMI
aklınıza takılabilir diye söylüyorum bu css kodu her blog sayfası için uygundur. Tüm ekran boyutlarında sorunsuz olarak çalışır. Bu eklenti sayesinde ziyaretçilerin ilgisini çekebilir. Blog unuzda daha fazla zaman geçirmelerini sağlayabilirsiniz.
Yapmanız Gerekenler
Eklemek istediğiniz blogger hesabına giriş yapalım.
kontrol panelinden Sol menüden Tema-Özelleştir dedikten sonra açılan html düzenleyicisinden </head> kodunun bir satır üsttüne altta vermiş olduğum kodları ekleyelim.
<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>
htlm özelleştir seçeneğinden shareButtons şeçeneğini bulalım.
<b:includable id='shareButtons' var='post'>
bu kodun hemen altına bu kodları ekleyelim.
Aşağıda görmüş olduğunuz HTML kodunu <data:post.body/> hemen altına yapıştırıyoruz.
blog HTML kodları arasında birden fazla <data:post.body/> kodu bulunabilir bunun için kodları deneme yaparak nereye eklemek istiyorsanız ayarlayabilirsiniz.
Daha iyi bloglar Blog yazarı
<b:includable id='shareButtons' var='post'>
bu kodun hemen altına bu kodları ekleyelim.
<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>
Aşağıda görmüş olduğunuz HTML kodunu <data:post.body/> hemen altına yapıştırıyoruz.
blog HTML kodları arasında birden fazla <data:post.body/> kodu bulunabilir bunun için kodları deneme yaparak nereye eklemek istiyorsanız ayarlayabilirsiniz.
Daha iyi bloglar Blog yazarı
Hiç yorum yok :
Speak Your Mind: