Cara Memasang Menu Share Box pada Postingan Blog Github Pages - Pasti kalian sering melihat menu share box media sosial yang terpasang di setiap blog atau website, dan biasanya terletak di samping dan di atas, namun yang paling sering kita lihat dan paling banyak di pasang tepat di akhir postingan sebuah artikel.

menu share box ini bertujuan agar setiap postingan artikel kita bisa di share ke media sosial seperti Facebook, twitter, reddit, linkedin, pinterest, whatsapp, instagram, email dll.

Share box juga salah satu solusi terbaik meningkatkan traffic blog / web, Apabila setiap artikel yang kita tulis bermanfaat kepada setiap pengunjung blog, dan bisa di katakan lebih SEO, sebab setiap pengunjung yang merasa puas dengan konten artikel yang dia baca dan berguna, saya yakin mereka akan men-share postingan kita dengan menu share box yang telah di sediakan di akhir postingan.

Di kesempatan kali ini saya ingin berbagi tutorial cara membuat menu share yang akan kita pasang tepatnya di bawah postingan blog, dan tentunya share box ini SEO Friendly dan fast loading.

Cara Memasang Menu Share Box Github Pages

Contoh

share-box-github

  1. Buka github.com dan login

  2. Copy file HTML di bawah ini ke directory _includes dan save dengan format share-box.html

HTML 
<div id="share-box-container">
<div class="label-line-c">
<p class="share-this">Share this post</p>
</div>
<div id="share-box">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
<i class="fa fa-facebook-official fa share-button">
facebook</i>
</a>
<a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
<i class="fa fa-twitter fa share-button">
twitter</i>
</a>
<a href="http://www.reddit.com/submit?url={{ site.url }}{{ page.url }}" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;">
<i class="fa fa-reddit fa share-button">
reddit</i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}&title={{ page.title }}&summary={{ page.desc }}&source=webjeda" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
<i class="fa fa-linkedin fa share-button">
linkedin</i>
</a>
<a href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ page.url }}">
<i class="fa fa-envelope fa share-button">
email</i>
</a>
</div>
</div>
BACA

3.Copy lagi file CSS di bawah ini ke directory style.css dan save

CSS 

/** Share **/
#share-box-container {
    margin: 20px auto 30px;
    overflow: hidden;
}


.label-line-c {
  text-align: center;
  margin-bottom: 6px;
}


.share-this {
    display: inline-block;
    margin: 0;
    color: #4e4a4a;
    text-transform: uppercase;
    font-size: 16px;
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 0 10px;
    font-weight: bold;
}


.label-line::before, .label-line-c::before {
    z-index: 1;
    content: "";
    width: 100%;
    height: 2px;
    background: #313741;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
}


.label-line, .label-line-c {
    position: relative;
}


#share-box {
    width: 100%;
    text-align: center;
}


#share-box a {
    width: 20%;
    display: block;
    font-size: 24px;
    color: #353131;
    transition: opacity 0.15s linear;
    float: left;
}


@media (max-width: 767px) {
  #share-box a {
    width: 20%;
    display: block;
    font-size: 18px;
    color: #353131;
    transition: opacity 0.15s linear;
    float: left;
  }
}

4.Copy lagi file di bawah ini ke post.html untuk memanggil file html share box

post.html 

{% include share-box.html %}

Kemudian save dan lihat hasilnya.

Jika anda masih bingung silahkan tinggalkan komentar di bawah ini atau bisa melalui contact us, secepatnya saya akan merespon.

Nah itulah sedikit tutorial dari saya mengenai cara membuat share box media soasial di github pages cukup sekian dan terima kasih sudah berkunjung, Wassalam.

SUMBER