Rabu, 22 Februari 2017

Menambahkan 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!