Share Button Sosial Media Tanpa Javascript

Share Button Sosial Media Tanpa Javascript ~ Salam blogger semuanya. Sosial media, ya sosial media memang salah satu cara mendapatkan visitor blog selain dari search engine, sosial media ini sangat berguna untuk mendatangkan traffik khususnya untuk blog baru seperti blog saya, yang tentunya blog baru masih lemah diposisi SERP yang sebelumnya pernah saya bahas di artikel "Sulitnya Membangun Blog Baru" dengan banyaknya manfaat sosial media bagi blog maka banyak dari para blogger yang memasang share button ke berbagai sosial media dan biasanya share button tersebut memakai Javascript dan tidak valid HTML5. Nah pada kali ini saya akan memberi tutorial cara memasang Share Button Sosial Media yang tanpa javascript dan valid HTML5, untuk demonya bisa anda lihat diblog ini.

Oke kita langsung saja ketutorialnya.
- Masuk keblogger >> Template >> Edit HTML
- Cari kode

Code:

]]></b:skin>

atau

Code:

</style>

lalu simpan kode CSS dibawah ini tepat diatasnya:

Spoiler

Code:

#share-button{overflow:hidden}#share-button p{float:left;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{float:left;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}

- Cari kode

Code:

<data:post.body/>

yang ketiga atau yang terakhir sendiri, lalu simpan kode dibawah ini tepat dibawahnya:

Spoiler

Code:

<b:if cond='data:blog.pageType == "item"'><div id='share-button' style='margin-top:8px;'> <p><span style='font-size:17px;font-weight: bold;'>Suka artikel ini? bagikan</span></p><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a><a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a></div> </b:if>

Lalu simpan deh, selamat mencoba semoga berhasil.
Sumber: dek-blogger.blogspot.com/2014/02/share-button-sosial-media-tanpa-javascript.html

 

udah di coba gan tapi yang

udah di coba gan tapi yang tutorinya kompi ajaib, nggak jauh beda isinya, dan tampilanya

 

pram wrote:

sebenarnya ini ambil dari share button mas sugeng dan sy validasi HTML5,