How to create widget generators


#1

Hello everyone its been a long time i asked any question but here is aquestion for you- i haveseen some sites which have widget generators in simple words a widget which automatically make a widget code by just entering some details in it so i want to ask how can i make a widget generator. I know it is difficult but please someome tell me. For example- I want to make generator in which when someone types social profile links like facebook it automatically replace it in a code-

a href="the url goes here">like us on facebook
sorry but doesn't know how to add codes in mobile version.

Here the widget generator only replaces the url and then shows code to the user.

Hope you understood my question. :


How to make Widget Generator For Blogger
#2

This is quite simple trick. However, I am pasting here the HTML code of a widget generator created by Helper Blogger.

The generator’s html is follows:

<script type="text/javascript">
   var _0x73ad=["\x32\x20\x38\x28\x29\x7B\x30\x2E\x31\x28\x22\x37\x22\x29\x2E\x33\x3D\x30\x2E\x31\x28\x22\x36\x22\x29\x2E\x34\x7D\x32\x20\x67\x28\x29\x7B\x30\x2E\x31\x28\x22\x39\x22\x29\x2E\x33\x3D\x30\x2E\x31\x28\x22\x61\x22\x29\x2E\x34\x7D\x32\x20\x62\x28\x29\x7B\x30\x2E\x31\x28\x22\x63\x22\x29\x2E\x33\x3D\x30\x2E\x31\x28\x22\x64\x22\x29\x2E\x34\x7D\x32\x20\x65\x28\x29\x7B\x30\x2E\x31\x28\x22\x66\x22\x29\x2E\x33\x3D\x30\x2E\x31\x28\x22\x35\x22\x29\x2E\x34\x7D","\x7C","\x73\x70\x6C\x69\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x76\x61\x6C\x75\x65\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x69\x6E\x70\x75\x74\x34\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x69\x6E\x70\x75\x74\x31\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x75\x73\x65\x72\x31\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x67\x65\x6E\x31\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x75\x73\x65\x72\x32\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x69\x6E\x70\x75\x74\x32\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x67\x65\x6E\x33\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x75\x73\x65\x72\x33\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x69\x6E\x70\x75\x74\x33\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x67\x65\x6E\x34\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x75\x73\x65\x72\x34\x7C\x68\x65\x6C\x70\x65\x72\x62\x6C\x6F\x67\x67\x65\x72\x67\x65\x6E\x32","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x61a4x1,_0x61a4x2,_0x61a4x3,_0x61a4x4,_0x61a4x5,_0x61a4x6){_0x61a4x5=function (_0x61a4x3){return _0x61a4x3.toString(_0x61a4x2);} ;if(!_0x73ad[5][_0x73ad[4]](/^/,String)){while(_0x61a4x3--){_0x61a4x6[_0x61a4x5(_0x61a4x3)]=_0x61a4x4[_0x61a4x3]||_0x61a4x5(_0x61a4x3);} ;_0x61a4x4=[function (_0x61a4x5){return _0x61a4x6[_0x61a4x5];} ];_0x61a4x5=function (){return _0x73ad[6];} ;_0x61a4x3=1;} ;while(_0x61a4x3--){if(_0x61a4x4[_0x61a4x3]){_0x61a4x1=_0x61a4x1[_0x73ad[4]]( new RegExp(_0x73ad[7]+_0x61a4x5(_0x61a4x3)+_0x73ad[7],_0x73ad[8]),_0x61a4x4[_0x61a4x3]);} ;} ;return _0x61a4x1;} (_0x73ad[0],17,17,_0x73ad[3][_0x73ad[2]](_0x73ad[1]),0,{}));      
</script>

<br />
<div style="border: 2px dashed red; padding: 10px;">
<center>
<span style="font-size: medium;"><b>Make Some Changes &amp; Get Widget!</b><br /><br /><table><tbody>
<tr><td align="right"><b>Facebook Fanpage Username:</b></td><td align="left"><input id="helperbloggerinput1" onclick="this.value=''" onkeyup="javascript:helperbloggergen1();" size="0" style="font-size: medium;" type="text" value="pfcit" /></td>

</tr>
<tr><td align="right"><b>Twitter Username:</b></td><td align="left"><input id="helperbloggerinput2" onclick="this.value=''" onkeyup="javascript:helperbloggergen2();" size="0" style="font-size: medium;" type="text" value="PFCITech" /></td>

</tr>
<tr><td align="right"><b>Google+ Numeric ID or Username:</b></td><td align="left"><input id="helperbloggerinput3" onclick="this.value=''" onkeyup="javascript:helperbloggergen3();" size="0" style="font-size: medium;" type="text" value="+ShivanshVerma" /></td></tr>
<tr><td align="right"><b>Pinterest Username:</b></td><td align="left"><input id="helperbloggerinput4" onclick="this.value=''" onkeyup="javascript:helperbloggergen4();" size="0" style="font-size: medium;" type="text" value="ShivanshV" /></td></tr>
</tbody></table>
</span></center>
<blockquote>
<code>&lt;style&gt;</code><code>    /* Tabbed Social Widget By PFCI Tech - placeforcompinfo.com */</code><code>    /* CSS Code Start */</code><code>    </code><code>    ul.tabs {</code><code>        padding: 7px 0;</code><code>        font-size: 0;</code><code>        margin: 0;</code><code>        list-style-type: none;</code><code>        text-align: left;</code><code>    }</code><code>    ul.tabs li {</code><code>        display: inline;</code><code>        margin: 0;</code><code>        margin-right: 3px;</code><code>        /*distance between tabs*/</code><code>    }</code><code>    ul.tabs li a {</code><code>        font: normal 12px Verdana;</code><code>        text-decoration: none;</code><code>        position: relative;</code><code>        padding: 25px 10px 0px 10px;</code><code>        border: 1px solid #CCC;</code><code>        border-bottom-color: #B7B7B7;</code><code>        color: #000;</code><code>        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;</code><code>        border-radius: 3px 3px 0 0;</code><code>        outline: none;</code><code>    }</code><code>    ul.tabs li a:visited {</code><code>        color: #000;</code><code>    }</code><code>    ul.tabs li a:hover {</code><code>        border: 1px solid #B7B7B7;</code><code>        background: #F0F0F0 url(http://1.bp.blogspot.com/-XoUjhUwwcsA/VIh-sZtQNbI/AAAAAAAADwk/ECGNslzqmAw/s1600/hb-tabbg.gif) 0 -50px repeat-x;</code><code>    }</code><code>    ul.tabs li.selected a,</code><code>    ul.tabs li.selected a:hover {</code><code>        position: relative;</code><code>        top: 0px;</code><code>        font-weight: bold;</code><code>        background: white;</code><code>        border: 1px solid #B7B7B7;</code><code>        border-bottom-color: white;</code><code>    }</code><code>    ul.tabs li.selected a:hover {</code><code>        text-decoration: none;</code><code>    }</code><code>    div.tabcontents {</code><code>        border: 1px solid #B7B7B7;</code><code>        padding: 10px;</code><code>        background-color: #FFF;</code><code>        border-radius: 0 3px 3px 3px;</code><code>        margin-top: -7px;</code><code>    }</code><code>    /* Tabbed Social Widget By PFCI Tech - placeforcompinfo.com */</code><code>    /* End Code Start */</code><code>&lt;/style&gt;</code><code>
</code><code>&lt;script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"&gt;&lt;/script&gt;</code><code>&lt;ul class="tabs"&gt;</code><code>    &lt;li class="selected"&gt;</code><code>        &lt;a href="#view1"&gt;</code><code>            &lt;img src="http://1.bp.blogspot.com/-u4mNaIL8dp0/VIXIENew_CI/AAAAAAAADvg/ne3Aol0ASeI/s1600/helperblogger.com-fb.png" height="32" width="32" /&gt;</code><code>        &lt;/a&gt;</code><code>    &lt;/li&gt;</code><code>    &lt;li&gt;</code><code>        &lt;a href="#view2"&gt;</code><code>            &lt;img src="http://2.bp.blogspot.com/-mzuxb3eVkaQ/VIXIE4zdcPI/AAAAAAAADvw/lwTtNBnT4zQ/s1600/helperblogger.com-twitter.png" height="32" width="32" /&gt;</code><code>        &lt;/a&gt;</code><code>    &lt;/li&gt;</code><code>    &lt;li&gt;</code><code>        &lt;a href="#view3"&gt;</code><code>            &lt;img src="http://1.bp.blogspot.com/-rrTnEmJBPeI/VIXIELyFe_I/AAAAAAAADvk/TyNg-Jocujc/s1600/helperblogger.com-gplus.png" height="32" width="32" /&gt;</code><code>        &lt;/a&gt;</code><code>    &lt;/li&gt;</code><code>    &lt;li&gt;</code><code>        &lt;a href="#view4"&gt;</code><code>            &lt;img src="http://4.bp.blogspot.com/-oiG2eSzC0ZY/VIXIEEtXGjI/AAAAAAAADvo/0jbevzq2uog/s1600/helperblogger.com-pinterest.png" height="32" width="32" /&gt;</code><code>        &lt;/a&gt;</code><code>    &lt;/li&gt;</code><code>&lt;/ul&gt;</code><code>&lt;div class="tabcontents"&gt;</code><code>    &lt;div id="view1"&gt;</code><code>        &lt;iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F<b id="helperbloggeruser1" style="font-size: 18px;">pfcit</b>&amp;amp;width=285&amp;amp;height=180&amp;amp;colorscheme=light&amp;amp;show_faces=true&amp;amp;header=false&amp;amp;stream=false&amp;amp;show_border=false&amp;amp;appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"&gt;&lt;/iframe&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div id="view2"&gt;</code><code>        &lt;div id="twitter-box"&gt;&lt;/div&gt;</code><code>        &lt;script&gt;</code><code>            var tw_user = '<b id="helperbloggeruser2" style="font-size: 18px;">pfcitech</b>';</code><code>            var tw_width = 260;</code><code>            var tw_height = 250;</code><code>            var no_face = 8;</code><code>            (function() {</code><code>                var tw_box = document.createElement('script');</code><code>                tw_box.type = 'text/javascript';</code><code>                tw_box.async = true;</code><code>                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';</code><code>                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);</code><code>            })();</code><code>        &lt;/script&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div id="view3"&gt;</code><code>        &lt;script src="https://apis.google.com/js/platform.js" async defer&gt;&lt;/script&gt;</code><code>        &lt;div class="g-person" data-width="250" data-href="//plus.google.com/u/0/<b id="helperbloggeruser3" style="font-size: 18px;">+ShivanshVerma</b>" data-layout="landscape" data-rel="author"&gt;&lt;/div&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div id="view4"&gt;</code><code>        &lt;a href="http://pinterest.com/<b id="helperbloggeruser4" style="font-size: 18px;">shivanshv</b>/"&gt;</code><code>            &lt;img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /&gt;</code><code>        &lt;/a&gt;</code><code>    &lt;/div&gt;</code><code>    &lt;div style="clear: both; text-align: right;"&gt;</code><code>        &lt;span style="font-size: xx-small;"&gt;&lt;a href="http://www.placeforcompinfo.com/2015/01/tabbed-all-in-one-social-box-for.html" rel="nofollow" target="_blank"&gt;Grab This!&lt;/a&gt;&lt;/span&gt;</code><code>    &lt;/div&gt;</code><code>&lt;/div&gt;</code></blockquote>
</div>

Actually, this code was customized by me some month ago and I posted it on my first blog.

  • You can’t edit this code directly. The easiest way to edit this code is to paste this in the HTML section of post editor in blogger. Then go to Compose section and make necessary changes. IDs are the game of this generator. Just remember them and I know, you are good coder. You can do it. :smile:

If you need any other help, just leave it on reply. :wink:


#3

Thank you @Shivansh . I know you will become a problogger soon…

Good luck :smile:


#4

Thanks for your kind words. :smile: I am glad that it worked for you.


#5

You can check Barrel Craft http://barrel.im/craft A frame work using which blogger plugins can be made easily