Sharing Button Macam The Vocket

Alhamdulillah, akhirnya ada juga insan yang sudi share Button Share sebijik macam blog Thevocket untuk digunakan oleh orang ramai. Selain thevocket portal berita Sinar Harian jugak ada guna sharing button yang sama bentuknya camni cuma ianya menggunakan service dari web addthis.com.

Whatsapp Sharing Button Blogger

Beribu dan berjuta jutaan terima kasih kepada Freddie kerana sudi berkongsi button Share yang cantik ini. Freddie berkongsi Sharing button khas untuk kegunaan blogger yang menggunakan platform Blogger/Blogspot dan Wordpress. Mesti ramai blogger yang menggunakan platform Blogspot tercari-cari sharing button yang ada fungsi kongsi ke Aplikasi Whatsapp. (Thevocket dah ada fungsi Telegram)

Jadi jom straight to the point.
Pastikan anda telah ke Template>Edit HTML dalam panel blogger / blogspot itu.

1. Copy code ni:

<!-- KN Mobile ShareBar blogspot version by www.freddie.my -->
<b:if cond='data:blog.pageType == "item"'>
    <div id='mobile-share-box'>
        <ul id='horizontal-list'>
            <li class='facebook'>
                <a class='hyperlink' expr:href='&quot;http://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' target='_blank'>Facebook</a>
            </li>
            <li class='twitter'>
                <a class='hyperlink' expr:href='&quot;https://twitter.com/intent/tweet?source=tweetbutton&amp;original_referer=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:blog.title + &quot;&amp;url=&quot; + data:blog.url' target='_blank'>Twitter</a>
            </li>
            <li class='whatsapp'>
                <a class='hyperlink' expr:href='&quot;whatsapp://send?text=&quot; + data:blog.title + &quot; - &quot; + data:blog.url' target='_blank'>Whatsapp</a>
            </li>
        </ul>
    </div>
    <div id='mobile-sharebar-footer'>
        <span class='mobile-sharebar-footer-span'><img border='0' class='share-icon' src='http://s15.postimg.org/wy5kyu0d7/blank.png'/></span>
    </div>
</b:if>
<!-- KN Mobile ShareBar blogspot version by www.freddie.my -->

2. Paste kan code ini sebelum tag </body>

3. Copy pulak code ini:

/* KN Mobile ShareBar blogspot version by www.freddie.my */
#mobile-share-box{
    position: fixed;
    bottom: 0;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    z-index: 501;
}
#mobile-sharebar-footer{
    position: relative;
    bottom: 0;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    z-index: 500;
}
ul#horizontal-list {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    display: table;
}
ul#horizontal-list li {
    display: table-cell;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 33.3333333333%;
}
.whatsapp{
    background-color: #2ab200;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    background-image: url(&#39;http://s15.postimg.org/el9l20fa3/whatsapp.png&#39;);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.facebook{
    background-color: #3b5998;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    background-image: url(&#39;http://s15.postimg.org/xp2wics4b/facebook.png&#39;);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.twitter{
    background-color: #3eaefb;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 50px;
    width: 100%;
    background-image: url(&#39;http://s15.postimg.org/z6octwwuz/twitter.png&#39;);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.share-icon {
    padding: 0 0 0 0;
    border: 0px;
    margin: 0 0 0 0;
    width: 100%;
    height: 50px;
}
.hyperlink {
    background-image: url(&#39;http://s15.postimg.org/wy5kyu0d7/blank.png&#39;);
    display:block;
    padding: 0 0 0 0;
    border: 0px;
    margin: 0 0 0 0;
    width: 100%;
    text-indent:-9999px;
    height: 50px;
}
@media screen and (min-width: 980px) {
    #mobile-share-box { display: none; }
    #mobile-sharebar-footer { display: none; }
}
/* KN Mobile ShareBar blogspot version by www.freddie.my */

4. Paste code ini sebelum tag </style>

5. Tekan Save

6. Disable fungsi mobile bagi template korang tu untuk mengaktifkan sharing button ni.

* Tambahan :

1. Jangan letak code Nombor 1 tu ke dalam gadget / widget, sebab nanti share button muncul dekat homepage jugak.

2. Boleh ubah coding (langkah 2) code meta yang data:blog.title leh tukar ke data:blog.pageName untuk detail tentang artikel tu sebelum url.

3. Sebarang pertanyaan boleh tanya diruangan komen. Oyeah.