Facebook Smooth jQuery POP OUT Like Box Widget Generator

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOW0I5G5qbfIpvl8Y4nN684PJObqgMPdQ-Jm2-V7nEsvsKDcMVvBByqFcb0O586ivmB-PTZDmYrNk1EsmVT6d-kBdclRvc7ZpdB_UjXaTs9saCKC2X4ze2-CpLqi60_746NEpR3QunfM/s1600/facebook_static+button-standard-netoopsblog.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOW0I5G5qbfIpvl8Y4nN684PJObqgMPdQ-Jm2-V7nEsvsKDcMVvBByqFcb0O586ivmB-PTZDmYrNk1EsmVT6d-kBdclRvc7ZpdB_UjXaTs9saCKC2X4ze2-CpLqi60_746NEpR3QunfM/s1600/facebook_static+button-standard-netoopsblog.png" /></a>Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.<br /> <br /> <br /> <h2 style="text-align: left;"> Widget Generator</h2> <div> Step 1 :- Get Code from Generator</div> </div> <iframe height="1000" src="https://csejaikumar.github.io/" width="100%"> </iframe> Step 2 :- After click on Add a Gadget link A pop-up box will open now with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.<br /> Step 3 :- Select 'HTML/Javascript' and add the one of code given below.<br /> Step 4 :- Now Click On Save 'JavaScript' You are done.</div>

Facebook Smooth jQuery POP OUT Like Box Widget Generator

Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is...

Read more »

