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

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

Cara Membuat Tombol Social Share Facebook, Twitter, Google Plus, Pinterest, dan Linkedin dengan Font Awesome.

BERIKUT ini cara membuat tombol social share dengan menggunakan Font Awesome di bawah tiap posting blog.

Sebelumnya CB sudah share tips serupa: Memasang Icon Sosial Media di Sidebar Blog dengan Font Awesome.

Kode Social Share Button untuk membagikan tulisan blog ke berbagai media sosial ini tanpa gambar dan link eksternal, sehingga fast loading, selain simple banget. Ini penampakannya yang muncul di bawah postingan blog:

Tombol Social Share

Membuat Tombol Social Share dengan Font Awesome

1. Template > Edit HTML
2. Pasang/Copas link Font Awesome berikut ini di bawah kode <head>


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

3. Copas kode CSS Social Share berikut ini di atas kode ]]></b:skin> atau </style>

.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 kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga (jika ada lebih dari dua).

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

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

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

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

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

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

                          </div>

5. Save template!

Kini Tombol Social Share Facebook, Twitter, Google Plus, Pinterest, dan Linkedin dengan Font Awesome sudah muncul di bawah posting blog Anda. Good Luck! (http://www.contohblog.com).*

Sumber Kode

Labels: Desain Blog

Related Posts

0 Komentar untuk "Membuat Tombol Social Share Facebook, Twitter, Google Plus dengan Font Awesome"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *