Cara Menambahkan Tombol Membuatkan Sosial Media Dengan Tombol Membuatkan Whatsapp Di Blogger
Hari-hari ini Anda sanggup mengembangkan konten Anda di situs media umum ibarat facebook, twitter, gplus, linkedin, instagram, pinterest dll Tapi kami tidak pernah memikirkan aplikasi apa, Apakah Anda tahu apa aplikasi yakni jaringan sosial yang paling banyak dipakai dan mempunyai lebih banyak pengguna dari facebook jadi hari ini kita akan membantu anda untuk menyebarkan konten anda ke khalayak yang besar itu dan akan berguru bagaimana menambahkan widget sharing sosial dengan tombol sharing whatsapp di blogger , kini hari google lebih fokus pada perangkat mobile daripada pc's. Makara menempatkan widget sosial yang mempunyai opsi mengembangkan whatsapp di dalamnya, akan membantu Anda untuk meningkatkan kemudian lintas Anda dengan sangat cepat.
Mari kita lanjutkan dan lihat Bagaimana menambahkan widget sharing sosial dengan tombol sharing whatsapp di blogger . Anda sanggup mengecek live preview widget di bawah ini.
Langkah 1 ( Menambahkan CSS )
Sebelum Mengedit kami sarankan Anda untuk menciptakan cadangan dari template Anda, sehingga ada yang tidak beres Anda masih mempunyai desain blog Anda aman.
Hal pertama yang perlu Anda lakukan yakni login ke akun Blogger Anda dan masuk ke >> Template >> Edit HTML dan cari tag epilog ]]> </ b: skin> dan sempurna di atasnya paste instruksi berikut.
Langkah ke-2 ( Menambahkan HTML )
Di template, cari tag <data: post.body /> dan di bawahnya tempel HTML Coding berikut. Jika Anda tidak sanggup menemukan <data: post.body /> , Anda sanggup menempelkannya sempurna di bawah <div class = 'post-footer'> atau <div class = 'post-footer-line post-footer-line -1 '> </ div> .
Langkah ke-3 ( Menambahkan Fontawesome )
Widget bekerja pada ikon fontawesome, jadi untuk menciptakan widget kerja Anda harus menginstal fontawesome di blog Anda, untuk melakukannya.
Di template, cari tag </ head> dan sempurna di atasnya paste HTML Coding berikut.
Kesimpulan
Selamat !! Kamu telah berhasil Sekarang anda telah berguru bahwa Cara menambahkan widget sharing sosial dengan tombol shaing whatsapp di blogger . Kunjungi blog anda dan cek widget yang mengagumkan live in action, agar anda menyukai tutorial ini, bila anda menikmati maka tolong bagikan dengan teman anda, kami bekerja keras untuk mengembangkan lebih banyak widget mahir ibarat itu silahkan nantikan bersama kami. Sumber https://www.tombolblogger.com/
 |
| Cara Menambahkan Tombol Whatsapp di Blogger |
Mari kita lanjutkan dan lihat Bagaimana menambahkan widget sharing sosial dengan tombol sharing whatsapp di blogger . Anda sanggup mengecek live preview widget di bawah ini.
Catatan : - Tombol bekerjsama hanya akan muncul di ponsel dan tablet (ukuran layar 768px). Kami telah mengatakan tombol hanya untuk demo di desktop.
Langkah 1 ( Menambahkan CSS )
Sebelum Mengedit kami sarankan Anda untuk menciptakan cadangan dari template Anda, sehingga ada yang tidak beres Anda masih mempunyai desain blog Anda aman.
Hal pertama yang perlu Anda lakukan yakni login ke akun Blogger Anda dan masuk ke >> Template >> Edit HTML dan cari tag epilog ]]> </ b: skin> dan sempurna di atasnya paste instruksi berikut.
/* ######## Social Sharing Widget By TombolBlogger.com ######################### */ .share-box { position: relative; padding: 10px; } .share-title { border-bottom: 2px solid #777; color: #010101; display: inline-block; padding-bottom: 7px; font-size: 15px; font-weight: 500; position: relative; top: 2px; } .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; } .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;} } Langkah ke-2 ( Menambahkan HTML )
Di template, cari tag <data: post.body /> dan di bawahnya tempel HTML Coding berikut. Jika Anda tidak sanggup menemukan <data: post.body /> , Anda sanggup menempelkannya sempurna di bawah <div class = 'post-footer'> atau <div class = 'post-footer-line post-footer-line -1 '> </ div> .
<b:if cond='data:blog.pageType == "item"'> <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'/> </b:if> Catatan : - Jika Anda ingin menampilkan widget di setiap halaman (Homepage, postpage, indexpage, halaman pencarian, halaman arsip dll.) Kemudian hapus garis yang ditandai merah dari instruksi di atas.
Langkah ke-3 ( Menambahkan Fontawesome )
Widget bekerja pada ikon fontawesome, jadi untuk menciptakan widget kerja Anda harus menginstal fontawesome di blog Anda, untuk melakukannya.
Di template, cari tag </ head> dan sempurna di atasnya paste HTML Coding berikut.
<link href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel = 'stylesheet' />
Kesimpulan
Selamat !! Kamu telah berhasil Sekarang anda telah berguru bahwa Cara menambahkan widget sharing sosial dengan tombol shaing whatsapp di blogger . Kunjungi blog anda dan cek widget yang mengagumkan live in action, agar anda menyukai tutorial ini, bila anda menikmati maka tolong bagikan dengan teman anda, kami bekerja keras untuk mengembangkan lebih banyak widget mahir ibarat itu silahkan nantikan bersama kami. Sumber https://www.tombolblogger.com/
