Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Share Under Everypost and Ads Feature Optimized

Share Underpost With Full Box and Ads Feature Optimized - Welcome to my blog leetblogger.com. Either because there is no work or anything, I fill vacation time with blogging activities. Okay here we go. This time I will give you a fresh tutorial. Namely how to create a box that contains a full share, email subscribe and and Ads Optimazation.
Share Underpost With Full Box and Ads Feature Optimized

Features:

Share on Facebook
Share on Twitter
Share on Google+
More Share ✚ (All Socail Networks)
Email Subscribe
Ads with Size 350x250

Share Under Everypost and Ads Feature Optimized

First of all, put the following code above ]]></b:skin> or </style>
.box-underpost{width:100%;height:auto;padding:0;margin:0 auto;position:relative;font-size:14px;background:#eee;}
.box-left{width:50%;height:250px;padding:0;float:left;background:#fff;}
.box-right{width:50%;height:250px;padding:0;float:right;text-align: center;}
.title-share{margin:0 0 1px;font-size:18px;font-family: Oswald;color:#333;text-transform:uppercase;display:block;background:#aaa;padding-left:30px;height:40px;line-height:40px}
.fb{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.fb-on,.tw-on,.gp-on,.more-shareon{position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
.print-boxon{position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
.fb-on span, .tw-on span,.gp-on span,.more-shareon span,.email-title span,.print-boxon span{margin-left:30px;}
.fb:hover .fb-on,.tw:hover .tw-on,.gp:hover .gp-on,.more-share:hover .more-shareon,.submit-email:hover .email-title,.print-box:hover .print-boxon{display:none;}
.tw,.gp{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.more-share{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:0px 6px;text-decoration:none;margin-left:30px}
.submit-email{text-align:left;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.submitbutton {background: #FF8000;border: none;font: 12px Oswald;color: #fff;height: 25px;padding:0 12px;top: 5px;right:8px;text-transform:uppercase;cursor: pointer;position:absolute;}
.enteryouremail {background: #fff !important;border:none;padding: 0px 70px 0 7px;color: #a19999;font-size: 12px;height: 25px;width: 60%;margin-left:30px;}
.enteryouremail:focus{outline:none}
.email-title{text-decoration:none;position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
Then put the following code under the code <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='box-underpost'>
<div class='box-left'>
<div class='title-share'>Share this article :</div>
<div class='fb'>
<div class='fb-on'><span>Share on Facebook</span></div>
<div style='position:absolute;top:-7px;left:30px'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-width='90'/></div>
</div>
<div class='tw'>
<div class='tw-on'><span>Share on Twitter</span></div>
<div style='position:absolute;top:5px;left:30px'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
<div class='gp'>
<div class='gp-on'><span>Share on Google+</span></div>
<div style='position:absolute;top:5px;left:30px'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/></div>
</div>
<div class='more-share'>
<div class='more-shareon'><span>More Share</span></div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>&#10010;</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
<div class='submit-email'>
<div class='email-title'><span>Subscribe Here</span></div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=leetbloggers&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='enteryouremail' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input name='uri' type='hidden' value='leetbloggers'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/></form>
</div>
</div>
<div class='box-right'>
<a href='http://www.leetblogger.com' rel='nofollow' title='Leet Blogger'><img alt='Leet Blogger' height='250' src='http://itmasti.com/wp-content/uploads/2014/04/350x250.png' width='300'/></a>
</div>
<div style='clear: both;'/>
</div>
  </b:if>
Replace "leetbloggers" in the code and replace the code Email Subscribe.
http://www.leetblogger.com with your link
http://itmasti.com/wp-content/uploads/2014/04/350x250.png with your image

I hope You Understand :) Any Defficult You Can Comment..



Read More
, , ,

Creating Google AdSense Text Ads

After modification of the template, I tried to create text ads that resemble Google AdSense. Apparently a lot of friends who Don't know about this.
Actually, this is only the manipulation of CSS and jQuery just a little spice.
Appearance more or less like this picture:
Creating Google AdSense Text Ads

Step 1: Save this code above </head>
<script src='https://googledrive.com/host/0B15D6LP8b9wYVV9aTVVSejdyT0U/ad-text-ga.js' type='text/javascript'/>
Step 2: Save the CSS code above ]]></b:skin> or </style>
/* Text Ads by Leetblogger.com
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}
Step 3: Save this code in the widget HTM /JavaScript
<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://leetblogger.com' target='_blank'>Blogger Tutorial</a>
            <a href='http://leetblogger.com' target='_blank'>leetblogger.com</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://leetblogger.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxAazrcY81a-mdfhUzoHjlC6DiKNUuPwUcvcKZHUN0LRYmlZavvWRN4PQw-m1aZ6l9hZ_N62uo-MfcpfpuiRVc_zdYHHYEz7B6m8BZ0Hy9hi2QsJyJDzUWUAOhwzMG4GwHohb5853Iw/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Advertise Here">
        <span class='isi-iklan'><a class='judul' href='http://www.leetblogger.com/2014/02/10-mistakes-to-avoid-in-seo-optimization.html' target='_blank'>Advertise Here</a>
            <a href='http://leetblogger.com/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>leetblogger.com</a>
            <span class='isi'>Your ad here - leetblogger.com
            <a class='panah-besar' href='http://www.leetblogger.com/2014/02/10-mistakes-to-avoid-in-seo-optimization.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxAazrcY81a-mdfhUzoHjlC6DiKNUuPwUcvcKZHUN0LRYmlZavvWRN4PQw-m1aZ6l9hZ_N62uo-MfcpfpuiRVc_zdYHHYEz7B6m8BZ0Hy9hi2QsJyJDzUWUAOhwzMG4GwHohb5853Iw/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Advertise Here">
        <span class='isi-iklan'><a class='judul' href='http://www.leetblogger.com/2014/02/share-to-unlock-download-button.html' target='_blank'>Advertise Here</a>
            <a href='http://www.leetblogger.com/2014/02/share-to-unlock-download-button.html' target='_blank'>leetblogger.com</a>
            <span class='isi'>Your ad here - leetblogger.com
            <a class='panah-besar' href='http://www.leetblogger.com/2014/02/share-to-unlock-download-button.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxAazrcY81a-mdfhUzoHjlC6DiKNUuPwUcvcKZHUN0LRYmlZavvWRN4PQw-m1aZ6l9hZ_N62uo-MfcpfpuiRVc_zdYHHYEz7B6m8BZ0Hy9hi2QsJyJDzUWUAOhwzMG4GwHohb5853Iw/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Advertise Here">
        <span class='isi-iklan'><a class='judul' href='http://www.leetblogger.com/2014/02/tips-to-get-approval-from-google-adsense.html' target='_blank'>Advertise Here</a>
            <a href='http://www.leetblogger.com/2014/02/tips-to-get-approval-from-google-adsense.html' target='_blank'>leetblogger.com</a>
        <span class='isi'>Your ad here - leetblogger.com
            <a class='panah-besar' href='http://www.leetblogger.com/2014/02/tips-to-get-approval-from-google-adsense.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxAazrcY81a-mdfhUzoHjlC6DiKNUuPwUcvcKZHUN0LRYmlZavvWRN4PQw-m1aZ6l9hZ_N62uo-MfcpfpuiRVc_zdYHHYEz7B6m8BZ0Hy9hi2QsJyJDzUWUAOhwzMG4GwHohb5853Iw/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Ads by Leet Blogger</span>
    <span class='info-icon'><a href='http://www.leetblogger.com/2014/02/blogger-seo-on-comments-on-comments.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHucRTJpxAo3I0pyKDp6Ck4Ob5MA-SpCFfZwR_AHNsy9R_NFKsG13juT3S1vPfgOr8_CMF6O917AjagPe2wrnPlpDLXk_dkRZRovB0no6NClgVoUpEN4NEaWoIaagm10zmLmhW-NkpfAw/s1600/info-iklan.png'/></a></span>    
</div>
Please edit the title and link.

» DO NOT FORGET TO LIKE N Yeach comments ...
Read More
, ,

G+ Followers and Facebook Like Box Sliding Widgets

This post is a continuation of my previous post to add a widget on Google+ Followers Facebook Like Box Sliding widget we created yesterday. CSS code Google+ Followers and Facebook Like Box Sliding widgets is actually same just a little addition to the widget that is above.
G+ Followers and Facebook Like Box Sliding Widgets
Here we add the z-index code for our widget on the top shelf in his hover so that when the widget on-hover over it, the icon does not preclude the bottom widget. For more details Click on Demo button below.

See also: Sliding Facebook Like Box With CSS


Placement of CSS code and HTML together with the placement of the codes for sliding Facebook Like Box in my previous post.

CSS code 

I have this CSS code to combine Facebook Like Box code and Google+ Followers, so for those who have installed a sliding Facebook Like Box on my previous post, Replace the CSS code below.
.socialbox{
    position:fixed;
    top:100px;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
    z-index:2;
}
.socialbox2{
    position:fixed;
    top:145px;
    right:-279px;
    height:230px;
    width:258px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gpicon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
    right:0;
}

HTML Code

For the HTML code is the same, if you have installed a sliding Facebook Like Box on my previous post, please replace with its HTML code with the HTML code below.
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/leetblogger" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/116029778995810739772" data-source="blogger:blog:followers" data-width="260"></div>
</div>
Replace the Facebook profile URL and your Google+ profile above the Facebook profile URL and your Google+ profile.Then add facebook javascript SDK and javascript Google+ below.

Javascript Facebook 

Save the below code <body>
<div id='fb-root'/>
<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.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Javascript Google+

Save the above code </body>
<script type='text/javascript'>
 (function() {
  var po = document.createElement('script');      
  po.type = 'text/javascript';      
  po.async = true;      
  po.src = 'https://apis.google.com/js/plusone.js';      
  var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s);
 })();
</script>
Then please do not forget to make sure your blog is already using jquery library like this (any version).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

» DO NOT FORGET TO LIKE N Yeach comments ...

Read More
,

Sliding Facebook Like Box With CSS3

I see there are many blogs that use a sliding facebook like box. Quite interesting as well as we can a little messing around with fb like box on the blog with our mouse. But I see many blogs that use a sliding fb like box using jquery to show and hide the effects of his or her sliding.
Sliding Facebook Like Box With CSS3
For that I am now trying to make sliding the facebook like box using only CSS3 or javascript jquery without adding to the effect of sliding it in order not to increase the burden resulting from the addition of the blog loading javascript gif as shown below.

CSS used was simple enough just to create icons and boxes where fb facebook like box as shown below. Please save the CSS code above the code ]]></b:skin> or </style> 
.socialbox{
    position:fixed;
    top:10%;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
}
Then, because it uses HTML5 fb like box, please add facebook javascript code just below <body>.
<div id='fb-root'/>
<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.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Then add the following HTML code above the code </body>
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/leetblogger" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
Please replace the URL with the URL of this https://www.facebook.com/leetblogger your facebook.

Facebook like box so that it can be run, please make sure your blog is already using jquery library like this (any version).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
Easy is not it Good luck ....

» DO NOT FORGET TO LIKE N Yeach comments ... 
Read More
, ,

How to Make Demo and Download Button


How to Make Demo and Download Button
How to Make Demo and Download Button The Cool  - Yes that tutorial that will I give to all my friend, and download the demo button which I think is cool, is usually the key demo and is often used to download, share templates, share games, and download the demo button also made ​​into cool stuff,  ok immediately wrote see the demo below.
Demo Download
Cool is not it.  Let's follow the tutorial to make the download button and a cool demo below.

  1. Sign in to Blogger
  2. Select Dashboard> Template> Edit HTML
  3. Then add the following code above ]]></b:skin>
/* Button Demo and Download by leetblogger.com
----------------------------------------------- */
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}
4. Save Template
HTML code can mate save / append mode in post HTML not compose
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.leetblogger.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.leetblogger.com/" target="_blank">Download</a>
</div>
Replace http://www.leetblogger.com/ with your URL. Done!




Read More
, ,

10 Stylish Syntax Highlight for blogger

What is Syntax Highlight? 

Syntax Highlight is a text editor that is often used to display the source code is marked up as HTML , JavaScript, css etc in a programming language tutorial.
10 Stylish Syntax Highlight for blogger
And previously I've shared how to make Syntax Highlight on blogs and this time I will share some of the Syntax Highlighter Theme that you can use to modify the previous Syntax Highlight or use to make an appearance in your post code more stable .

Here are 10 Syntax Highlight Theme Collections that you can choose the following demo .

All you need to do to use this theme are you staying put Css Syntax Highlight below right above the code ]]></b:skin>

Note : If you already use the defaut theme that I share in my post about how to install Syntax Highlight is Css Syntax Highlight replace you put above ]]></b:skin>

Syntax Highlight Themes Collection

1. Pojoaque
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  color: #DCCF8F;
  background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}
Demo!

2. Solarized Dark
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  background: #002b36; color: #839496;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id {
  color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}
Demo!

3. School Book
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 15px 0.5em 0.5em 30px;
  font-size: 11px !important;
  line-height:16px !important;
}
pre{
  background:#f6f6ae url('https://sites.google.com/site/problogiz/home/school_book.png');
  border-top: solid 2px #d2e8b9;
  border-bottom: solid 1px #d2e8b9;
}
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color:#005599;
  font-weight:bold;
}
pre code,
pre .subst,
pre .tag .keyword {
  color: #3E5915;
}
pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .nginx .built_in,
pre .tex .command {
  color: #2C009F;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket {
  color: #E60415;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .xml .tag .title,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command,
pre .request,
pre .status {
  font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
Demo!

4. Rainbow
/* syntax highlight by www.leetblogger.com */
pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }
pre code {
  display: block; padding: 0.5em;
  background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
   color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #969896;
  font-style: italic;
}
pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
  color: #cc99cc;
}
pre .number { color: #f99157; }
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #8abeb7;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
  color: #b5bd68;
}
pre .class .keyword
{
  color: #f2777a;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
   color: #ffcc66;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
  font-weight: bold;
}
pre .attribute,
pre .clojure .title {
  color: #81a2be;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #f99157;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #eee8d5;
}
Demo!

