HOMEMADE JUICE RECIPES

A Collection Of HomeMade Natural And Healthy Fruit Juice Easy Recipes For Your Family.

Know More

17 Kasım 2017 Cuma

BLOG SAYFANIZA ŞIK CSS SOSYAL PAYLAŞIM EKLENTİSİ





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.



css-sosyal-paylası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.



<b:includable id='shareButtons' var='post'>
    <ul class='ShareButtons'>
        <li class='fb-btn'>
            <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + 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='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + 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='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + 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='&quot;https://plus.google.com/share?url=&quot; + 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='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + 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 == &quot;true&quot;'>
            <li class='ws-btn'>
                <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + 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 == &quot;false&quot;'>
            <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='&quot;mailto:url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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ı

You Like It, Please Share This Recipe With Your Friends Using...


Don't Forget To Read This Also...





Hiç yorum yok :

Speak Your Mind:


İletişim Formu

Ad

E-posta *

Mesaj *

Yeniler$type=list-tab$date=0$au=0$c=5

Yorumlar$type=list-tab$com=0$c=4$src=recent-comments

Rastgele$type=list-tab$date=0$au=0$c=5$src=random-posts

Öne Çıkan Yayınlar$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

Blogger tarafından desteklenmektedir.

Mobil$type=right$va=0$count=3

Etiketler

2017 filmleri,1,adsense ilişkilendirme,4,amerika,1,bayan blog,1,bayan bloggerlar,1,beşiktaşlı olmak,1,beşiktaşlİ sevgililer,1,bilim kurgu filmleri,1,bitcoin,1,bitcoin güvenlik önlemleri,1,bitcoin madenciği nasıl yapılır,1,bitcoin nasıl alınır,1,bitcoin nasıl korunur,1,bitcoin nasıl kullanılır,1,blog,8,blog amp,1,blog ayarları,3,blog canlı chat,1,blog chat,1,blog hakkımda,1,blog hosting,1,blog indeks,1,blog instagram,1,blog instagram ekleme,1,blog kurmak,2,blog oluşturma,3,blog online oyunlar,2,blog para kazan,1,blog sablon,1,blog sayfasın header etiketi,1,blog sitesi açma,1,blog tanıtım,2,blog tanıtımı,2,blog tema yapma,1,blog temaları,2,blog teması değiştirme,1,blog teması indir,1,blog yardım,2,blog yazar,2,blog yazarak para kazananlar,1,blog yazarı,2,blog yazarı olmak,2,blog yazari,2,blog yazarlığı,1,blog yazmak,3,blog yazmak istiyorum,1,blogger,9,blogger ayarlar,4,blogger ilişkilendirme,4,blogger instagram ekleme,1,blogger olmak,1,blogger site haritasi,3,blogger tame,2,blogger tema,1,blogger tema düzenleme,1,blogger tema düzenleme programı,1,blogger tema yükleme,1,blogger üst bilgi,1,blogger üst bilgi kaldırma,1,blogger yazar,1,bloghayta hakkımda,1,blogspot,1,BUSINESS,1,chicago,1,crosfire,1,css,1,en iyi blog yazarları,1,Film tavsiyeleri,1,Foods,2,fps,1,fps oyunu,1,google babil balığı,1,google teknoloji,1,h eiketleri,1,h1,1,h2,1,h3,1,hakkımda,1,header ayarları,1,header tagları,1,kara cuma,1,makale,1,meta etiket,1,müslüman,1,online oyun,2,People,7,pixel puds,1,protesto,1,robots.txt,3,seo,4,seo ayarlari,7,seo ögreniyorum,4,seo taglari,2,seo uyumlu makale,1,site haritasi oluşturma,2,sitemap.xml,2,siyahi,1,sosyal paylaşım eklentisi,1,şiddet,1,şükran günü,1,tanıtım yazısı,3,tube,1,üst bilgi gadget,1,üst bilgi gadgeti kaldırma,1,wordpress blog kurma,1,wordpress blog kurmak,1,wordpress blog nasıl açılır,1,yazarak para kazanma,1,youtube eşleştirme,1,zula,1,zula mekatron,1,zula online,2,

Labels

Comments

Recent

Popular Posts

Search This Blog

Find Us On Facebook

Flickr Images

Social Share

Flickr

Sponsor

Video Of Day

Bilim$type=left$va=0$count=3

Eğitim$type=one$count=3

Teknoloji$type=three$author=hide$comment=hide$rm=hide

Seyahat$type=carousel

Yayınlar$type=blogging$cate=2$count=4

Moda$type=two$h=0$meta=0$rm=0$snip=0

Blogger Temaları$quote=WeBlog

Blogger Temaları$quote=WeBlog
Blogger haber, teknoloji ve magazin teması.

Labels

Labels

Travel the world

Social Icons

Recent Comments

Keep Traveling

Travel everywhere!

Author Description

Hey there, We are Blossom Themes! We are trying to provide you the new way to look and use the blogger templates. Our designers are working hard and pushing the boundaries of possibilities to widen the horizon of the regular templates and provide high quality blogger templates to all hardworking bloggers!

Ads 300 x 250

Blogroll

Advertisement

Popular Posts

Popular Posts

Climb the mountains

Copyright 2014, "2017 kişisel blog | Blog Rehberi | Blog yazari | bayan blog". All Right Reserved.
Powered By Blogger | Designed By EXEIdeas