September 2013 | testcoba2problogiz

Home » Archives for September 2013

vector collection

Unknown

Senin, September 30, 2013

No Comment

blogger info

header bg

SOCIAL ICONS SPRITES

Unknown

Senin, September 30, 2013

8 komentar

blogger info

10 koleksi SyntaxHighlighter keren

Unknown

Minggu, September 29, 2013

3 komentar

blogger tutorial

proBlogiz

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Kali ini Problogiz, ingin sharing koleksi Syntax Highlight yang keren dengan CSS dan Javascript khusus untuk Blogger. Ada 10 koleksi SyntaxHighlighter keren yang saya kumpulkan dari sumbernya softwaremaniacs.org, yang dapat Anda gunakan free untuk menampilkan source code (kode box) di blog-blog Anda. Memang ada banyak artikel atau situs yang berbagi kode dan cara memasang SyntaxHighlighter di halaman blog/website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainnya. Saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code, yang paling sering digunakan oleh blogger (dalam tutorial blog-nya) untuk menampilkan source code, yaitu kode CSS, Javascript, dan mark up HTML. Dan 10 style theme Syntax Highlight pilihan untuk Sobat Blogger!!

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

1. Untuk mengaktifkan fitur ini dibutuhkan javascript berikut, yang dapat Anda letakkan di template tepat diatas tag </head> atau bisa juga sebelum tag </body>.

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2. Kemudian dilanjutkan meletakan style highlighting (CSS), pilihlah salah satu dari 10 macam style dibawah ini (lihat Demo Live-nya sebelum memutuskan) mana yang cocok untuk Blog Sobat. Copy Kode CSS-nya (klik 2x untuk select all) dan letakkan tepat diatas tag ]]></b:skin>, lalu Simpan Template.

3. Gunakan mark up HTML berikut. untuk menerapkan SyntaxHighlighter pada source code di halaman postingan Anda:


<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini...... 
</code></pre>

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque

DEMO Pojoaque SyntaxHighlighter

Kode CSS:


/*
Pojoaque Style by Jason Tate
http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
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;
}

2. Solarized - Dark

DEMO Solarized - Dark SyntaxHighlighter

Kode CSS:


/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 

*/

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;
}

3. School Book

DEMO School Book SyntaxHighlighter

Kode CSS:


/*

School Book style from goldblog.com.ua (c) Zaripov Yura

*/

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;
}

4. Rainbow

DEMO Rainbow SyntaxHighlighter

Kode CSS:


/*

Style with support for rainbow parens

*/

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;
}

5. Monokai

DEMO Monokai SyntaxHighlighter

Kode CSS:


/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

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;
}

6. Tommorow Night Blue

DEMO Tommorow Night Blue SyntaxHighlighter

Kode CSS:


/* Tomorrow Night Blue Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

.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;
}

7. Brown Papper

DEMO Brown Papper SyntaxHighlighter

Kode CSS:


/*

Brown Paper style from goldblog.com.ua (c) Zaripov Yura

*/

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;
}

8. Sunburst

DEMO Sunburst SyntaxHighlighter

Kode CSS:


/*

Sunburst-like style (c) Vasily Polovnyov

*/

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;
}

9. Google Code

DEMO Google Code SyntaxHighlighter

Kode CSS:


/*
Google Code style (c) Aahan Krish
*/
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;
}

10. GitHub

DEMO GitHub SyntaxHighlighter

Kode CSS:


/*
github.com style (c) Vasily Polovnyov
*/
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
}

Selamat Mencoba!!

Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.

Salaam,

Menu Drop Down pure CSS

Unknown

Minggu, September 29, 2013

No Comment

blogger css desain tutorial

proBlogiz

Jika Anda sedang mencari Menu Drop Down pure CSS maka disini akan dapat temukan 10 koleksi menu drop down keren dan simple. Semua drop down menu ini hanya menggunakan 100% kode CSS ( tanpa image ) dan kompatibel semua browser utama, Chrome, Mozilla Firefox, IE8,, IE9 IE10, Opera, dan Safari . Pada Desain Blog kali ini Anda bisa memilih salah satu menu navigasi dropdown keren dibawah dan serta juga source kode CSS-nya. Juga dipandu cara menambahkan dan edit menu dropdown di Blogger.

Note : untuk Anda yang menggunakan Browser IE tambahkan kode berikut diatas tag <style>

<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->

