Blogger Widgets - MyTricksTime

Add Simple Subscription Form Below Posts in Blogger

June 26, 2016February 16, 2013 by Rahul Gaur

Today MyTricksTime Team writing about how to add simple subscription form just below posts in blogger.Almost everyone know about the value of the blog subscribers but the point is how can we increase the subscribers of our blog.
We can attract them by creating a cool or simple subscription form.If you place subscription form just below on every post your blog users can easily find this form and subscribe your blog.

To add subscription form just below of every blogger post please follow these simple steps.

Add Simple Subscription Form Below Posts in Blogger

Read Also : Add �Dynamic Email Subscription Form� To Blogger Blogspot

How To Add Simple Subscription Form Below Posts in Blogger

First You Should Take Backup of Your Blogger Template.
Now Log in to your Bogger Account.
In Your Dashboard Navigate to Template>>
Click on Edit HTML>> Button and Proceed>>
Now Find This code in HTML <data:post.body/>
Paste the following code just below <data:post.body/>

<form action=�http://feedburner.google.com/fb/a/mailverify� method=�post� onsubmit=�window.open('http://feedburner.google.com/fb/a/mailverify?uri=YourBloggerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true� style=�border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;� target=�popupwindow�><span style=�margin:0 auto; padding-left:24px; position:relative;background: url(http://3.bp.blogspot.com/_b0xJ7qk6DTc/TEg2iHmUivI/AAAAAAAAAu0/j9tIV5fjTXw/s1600/myrss.gif) right center no-repeat;�/></span>Get Free Updates Daily: <input name=�email� onblur=�if (this.value == "") {this.value = "Enter your email";}� onfocus=�if (this.value == "Enter your email") {this.value = ""}� style=�width:176px;height:18px; background: #ffffa0 url(http://1.bp.blogspot.com/_b0xJ7qk6DTc/TInWwRjgSUI/AAAAAAAABC0/DWQZc1mUvaU/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;� type=�text� value=�Enter your email�/><input name=�uri� type=�hidden� value=�YourBloggerID�/><input name=�loc� type=�hidden� value=�en_US�/><input type=�submit� value=�Subscribe�/><center><i>*Please click on the confirmation link sent in your Spam folder of Email*</i></center></form>

Replace YourBloggerID your feed id. Save the template and Its Done Enjoy..!

Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

How To Create Drop Caps (Big First Letters) In Blogger/Blogspot

February 2, 2013 by Rahul Gaur

Here’s another way you can customize your Blog. In this case, your Posts and Comment’s first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let’s start adding it!

Read Also : A Simple Related Posts Widget For Blogger

Big First Letter for your Blogger / Blogspot Posts

DEMO BELOW

Step 1.

If you are using the old Blogger interface:

Go to Dashboard – Design – Edit HTML – Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard – Template – Edit HTML – Proceed – Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3. Just above it, add the following:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Customize:

Color – change the color highlighted in blue with the value of your desired color
Size – to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

<div class=’capital’><data:post.body/></div>

Step 6. Save your template.

Important! If the above code is not working, add one of following codes from this example:

<p class=”capital”><data:post.body/></p>

<span class=”capital”><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

DEMO BELOW

Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the “Expand Widget Templates” box

Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class=”capital”><data:comment.body/></p>

Step 6. Save your Template.

That’s it! Now you have a cool drop cap first letter on your blog.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

How to add Recommended Post Slide Out Widget For Blogger

February 2, 2013 by Rahul Gaur

Recommended Post Widget

You know those popup messages that slide out from the bottom right corner once you�ve almost reached the bottom of the page? Well, they used to be available only on WordPress but not anymore; now Blogger users can enjoy it too! The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries. It’s both useful for you (can improve your Click Through Rate (CTR) ) and for your blog visitors too.

Demo
Scroll down to the bottom of the post and you should see the Recommended Slide Out Widget appearing in the right corner of blog’s page.

How to add the Recommended Post Slide out Widget
1. Log in into your Blogger account, then go to Design (or Layout) > Page Elements
2. Click on Add a Gadget Link
3. Choose “HTML/JavaScript” option
4. Paste this code inside the empty box:

<div id=”hlslidein” style=”display:none;”> <div class=”help”>?</div><div class=”expand”>+</div> <div class=”close”>X</div> <p>Recommended for you</p> <div id=”hlslidein_image”></div> <div id=”hlslidein_title”>Loading..</div> </div> <script> if(document.location.href.split(“/”).length==6&&document.location.href.indexOf(“.html”)!=-1){if(typeof hl_onload_queue==’undefined’)var hl_onload_queue=[];if(typeof hl_dom_loaded==’boolean’)hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!=’function’){function hl_async_loader(src,callback,id){var script=document.createElement(‘script’);script.type=”text/javascript”;script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState==”loaded”||previous_script.readyState==”complete”){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName(‘head’)[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!=’function’)function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader(“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”,function(){hl_async_loader(“http://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js”,function(){},”hl-out-slide”)},”jQueryjs”)} </script> <a href=”http://helplogger.blogspot.ro/2012/06/recommended-post-slide-out-widget-for.html” target=”_blank”></a>

5. Save The Widget.
6. Go to Edit HTML > Check the “Expand Widget Template” box
7. Search (CTRL + F) for the following code :

<div class=’post-footer-line post-footer-line-1′>

<p class=’post-footer-line post-footer-line-1′>

<data:post.body/>

Immediately below any of these lines, add the following snippet

<b:if cond=’data:blog.pageType == “item”‘>
<div style=’display:none’ id=’bpslidein_place_holder’></div>
</b:if>

Now when the reader scrolls down to this div, the slide will open up.

8. Save your template. And that’s it!

Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

How To Add �Email Subscription Form� To Blogger Blogspot

June 26, 2016February 2, 2013 by Rahul Gaur

If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog, so that interested visitors can easily get latest updates. And to add email or feed Subscription Form to your blogger blog (blogspot) it’s a very easy thing to do. So let’s begin:

1. Log in to Blogger, then go to Design > Page Elements > click on “Add a Gadget” link.
2. From the pop-up window, click on the “HTML/JavaScript” gadget.
3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class=”hl-email”>
Subscribe via Email <form action=”http://feedburner.google.com/fb/a/mailverify” id=”feedform” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=mytrickstime‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<input gtbfieldid=”3″ class=”textarea” name=”email” onblur=”if (this.value == "") {this.value = "Enter email address here";}” onfocus=”if (this.value == "Enter email address here") {this.value = "";}” value=”Enter email address here” type=”text” />
<input type=”hidden” value=”mytrickstime” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/>
<input class=”hl-emailsubmit” value=”Submit” type=”submit” />
</form>
</div>

Read Also :Speed up our blog by hosting CSS files externally

Settings

Replace the url address in green if you want to change the email icon
Increase/Decrease the 130 width value for a wider text area
Replace http://feedburner.google.com/fb/a/mailverify?uri=mytrickstime with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace mytrickstime with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=mytrickstime

4. Save your widget and check your blog.Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

How To Show Blogger Gadget/ Widget In Specific Pages

December 6, 2012 by Rahul Gaur

In this tutorial im going to explain How To Show

Blogger Gadget/ Widget In Specific Pages. When we designing the

blogger templates. sometime we want to change out gadget/

widget.Sometime need to show gadget/ widget homepage

only.some time inside post only. At that time we don’t have

any option for customize like that. We need to understand

about code.But most of are not good at coding.So in this

tutorial will helps to arrange your gadget/ widget as you want.

follow these steps.

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

2. Put checked mark in Expand Widget Templates

3. Now you have to press Ctrl+F key and type the unique title that you gave to gadget or widget.
Lets say you gave title as Subscribe, the code will show like this.

<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

So,code start with <b:includable id=’main’> and end with </b:includable>
you have to find this both code.
lets see how to show this gadget in specific pages.

How to show blogger gadget in home page and other pages.(Except post pages.)

So,show gadget in home page and other pages.You have to add that red code like below.

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

How to show blogger gadget in Post pages only.

<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

How to show blogger gadget in only specific page

<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL of the page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

you can replace URL of the page with URL which you want to show the gadget only that page.

7. Now save your template you are done.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com