Cara Membuat Tombol Social Share Dan Tombol Whatsapp Di Blog

Diposting pada

Tombol Social Share Dan Tombol Whatsapp

Cara Membuat Tombol Social Share Dan Tombol Whatsapp Di Blog – Pada artikelsebelum saya pernah bahas tentang Cara Memasang Tombol Share Whatsapp With Thumbnail. Dan untuk artikel ini saya akan berbagi Cara membuat tombol social share dantombol whatsapp di blog. Jadi tombol share ini sudah ada tombol berbagi untuk whatsapp nya.

Kelebihan tombol share ini bagi saya cukup ringan sehingga tidak membuat berat blog kalian. Sebelum nya saya minta maaf mungkin untuk contoh nya saya tidak sertakan pada tutorial ini di karenakan saya sudah mengganti tombol share yang saya gunakan dengan yang lain. Tapi yang jelas tombol share ini cukup bagus dan tidak kalah bagus nya dengan tombol share yang lain nya.

Dan bagi kalian yang ingin sekedar mencoba untuk melihat bagaimana model tombol share social danwhatsapp nya, kalian bisa ikuti langkah nya sebagai berikut.

Baca Juga: Membuat Google URL Shortener Tanpa Token API

Cara membuat tombol social share dan tombol whatsapp di blog

1. Silahkan kalian copy code di bawah ini tepat di bagian atas code ]]></b:skin> atau </style>

 /* Social Sharing Widget */
.share-box {
position: relative;
    margin: 10px 0 0;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.share-title {
color: #010101;
display: inline-block;
    box-shadow: inset 0 -7px 0 rgba(2, 171, 104, 0.16);
font-size: 15px;
font-weight: 500;
position: relative;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
    display: none;
}
.item .share-art a span {
display: inline-block;
    margin-left: 5px;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
.item .share-art a span {display:none;}}

Dan silahkan tambahkan code css untuk media screen mobile di bawah ini dan letakan di bawah nya code css yang di atas tadi.

 @media only screen and (max-width:480px){
.share-box {text-align: center;}
.share-title {display: none;}
.share-art {float: none;}}

2. Dan untuk code pemanggilnya silahkan kalian copy code di bawah ini dan paste di bagian yang yang kalian ingin kan. Seperti contoh bila mana kalian ingin memasang nya di bawah judul artikel kalian bisa taro code tersebut di atas code <data:post.body/> dan bila kalian ingin memasang nya di bawah artikel kalian bisa letakan code nya di bawah code <data:post.body/>

 <div class='share-box'>
<h8 class='share-title'>Share This:</h8>
<div class='share-art'> 
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
</div>
</div>
<div style='clear:both'/>

Perlu di perhatikan pada code <data:post.body/> kemungkinan ada code yang sama di template kalian. Jadi kalian bisa coba satu persatu yang menurut kalian posisi nya tepat pada bagian yang kalian ingin kan. Atau kalian bisa ganti code tombol share yang sudah ada di template kalian dengan code yang sekarang ini.

Bila ukuran share social na tidak pas sesuai sama template kalian, kalian cukup edit code css nya saja. Mungkin itu saja yang bisa saya bagikan di tutorial kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara membuat tombol social share dan tombol whatsapp di blog. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *