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 Tanpa Plugin

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

custom social share

Beginilah hasil jadi dari kustomisasi dari panduan wplogout.com.

semoga artikel ini bermanfaat bagi kalian ya.

Share Artikel Ini:
Avatar of Fakhrurpedia
           

FakhrurRozi Dikenal Sebagai Blogger Sejak 2015 Silam Yang Terjun Di Dunia Digital Marketing dan Teknologi Informatika

Tinggalkan komentar