Sebelum Anda memilihnya, coba gunakan Desain Preview kami untuk melihat tampilan Live Demo-nya/Preview dari masing-masing menu dropdown tersebut.

Caranya :

Klik tombol Clear selanjutnya Anda copy ( control + c ) kode CSS serta kode HTML dibawah ini (source code dropdown menu) dan pastekan ( control + v ) di dalam area Desain Preview.

Kemudian klik tombol Preview

Coba sekarang >>> Desain Preview

Cara Pasang Menu Drop Down pada Blogger

Setelah Anda menentukan pilihan menu navigasi yang paling disukai, ikuti langkah berikut :

Masuk Blogger > pilih Tata Letak

Klik Add a Gadget atau Add a Page element

Pilih HTML/JavaScript widget

Paste semua kode Menu Drop Down tersebut dalam HTML/JavaScript widget

Klik Save

Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog. lihat gambar dibawah :

Anda bisa mengubah link-link item menu dropdown nantinya sesuai keperluan, dengan cara mengubah / edit bagian kode HTML dibawah ini :

<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>

Ganti tanda "#" dengan Link Halaman / URL halaman dan ganti juga menu item Products , Product 2, About, Contact, Sub Item dst. dengan nama atau judul halaman Anda.

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delete / hapus line html tersebut :

<li><a href="#" ><span>Nama Item</span></a></li>

10 Drop Down Menu Keren Pure CSS

1. Red Opera Drop Down Menu

source code :


#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}


<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

2. Blue Opera Drop Down Menu

source code :


#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

3. Grass Pillbox Drop Down Menu

source code :

<style>
#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
 background: #F6F8EE;
 border-bottom: 1px solid #95AA61;
 box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
 -moz-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
 -webkit-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a { 
 display: inline-block;
 font-family: Calibri, Arial, sans-serif;
 color: #333; text-decoration: none; 
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 -ms-transition: all 0.2s;
 transition: all 0.2s;
}
#cssmenu a:hover { background: #95AA61; }

#cssmenu ul { 
 list-style: none; 
 height: 34px;
 padding: 10px 0; 
}
#cssmenu > ul > li {
 float: left; 
 height: 34px;
 margin: 0 5px;
 position: relative;
}
#cssmenu > ul > li > a {
 background: #899752;
 box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 -moz-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 -webkit-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 line-height: 24px;
 padding: 5px 10px;
}
 #cssmenu > ul > li.active a {
  background: #121310;
  color: #F6F8EE;
 }

#cssmenu .has-sub ul {
 background: #F6F8EE;
 border: 1px solid #95AA61;
 border-top: 0 none;
 height: 0; overflow: hidden;
 padding: 0; position: absolute;
 opacity: 0; top: 44px; left: 0;
 width: 200%; 

 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
 content: '';
 display: block;
 padding: 0 10px;
 position: absolute;
 bottom: -10px; left: 0;
 height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
 border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 webkit-border-radius: 0 0 5px 5px;
 height: auto;
 opacity: 1;
 padding: 10px;
}

#cssmenu .has-sub li, 
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a { 
 border-radius: 5px 0 0 5px; 
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

4. Dirt Pillbox Drop Down Menu

source code :


<style>
#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
 background: #f8f5ee;
 border-bottom: 1px solid #aa9961;
 box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
 -moz-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
 -webkit-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a { 
 display: inline-block;
 font-family: Calibri, Arial, sans-serif;
 color: #131210; text-decoration: none; 
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -o-transition: all 0.2s;
 -ms-transition: all 0.2s;
 transition: all 0.2s;
}
 #cssmenu a:hover { background: #aa9961; }

#cssmenu ul { 
 list-style: none; 
 height: 34px;
 padding: 10px 0; 
}
#cssmenu > ul > li {
 float: left; 
 height: 34px;
 margin: 0 5px;
 position: relative;
}
#cssmenu > ul > li > a {
 background: #978152;
 box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 -moz-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 -webkit-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 line-height: 24px;
 padding: 5px 10px;
}
 #cssmenu > ul > li.active a {
  background: #131210;
  color: #f8f5ee;
 }

#cssmenu .has-sub ul {
 background: #f8f5ee;
 border: 1px solid #aa9961;
 border-top: 0 none;
 height: 0; overflow: hidden;
 padding: 0; position: absolute;
 opacity: 0; top: 44px; left: 0;
 width: 160px; 

 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
 content: '';
 display: block;
 padding: 0 10px;
 position: absolute;
 bottom: -10px; left: 0;
 height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
 border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 -webkit-border-radius: 0 0 5px 5px;
 height: auto;
 opacity: 1;
 padding: 10px;
}

