Tags: Blogging / Google / How To / Widgets

How To Display HTML CSS or JavaScript Code In Blogger Posts

- Tuesday, 29 September 2015

If you want to show HTML, CSS, JavaScript, or PHP Codes with Syntax Highlighter in your blogger posts with some beautiful styles, tables & with your logo then the problem is solved because i'm going to show you how can you do this easily and fast on your blog. Actually it's original name is (Code Highlighter) or you can call (Syntax Highlighter). Sometime people want to insert HTML, CSS code directly into blogger post but they get an error message that you can't do this in HTML post editor. But don't you worry everything is possible here.

How To Insert CSS, JavaScript, HTML Codes In Blogger Posts? it's the most common question asked by blog owners especially when they're working on codes or running tech site to showing widgets codes in blogger posts.

So today i will show you how to do with some easy steps and make your codes more stylish in box, 

In short as you know i love to share unique & long information with short tricks. I hate to waste your or mine time here so let's get to the point,



I know you love to see Demo so i'm going to show here below,

Demo

Follow my steps,

1: Go To Blogger

2: Select Your Blog

3: Click Templates

Picture Help / Example

4: Select (Edit HTML)

Picture Help / Example

5: Click Anywhere In HTML Just Press CTRL + F & Find ]]></b:skin> Code Like Below In Example Picture

Picture Help / Example

6: Past Below Code Above ]]></b:skin> Just Like In Example Picture Below,

Code:

.post blockquote {
background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfKS-rvYGVBdECuLY9dkZyu7lLdb6EQoVDNamy01u-ZBH1_H5P-caMqz67YlRG29Oj9CtYJUAArT6J1ILmUmghEs1Pt2-f_rhkvqFrLHSBtK416V8n4ne7s7_uL7kGoZQaXuL0AEde4A/h120/Copyright+Logo+For+HTMl+Code+Highlighter.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

Picture Help / Example

7: Now Go To Posts

Picture Help / Example

8: Select Any Text You Want To Show In Stylish Box & Click (Quote) Button Like Below In Picture. 

Picture Help / Example

9: It's work only in normal (Compose) area don't change to HTML editor in blogger posts. 

Customization 

10: Change Yellow Highlight URL From Step 6 With Your Own (c) Copyright Image, 

Note: If you don't want to show image just remove URL and keep it simple without image. 

11: Change Red Highlight Color From 6 Step Code & It's Background Color Select Your Favorite Color. 

Note: I will recommend you to keep it white color like it's in demo version. 

Leave comments for suggestions/feedback or If you are facing any problem just let me know so that I could help. Stay tuned for upcoming posts like this. Peace and blessings :)

Tags: Blogging / Facebook / How To / Widgets

How To Add One Time Popup Facebook Like Box With X Button

- Monday, 19 May 2014

Don't waste time to read lot of articles on One Time Facebook Popup Like Box just add the following code into your Blogger and enjoy the fresh & latest facebook like box.


Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLifKdjK4sAqabU8WLrYTsNv-BXMTy2zr4keyGJyjNrH_Z5VVm97mHX9T7-7ad5_xxXuW7qDjlPSdJ4jrYYLFHXOep1E2D5hGN6Oa62sH9f4TZb03xYyj7u6wLqR_xN_RNKaA-xZUDcww_/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>


<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('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/imshankingkhan&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>


Note 1: Just replace the red code from above the code with your facebook page username.

Note 2: If you like box appear on every page on your blog then just remove the green text from above the code.


Message: Comment here if you have any problem to add this on your blogger blog. Thanks