Platform Berbagi halaman postingan Blogger
Platform berbagi atau sharing platform adalah situs media sosial yang dijadikan target untuk membagikan suatu halaman blog.
Di postingan ini akan berfokus pada platform berbagi yang terdapat pada tema bawaan Blogger responsive yang tampilan defaultnya seperti berikut ini
Mengkustom tampilan sharing platform Blogger
Kustom yang dapat diterapkan pada platform sharing bawaan template Blogger salah satunya dapat dilihat dihalaman Modif tema Blogger v3 part 2 (Tombol share Blogger)
Sedangkan kustom yang akan dijelaskan disini targetnya adalah pemberian efek warna pada ikon media sosial sehingga tampilannya menjadi seperti berikut :
Memberi efek warna platform sharing
Temukan dan hapus tag <b:class name='version-1-3-3'/>
Tujuan menghapus tag tersebut adalah untuk memunculkan elemen sharing didalam template agar dapat dikustom. Karena jika tag tersebut tidak dihapus maka elemen yang dimaksud tidak akan ditemukan didalam template
Cara menenmukan tag :Buka halaman edit HTML blog kamu lalu tekan ctrl + f lanjutkan dengan mengetikkan <body" pada kolom pencarian template dan tekan enter.
Jika sudah ditemukan hapus tag <b:class name='version-1-3-3'/> kemudian lanjutkan ke langkah 2 dibawah ini
Untuk memulai kustom, terlebih dahulu kita temukan elemennya didalam template. Elemen yang dicari ini menggunakan tag <ul> maka cari dan temukan tag tersebut.
Cara mencari elemen dengan tag <ul (tanpa penutup)Pada halaman edit HTML blog kamu lalu tekan ctrl + f lanjutkan dengan mengetikkan "<ul" pada kolom pencarian template dan tekan enter.
Pastikan menemukan elemen "<ul" yang berada dibawah tag :
<div class='share-buttons-container'>
<b:includable id='sharingButtonsMenu'>
<!--batas atas-->
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
<!--batas bawah-->
</b:includable>Pada langkah kedua ini tentukan elemen yang digunakan dihalaman. Karena didalam template terdapat beberapa elemen sharing yang sama.
Caranya:
Setelah hasil pencarian elemen dalam template ditemukan melalui langkah 2 diatas, tandai elemen tersebut dengan cara mengetikkan teks sembarang, misal : abc atau sharing 1 atau terserah kalian.
Tempatkan teks tersebut tepat setelah tag:
<div class='share-buttons-container'>disini, contoh:
<div class='share-buttons-container'>sharing 1
<div class='share-buttons-container'>sharing 2 dst...
Ulangi langkah 1 untuk memberi tanda pada semua elemen yang dimaksud lalu simpan dan lihat hasilnya dihalaman.
Misalkan teks yang muncul pada tombol adalah sharing 2 maka elemen itulah yang menjadi target kustom.
Pastikan kode yang ditemukan struktur lengkapya sama dengan kode pada langkah 1 diatas.
Jika kode yang dimaksud sudah dipastikan sama, hapus dan ganti kode tersebut dengan kode dibawah ini:
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li role='presentation'>
<b:class expr:name='data:platform.name'/>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>Tambahkan CSS kustom dibawah ini agar efek warna dapat diterapkan pada platform sharing
.share-buttons li.Dapatkan.link{display:none}
.share-buttons li.Facebook svg{fill:#3b5999}
.share-buttons li.Twitter svg{fill:#00acee}
.share-buttons li.Pinterest svg{fill:#ca2127}
.share-buttons li.Email svg{fill:#888}
.share-buttons li.tumblr svg{fill:#365069}
.share-buttons li.whatsapp svg{fill:#3fbb50}
.share-buttons li.linkedin svg{fill:#0077b5}
.share-buttons li.telegram svg{fill:#179cde}
.share-buttons li:hover a,.share-buttons li:hover a svg{color:#fff;fill:#fff!important}
.share-buttons li.Dapatkan.link:hover{background:#000}
.share-buttons li.Facebook:hover{background:#3b5999}
.share-buttons li.Twitter:hover{background:#00acee}
.share-buttons li.Pinterest:hover{background:#ca2127}
.share-buttons li.tumblr:hover{background:#365069}
.share-buttons li.whatsapp:hover{background:#3fbb50}
.share-buttons li.linkedin:hover{background:#0077b5}
.share-buttons li.telegram:hover{background:#179cde}
.share-buttons li.Email:hover{background:#888}CSS kustom diatas sudah dipersiapkan juga untuk platform yang akan ditambahkan di langkah berikutnya dibawah ini.
Menambahkan platform sharing
Untuk menambahkan platform sharing, ikuti petunjuk yang dijelaskan pada langkah 1 dan langkah 2 diatas.
Kemudian copy pastekan elemen kustom dibawah ini tepat dibawah tag </b:loop>
<li class='linkedin'>
<a aria-label='Kirim ke Linkedin' class='sharing-platform-button sharing-linkedin' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=720, height=720, left=300, top=24, scrollbars, resizable'); return false;' rel='nofollow'>
<svg class='svg-icon-24 touch-icon sharing-linkedin' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/></svg>
<span class='platform-sharing-text'>Linkedin</span>
</a>
</li><b:if cond='not data:view.isMobileRequest'>
<li class='whatsapp whatsapp-web'>
<a aria-label='Kirim ke Whatsapp web' class='sharing-platform-button sharing-whatsapp' expr:href='"https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=300, top=24, scrollbars, resizable'); return false;' rel='nofollow'>
<svg class='svg-icon-24 touch-icon sharing-whatsapp' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/></svg>
<span class='platform-sharing-text'>Whatsapp web</span>
</a>
</li></b:if>
<li class='tumblr'>
<a aria-label='Kirim ke Tumblr' class='sharing-platform-button sharing-tumblr' expr:href='"http://tumblr.com/widgets/share/tool?canonicalUrl=" + data:post.url.canonical' onclick='window.open(this.href, 'windowName', 'width=720, height=720, left=300, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<svg class='svg-icon-24 touch-icon sharing-tumblr' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'><path d='M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z'/></svg>
<span class='platform-sharing-text'>Tumblr</span>
</a>
</li>
<b:if cond='data:view.isMobileRequest'>
<li class='whatsapp whatsapp-app'>
<a aria-label='Kirim via WA' class='sharing-platform-button sharing-whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'>
<svg class='svg-icon-24 touch-icon sharing-whatsapp' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/></svg>
<span class='platform-sharing-text'>Whatsapp</span>
</a>
</li>
</b:if>
<li class='telegram'>
<a aria-label='Kirim via Telegram' class='sharing-platform-button sharing-telegram' expr:href='"https://telegram.me/share/url?url=" + data:post.url.canonical + "&text=" + data:post.title.jsEscaped' rel='nofollow' target='_blank'>
<svg class='svg-icon-24 touch-icon sharing-telegram' viewBox='0 0 496 512' xmlns='http://www.w3.org/2000/svg'><path d='M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z'/></svg>
<span class='platform-sharing-text'>Telegram</span></a>
</li>Lihat contoh blog dengan platform berbagi yang sudah dikustom menggunakan cara sesuai penjelasan diatas :Demo Ikon berbagi
Apabila masih terdapat kendala, jelaskan melalui komentar.