NAUKRI TUTS: Blogger Widgets

Breaking News

Showing posts with label Blogger Widgets. Show all posts

How to add Email subscription widget for blogger

1) Login to Blogger account

2) Go to Layout

3) Go to Add gadget

4) Go to HTML/Javascript

5) Copy the below code and paste it inside the content box and save it

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5VoF7MDDb0TEs2nlK4vC24Mvyb2zq6OC6h6ogWYCrpNOuIKfXSeRtR8Y4umk5xm3XmE-h14KmIt8Ol2pPitc_E97AkalA-w7lihaxOrmX1Mlu4Yl63SsHky08s3KxNCI4UgwKhyphenhyphenI7tug/s1600/colored-strip.png) repeat scroll 0 0 transparent;

border: 1px solid #aaa;

border-radius: 3px;

padding: 3px 0;

}

.sidebar-subscribe-box-wrapper {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76K9phmiS_AdGTwSuvjn2DwY07ELolxPukIwdK7bdGCb3N8yWNwKEHsQWWGAZDpHfyLi-6OR1pJbBtXODiXHgkM1L2Qyx3-SrPqj5CEJV4JFfD1lZ2L0xSYj9wCOqS8xSHtsbK559DOX5/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;

color: #111;

font-size: 14px;

line-height: 20px;

padding: 1px 20px 10px;

text-align: center;

text-transform: uppercase;

}

.sidebar-subscribe-box-form {

clear: both;

display: block;

margin: 10px 0;

}

form.sidebar-subscribe-box-form {

clear: both;

display: block;

margin: 10px 0 0;

width: auto;

}

.sidebar-subscribe-box-email-field {

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYLL6PyY-yLA574h1dv76kTvuy1HGcV_vBFqXbZOgg8Uv3o89PICquwshTRKtwIiJZxJoZHavf3oerRvZctfpoYa_N4inzhCrL8gUbNpb3ZQtHlz9htdQN7jAhSVW7x2cL644dQu5PChi/s1600/sprites.png) no-repeat 0 -27px;

border: 1px solid #ccc;

border-radius: 4px;

color: #444;

margin: 0 0 15px;

padding: 10px 40px;

width: 68%;

}

.sidebar-subscribe-box-email-button {

background: #09f;

border: 1px solid #007fff;

box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;

color: #fff;

cursor: pointer;

font-family: verdana;

font-weight: 700;

padding: 10px;

text-shadow: 1px 1px 0 rgba(0,0,0,.4);

text-transform: uppercase;

width: 100%;

}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {

background: #1ca4ff;

}

.sidebar-subscribe-box-email-button:active {

-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

outline: 0;

}

iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {

width: 100%;

}

embed {

border-radius: 3px;

-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);

-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);

background: #FFF;

border: 1px solid #ddd;

box-shadow: 0 2px 4px rgba(0,0,0,0.2);

margin: 0;

padding: 4px 4px 4px;

}

#footer-section {

background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WQKd7khOccRnuRVyEAYmmRqR5YWjflIB2_IvvVAJzoh0Rb7hgC31qNocxuVyg-H4ZDMMFptS5v14eiBPCxlvdrtGvei98bW4SwXI0SsEVbGtqFfDrdwIPkgjUpuN-G5LW_CH4Y3e3uhg/s0/bg-pattern.png) repeat top left;

border-top: 1px solid #aaa;

box-shadow: inset 0 4px 6px -3px #aaa;

font-family: cambria;

font-size: 14px;

height: 100px;

margin: 10px -30px 5px;

padding: 0 30px;

text-align: center;

width: 100%;

}</style>

<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.

</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=naukrituts"

class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=naukrituts',

'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" /></form></div></div></div>

Customization: Please change the highlighted colour text with your feed burner URL and save it.

How to add multiple drop down menu for blogger

1) Login to Blogger account

2) Go to Layout

3) Go to Add gadget

4) Go to HTML/Javascript

5) Copy the below code and paste it inside the content box and save it

