How to add Random Posts Widget  for Blogger

How to add Random Posts Widget for Blogger

First Logo in to Blogger or Select Layout and Click on Add Widget or Select HTML+
When Open This HTML Window Than Pate This Code

<style type="text/css">#random-posts img{float:left;margin-right:15px;width:75px;height:75px}ul#random-posts{list-style-type:none;padding:0}#random-posts li{margin-bottom:15px}.random-title{margin-bottom:5px}.random-summary{margin-top:5px;display:block}</style><ul id='random-posts'><script type='text/javascript'>var randomposts_number = 5var randomposts_chars = 50;var randomposts_details = 'yes';randomposts_details2 = 'no';var randomposts_comments = 'Comments';var randomposts_commentsd = 'Comments Disabled';var randomposts_current = [];var total_randomposts = 0;var randomposts_current = new Array(randomposts_number);
function randomposts(json) {    total_randomposts = json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');function getvalue(){for(var a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}</script><script type='text/javascript'>function random_posts(a){for(var b=0;b<randomposts_number;b++){var c=a.feed.entry[b],d=c.title.$t;if("content"in c)var e=c.content.$t;else if("summary"in c)var e=c.summary.$t;else var e="";if(e=e.replace(/<[^>]*>/g,""),e.length<randomposts_chars)var f=e;else{e=e.substring(0,randomposts_chars);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"&#133;"}for(var h=0;h<c.link.length;h++){if("thr$total"in c)var i=c.thr$total.$t+" "+randomposts_comments;else i=randomposts_commentsd;if("alternate"==c.link[h].rel){var j=c.link[h].href,k=c.published.$t;if("media$thumbnail"in c)var l=c.media$thumbnail.url;else l="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+d+'" src="'+l+'"/>'),document.write('<div class="random-title"><a href="'+j+'" rel="nofollow">'+d+"</a></div>"),"yes"==randomposts_details&&document.write('<span class="random-details">'+k.substring(8,10)+"."+k.substring(5,7)+"."+k.substring(0,4)+" - "+i)+"</span>","yes"==randomposts_details2&&document.write('<span class="random-summary">'+f)+"</span>",document.write('<div style="clear:both"></div></li>')}}getvalue();for (var i = 0; i < randomposts_number; i++) {    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')};</script></ul><div style="font-size: 10px; float: right;"><a href="http://helplogger.blogspot.com/2012/03/add-random-posts-widget-to-blogger.html" rel="nofollow">Random Posts Widget</a></div>



How Customize The Random Posts Widget ?

First 75px 5-50-yes-no
75px -:  , Change The pixels in red from width:75px; and height:75px; For To make the thumbnails Size Effect
5 -:  If you want to show more than 5 posts, Than replace the 5   Parameter
50 -: For add more characters to the snippets Than Change the 50 Parameter

yes-no -: For Hide Or Show Date or comment in Poat Than Change yes-no



Finally Save This Html Window Or Enjoy 
Multi Social Subscription Box Widget for Google Blogger

Multi Social Subscription Box Widget for Google Blogger

First Step -: login Your Blogger Account.Select Layout Option.Add Gadget.Select HTML+ or Paste This Code Under Html Box

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css" />
<div id="socialsubwidget">
<div class="heading">
<h4><span style="font-weight:300;">Want To Get </span><b>Hot Updates?</b></h4>
<p>
Follow Us On Your Favourite Social Networking Site To Start Getting Notified!
</p>
</div>
<div class="feedburner1-emailsubs">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=hvbloggers" method="post" target="_new">
<input class="feedburner1-email" name="email" placeholder="Your Email Address" type="text" />
<input class="feedburner1-button" type="submit" value="Sign Up!" />
</form>
</div>
<div class="fb1-likebox">
YOUR-FACEBOOK-PLUGIN
</div>
<div class="twitter1-follow">
YOUR-TWITTER-PLUGIN
</div>
<div class="gplus1-follow">
YOUR-GOOGLEPLUS-PLUGIN
</div>
<div class="pinterest1-follow">
YOUR-PINTEREST-PLUGIN
</div>
<style>
.fb1-likebox {
padding: 10px;
background: #213F92;
height: 26px;
}
.twitter1-follow {
background: #00ACEE;
height: 20px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.gplus1-follow {margin-left:0px;}
.pinterest1-follow {
padding: 10px;
background: #CB2027;
height: 25px;
}
.linkedin1-follow {padding:10px; background:#069; height:25px;}
.feedburner1-emailsubs {padding-left: 10px;
padding-top: 15px;
padding-bottom: 0.2px;
background: #0D9BFF;}
.feedburner1-email {
width: 66%;
height: 35px;
padding: 8px;
background-color: white;
color: black;
border-radius: 5px 5px 5px 5px;
font-family: open sans;
outline: none;
border: 1px solid #F7B276;
}
.feedburner1-button {padding: 7px 10px;
vertical-align: top;
margin: auto;
margin-left: -7px;
text-align: left;
width: auto;
-moz-border-radius-topright: 5px !important;
-moz-border-radius-topleft: 0 !important;
-webkit-border-top-right-radius: 5px !important;
-webkit-border-top-left-radius: 0 !important;
-moz-border-radius-bottomright: 5px !important;
-moz-border-radius-bottomleft: 0 !important;
-webkit-border-bottom-right-radius: 5px !important;
-webkit-border-bottom-left-radius: 0 !important;
background: #95a5a6;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1, #7f8c8d));
background-image: -moz-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1, #7f8c8d));
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border-width: 1px;
border-style: solid;
border-color: #bdc3c7;
font: 14px open sans;
color: #fff;
cursor: pointer;
font-weight: 600;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
transition:background-image 400ms;
-webkit-transition:background-image 400ms;
-moz-transition:background-image 400ms;
}
.feedburner-button1:hover {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7f8c8d),color-stop(1, #95a5a6));
}
#socialsubwidget {
float: left;
width: 315px;
background: #95a5a6;
border: 0px solid #7f8c8d;
font-family:open sans;
}
#socialsubwidget .heading {
height: 110px;
padding: 5px;
}
#socialsubwidget .heading p {
text-shadow: none;
font-size: 14px;
padding: 0px;
margin: 0px;
line-height: 20px;
color: #fff;
margin-top: 5px;
text-align: center;
}
#socialsubwidget .heading h4 {
text-shadow: none;
font-size: 21px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 25px;
color: #fff;
padding-top: 15px;
padding-bottom: 10px;
}
</style>
</div>
<div class="clear"></div>



  1. Replace This Wording-- Feed Burner (Signup) box, Replace hvbloggers with your Feed Burner name or ID.
  2. Replace This Wording--  YOUR-FACEBOOK-PLUGIN with your Facebook like button plugin which you will get from the Facebook developer site.
  3. Replace This Wording--  YOUR-TWITTER-PLUGIN with your Twitter follows button plugin which you will get from the Twitter developer site.
  4. Replace This Wording--  YOUR-GOOGLEPLUS-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
  5. Replace This Wording--  YOUR-PINTEREST-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
  6. Last, click on save

