MYVIRALHAX: Blogger Tips

Pure CSS Pop Up Email Subscription Box For Blogger

Husnain Dev November 21, 2017 Comment

Introduction

Yes, as the title suggests it is a PURELY CSSed Pop up email subscription box not only for Blogger but for almost all types of platform as long as you have access to feedburner. This widget is a combination of my previous post email subscription box and a simple and cool pop up widget built with CSS. Make sure to follow the steps to get it working!

External Scripts

FontAwesome (?)

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Add the following code before </body>

<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form></div></div></div></div>

For this widget to work you need to add a link that will serve as the button or handler for the popup.
Add the following code anywhere you want it to be displayed.
e.g. inside your nav menu

<a href='#signup'>Signup</a>

CSS

Copy and paste the code before ]]></b:skin>

.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}

Save your Template

Final Words

Replace MyBloggerAide with your feedburner url.

Do some adjustments to fit your need.
And voila! I hope you guys like it! Until next time. Happy Blogging! :)

Blogger Tips blogger widget

Stylish Popular Posts Widget For Blogger

Husnain Dev November 21, 2017 Comment

Introduction

Popular Posts widget displays the most viewed or popular posts in your blog, however the default style isn't aesthetic enough to attract clicks or visits from your audience that's why I design a Stylish Popular Posts Widget that is without a doubt - stunning. With the use of some CSS I made the default style of popular posts a lot more beautiful.

External Scripts

Jquery Library v1.11.0 or higher (?)

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Now Search and Look for 
You will find similar to this

Change the highlighted code with this code

<div class='item-st'>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
<div id='popularbutton'><div class='mbabuttons2 mbabutton mbabuttonred'>Read More</div></div>
</div>

And should look like this

CSS

Now copy the following code and paste it before ]]></b:skin>

.PopularPosts .widget-content{background:#222}.PopularPosts .widget-content ul li .item-thumbnail img{position:relative;background:#fff;padding:10px;width:310px;height:100%}.PopularPosts .widget-content ul li .item-st{-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;position:absolute;background:#222;border:10px solid #fff;padding:20px;width:250px;bottom:1px;left:30px}.PopularPosts .widget-content ul li{position:relative;height:350px;font-family:'Maven Pro',sans-serif}.PopularPosts .widget-content ul li .item-title a{color:#fff;text-align:center;font-size:20px;text-decoration:none;text-transform:capitalize}.PopularPosts .widget-content ul li .item-title{text-align:center}.PopularPosts .widget-content ul li .item-snippet{text-align:justify;font-size:14px}#popularbutton{width:120px;margin:0 auto}.mbabuttons2{width:120px;height:38px;line-height:38px}.mbabutton{position:relative;font-size:17px;color:#fff;text-align:center;text-shadow:1px 1px 1px #99353e}.mbabuttonred{border:0;background:#ed5564;border-bottom:1px solid #bf424d;border-radius:3px;cursor:pointer;-webkit-box-shadow:inset 0 -1px #bf424d;-moz-box-shadow:inset 0 -1px #bf424d;box-shadow:inset 0 -1px #bf424d}

JScript

Search and Look for </body> and paste the following code before it

<script type='text/javascript'>
//<![CDATA[
var newSize = 400;  // this is the new thumbnail size, you can change this
$(".popular-posts .item-thumbnail img").each(function() {
var oldSize = $(this).attr("width");
$(this).attr("width", newSize); $(this).attr("height", newSize);
$(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));
});
//]]>
</script>

Save your Template

Final Words

We have set the maximum width of the image to 310px and maximum width of the post title and snippet to 250px, just adjust them to fit your need.

So that's it for today, hope you find this Stylish Popular posts widget helpful.

Blogger Tips

Popup Facebook Like Box for Blogger

Husnain Dev November 21, 2017 Comment

Introduction

As we all know, Facebook is the leading social media on the internet today with millions of user loging in each day. We can take advantage of this great opportunity to acquire a variety of readers around the globe. Adding a Popup Facebook Like Box is one of the great ways to generate likes and earn traffics from a huge variety of audience. When someone liked your content and shared it with their friends on Facebook, it can generate you a lot of traffic and help your blog grow. Follow the easy steps below to add this great widget.

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Find (ctrl+f) </body>

<div id='mba-likebox-bg'>
<div id='mba-likebox-bg-out'>
</div>
<div id='mba-likebox'>
<div id='mba-likebox-out'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmybloggeraide&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;header=false&amp;' style='width:390px; height: 230px;'/>
</div>
</div>

CSS

Find (ctrl+f) </b:skin>
Copy the following code and paste it just above </b:skin>

#mba-likebox-bg {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#mba-likebox-bg-out {
width:100%;
height:100%;
}
#mba-likebox {
background:#fff;
padding: 20px 10px 10px 10px;
top: 20%;
left: 33%;
position: absolute;
-webkit-box-shadow: inset 0 10px 0 0 #3b579d;
-moz-box-shadow: inset 0 10px 0 0 #3b579d;
box-shadow: inset 0 10px 0 0 #3b579d;
}
#mba-likebox-out {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #e1e1e1;
z-index: 999;
}
#mba-likebox-out:before {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: none;
content: "\f00d";
text-align:center;
display: block!Important;
width: 40px;
height: 40px;
line-height: 40px;
background:#3b579d;
  }
#mba-likebox-out:hover:before{
color:#fff;
  }

Jscript

Find (ctrl+f) </body>
Copy the following code and paste it before </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie(&#39;popup_user_login&#39;) != &#39;yes&#39;){
$(&#39;#mba-likebox-bg&#39;).delay(100).fadeIn(&#39;medium&#39;);
$(&#39;#mba-likebox-out, #mba-likebox-bg-out&#39;).click(function(){
$(&#39;#mba-likebox-bg&#39;).stop().fadeOut(&#39;medium&#39;);
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>

Replace mybloggeraide with the URL of your Facebook page
If you would like the Facebook Like box to popup every time the page loads, then remove $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
Save your Template