CARA MEMBUAT WIDGET SHARE DIBLOG

CARA MEMBUAT WIDGET SHARE DIBLOG

Widget sosial media share dan form subscribe dipadu dalam satu wadah untuk meningkatkan traffik pengunjung pada situs web ataupun blog pada kaki artikel postingan yang telah terpublish. Widget yang satu ini dapat anda andalkan untuk memberikan fasilitas share artikel dan form email subscribe pada para pengunjung yang setia dengan halaman anda. Code CSS dan HTML ini valid HTML 5 jadi dapt anda gunakan untuk template HTML 5 anda, disamping kevalitannya widget ini tergolong ringan untuk kalangan widget share yang mempunyai vasilitas yang memadai.

Pada postingan saya kali ini saya terinspirasi dengan seorang sahabat yang memang memerlukan suatu widget share yang digabung dengan widget subscribe menjadi satu agar tidak memakan tempat yang berlebihan buat halaman blog. Widget yang satu ini menggunakan pop window yang berukuran width=626, height=436', jadi sangat cocok untuk keperluan widget share dan subscribe buat blog yang anda sayangi.


Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi


ul.BD_share { list-style:none; margin:15px auto;display:inline-block; } ul.BD_share li { display:inline; float:left; background-repeat:no-repeat; } ul.BD_share li a { display:block; width:68px; height:68px; padding-right:10px; position:relative; text-decoration:none; } ul.BD_share li a strong { font-weight:normal; position:absolute; left:50px; top:50px; color:#fff; padding:3px; z-index:2000; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:#990000; border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } ul.BD_share li.icon-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZefKbKE5qA8eIpGCxy3Z44FHvwmPG2c5HF8FFFWsI2HjhYxwRQmQ7I8hdbxcvcXDAXvZj1Ca7qFbbfdY0om1rYibkhzqSRss3up9V6785zOT7-hnOYTF16IguiB1IZ1b3bTZ3rOM5Po/s1600/RFB.png"); } ul.BD_share li.icon-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EVer0pKQBt5gJRANjpg5AFpkdRADMfMByICfkplbP6-oieE2KHB-5eK_p-W9oF6xrv2kR_Es8iWcaNT_Q00GJoBxNnFnC-09_zyxpi_0hPXc7HyXvtz7yfr2k_0JUjRlAA1H2tcEuuA/s1600/RTW.png"); } ul.BD_share li.icon-gplus { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhDW64iQ5AI4LAeH6Xvn8S5G33U5mXplrJL1a8lRien-MxzDcFqanDibW8eQXDRB6A7c9BNxFN6VY8Tw1FpPPX7oPxGltuPHhs3AYKAHdpDfyc6rkCyvs93edGKaLpcfAqnwmKHe-wNRI/s1600/gpluss.png"); } ul.BD_share li.icon-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNsjekkcNRPzCq8MjBDo17cGBtlUYMU0ZfuVxuzlqQykvnEKz97aiOxWZ7SdJq3jEnb1FaqMFDKsebg_9oRpCQuxMIGN26V1MwRkGp9WavcDR7CcTDtj-2KoFG0iNhzznREQBVFOXQMw/s1600/RDG.png"); } ul.BD_share li.icon-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTG0tmLUy2R43i-MfjsWksVQMn4FzymI_hpL_Co4IMDOSvfvaf6PQFzyPN8wIeWYft14GwlFJ4vVLN07tDEZ168Uo_U4uhY3wdNjxj_oXUoCCpcARVHlcw42kLLAHFDwZMZSkgeqLypqU/s1600/RRABBIT.png "); } ul.BD_share li.icon-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_I-WW9ig1ECGjTs20cwC13AtBGJiM-2SFJHXk5Z1Z5U73fu7mSUIpS1ll9L8nm_I-A6c8Lt7gJy3V5ZX9ZEjlU0KxAoYD18xqd40d5SgVCpVEZ8kOibCOb1DXwxx3C4Y4IhAszLGRrzw/s1600/RTEC.png"); } #rivaishare_icon:hover li { opacity:0.1; } #rivaishare_icon li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #rivaishare_icon li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #rivaishare_icon li:hover { opacity:1; } #rivaishare_icon li:hover a strong { opacity:1; top:-20px; } #BD_sosial {border: 1px solid #BDBABA; width: auto;}.BD_widget { padding:10px; font-family: "Arial","Helvetica",sans-serif; border-image: initial; height: auto; width:auto; background-color: #CCCCCC; }.BD_widget input.BDmail { border: 1px solid; color: #999; padding: 7px 10px 8px; width: auto; border-radius: 3px; font-size: 13px; font-weight: bold; border-color: #000000; }.BD_tumb { border: 0px solid #dedede; background-color: #000000; background: linear-gradient(center top,#ffca00 0,#ff9b00 100%); padding:8px; border-radius:5px; color: #FFFFFF; }.BD_tumb:hover { background-color: #666666; cursor: inherit;}

Install Program Tag HTML
Login ke dashboard anda
Masuk ke "Template"
lalu klik "Edit HTML"
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code
<data:post.body/>, Perhatikan dengan baik code <data:post.body/>

biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti sosial share yang ada dibawah postingan ini.


<div id="BD_sosial">
<div style='text-align: center; '>
<div style='padding:5px 5px 5px 5px;'>Share this artikel and Subscribe Free Update articel by email :</div>
<div class="BD_widget" ><div style="text-align:left;margin-top:-15px "><ul class="BD_share" id="rivaishare_icon">
<li class="icon-facebook">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'><strong>Facebook</strong></a>
</li>
<li class="icon-twitter ">
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'><strong>Twitter</strong></a>
</li>
<li class="icon-gplus">
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus"><strong>Gplus</strong></a>
</li>
<li class="icon-digg ">
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Digg"><strong>Digg</strong></a>
</li>
<li class="icon-reddit">
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Reddit"><strong>Reddit</strong></a>
</li>
<li class="icon-technorati ">
<a expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Technorati"><strong>Technorati</strong></a>
</li>
</ul></div>
<div style="text-align:center; margin-top:-5px"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=URL ID FEEDBUENER
&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class="BDmail" name="email" placeholder="Enter email here.." type="text" /><input class="BD_tumb" value="Subscribe" type="submit" /><input name="uri" value="URL ID FEEDBUENER" type="hidden" /><input name="loc" value="en_US" type="hidden" /></form></div></div>
</div></div>

Kesimpulan Pemasangan widget share dan widget subscribe pada blog sangat bermanfaat untuk menunjang traffik pengunjung blog tersebut. Widget pada tutorial kali ini sangat mudah dipasang pada blog dan widget tersebut valid HTML 5 dan dapat digunakan untuk template Responsive. Widget ini ramag terhadap search engine atau yang biasa disebut dengan SEO Friendly.

Widget sosial media share dan form subscribe dipadu dalam satu wadah untuk meningkatkan traffik pengunjung pada situs web ataupun blog pada ...