</script>

ddsmoothmenu.init({

mainmenuid: "smoothmenu1", //menu DIV id

orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"

classname: 'ddsmoothmenu', //class added to menu's outer DIV

//customtheme: ["#1c5a80", "#18374a"],

contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

ddsmoothmenu.init({

mainmenuid: "smoothmenu2", //Menu DIV id

orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"

classname: 'ddsmoothmenu-v', //class added to menu's outer DIV

//customtheme: ["#804000", "#482400"],

contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

</script>

font: bold 12px Verdana;

background: #414141; /*background of menu bar (default state)*/

width: 100%;

}

.ddsmoothmenu ul{

z-index:100;

margin: 0;

padding: 0;

list-style-type: none;

}

/*Top level list items*/

.ddsmoothmenu ul li{

position: relative;

display: inline;

float: left;

}

/*Top level menu link items style*/

.ddsmoothmenu ul li a{

display: block;

background: #414141; /*background of menu items (default state)*/

color: white;

padding: 8px 10px;

border-right: 1px solid #778;

color: #2d2b2b;

text-decoration: none;

}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: inline-block;

}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{

color: white;

}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/

background: black;

color: white;

}

.ddsmoothmenu ul li a:hover{

background: black; /*background of menu items during onmouseover (hover state)*/

color: white;

}

/*1st sub level menu*/

.ddsmoothmenu ul li ul{

position: absolute;

left: 0;

display: none; /*collapse all sub menus to begin with*/

visibility: hidden;

}

/*Sub level menu list items (undo style from Top level List Items)*/

.ddsmoothmenu ul li ul li{

display: list-item;

float: none;

}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */

.ddsmoothmenu ul li ul li ul{

top: 0;

}

/* Sub level menu links style */

.ddsmoothmenu ul li ul li a{

font: normal 13px Verdana;

width: 160px; /*width of sub menus*/

padding: 5px;

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray;

}

/* Holly Hack for IE \*/

* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{

position: absolute;

top: 12px;

right: 7px;

}

.rightarrowclass{

position: absolute;

top: 6px;

right: 5px;

}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/

position: absolute;

left: 0;

top: 0;

width: 0;

height: 0;

background: silver;

}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/

opacity: 0.8;

}</style>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

<li><a href='#'>Railway Jobs</a></li>

<li><a href='#'>Engineering Jobs</a></li>

<li><a href='#'>Police Jobs</a></li>

<li><a href='#'>Government Jobs</a></li>

<li><a href='#'>Abroad Jobs</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect

1) Login to Blogger account

2) Go to Layout

3) Go to Add gadget

4) Go to HTML/Javascript

5) Copy the below code and paste it inside the content box and save it

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<ul class="sub">

</ul>

</li>

<li class="l"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Windows"title="Windows"><span>Windows</span></a></li>

<li class="c"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Blogger" title="Blogger"><span>Blogger</span></a></li>

<li class="r1"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</li>

</ul>

</div>

</!doctype>

How to add multiple drop down menu bar for blogger

</div>

</form>

</div>

</div><div style='clear:both;'/>

</div>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

<li><a href='#'>Railway Jobs</a></li>

<li><a href='#'>Engineering Jobs</a></li>

<li><a href='#'>Police Jobs</a></li>

<li><a href='#'>Government Jobs</a></li>

<li><a href='#'>Abroad Jobs</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

Social media 5-in-1 Slider bar for blogger

1) Login to Blogger account
2) Go to Layout
3) Go to Add gadget
4) Go to HTML/Javascript
5) Copy the below code and paste it inside the content box and save it.

How to add HTML Sitemap for Blogger

We provide you full tutorial about How To Create HTML Sitemap To Blogger because sitemap helps to improve crawl of your blog or website. It also help to increase crawling and indexing of blog or website. We also shared how to create XML site map of website in our previous tutorial. Now we give you how to create HTML sitemap for your blog readers. This sitemap help to show all links of your website on a page. You can show all your blog post and pages in single sitemap page. You can also show links form particular label.

