31 Jan 2014

How to Add Facebook Like Popup Box for Blogger

No comments

 

Add Facebook Like Popup Box widget for Blogger

Follow below steps to Add Facebook Like Popup Box widget for Blogger:

Step 1

Log in into Blogger Dashboard.

Step 2

Go to Template and Click on Edit HTML Button as shown in below picture.

Step 3

Find below Code With the help of CTRL+F
</body>

Step 4

Copy and Paste below code before </body>:
<style type='text/css'>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by
$(&#39;a.haakblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='haakblogFBpop'>
<!-- Widget by Start -->
<center>
<b>Don&#39;t Forget To Join US Our Community</b></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyfounted&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
</center>
<!-- Widget by  End -->
<a class='haakblogclose' href='#'>&#215;</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'></span>
<a href="http://www.myfounted.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 href='http://www.myfounted.com' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>

Tips: Change myfounted to your Facebook Page Name

Step 5

Click on Save Button.
Read more »

Posted in:

Add a Paypal donate button in Blogspot blog

No comments

Setting up your Paypal

Note : If you haven't yet signed up for Paypal then do it here
  1. Go to this page and click on 'Create button' link https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside
  2. Now when you are on the page with Paypal button creating tool you will see a drop down menu with different options (button type) choose Donations from the drop down.
  3. Put your organization name and donation id (it's optional)
  4. If you want a more customized button then you can use the customization options, you can put your own image instead of the normal donate button (optional)
  5. Choose the currency. If you want a fixed amount to get donated from the donors then you can choose the 'Donors contribute a fixed amount.' and enter the amount.
  6. The last and the most important step is to enter the email id for your Paypal
  7. Skip Step 2 and 3 there and click on 'Create Button' and you will get the HTML code for your donate button. Copy that code.

Add the code in your blog

We are going to simply add the code into the blog by an HTML/JavaScript gadget. To do that go to your Blogger Dashboard -> Layout -> Add a gadget -> Select HTML/JavaScript from the list -> Title the gadget and in contents paste the HTML code you got from the Paypal donation button generator.
Save the gadget and that's it.


Read more »

Posted in:

how to setup syntax highlighter on blogger

No comments


1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css




view plainprint?
  1.  .dp-highlighter  
  2. {  
  3.  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  
  4.  font-size: 12px;  
  5.  background-color: #E7E5DC;  
  6.  width: 99%;  
  7.  overflow: auto;  
  8.  margin: 18px 0 18px 0 !important;  
  9.  padding-top: 1px; /* adds a little border on top when controls are hidden */  
  10. }  
  11.   
  12. /* clear styles */  
  13. .dp-highlighter ol,  
  14. .dp-highlighter ol li,  
  15. .dp-highlighter ol li span   
  16. {  
  17.  margin: 0;  
  18.  padding: 0;  
  19.  border: none;  
  20. }  
  21.   
  22. .dp-highlighter a,  
  23. .dp-highlighter a:hover  
  24. {  
  25.  background: none;  
  26.  border: none;  
  27.  padding: 0;  
  28.  margin: 0;  
  29. }  
  30.   
  31. .dp-highlighter .bar  
  32. {  
  33.  padding-left: 45px;  
  34. }  
  35.   
  36. .dp-highlighter.collapsed .bar,  
  37. .dp-highlighter.nogutter .bar  
  38. {  
  39.  padding-left: 0px;  
  40. }  
  41.   
  42. .dp-highlighter ol  
  43. {  
  44.  list-style: decimal; /* for ie */  
  45.  background-color: #fff;  
  46.  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  
  47.  padding: 0px;  
  48.  color: #5C5C5C;  
  49. }  
  50.   
  51. .dp-highlighter.nogutter ol,  
  52. .dp-highlighter.nogutter ol li  
  53. {  
  54.  list-style: none !important;  
  55.  margin-left: 0px !important;  
  56. }  
  57.   
  58. .dp-highlighter ol li,  
  59. .dp-highlighter .columns div  
  60. {  
  61.  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  
  62.  list-style-position: outside !important;  
  63.  border-left: 3px solid #6CE26C;  
  64.  background-color: #F8F8F8;  
  65.  color: #5C5C5C;  
  66.  padding: 0 3px 0 10px !important;  
  67.  margin: 0 !important;  
  68.  line-height: 14px;  
  69. }  
  70.   
  71. .dp-highlighter.nogutter ol li,  
  72. .dp-highlighter.nogutter .columns div  
  73. {  
  74.  border: 0;  
  75. }  
  76.   
  77. .dp-highlighter .columns  
  78. {  
  79.  background-color: #F8F8F8;  
  80.  color: gray;  
  81.  overflow: hidden;  
  82.  width: 100%;  
  83. }  
  84.   
  85. .dp-highlighter .columns div  
  86. {  
  87.  padding-bottom: 5px;  
  88. }  
  89.   
  90. .dp-highlighter ol li.alt  
  91. {  
  92.  background-color: #FFF;  
  93.  color: inherit;  
  94. }  
  95.   
  96. .dp-highlighter ol li span  
  97. {  
  98.  color: black;  
  99.  background-color: inherit;  
  100. }  
  101.   
  102. /* Adjust some properties when collapsed */  
  103.   
  104. .dp-highlighter.collapsed ol  
  105. {  
  106.  margin: 0px;  
  107. }  
  108.   
  109. .dp-highlighter.collapsed ol li  
  110. {  
  111.  display: none;  
  112. }  
  113.   
  114. /* Additional modifications when in print-view */  
  115.   
  116. .dp-highlighter.printing  
  117. {  
  118.  border: none;  
  119. }  
  120.   
  121. .dp-highlighter.printing .tools  
  122. {  
  123.  display: none !important;  
  124. }  
  125.   
  126. .dp-highlighter.printing li  
  127. {  
  128.  display: list-item !important;  
  129. }  
  130.   
  131. /* Styles for the tools */  
  132.   
  133. .dp-highlighter .tools  
  134. {  
  135.  padding: 3px 8px 3px 10px;  
  136.  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  
  137.  color: silver;  
  138.  background-color: #f8f8f8;  
  139.  padding-bottom: 10px;  
  140.  border-left: 3px solid #6CE26C;  
  141. }  
  142.   
  143. .dp-highlighter.nogutter .tools  
  144. {  
  145.  border-left: 0;  
  146. }  
  147.   
  148. .dp-highlighter.collapsed .tools  
  149. {  
  150.  border-bottom: 0;  
  151. }  
  152.   
  153. .dp-highlighter .tools a  
  154. {  
  155.  font-size: 9px;  
  156.  color: #a0a0a0;  
  157.  background-color: inherit;  
  158.  text-decoration: none;  
  159.  margin-right: 10px;  
  160. }  
  161.   
  162. .dp-highlighter .tools a:hover  
  163. {  
  164.  color: red;  
  165.  background-color: inherit;  
  166.  text-decoration: underline;  
  167. }  
  168.   
  169. /* About dialog styles */  
  170.   
  171. .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }  
  172. .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }  
  173. .dp-about td { padding: 10px; vertical-align: top; }  
  174. .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }  
  175. .dp-about .title { color: red; background-color: inherit; font-weight: bold; }  
  176. .dp-about .para { margin: 0 0 4px 0; }  
  177. .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }  
  178. .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }  
  179.   
  180. /* Language specific styles */  
  181.   
  182. .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }  
  183. .dp-highlighter .string { color: blue; background-color: inherit; }  
  184. .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }  
  185. .dp-highlighter .preprocessor { color: gray; background-color: inherit; } 


before </b:skin> tag
3. Paste the followig code before </head> tag



view plainprint?
  1. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
  2. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
  3. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
  4. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
  5. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
  6. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
  7. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
  8. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
  9. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
  10. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
  11. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
  12. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
  13. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>  


4. Paste the following code before </body> tag.

view plainprint?
  1. <script language="javascript">  
  2. dp.SyntaxHighlighter.BloggerMode();  
  3. dp.SyntaxHighlighter.HighlightAll('code');  
  4. </script>  
5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>




Read more »

Posted in:

30 Jan 2014

Adding floating social media sharing buttons

No comments

1. Add widget in layout style
2. Paste below script
3. Put down blog post and save



<!-- floating share bar Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.myfounted.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->



Done
Read more »

Posted in:

 

Recent post

Loading...
Ping your blog, website, or RSS feed for Free Likerr.eu

Contact Us

Name

Email *

Message *