ENJOY
How to Add Widget Breaking News Running On Blogger 2017-18

How to Add Widget Breaking News Running On Blogger 2017-18

First Step -: Put CSS below just above the code ]]></b:skin>AND</style>
/* Newsticker CSS */ #blanter-newsticker{margin:20px 0;position:relative} #recent_post{position:relative;border-bottom:1px solid #ddd;z-index:9;overflow:hidden;padding:8px;width:100%!important} #recent_post a{margin:0 15px;line-height:2} .newstitle{float:left;background:#1b77ea;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase} #recent_post .wrapper{width:1120px;max-width:100%;margin:0 auto} @media screen and (max-width:684px){ .newstitle{font-size:14px;padding:3px 10px!important}#recent_post{top:60px!important;padding:0!important}#recent_post marquee{width:67%!important;line-height:2}}
SECOND STEP  -: Paste The following code above the code </head>
<script type='text/javascript'> var blog_url = "YOUR-BLOG-URL"; var latest_post = 4; var scrolling_speed = "5"; var close_button = false; var info_text = true; </script>
Replace YOUR-BLOG-URL with your blog link.

THIRD STEP -: Save Javascript below above the code</body>
<script src='https://cdn.rawgit.com/blanter/design/master/blanter-newsticker.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ document.getElementById("blanter-newsticker").appendChild(document.getElementById("recent_post")); //]]> </script>
LAST  STEP -:buddy just needs to put the following HTML in the place you want.
<div id='blanter-newsticker'/>

SAVE TEMPLATE
ENJOY