Advance Table of Content/Sitemap For Blogger 2015

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: left;"> Here I am going to tell you that how you can add the advanced table of content or sitemap to your blogger blog. This sitemap works automatically, the only thing you have to do is just add the provided code where you want your sitemap to be appeared and that's all. The remaining work is automatic and all the posts of your blogger blog will be listed and arranged according to categories.</div> <div style="text-align: center;"> <img alt="Table of Content/Sitemap For Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizTJDt09ju7iyOGGRCRR5qXt-0292HsrXsXIcOebz2iF7YcJjfrY-elsBFF4l-tiEjs3_yLV7JaH07soF55H1FFI6-aKbwwBLWS7I1nR0sLbdFHJz9GZEJx7b7V1pdgDphGP3jDRybNoFo/s1600/2015-05-29_1030.png" /></div> <h3 style="text-align: left;"> Features:</h3> <br /> <ul style="text-align: left;"> <li>It automatically updates when you publish a post </li> <li>It automatically tags your latest posts with a <i><span style="color: red;">New!</span></i> text </li> <li>Arranges all your posts under their given categories </li> <li>Has Beautiful layout and eye-catching colors combination.</li> <li>As a whole looks beautiful.</li> <li>Have great User experience.</li> <li>100% Responsive.(Mobile Friendly)</li> </ul> <br /> <h3 style="text-align: left;"> How to add this advance sitemap/table if content to blogger</h3> Now I am going to show you how to install this advance sitemap to your blogger blog. The whole process is very simple and easy. It requires no coding,(no rocket science :)). Just copy-paste.<br /> <br /> To install this table of content follow the below steps:<br /> <br /> <ul style="text-align: left;"> <li>First of all open your blogger dashboard.</li> <li>Go to Pages</li> <li>Create new page</li> <li>Switch to HTML</li> <li>Copy all the below code and paste this code there.</li> </ul> <br /> <blockquote class="tr_bq"> <style><br />/* Skin for Blogger Tabbed Layout Faduhack */<br />#tabbed-toc {<br />  margin: 0 auto;<br />  background-color: #FFFFFF;<br />  border: 4px dashed rgb(48, 167, 229);<br />  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);<br />  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);<br />  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);<br />  overflow: hidden;<br />  position: relative;<br />  color: #333;<br />}<br />#tabbed-toc .loading {<br />  display:block;<br />  padding:5px 10px;<br />  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;<br />  color:white;<br />}<br />#tabbed-toc ul,<br />#tabbed-toc ol,<br />#tabbed-toc li {<br />  margin:0 0;<br />  padding:0 0;<br />  list-style:none;<br />}<br />#tabbed-toc .toc-tabs {<br />  width:20%;<br />  float:left;<br />}<br />#tabbed-toc .toc-tabs li a {<br />  display:block;<br />  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;<br />  height:28px;<br />  overflow:hidden;<br />  text-overflow:ellipsis;<br />  color: #434B50;<br />  text-transform:uppercase;<br />  text-decoration:none;<br />  padding:0 12px;<br />  cursor:pointer;<br />}<br />#tabbed-toc .toc-tabs li a:hover {<br />  background-color:rgba(110, 193, 255, 0.68);<br />  color:white;<br />}<br />#tabbed-toc .toc-tabs li a.active-tab {<br />  background-color: #6EC1FF;<br />  color:white;<br />  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);<br />  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);<br />  box-shadow:-2px 2px 2px rgba(0,0,0,.5);<br />  position:relative;<br />  z-index:5;<br />  margin:0 -1px 0 0;<br />  /* cursor:text; */<br />}<br />#tabbed-toc .toc-content,<br />#tabbed-toc .divider-layer {<br />    width: 80%;<br />  float: right;<br />  background-color: white;<br />  border-left: 2px dotted #30A7E5;<br />  -webkit-box-sizing: border-box;<br />  -moz-box-sizing: border-box;<br />  box-sizing: border-box;<br />}<br />#tabbed-toc .divider-layer {<br />  float:none;<br />  display:block;<br />  position:absolute;<br />  top:0;<br />  right:0;<br />  bottom:0;<br />  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);<br />  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);<br />  box-shadow:0 0 7px rgba(0,0,0,.7);<br />}<br />#tabbed-toc .panel {<br />  position:relative;<br />  z-index:5;<br />  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;<br />}<br />#tabbed-toc .panel li a {<br /> display: block;<br />  position: relative;<br />  font-weight: bold;<br />  font-size: 14px;<br />  color: #434B50;<br />  line-height: 40px;<br />  height: 35px;<br />  padding: 0 12px;<br />  text-decoration: none;<br />  outline: none;<br />  overflow: hidden;<br />}<br />#tabbed-toc .panel li time {<br />  display:block;<br />  font-style:italic;<br />  font-weight:normal;<br />  font-size:10px;<br />  color:#666;<br />  float:right;<br />}<br />#tabbed-toc .panel li .summary {<br />  display:block;<br />  padding:10px 12px 10px;<br />  font-style:italic;<br />  border-bottom:4px solid #275827;<br />  overflow:hidden;<br />}<br />#tabbed-toc .panel li .summary img.thumbnail {<br />  float:left;<br />  display:block;<br />  margin:0 8px 0 0;<br />  padding:4px 4px;<br />  width:72px;<br />  height:72px;<br />  border:1px solid #dcdcdc;<br />  background-color:#fafafa;<br />}<br />#tabbed-toc .panel li:nth-child(even) {<br />  background-color: #CAE6F2;<br />}<br />#tabbed-toc .panel li a:hover,<br />#tabbed-toc .panel li a:focus,<br />#tabbed-toc .panel li a:hover time,<br />#tabbed-toc .panel li.bold a {<br />  background-color:#333;<br />  color:white;<br />  outline:none;<br />}<br />#tabbed-toc .panel li.bold a:hover,<br />#tabbed-toc .panel li.bold a:hover time {<br />  background-color:#222;<br />}<br />@media (max-width:700px) {<br />  #tabbed-toc {<br />    border:2px solid #333;<br />  }<br />  #tabbed-toc .toc-tabs,<br />  #tabbed-toc .toc-content {<br />    overflow:hidden;<br />    width:auto;<br />    float:none;<br />    display:block;<br />  }<br />  #tabbed-toc .toc-tabs li {<br />    display:inline;<br />    float:left;<br />  }<br />  #tabbed-toc .toc-tabs li a,<br />  #tabbed-toc .toc-tabs li a.active-tab {<br />    background-color:#224C19;<br />    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);<br />    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);<br />    box-shadow:2px 0 7px rgba(0,0,0,.4);<br />  }<br />  #tabbed-toc .toc-tabs li a.active-tab {<br />    background-color:white;<br />    color:#333;<br />  }<br />  #tabbed-toc .toc-content {<br />    border:none;<br />  }<br />  #tabbed-toc .divider-layer,<br />  #tabbed-toc .panel li time {<br />    display:none;<br />  }<br />}<br /></style><br /><div id="tabbed-toc"><span class="loading">Loading...</span></div><br /><a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.faduhack.com/" title="Fadu Hack">Blogging Tips and Tricks</a><br /><script type="text/javascript"><br />var tabbedTOC = {<br />    blogUrl: "http://www.faduhack.com", // Blog URL<br />    containerId: "tabbed-toc", // Container ID<br />    activeTab: 1, // The default active tab index (default: the first tab)<br />    showDates: false, // `true` to show the post date<br />    showSummaries: false, // `true` to show the posts summaries<br />    numChars: 200, // Number of summary chars<br />    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)<br />    thumbSize: 40, // Thumbnail size<br />    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL<br />    monthNames: [ // Array of month names<br />        "January",<br />        "February",<br />        "March",<br />        "April",<br />        "May",<br />        "June",<br />        "July",<br />        "August",<br />        "September",<br />        "October",<br />        "November",<br />        "December"<br />    ],<br />    newTabLink: true, // Open link in new window?<br />    maxResults: 99999, // Maximum post results<br />    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")<br />    sortAlphabetically: true, // `false` to sort posts by published date<br />    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked<br />    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text<br />};<br /></script><br /><script type="text/javascript" src="https://github.com/csejaikumar/faduhack/blob/master/fhsitemap.js"></script></blockquote> <br /> <ul style="text-align: left;"> <li>Now change the red color url with your blogger blog url.[<a href="http://www.faduhack.com/">http://www.faduhack.com</a>]</li> <li>Now click on the publish button and that's all</li> <li>Congrats! you have successfully installed this new advance and fancy sitemap for blogger.</li> </ul> </div>

Advance Table of Content/Sitemap For Blogger 2015

Here I am going to tell you that how you can add the advanced table of content or sitemap to your blogger blog. This sitemap works automat...

Read more »