Home » » 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

Thanks for reading & sharing Membuat Tombol Social Share Facebook, Twitter, Google Plus dengan Font Awesome

Previous
« Prev Post

0 comments:

Comment Page:

Post a Comment

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox