Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. 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
, , ,

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

How to Make Valid XHTML Blogger Templates SEO

How to Make Valid XHTML Blogger Templates - Reduce Total Error Templates Blogspot. Perhaps many who have discussed about how to create a blog template xhtml valid or invalid html5 by reducing the number of errors in templates and widgets. Where the diminishing number of errors on the template, it will be easier for the robot browse our blog and would affect the quality of the SEO of a blog.
To check the validation of a blog template can use the tools of the W3C Markup Validation Service by visiting http://validator.w3.org/ There, we just enter the url of the blog and can determine the amount of error of our blog . Before performing the validation , it is better to use other blogs to trial, if it does not delete the widget results in the perceived error or copy all the contents of the widget to the notepad.

How to Make a Blog Templates Valid XHTML / Valid HTML5

1. Login to your Blogger > Templates > Edit HTML > Expand Widget Templates check settings
2. Change 'DOCTYPE declaration , find the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
remove all the above code and replace it with the following code 
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
after the change of code </html> to </HTML> 
3. Delete the existing comment on the CSS declaration, code search dash (-----) and delete them. example: 
/* ----------------------
Name: Leet Blogger Responsive Template
Date : 16 Jan 2014
Url : https://www.facebook.com/sec.researcher
-------------------------*/
Results become
/* Name: Leet Blogger Responsive Template
Date : 16 Jan 2014
Url : https://www.facebook.com/sec.researcher */
4. Remove the meta tag <b:include data='blog' name='all-head-content'/>
5. Removing the Navigation Bar default blogger, search <body> code and add the following code on top spot 
<!-- <body><div></div> -->
6. Removing Icon QuickEdit or images screwdriver, look for the code <b:include name='quickedit'/> 
if you have found clear all, do not forget if you later add a new widget to remove the code again. 

7. Removing Post icon, locate the following code 
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>
Remove and replace with the following code
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
8. adding types type = "text/javascript" on all JavaScript code and type type = "text/css" for all existing css, either in templates, post or in a widget. example:
<script src="https://leetblogger.googlecode.com/files/code.js"></script>
<script src="https://leetblogger.googlecode.com/files/coba.css"></script>
Change it to
<script type="text/javascript" src="https://leetblogger.googlecode.com/files/code.js"></script>
<script type="text/css" src="https://leetblogger.googlecode.com/files/coba.css"></script>
9. Hiding page navigation on the main page, look for the code <b:include name='nextprev'/> replace with the following code 
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
10. Adding Alt attributes on all images, examples 
<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png' width='75'/>
Change becomes as below
<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png' width='75'/>
11. Remove all the meta tags resulting Error in blog template. Use meta tags follows Valid HTML 5 
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content='Your Blog Description' name='description'/>
<meta content=’Keywords of your blog’ name=’keywords’/></b:if>
<link href=’http://leetblogger.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://leetblogger.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
<link href=’http://leetblogger.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
<meta content=’verification code from google webmaster’ name=’google-site-verification’/>
<meta content=’alexa verification code’ name=’alexaVerifyID’/>
<meta content=’verification code from bing’ name=’msvalidate.01′/>
<meta content=’your Name’ name=’Author’/>
12. Addressing error css templates bundle, remove code <b:skin><![CDATA[
replace with the following code 
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>
13. Hide widgets on the main page.
<b:if cond='data:blog.homepageUrl != data:blog.url'>
The hidden widget you Want
</b:if>
14. Put it under the following script just below <head> 
<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
15. At the time of posting pictures remove attributes Anchor='1' and border='0' alt dressing and add the title attribute. The following example is a standard image format blogspot 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png" /></a></div>
Change it to
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Leet Blogger" title="Leet Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOjFdZ-NLj0YZbVtJIJozDwGKIitbZ8uUgysBxa-b-iEsh8RCrV4AMMWCaxLnSeqPc0aY641JOCsZelzn2nPjp28mPYQaOeKV_1bI-zUIPWkhRJKqUNE4EVRpYKlX73aRIRdN8NVgfis/s1600/logo.png" /></a></div>
16. Never use tag <center> to make writing or drawing centered, use the following code if you do not want to result in either an html error in the post or in the html widget. 
<div style="text-align: center;">Fill Widget</div>
If you really like this Post comment below! Thanks....
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
,

How to Create Syntax Highlight Blog

How to Make a Syntax Highlight -  This time we I'll Share How to Create Syntax Highlight column that serves as the tutorial code as used on a website or blog tutorials.
Indeed many websites or blogs that discuss about how to install and use a syntax highlighter and code sharing and how to install syntax highlighter on blogs and websites (either using javascript, jQuery, and HTML markup) as Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, Syntax Highlighting in JavaScript, Ultraviolet and others, but here I prefer HIGHLIGHT. This JS with grounds can work more easily and automatically find blocks of code, detects the type of language, and highlighting (highlight code).
HIGHLIGHT.JS recognize at least 54 language programs and bundled with 26 style theme. For that I am just going to choose to be only 3 language code, which is most often used by bloggers (in making a tutorial on her blog) most of the bloggers only to display the source code, such as code CSS, Javascript, and HTML mark up. before we made,
we first identify the sense of what it is Syntax Highlight

DEFINITIONS SYNTAX HIGHLIGHT

Syntax Highlight the text editor was featured on the show or highlight text-especially source code-in different colors and fonts according to the category of terms. By using SyntaxHighlighter ease in writing the source code or a structured language such as a programming language (programming language) or markup language (markup language).
Implementation of syntax higlighter on web pages, blogs or online forum is often used as a code prensentasi the sample source code (such as Javascript , HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C and many other programming languages.) you want to display.

HOW TO INSTALL Syntax Highlighter

To install Sntax Highlighter on the blog, the first step to do is to put this script right above the </head> or it could be before the code </body>

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>



<script>hljs.initHighlightingOnLoad();</script>
The next step is to install the css to adjust his style of Syntax Highlighter.

CSS SYNTAX HIGHLIGHT


/* CSS SYNTAX HIGHLIGHT By LeetBlogger.com */

pre code {


; padding: 0.5em;
color: #DCCF8

display: bloc
kF;


ground: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre

bac
k .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {


avascript .title,

color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .
j
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,


66;
}
pre .ti

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468
9tle,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,


ant,
pre .class 

pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .cons
t.title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{


f .change,
pre .s

color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .di
fpecial,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {




background: #073642;




}
Save the template. To use Syntax Highlight on when writing a post, we just need to add tags <pre> and <code>
 like this

<pre><code>



Fill Code Javascript, jQuery or CSS code or HTML Code



here ......</code></pre>
Done. 
For Your Easy I Also Create toool for Pre Code Generator. Just Paste code and Click on convertor.
Syntax Highlights There are many styles that you can use to display a perfect code. And you can see it here . Or in Page Syntax For Bloggers Collection Highlights. 
In Next article we will post More Stylish Syntax Highlights. So Keep Update with via Email.
And up here first article How to Create Syntax Highlight this time and hopefully useful.



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

Make a Contact Form With Blogger Widget

This contact form, when filled will immediately send an email to the owner of the blog. One more thing that is new is the presence of a blogger widget for the contact form (Contact Form) , as seen in the following figure:
Contact Form With Blogger Widget

Steps:


  1. From the Dashboard page, select Layout .
  2. Click on Add Gadget in the column you want.
  3. After appearing popup blogger, click Other and select the Contact form .

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

Alert Info Note Tags with beautifull css Effect blogger

Tags with beautifull css Effect blogger

In my previous Post i show to how to add tips warning notes tags, now i posting Alert Info Note Tags in css with beautifull effect, i like it too much, so i thought why not share all of you, its very simple and easy you can add in you blogger. These Tags makes cool and attractive you post.

  • Login ke Blogger
  • Dashboard » Template » Edit HTML
  • Put the following code just above the code: ]]></b:skin> or </style>

/*-----alert, info, note by www.leetblogger.com----*/
.alert, .info, .note {
margin: 10px 0px; padding: 9px 10px 9px 40px; border-width: 1px 0px; 
border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(240, 186, 162); 
border-bottom-color: rgb(240, 186, 162); outline: 0px; font-size: 14px; 
vertical-align: baseline;
line-height: 22px; 
background-position: 12px 13px; 
background-repeat: no-repeat no-repeat;
}

.alert {
background: #FFD9C8  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Rz7CXu2Xv5Y1jouScrcWDn1xtBJlpSsHuMQIW51f7KAConG6ZklTztZSwRxTiE8NJ-vu3iPOBjZUyFJEW2c5CDS6SfX5ZIddyXZVswFoMYQl8x8n5BhFsN4ocs_HdBCOeaoeH3ATzIA/h120/alert.png') no-repeat 12px 8px;
}
.info {
 background: #EDFCD5 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSY6p4mw6R853wyeuYkyOMgrrmKTuolqltU-IYg32RviQwYRzuhe06b3kW0rg4kKj3dVykIL9exQiUfXPlExqpGqPNjKnO18M9MIwRkZnhnTNZstb4tr8Ugsk0v9xsmcUqlmh1B_rdMY/h120/info.png')no-repeat 12px 8px;
}
.note {
background: #FEF6D2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSibolUN1XzG3AIbgk4mm88tLApzlUwHqJjBS9mgojmpp_sIFx1r0HiWsVTcRsN0kM0fVgtcWxFSUVXgWXozxR6vHJpi8IoNZg-kesiUkgPEXR2vKVH9AA-joIHGpTqUnFAlazN0SgZmY/h120/note.png') no-repeat 12px 8px;
}
If you want to include in the post, just choose which one to use blocks. (Write the code in HTML mode).

  • Save Template

For alert use code like this one:
<div class='alert'>
Leet Blogger | Leetblogger.com - All About Bloggiing
</div>
For info:
<div class='info'>
Leet Blogger | Leetblogger.com - All About Bloggiing
</div>
For Note:
<div class='note'>
Leet Blogger | Leetblogger.com - All About Bloggiing
</div>
You can also use the tag p in the writing of the HTML code, for example:
<p class='info'>
Leet Blogger | Leetblogger.com - All About Bloggiing
</p>

Leet Blogger | Leetblogger.com - All About Bloggiing
Leet Blogger | Leetblogger.com - All About Bloggiing
Leet Blogger | Leetblogger.com - All About Bloggiing
» DO NOT FORGET TO LIKE N Yeach comments ...
Read More
,

Create a Sitemap (Site Map) In Sidebar Blog

Create a Sitemap

Advantages of placing a site map (site map) on the sidebar of the blog is to allow visitors to see the entire article without having to open the contents page. Visitors only see it on the sidebar . If you want to create a sitemap of this, you should place it on the sidebar rather wide, you can put them there. Or you can also place it on a separate page like on this blog .

Featured of My Script :


  • Easy to use, only two line script.
  • Categorized by Label.
  • Can use for Multiple label in every posts.
  • Give “New !!” Text for 10 latest posts.

Site Map

How to make are as follows:


  • From the pages of the Dashboard > Layout 
  • Click Add Gadget and select HTML/JavaScript
  • Enter (copy-paste) script follows (use Control C)

<div style="overflow:auto; padding-left:5px; width:100%; height: 250px;">
<script language="javascript">
numposts=9999;
home_page="your-blog.com";
explanpost="New!";
</script>
<ul><script style="text/javascript" src="https://googledrive.com/host/0B15D6LP8b9wYUzlvXzAtU0ZvSFE"></script></ul>
</div>
  • You can remove the bullets (<ul> and </ ul>) if desired.
  • Adjust the size of the width of the sidebar of your blog (you can use the size pixcell ) and change the height of as you wish.
  • Change the number numposts (read the article site map ) if you like.
  • Replace your-blog.com suit your blog URL.
  • Change explanpost her with the words according to your taste, for example: New!, Newer!, Still Warm,  etc..
  • When finished, save the results.
» DO NOT FORGET TO LIKE N Yeach comments ...

Read More

How to insert/upload Images to Blogs

Bloggers have a collection of video and share it to your friends? Or have ever been uploaded to Youtube ? How do I insert a video into a blog? Or have a collection of photos and images and want to put it into a blog post. Let us follow his ways below:

How to insert images into the blog

Inserting an image can be done in 2 ways either dipostingan or by adding the gadget (installed in the sidebar/footer/header).

A. Inserting images in blog posts

Please log in to dashboard click the new entry to make the newest post.
If you want to put the picture right below the title of the blog or above articles can directly click on the picture next to the word icon Link
If you want to insert an image after a certain paragraph first sentence please type the desired
how to put a photo in a blog post
If you want to insert an image from a collection of photos on the computer, select the upload > Select File> looking at a computer folder of photos you want to upload. if it appears) as figure 2 below, click the add selected.
If you want to insert an image from a collection that has been hosted for example in Picassa or google code select from Picassa web albums or From a URL , for example here I will put up a picture of the URL hosting on google code .

How:
  • Choose From a URL
  • Enter the URL/Link in the form provided
  • If it appears the preview picture Click the Add Selected
insert images in a blog post with a URL



Done and Images in blog posts have been entered

B. Put a picture in the sidebar/footer

Not much different from the first one way, it's just that we enter the picture by adding the gadget and select PICTURE.
  • Login to dashboard
  • Layout 
  • Select/and click the link or the Image Plus sign (+) will appear below
put the picture in the gadget blogger
The trick;
  1. Buddy may also not be entitled
  2. Caption function "alt image" if the link is still a target of internal links (links in the same blog, I suggest insert captions)
  3. Relationship, may in the content link URL specified either exit or exit blogs, up buddy
  4. Selection of pictures, just like the way a. above, if you want to upload from your computer select from the computer, if from web / URL , enter the URL
  5. Tick ​​Shrink pictures if the sidebar widths of 300pixel









Read More
Subscribe to: Posts ( Atom )