Cara Mudah Membuat Tombol Social Share Facebook, Google Plus, Twitter dengan Font Awesome

Membuat Tombol Social Share Facebook, Twitter, Google, Memasang Icon Media Sosial di Sidebar Blog dengan Font, Tombol Share Sosial Media Keren Dengan Font Awesome

Ilustrasi gambar

Cara Mudah Membuat Tombol Social Share Facebook, Google Plus, Twitter dengan Font Awesome - Bagi para blogger, tentunya sangat penting sekali untuk membuat tombol share pada social media, karena social media merupakan salah satu trik jitu untuk memperbanyak pengunjung masuk kedalam web atau blog kita. Dan untuk itu mari kita pasang tombol social share tersebut di blog anda.

Inilah Cara Membuat Tombol Share Social Media di Blog

1. Template --------> Editt HTML
2. Pasang / Copas link 'Font Awesome' berikut ini dan letakan dibawah code <head>

<====================> Font Awesome <====================>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<========================================================>

3. Copas code CSS Social Share tersebut dan taruh di atas code ]]></b:skin> atau juga </style>

<====================> Code CSS <=========================>
.share_posting {
    overflow: hidden;
    margin-top: 20px;
    padding: 2px 0;
    border-top: 1px solid #eee;
}
.share_posting h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: #757575;
    float: left;
    display: inline-block;
    padding-top: 1px;
}
.share_posting li {
    display: inline-block;
    float: left;
    padding-left: 10px;
}
.share_posting li a {
    color: #757575;
    font-size: 13px;
    text-decoration: none;
}
.share_posting li a:hover {
    text-decoration: underline;
}
.share_posting li a:active {
    color: #3775DD;
}
<=========================================================>

4. Copas code yang ada dibawah ini dan taruh dibawah code <data:post.body/> yang pertama atau yang kedua maupun ketiga.

<=========================================================>
     <div class='share_posting'>
                              <h3>Share This:</h3>

<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> Facebook</a></li>

<li><a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> Twitter</a></li>

<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/> Google Plus</a></li>

<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/> Pinterest</a></li>

<li><a expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/> Linkedin</a></li>

                          </div>
<=========================================================>

5. Simpan atau Save template

Baca juga : Cara Mudah Membuat Navigasi di Halaman Blog dengan Nomor

Nah, sekarang kini anda tinggal 'Pratinjau' blog anda dan lihatlah tombol share social media di blog anda. Pasti sangat cantik dan indah dipandang pada halaman blog anda.

Demikianlah informasi tentang Cara Mudah Membuat Tombol Social Share Facebook, Google Plus, Twitter dengan Font Awesome dari saya. Mudah-mudahan cara sederhana saya ini dapat membantu blogger-blogger mania di tanah air. Terima kasih banyak...

Sumber berita : http://www.contohblog.com