Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

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

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
,
Subscribe to: Posts ( Atom )