#cssmenu .has-sub li, 
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a { 
 border-radius: 5px 0 0 5px;
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
 line-height: 120%; 
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

5. Simple Red

source code :


<style>
#cssmenu {
 border:1px solid #b9121b;
 background:#b9121b;
 }
#cssmenu > ul {
 padding:1px 0;
 margin:0px;
 list-style:none;
 width:100%;
 height:21px;
 border-top:1px solid #FFFFFF;
 border-bottom:1px solid #FFFFFF;
 font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
 margin:0;
 padding:0;
 display:block;
 float:left;
 position:relative;
 width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#b9121b;
 color:#ffffff;
 width:148px;
 height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#ec454e;
 color:#ffffff;
 width:146px;
 height:13px;
 border-left:1px solid #ffffff;
 border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
 margin:0;
 padding:1px 1px 0;
 list-style:none;
 display:none;
 background:#ffffff;
 width:146px;
 position:absolute;
 top:21px;
 left:-1px;
 border:1px solid #b9121b;
 border-top:none;
}
#cssmenu > ul li:hover ul {
 display:block;
}
#cssmenu > ul li ul li {
 width:146px;
 clear:left;
 width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
 clear:left;
 background:#b9121b;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
 clear:left;
 background:#ec454e;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
 display:none;
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:145px;
 top:-2px;
 padding:1px 1px 0 1px;
 border:1px solid #b9121b;
 border-left:1px solid #b9121b;
 background:#ffffff;
 z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
 display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
 background:#b9121b;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
 background:#ec454e;
}

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

6. Simple Blue

source code :


<style>
#cssmenu {
 border:1px solid #000099;
 background:#000099;
 }
#cssmenu > ul {
 padding:1px 0;
 margin:0px;
 list-style:none;
 width:100%;
 height:21px;
 border-top:1px solid #FFFFFF;
 border-bottom:1px solid #FFFFFF;
 font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
 margin:0;
 padding:0;
 display:block;
 float:left;
 position:relative;
 width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#000099;
 color:#ffffff;
 width:148px;
 height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#0066FF;
 color:#ffffff;
 width:146px;
 height:13px;
 border-left:1px solid #ffffff;
 border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
 margin:0;
 padding:1px 1px 0;
 list-style:none;
 display:none;
 background:#ffffff;
 width:146px;
 position:absolute;
 top:21px;
 left:-1px;
 border:1px solid #000099;
 border-top:none;
}
#cssmenu > ul li:hover ul {
 display:block;
}
#cssmenu > ul li ul li {
 width:146px;
 clear:left;
 width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
 clear:left;
 background:#000099;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
 clear:left;
 background:#0066FF;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
 display:none;
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:145px;
 top:-2px;
 padding:1px 1px 0 1px;
 border:1px solid #000099;
 border-left:1px solid #000099;
 background:#ffffff;
 z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
 display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
 background:#000099;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
 background:#0066FF;
}


</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

7. Black CSS3 Drop Down Menu

source code :


<style>
#cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
#cssmenu{border-color:#000;} 
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#444;} 
#cssmenu > ul > li > a:hover{background:#111;}



</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

8. Light Blue CSS3 Drop Down Menu

source code :


<style>
#cssmenu{ height:37px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#4fbdf0; background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2)); background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0); } 
#cssmenu{border-color:#3589a1;} 
#cssmenu > ul > li > a{border-right:1px solid #3589a1; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6ed1ff;} 
#cssmenu > ul > li > a:hover{background:#36acd2;} 

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

9. Grey CSS3 Drop Down Menu

source code :


<style>
/* Main navigation block element */
#cssmenu{
height:37px;
display:block;
padding:0;
margin:20px auto; 
border:1px solid;
border-radius:5px;
}

#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}

/* Styling navigation links */
#cssmenu > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}

#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}


/* Extra border for navigation links */
#cssmenu > ul > li > a:after{
content:'';
position:absolute;
border-right:1px solid;
top:-1px; bottom:-1px; right:-2px;
z-index:99;
}
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}

/* Bullet for dropdowns */
#cssmenu > ul > li.has-sub > a:before{
content:'';
position:absolute; top:18px; right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}

/* Hover state styles for drop menu link */
#cssmenu ul li.has-sub:hover > a{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px; padding-top:13px;
top:-1px;
z-index:999;
}

/* Show dropdown when hover */
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}

/* Dropdown styles */
#cssmenu ul li > ul, #cssmenu ul li > div{
display:none; width:auto;
position:absolute; top:38px;
padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px;
z-index:999;
}

/* Dropdown list style */
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{
outline:none; display:block;
position:relative;
margin:0; padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif; color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}

/* Dropdown box styles */
#cssmenu ul li > div{width:auto; padding:20px;}
#cssmenu ul li > div p{
font:9pt/150% Arial, Helvetica, sans-serif; color:#fff;
text-align:justify;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
margin:0;
}

#cssmenu ul li > div h1{
position:relative;
margin:0 0 12px 0;
padding-bottom:10px;
border-bottom:1px solid #222;
font:bold 13pt Arial, Helvetica, sans-serif; color:#bbb;
text-shadow:1px 1px 0 rgba(0,0,0,0.5);
}
#cssmenu ul li > div h1:after{
content:'';
height:0; padding:0;
position:absolute; bottom:-2px; left:0; right:0;
border-bottom:1px solid #555;
}

/* ---------------- Styles ----------------- */


/* Gray */
#cssmenu, 
#cssmenu > ul > li > ul > li a:hover{
background:#d5d5d5;
background:-moz-linear-gradient(top, #d5d5d5 0%, #c5c5c5 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5d5d5), color-stop(100%,#c5c5c5));
background:-webkit-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-o-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:-ms-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
background:linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#c5c5c5',GradientType=0);
}
#cssmenu {border-color:#888;}
#cssmenu > ul > li > a{border-right:1px solid #888; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#e5e5e5;}
#cssmenu > ul > li > a:hover{background:#bbb;}

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

10. Orange CSS3 Drop Down Menu

source code :

<style>
#cssmenu {
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
#cssmenu  ul{
 background:#F93;
 height:50px;
 list-style:none;
 margin:0;
 padding:0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 }
 #cssmenu  li{
  float:left;
  padding:0px 0px 0px 15px; 
  }
 #cssmenu  li a{
  color:#000;
  display:block;
  font-weight:normal;
  line-height:50px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
 #cssmenu  li a:hover{
  background:#C60;
  color:#FFFFFF;
  text-decoration:none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  }
 #cssmenu  ul li:hover a{
  background:#C60;
  color:#FFFFFF;
  text-decoration:none;
  }
 #cssmenu  li ul{
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;
  }
 #cssmenu  li:hover ul{
  display:block;  
  }
 #cssmenu  li li {
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;
  background:#F93;
  /*this is where the rounded corners for the dropdown disappears*/
  }
 #cssmenu  li:hover li a{
  background:none;
  }
 #cssmenu  li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
 #cssmenu  li ul a:hover, #cssmenu  li ul li:hover a{
  border:0px;
  color:#ffffff;
  text-decoration:none;
  background:#C60;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); 
  } 

</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Silahkan Anda pilih salah satu Menu Drop Down Keren diatas dan pasangkan di situs Anda. Dengan penambahan menu navigasi dropdown pada blog akan mempermudah pengunjung blog dalam menjelajah konten blog/web. Selain itu juga mempercantik dan memberi kesan lebih profesional sebuah blog.

Tentu ada yang paling Anda sukai dengan koleksi 10 Menu Drop Down Keren Pure CSS diatas, menu navigasi yang saya sharing ini merupakan desain style CSS3 yang diedit disebuah site Menu Maker-cssmenumaker.com dengan sebagain telah saya modifikasi agar lebih simple dan praktis untuk digunakan di Blogger.com.

Semoga membantu Anda, kawan

Kalau Anda suka dengan postingan ini, sangat dihargai jika Anda berkenan memberi tanda suka dengan Klik Like di Facebook Fan site ini.

Terima Kasih....

10 Free Blogger Template Koleksiku

Unknown

Minggu, September 29, 2013

1 komentar

blogger template tutorial

Apakah Anda sering mencari atau download free blogger template? Kemudian meng-koleksi blogger template gratis tersebut seperti yang saya suka lakukan. Nah, proBlogiz akan membaginya kepada Anda semua, 10 Free Blogger Template Koleksiku, yang bisa didownload secara gratis di website free templates ini. Free blogger template sebenarnya bisa anda temukan dengan mudah dipencarian Google, namun tentu tidak ada salahnya untuk sekedar membagi informasi blogger template gratis ini kepada Anda.

