Categories: TutorialBlogging

Tutorial Cara Menambahkan GP Social Share Pada Theme Generate Press

Tutorial Cara Menambahkan GP Social Share Pada Theme Generate Press 100% Work

 

Generate Press Merupakan Theme Yang Ringan,Customizable,Fast,Responsive dan Lain Lain.

Saya Pun Menggunakan Theme Generate Press Mengapa demikian?karena dilihat Dari Feature di Atas Saya menjadi tertarik,dan saya putuskan untuk menggunakan nya.

Tapi disisi lain,Theme Generate Press Menyediakan Berbagai Customizable Seperti,Genesis Framework,dan Lain Lain.

Fitur Tersebut Mengharuskan untuk membeli versi premium,banyak kok yang jual versi premium nya mulai dengan harga 50rb – 100rb an.

Sebenarnya Generate Press Tidak Mengusung Social Share Maupun Social Icon,Tapi di Forum Mereka,sudah ada pembahasan Bagaimana Cara Menambahkan Social Share di Theme Generate Press!!

Berikut Tutorial Cara Menambahkan Plugin GP Social Share Di Theme Generate Press

  1. Download Plugin GP Social Share By West Coast Digital
  2. Jika Sudah Ter-instal Maka Kamu Tinggal Aktifkan Dan Setting Plugin dengan Cara installed plugin>gp social share>settings
  3. Klik Save Changes
  4. Done!!
  5. Check Apakah GP social share sudah muncul di page kamu?

Begitulah Cara Menambahkan Gp Social Share!!

Cara Alternatif Menambahkan Social Share Pada Theme Generate Press Menggunakan Element Hook

ada lagi nih cara menambahkan social share pada theme generate press yaitu dengan menambah sedikit kode css dan element hook di generate press

Berikut Tutorial Cara Menambahkan Social Share Pada Theme Generate Press Lewat Element Hook

Salin Kode Ini Di Element Hook :

<?php $wplogoutURL = urlencode(get_the_permalink()); $wplogoutTitle = urlencode(get_the_title()); $wplogoutImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), ‘full’)); ?> <div class=”wplogout-social-wrapper”> <span class=”hide-on-mobile”>Bagikan:</span> <a class=”wplogout-social-sharing wplogout-social-facebook” href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo $wplogoutURL; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z”/></svg></a> <a class=”wplogout-social-sharing wplogout-social-twitter” href=”https://twitter.com/intent/tweet?text=<?php echo $wplogoutTitle;?>&amp;url=<?php echo $wplogoutURL;?>&amp;via=wplogout” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z”/></svg></a> <a class=”wplogout-social-sharing wplogout-social-pinterest” href=”https://pinterest.com/pin/create/button/?url=<?php echo $wplogoutURL; ?>&amp;media=<?php echo $wplogoutImage; ?>&amp;description=<?php echo $wplogoutTitle; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z” fill-rule=”evenodd” clip-rule=”evenodd”/></svg></a> <a class=”wplogout-social-sharing wplogout-social-linkedin” href=”https://www.linkedin.com/shareArticle?url=<?php echo $wplogoutURL; ?>&amp;title=<?php echo $wplogoutTitle; ?>&amp;mini=true” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z”/></svg></a> <a class=”wplogout-social-sharing wplogout-social-whatsapp” href=”https://api.whatsapp.com/send?text=<?php echo $wplogoutTitle; echo ” “; echo $wplogoutURL;?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z”/></svg></a> <a class=”wplogout-social-sharing wplogout-social-reddit” href=”https://reddit.com/submit?url=<?php echo $wplogoutURL;?>&title=<?php echo $wplogoutTitle; ?>” target=”_blank” rel=”nofollow”><svg xmlns=”http://www.w3.org/2000/svg” width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z”/></svg></a> </div>

  1. Salin Kode Diatas itu
  2. Tempel Di Apperance/Tampilan>Element>Add New Element>Pilih Element>Hook
  3. Pilih Hook – Generate After Entry Content (Dibawah Content)
  4. Dan Pilih Hook- Generate After Entry Title (Diatas Content)
  5. Execute PHP ✓ ya
  6. Display Rules > Pilih Post
  7. Done !!

