Cara Memasang Tombol Share di Blog di Sertai Tombol Whatsapp

adscblog

Tutorial memasang Tombol Share di Halaman Blog Di sertai Tombol Whatsapp - Tombol Share Merupakan Salah satu Penentu Kesuksesan Sebuah Blog

Memasang tombol Share di Suatu Blog Bukan Nya sebagai pemanis Blog Tersebut melainkan Salah Satu Penentu Sukses nya Suatu Blog

Kenapa Bisa di katakan Salah Satu Penentu Kesuksesan Suatu Blog ? Karena Tercipta Nya suatu pengunjung Bukan Hanya Dari Mesin pencarian Google Saja

Baca Juga : Cara Membuat Tombol Share di bawah postingan Blog

Melainkan Dari Suatu Link Yang terkirim Oleh Salah Seorang pengunjung Blog ke Media Social Milik Nya Baik Itu Facebook,Twitter,Pinterest atau Juga Whatsapp

Nah Oleh Karena Itu Memasang Atau Menanam Tombol Share di Suatu Blog atau Website Sangatlah penting Sekali Untuk kesuksesan Suatu Blog

Oleh Karena Itu Tidak Heran Jika Di setiap blog ataupun Website Anda Akan menemukan Tombol-Tombol Media Social Yang saat ini Lagi trendi

Selain itu Juga Tombol Share ini dapat Anda Modifikasi Sesuai Keinginan Anda Lewat kode Css,baik Itu Tombol Share nya di Ubah Menjadi Kotak atau Sesuai Dengan keinginan Anda

Nah Untuk Anda Para Blogger Yang Lagi mencari tombol Share Untuk di tanam di Blog Anda,Disini Saya Menyediakan Salah satu tombol Share Yang Mesti ANda Coba Untuk di Pasang di blog anda

Walaupun tampilan Tombol Share ini Sederhana Akan tetapi Tombol Share ini Bisa Membantu Blog Anda Bersaing dengan Blog Lain nya

Membuat tombol Share di Postingan Blog

Nah untuk Itu Jika SObat Blogger Tertarik dengan tombol Share ini,SObat Blogger Bisa Mengikuti Tutorial Pemasangan Tombol Ini di antara nya

• - Silahkan Anda Masuk Ke Akun Blogger Milik Anda
•  Lalu Kemudian Silahkan Sobat Pilih Blog Milik Anda
•  Kemudian Klik Tema
• Setelah itu Silahkan Anda Klik Lagi Edit Html
• Lalu keudian Silahkan Anda Cari Kode <data:post.body/> Biasa nya Kode Tersebut Terdapat lebig dari 1
• Tapi Jangan Bingun Silahkan Anda Letakan Kode Berikut di kode <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
 <a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
 <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5>
</div>
</b:if>

• langkah Selanjut nya Silahkan Anda Letakan Kode Berikut Sebelum Kode </head>

<script src='https://cdn.jsdelivr.net/gh/kepohjmp/googleshare@main/share_bottom.js' type='text/javascript'/>.mobileshare{text-align:center}
.mobileshare a{background:#3a579a;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px 0;border-radius:50%}
.mobileshare a:hover{background:#314a83}
.mobileshare1{text-align:center}
.mobileshare1 a{background:#df4a32;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare1 a:hover{background:#be3f2b}
.mobileshare2{text-align:center}
.mobileshare2 a{background:#00abf0;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare2 a:hover{background:#0092cc}
.mobileshare3{text-align:center}
.mobileshare3 a{background:#cd1c1f;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare3 a:hover{background:#ae181a}
.mobileshare5{text-align:center}
.mobileshare5 a{background:#34af23;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare5 a:hover{background:#222}

 

• Langkah Selanjut nya Silahkan Anda Letakan Kode CSS Berikut

.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin: 0;}.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}}

• Lalu Klik Save Template Dan Lihat Hasil nya
  

Nah Itulah cara Memasang Atau membuat tombol Share di Halaman Postingan Blog Yang di Sertai dengan Tombol Whatsapp

Semoga artikel nya bisa Bermanfaat Untuk Para Blogger Semua,selamat Mencoba dan salam Blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 28 April and have 0 komentar