December 7, 2015

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

December 7, 2015

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

Post a Comment

Contact Form

Name

Email *

Message *