5. Monokai
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  background: #272822;
}
pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}
pre code {
  color: #DDD;
}
pre code .constant {
 color: #66D9EF;
}
pre .class .title {
 color: white;
}
pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
 color: #BF79DB;
}
pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
  font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
Demo!

6. Tommorow Night Blue
/* syntax highlight by www.leetblogger.com */
.tomorrow-comment, pre .comment, pre .title {
  color: #7285b7;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #ff9da4;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #ffc58f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #ffeead;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #d1f1a9;
}
.tomorrow-aqua, pre .css .hexcolor {
  color: #99ffff;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #bbdaff;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #ebbbff;
}
pre code {
  display: block;
  background: #002451;
  color: white;
  padding: 0.5em;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
Demo!

7. Brown Papper
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  background:#b7a68e url(('https://sites.google.com/site/problogiz/home/brown_papersq.png');
}
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special,
pre .request,
pre .status {
  color:#005599;
  font-weight:bold;
}
pre code,
pre .subst,
pre .tag .keyword {
  color: #363C69;
}
pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .number {
  color: #2C009F;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula {
  color: #802022;
}
pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command {
  font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.8;
}
Demo!

8. Sunburst
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}
pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}
pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}
pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}
pre .subst {
  color: #DAEFA3;
}
pre .regexp {
  color: #E9C062;
}
pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}
pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}
pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}
pre .css .class {
  color: #9B703F;
}
pre .rules .keyword {
  color: #C5AF75;
}
pre .rules .value {
  color: #CF6A4C;
}
pre .css .id {
  color: #8B98AB;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}
pre .preprocessor {
  color: #8996A8;
}
pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}
pre .css .function {
  color: #DAD085;
}
pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}
pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}
pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}
pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
Demo!

