Mas Pardi Jadul

Cara Membuat Widget Share Menu Tanpa Java Script, Simple and Responsive, Mungkin diluar sana atau di blogger sudah pada membahas tentang cara membuat Widget Share Menu Simple And Responsive.

Namun disini saya cuma akan menambah design - design yang ada, tak perlu keahlian khusus untuk menambahkan  Widget Share Menu Simple And Responsive  di blog anda.

Sebenarnya jauh lebih simple, jika menggunakan font awesome, namun tak semua blogger menggunakan font awesome. Berikut ialah Screnshoot Widget Share Menu Simple And Responsive.


Kode Html nya :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:else/>
<div style='padding:10px 0px;'> <span class='post-share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share On Facebook !'><img alt='Share On Facebook !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLmBXthNT1RenCLYIU6nTmvmhw7J9y0QPfVXhZFZdvRpyVHBuLKTqE35V-MYjpfYq35wt1FztpfB5Q4z1nZprYX5qMnrB4OVEkKIHljJGqx9IIWRKQXdhgjXEPcBGvJpfmLE90fmf9jc/s24-Ic42/facebook-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Tweet This !'><img alt='Tweet This !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADhghE2h9fXA1eZmRIEx2Y1qKpzqw-3fyuwX790ZXV8_JGm2noH5CV2gTwfKdPqfp3jZFvw6_lTb7-qhXumjUU4rfhYEl7MZEoKpJ9k8-n1TQe5BGDQ298TqmzGTDtQ6Q_08UyrXqtIQ/s24-Ic42/twitter-24.png' style='height:24px; width:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=&quot; + &quot;en&amp;url=&quot; + data:post.url' target='_blank' title='Share On Google Plus !'><img alt='Share On Google Plus !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxEgp94v7R_2sD8InpGAZkS5ch5EiY1zCbVwtTTljVrvA5bDbmW9I_Ea85udDL6wB-XcFNIQcjj3iP2VE76y2OufyW-qoSAWYCwXHLAJ3EeoGSvLAnJ65hGjgB6m-MT4llabbZEXE0NQ/s24-Ic42/New-Google-Plus.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.firstImageUrl' target='_blank' title='Pin It !'><img alt='Pin It !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxrHq5T3l-BLPzU7mU6sdwvDWjLNELh3dhREMEsI0uWaY_a1Rayk3S4f1uartO6rc0WUh3Dn7k7LfTvV77ItXHSFU3Q6SvMVLu77W72EEX1EfES2_cOhB6XSDqVM-0ohN93M806NXkxA/s24-Ic42/pinterest-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title' target='_blank' title='Share On Tumblr !'><img alt='Share On Tumblr !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMfWkfKJanJr2hm-qzyVpyMf8OByAQVc8WA1WmZySjEXYYb3r2xfHBRvC3FzypMPKX6DBIsRJ5ovr1sGx_C9Kj58_3C0FBtBNbx2f1YUoDAaOJsxtmhA56xIVVktYRZpg0MQBbGL5SY8/s24-Ic42/tumblr-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Reddit !'><img alt='Share On Reddit !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJeyvxfgwsmf9Ygjr2awP1M_77C9u0S45JHPzASwF6d8MnEaQNL7I-wRbtZH_D31iGH4ubsSni2ayw2TGLR5O7Xj_8hGQ3csp2GVZM9-hQ8nTD-3WViTQookJrQrlxH_SSVTo2PNhXqE/s24-Ic42/reddit-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=&quot; + &quot;true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Linkedin !'><img alt='Share On Linkedin !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigP7Z366lrKXp9vH5hcHxEEsYWidvtMDLEY6BM8it7MVSOQax0oEKucDDk8KqWiauXvaoTmj_TNJ86GtnIRMn6zL5AeytA8qyu5VatqNm7ycpHTaQ9-2vHjUqzmUZoIOllsWKHQx4szxE/s24-Ic42/linkedin-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On StumbleUpon !'><img alt='Share On StumbleUpon !' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkUUAjudvqja1Vwu_OJ3bsv6Ht9zXYcE8sBkTPCmVZFyzQD0HzbalmIBr3gTO4COVInS2gX1ejXzt80x-vW5NeqmUGYhVuC7Rk7D6YgVo_ga5pw0LFb7djA-axUlkaw3WqhI86RPwxcU/s24-Ic42/stumbleupon-24.png' style='width:24px; height:24px; padding:0; border:0; vertical-align:middle;'/></a>
</span> </div>
</b:if>

Lantas untuk pemasanganya sebagai berikut :

• Pastikan anda masuk di edit html template anda
• Lalu cari kode <data:post.body/> yang no 2
• Lalu Pastekan kode diatas dibawah kode <data:post.body/>.
• Sebenarnya bebas untuk penempatan contohnya bisa diatas kode related post,share menu, atau bisa juga sesuai selera anda misalnya diawah title postingan.
• Pastikan untuk simpan dan cek hasilnya.

Sekian untuk  artikel Widget Share Menu Simple And Responsive.