How To Add HTML Sitemap To Blogger

If you want to show all your blog post at same page then follow below steps:

Step 1

Step 2

Now Go to Pages then New page and click on blank page as show in below picture.

Step 3

Switch this page to HTML mode.

Step 4

Copy and paste below code in body.

<script type="text/javascript">

var numposts = 100;

var standardstyling = true;

function showrecentpostsundefinedjson) {

for undefinedvar i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if undefinedi == json.feed.entry.length) break;

for undefinedvar k = 0; k < entry.link.length; k++) {

if undefinedentry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}}

posttitle = posttitle.linkundefinedposturl);

if undefinedstandardstyling) document.writeundefined'<li>');

document.writeundefinedposttitle);}

if undefinedstandardstyling) document.writeundefined'</li>');

}

</script>

<ul>

<script src="http://kumarinfocity.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>

If you want to create Sitemap Page for particular Label than copy and paste below code in body.

<script type="text/javascript">var numposts = 100;var standardstyling = true;function showrecentpostsundefinedjson) {for undefinedvar i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if undefinedi == json.feed.entry.length) break;for undefinedvar k = 0; k < entry.link.length; k++) {if undefinedentry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}posttitle = posttitle.linkundefinedposturl);if undefinedstandardstyling) document.writeundefined'<li>');document.writeundefinedposttitle);}if undefinedstandardstyling) document.writeundefined'</li>');}</script><ul><script src="http://naukrituts.blogspot.com/feeds/posts/default/-/Label%20Name?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>

Step 5

Replace naukrituts.blogspot.com to your blog URL and Label%20Name to your label name.

Step 6

Click on Publish button.

How to Add Click to Drop Down Menu Widget for Blogger

Many blogger want to implement Click to Drop Down Menu Widget for their blogger blog in sidebar but they do not know how to do this. We provide you full code to add Click to Drop Down Menu Widget for Blogger and you can easily add to your blog.

Click to Drop Down Menu Widget help to boost the traffic on your posts and passing on the link juice via your home page. Click to Drop Down Menu Widget that helps you to implement very good looking drop down menu in your sidebar.

Follow the below steps to add Click to Drop Down Menu Widget for Blogger blogs:

Step 1

Go to Blogger Dashboard.

Step 2

Go to Layout and click on Add a Gadget Link as shown in below picture.

Click to Drop Down Menu Widget for Blogger

Step 3

Now add HTML/JavaScript widget from list.

Step 4

Copy and Paste Below code into box:

<div class="msg_list">

<p class="msg_head">Heading #1</p>

<div class="msg_body">

<ul>

<li>

<a href="#">Link Name 1 </a>

</li>

<li>

<a href="#">Link Name 2 </a>

</li>

</ul>

</div>

<p class="msg_head">Heading #2</p>

<div class="msg_body">

<ul>

<li>

<a href="#">Link Name 1 </a>

</li>

<li>

<a href="#">Link Name 2 </a>

</li>

</ul>

<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a style="color:#E2E2E2; padding-left:160px;" href="http://www.haakblog.com/2013/11/add-click-to-drop-down-menu-widget-blogger.html">Drop Down Menu</a>

</div>

<style>

p{

padding: 0 0 1em;

}

.msg_list {

margin: 0px;

padding: 0px;

width: 320px;

display: block;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#316C55;

margin:1px;

color:#FFFFFF;

font-family: Sans-serif,Arial,Helvetica;

font-size: 12px;

font-weight: bold;

}

.msg_body {

padding: 15px 10px 15px;

background-color:#F4F4F8;

}

</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//toggle the componenet with class msg_body

$(".msg_head").click(function()

{

$(this).next(".msg_body").slideToggle(600);

});

});

</script></div>

Tips: Change Heading#1 & Heading#2 to your heading and change Link Name 1 & Link Name 2 to your Link Name and Hyper Link with your link.

Step 5

Click on Save button.