9. Google Code
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  background: white; color: black;
}
pre .comment,
pre .template_comment,
pre .javadoc,
pre .comment * {
  color: #800;
}
pre .keyword,
pre .method,
pre .list .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tag .title,
pre .setting .value,
pre .winutils,
pre .tex .command,
pre .http .title,
pre .request,
pre .status {
  color: #008;
}
pre .envvar,
pre .tex .special {
  color: #660;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .regexp {
  color: #080;
}
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .ini .title,
pre .shebang,
pre .prompt,
pre .hexcolor,
pre .rules .value,
pre .css .value .number,
pre .literal,
pre .symbol,
pre .ruby .symbol .string,
pre .number,
pre .css .function,
pre .clojure .attribute {
  color: #066;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .typename,
pre .tag .attribute,
pre .doctype,
pre .class .id,
pre .built_in,
pre .setting,
pre .params,
pre .variable,
pre .clojure .title {
  color: #606;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .subst {
  color: #000;
}
pre .css .class, pre .css .id {
  color: #9B703F;
}
pre .value .important {
  color: #ff7700;
  font-weight: bold;
}
pre .rules .keyword {
  color: #C5AF75;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}
pre .preprocessor,
pre .preprocessor * {
  color: #444;
}
pre .tex .formula {
  background-color: #EEE;
  font-style: italic;
}
pre .diff .header,
pre .chunk {
  color: #808080;
  font-weight: bold;
}
pre .diff .change {
  background-color: #BCCFF9;
}
pre .addition {
  background-color: #BAEEBA;
}
pre .deletion {
  background-color: #FFC8BD;
}
pre .comment .yardoctag {
  font-weight: bold;
}
Demo!

10. GitHub
/* syntax highlight by www.leetblogger.com */
pre code {
  display: block; padding: 0.5em;
  color: #333;
  background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
  color: #333;
  font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
  color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}
pre .title,
pre .id {
  color: #900;
  font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
  font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
  color: #458;
  font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
  color: #008080
}
pre .regexp {
  color: #009926
}
pre .class {
  color: #458;
  font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
  color: #990073
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
  color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}
pre .deletion {
  background: #fdd
}
pre .addition {
  background: #dfd
}
pre .diff .change {
  background: #0086b3
}
pre .chunk {
  color: #aaa
}
Demo!

hopefully this article useful. How to make Syntax Highlight on blogs
Read More
,
Subscribe to: Posts ( Atom )