MyTricksTime

Search Results for: label/Blogger Widgets

How To Add Facebook Like Button Below Blogger Blog Post Title

Let your visitors like your content by adding Facebook Like Button to your post content. In this article I will teach you step by step on how to add Facebook Like Button below blogger blog post title with different button styles that suit to your content for example we have a standard, with box count, and with button count. Ok! Let�s start if you want more blogger tutorials and widgets you can visit my other blog at Trickiezone.

For the demo, you can visit Facebook Like Button page.

Instructions:

  1. Login to your Blogger account.
  2. Go to your blog Template section.Custom Robots Tags
  3. Then backup first your template.
  4. After that click Edit HTML.
  5. Find this

    <div class=�post-body entry-content� expr:id=�&quot;post-body-&quot; + data:post.id�>

    tag, how to do that? Just click the anywhere inside HTML editor and press Ctrl+F and input the tag and hit enter.

  6. Then copy the code below and paste it after

    <div class=�post-body entry-content� expr:id=�&quot;post-body-&quot; + data:post.id�>

    tag and save the template.

  7. View your blog content page and you�ll find the button below blog post title.

Standard Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/></b:if>

With Box Count Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/></b:if>

With Button Count Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>
In my next I will discuss how to add this Facebook Social Plugin below blogger blog post, so stay tune for more updates.Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Add Attractive Animated CSS Buttons For Blogger

Today i m  gonna  explain how to add css3 stylish animated  buttons  for your blogger. you can  use  this buttons as  download   buttons, demo buttons, redirect to other page and etc.I m  using  CSS  and HTML for this. you can use this button code in to your blogger post too.Check my  earlier post about  Button
codes here.


1. Log in to blogger account and Click drop down. 

2. Now select “Template” Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button”

4. Now click Proceed button.
    
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}


7. Go to blogger and click Layout 

8. Click Add Gadget and select ‘HTML/Javascript

9. Paste below code.

(You can use this code anywhere in your post.)

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

Replace  with your links.

10. Now save your HTML/Javascript‘.you are done…
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Add Facebook Like Button To Blogger Posts


Hello Friends,
Today is Last Date of this February and after many Days I going to share a small blogger widget (Facebook Like Button). Is is the most common widgets used by millions of Bloggers around  the World.As we all know facebook is one of the largest social media company in the word.If your blog have any fan page then it will help you a lot in increasing traffic on your blog. We are giving all types of facebook like buttons.i.e. vertical count,horizontal count and without count.You can add this button just below of of post tile and below of the post.Just follow my instructions carefully….



Note – This button will not like your fan page it will like and share your post

How To Add Facebook Like Button To Blogger Posts?

  1. Go to Blogger Dashboard > Design > Edit HTML
  2. First take a backup of your template
  3. Tick  the expand widget check box
  4. Find for below code in your template

<data:post.body/>


If you wish to add like button just below of post title the add the below code just before of<data:post.body/>

and if you wish to add this like button just below of your post then add below code justbelow of <data:post.body/>

Facebook Like Button Styles


You can add like button in three styles :


  • Vertical Count
  • Horizontal Count
  • Without Count


1. Vertical Count


<b:if cond=’data:blog.pageType != &quot;static_page&quot;’> <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:55px; height:62px;’/> </b:if>


2. Horizontal Count


<b:if cond=’data:blog.pageType != &quot;static_page&quot;’> <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:90px; height:21px;’/> </b:if>


3. Without Count


<b:if cond=’data:blog.pageType != &quot;static_page&quot;’> <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:35px;’/> </b:if>


If you faced any problem, please do not hesitate to let me know. 🙂
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

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

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>


Or

<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;
}


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. Then Search for this piece of code:

<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

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′>


OR

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


OR

<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

Meta