Sebelumnya proBlogiz mengucapkan banyak terima kasih pada situs-situs penyedia template gratis, seperti btemplates.com , urang-kurai.blogspot.com, www.zoomtemplate.com, dan masih banyak lagi free templates website yang telah membagi karya-karya fantastik-template yang keren- secara gratis bagi kita semua. Jika bukan karena mereka semua mungkin tidak ada satupun koleksi template yang bisa saya simpan dan share.

View Demo Download

Sebagai sarana untuk membuat blog atau website, free design web template banyak bermunculan dan keren-keren pula baik blogger template maupun wordpress template. Untuk free blogger template seperti koleksiku ini sebenarnya banyak sekali, namun saya pilih sepuluh template keren atau premium blogger template. Template blogger yang saya pilih tersebut dikategorikan lebih kepada design tampilan template dan ada beberapa yang SEO Friendly Template.

10 Free Blogger Template Koleksiku

X9 Function Shadow
2 columns, right sidebar, web 2.0 design,
exclusive design , space for ads,
footer columns, social icons,
gradients and posts thumbnails.
author: Urangkurai

Demo

Download

Blue Dream
2 columns, right sidebar, rounded corners,
exclusive design , footer columns,
slideshow, social icons and
posts thumbnails.
author: OpinTemplates

Demo

Download

X7 Blue Black
2 columns, right sidebar, rounded corners,
exclusive design for Blogger,
social icons and posts thumbnails
author: Urangkurai

Demo

Download

SD-Template
2 columns, right sidebar, rounded corners,
exclusive design
for Blogger and gardient
author: AjmrDesign

Demo

Download

SimpleMagazine
3 columns, sidebar on the right and left,
space for ads, slideshow and simple look.
author: Deluxe Templates

Demo

Download

Simon WP Framework
3 columns, right sidebar
simple look and neutral colors
author: LiteThemes

Demo

Download

Brown Black Uniqx
with 2 columns, left sidebar,
exclusive design for Blogger,
space for ads, footer columns and tabs
author: Utta

Demo

Download

Kental Kopi
2 columns, right sidebar,
exclusive design for Blogger,
footer columns and posts thumbnails
author: Urangkurai

Demo

Download

Family
2 columns, right sidebar, rounded corners,
exclusive design for Blogger and simple look.
author: NBTemplate

Demo

Download

Chiffer
2 columns, right sidebar, minimalist,
footer columns, simple look and neutral colors.
author: LiteThemes

Demo

Download

Template blogger diatas compatible dengan hampir semua software browser seperti Mozilla Firework, Google Chrome, Opera, dan Internet Explorer. Anda bisa mendownloadnya jika ada yang disukai, dan menginstallnya di template blog, namun sebelum mengganti template lebih dilihat demo template dahulu.

Untuk sementara, 10 Free Blogger Template Koleksiku bisa Anda nikmati sekarang dan dilain waktu proBlogis pasti membagi koleksi template gratis yang lain dan lebih update.

Tunggu juga sobat...sharing berikutnya template premium ready SEO Friendly.

Anda juga mungkin tertarik melihat Blogger Template lainya :

10 Free Blogger Template Keren: 3 Kolom/Columns New!!

Selamat menikmati.....

testcoba2problogiz

Home

Tutorial

SEO

Basic

Template

vector collection

SOCIAL ICONS SPRITES

10 koleksi SyntaxHighlighter keren

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque

2. Solarized - Dark

3. School Book

4. Rainbow

5. Monokai

6. Tommorow Night Blue

7. Brown Papper

8. Sunburst

9. Google Code

10. GitHub

Menu Drop Down pure CSS

Cara Pasang Menu Drop Down pada Blogger

10 Drop Down Menu Keren Pure CSS

1. Red Opera Drop Down Menu

2. Blue Opera Drop Down Menu

3. Grass Pillbox Drop Down Menu

4. Dirt Pillbox Drop Down Menu

5. Simple Red

6. Simple Blue

7. Black CSS3 Drop Down Menu

8. Light Blue CSS3 Drop Down Menu

9. Grey CSS3 Drop Down Menu

10. Orange CSS3 Drop Down Menu

10 Free Blogger Template Koleksiku

10 Free Blogger Template Koleksiku

Like Me

Blog Arsip

artikel populer

Label

artikel terbaru