Jika Ingin Kustomisasi lagi Silahkan Lihat Dibawah Ini Lagi :

  • Pergi Ke Tampilan>Sesuaikan>Css Tambahan
  • Tambahkan Kode Dibawah Ini

.wplogout-social-wrapper { margin: 30px 0; font-size: 0; } .wplogout-social-wrapper span { font-weight: bold; padding-right: 10px; font-size: 16px; } .wplogout-social-sharing { font-size: 17px; padding: 7px 20px; } @media only screen and (max-width: 600px) { .wplogout-social-sharing { font-size: 17px; padding: 7px 12px; display: inline-block; } } .wplogout-social-sharing svg { position: relative; top: 0.15em; display: inline-block; } .wplogout-social-sharing:first-of-type { border-radius: 100px 0 0 100px; } .wplogout-social-sharing:last-of-type { border-radius: 0 100px 100px 0; } .wplogout-social-facebook { fill: #fff; background-color: rgba(59, 89, 152, 1); } .wplogout-social-facebook:hover { background-color: rgba(59, 89, 152, .8); } .wplogout-social-twitter { fill: #fff; background-color: rgba(29, 161, 242, 1); } .wplogout-social-twitter:hover { background-color: rgba(29, 161, 242, .8); } .wplogout-social-pinterest { fill: #fff; background-color: rgba(189, 8, 28, 1); } .wplogout-social-pinterest:hover { background-color: rgba(189, 8, 28, .8); } .wplogout-social-linkedin { fill: #fff; background-color: rgba(0, 119, 181, 1); } .wplogout-social-linkedin:hover { background-color: rgba(0, 119, 181, .8); } .wplogout-social-whatsapp { fill: #fff; background-color: rgba(37, 211, 102, 1); } .wplogout-social-whatsapp:hover { background-color: rgba(37, 211, 102, .8); } .wplogout-social-reddit { fill: #fff; background-color: rgba(255, 87, 0, 1); } .wplogout-social-reddit:hover { background-color: rgba(255, 87, 0, .8); }

SOURCE CODE : WPLOGOUT.COM

Beginilah hasil jadi dari kustomisasi dari panduan wplogout.com.

semoga artikel ini bermanfaat bagi kalian ya.

 

 

Share
Fakhrur Rozi

Saya Adalah Webster Sederhana,Lulusan MTs Arrosyad dan SMAN 1 Negeri Muaratewe,Sekarang Saya Bekerja Di Bidang Content Creator,Designer,UX,Developer Website,Semoga Artikel Saya Dapat Memberikan Manfaat Bagi Pengunjung

Leave a Reply

Your email address will not be published. Required fields are marked*

Recent Posts

Cara Cek Featured Snippet Pada Blog Kita

Tutorial Cara Cek Featured Snippet Pada Blog Kita Banyak dari kita belum mengenal apa itu featured snippet dan bagaimana cara…

4 jam ago

Rekomendasi Hp Gaming 3 Jutaan 2021

Rekomendasi Hp Gaming Harga 3 Jutaan 2021 Berikut saya akan Mengulas Rekomendasi Hp Gaming 3 jutaan 2021 di marketplace. Memang…

1 hari ago

Rekomendasi Headset Gaming Berkualitas 2021

Berikut Rekomendasi Headset Gaming Berkualitas dan Murah 2021 Rekomendasi Headset Gaming Berkualitas dan Murah 2021 Untuk Seorang Gamers tentu Headset …

3 hari ago

Mau Pilih Rank Math vs Yoast SEO?

Rank Math vs Yoast Pada dasarnya mereka adalah sama sama plugin yang mengatur tentang seo di website kita,saya sendiri sudah…

4 hari ago

Rekomendasi CPU Computer Gaming Murah dan Berkualitas 2021

Berikut Rekomendasi CPU Computer Gaming Murah dan Terjangkau 2021 Update Dalam Bermain Game kita harus mempunyai spek komputer memadai dan…

6 hari ago

Rekomendasi VGA Gaming Dengan Harga Murah dan Terjangkau 2021

Berikut Rekomendasi VGA Gaming Dengan Harga Murah dan Terjangkau 2021 Rekomendasi VGA Gaming Dengan Harga Murah dan Terjangkau 2021 Supaya…

1 minggu ago