Stuktur Template Blooger

Sebelum merancang sebuah template, terlebih dahulu anda harus memiliki gagasan tentang bentuk struktur dasar dari template anda. Pada umumnya, struktur dari setiap template tidak sama. Namun, dengan mengetahui struktur dasar, anda dapat dengan mudah mendapatkan ide-ide tentang bagaimana cara untuk merubah template yang ada, mendesain template, dan bagaimana mengubahnya menjadi template yang berbeda.

Bagian dari struktur template dapat anda lihat di browser pada blog: seperti header, footer, dan bagian posting. Tapi ada beberapa bagian tertentu (saya menyebutnya bagian blok atau kontainer) yang tidak terlihat pada layar komputer, karena berisi kode HTML yang tidak terbaca secara langsung di browser.

Untuk memulai, struktur template pada dasarnya mengandung bagian dari kontainer yang terlihat seperti ini:

Body

Body

Header

Sidebar1

Main

Post

Sidebar2

Footer

... Out Wrapper

... Content-Wrapper

---

Kita Mulai dari yang terbesar hingga ke sub bagian yang mencakup didalam sebuah template :

1. Body :
Bagian ini merupakan blok terluar dari body template (pada dasarnya semua yang meliputi layar komputer).
2. Outer-wrapper :
Bagian ini mencakup seluruh template anda (body template). Secara umum, anda akan membuat sebuah Outer-wrapper untuk menempatkan beberapa bagian-bagian blok di dalamnya. Blok yang terdapat dalam bagian Outer-wrapper adalah Header, Content, dan Footer.
3. Header :
Blok ini berada paling atas di blog anda. Dalam Header anda akan memiliki sub-blok seperti Judul header, Deskripsi Header, dan lain-lainnya seperti baner Adsense, atau sebuah menu bar, dll. Dan untuk membungkus semua sub-blok dalam dalam Header digunakan Header-wrapper.
4. Content :
Pada bagian bawah Header terdapat Content-wrapper. Bagian ini merupakan bagian yang cukup penting karena dalam Content-wrapper ini terdapat blok Sidebar (sidebar1 atau sidebar2) dan merupakan blok utama dari sebuah blog (yang berisi posting Anda, komentar, atau beberapa iklan).
5. Footer :
Footer adalah wadah yang paling bawah dari template Anda. Kebalikan dari bagian Header dan anda juga akan memerlukan Footer-wrapper untuk membungkusnya (di dalamnya dapat anda tambahkan bagian-bagian blok kecil).
6. Main :
Main adalah pembungkus blok posting di dalam Content-wrapper. Di dalam main terdapat blok Post, blok Komentar, Header Tanggal, dan widget lain yang dibuat dari opsi Tambah Elemen Halaman blogger.
7. Sidebar :
Sidebar 1 dan sidebar 2 adalah blok yang berisi semua widget tepi template Anda, misalnya About Me, Label, Arsip, Teks, HTML, Adsense, dll. Pada template Blogger standar, Anda biasanya akan menemukan hanya 1 sidebar atau template 2 kolom (Utama dan Sidebar) . Sebenarnya sepele untuk menambah hal-hal lainnya. Yang paling umum adalah 2 sidebars atau template 3 kolom. Anda akan belajar dari tutorial ini bahwa setelah Anda memahami struktur template, semua sebenarnya mudah dalam menambah atau memindahkan sidebars ke kiri atau kanan kontainer blok Anda, sesuka hati anda.
8. Blog Post :
blok ini berisi hal-hal penting mengenai tulisan Anda, yang di dalamnya terdapat Artikel Posting, Penulis, Tombol berbagi, Label, dll.

Jika di tampilkan dalam bentuk struktur terperinci. Mulai dari wadah terbesar untuk sub-kontainer, struktur itu akan terlihat seperti ini:

1. Body
   
   1. Outer-wrapper
      
      1. Header-wrapper
         
         1. Blog Title
         2. Blog Description
         3. Other widgets
      2. Content-wrapper
         
         1. Sidebar-wrapper (1,2,3...)
         2. Main-wrapper
            
            1. Date Header
            2. Posts
               
               1. Post Title
               2. Post Content (atau disebut Post Body)
               3. Post Footer (Author, Labels, etc)
            3. Comments
            4. Feed Link
            5. Other widgets (mostly ad units)
      3. Footer-wrapper
         
         1. Footer text (disclaimer, copyrights, etc)
         2. Other widgets

Setelah Anda memahami struktur dasar, semoga akan lebih mudah untuk belajar tentang struktur kode template Blogger. Belajar struktur kode blogger tidak harus menguasai penuh HTML atau CSS, tapi yang paling penting tentang bagaimana kode template diatur, seperti bagaimana struktur container diatur atau bagaimana membuat sebuak blok dalam blok. Ini akan sangat berarti jika dengan sedikit pengetahuan tentang pemrograman web, terus hasilnya Anda dapat menyesuaikan template Anda dengan baik hanya dengan memahami struktur dasar dan beberapa bahasa CSS. Bagaimana, hebat bukan?

cara membuat template blogger sederhana secara offline bagian+3

Rancangan gambar template blogger.

Kali ini kita akan membuat rancangan gambar template blogger dengan tampilan seperti berikut :

Keterangan:

• Warna ini adalah ruang lingkup body
• Warna ini adalah ruang lingkup wrapper
• Warna ini adalah ruang lingkup header
• Warna ini adalah ruang lingkup post wrapper
• Warna ini adalah ruang lingkup post
• Warna ini adalah ruang lingkup sidebar
• Warna ini adalah ruang lingkup footer

Contoh Kode Html dan Css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Belajar Buat Template Blogger</title>
<style>
/*
Title : Belajar Buat Template Blogger
Design : Yanto Cusoy
Site : http://codestyle.blogspot.com
Deskripsi : Best Learning Template
Design : http://codestyle.blogspot.com
Work : 11-01-2012 *home
*/
body {background-color:#999;}
#wrapper {margin:15px auto; width:90%; height:auto; border:1px solid black; background:yellow; color:black; padding:5px}
#header {width:99%; height:auto; margin:5px auto; border:2px dotted red; background:green; color:white}
#post-wrap {max-width:99%; overflow:auto; margin:5px auto; border:2px dotted blue; background:#ff55aa; color:red;}
#post {width:70%; margin:5px; border:2px dotted blue; background:#553322; color:white; float:left;}
#sidebar {width:25%; margin:5px; border:2px dotted brown; background:#ccaa33; color:white; float:right}
#footer {width:99% auto; margin:5px auto; border:2px dotted white; background:#116666; color:white; }

</style>
</head>

<body>

<div id='wrapper'>
<div id='header'>Header
</div>
<br />
<br />
<br />
<div id='post-wrap'>
<div id='post'>Posting
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id='sidebar'>Sidebar
<br />
<br />
<br />
<br />
</div>
</div>
<div id='footer'>Footer
<br />
<br />
<br />

</div>
</div>

</body>
</html>

Coba salin kode diatas dan simpan dengan eksistensi file belajar.html, lalu jalankan pada browser kamu

Nah pada bagian selanjutnya kita akan membahas kode xml blogger pada template buatan kita.

Baca lanjut :
Judul: cara membuat template blogger sederhana secara offline bagian+4.

cara membuat template blogger sederhana secara offline bagian+2

Struktur Template Blogger

Oke, Kali ini kita lanjutkan cara membuat template blogger sederhana secara offline bagian+1, yang dapat di jadikan dasar hingga terbentuknya sebuah template yang terstruktur rapi.

Kita harus mengenal gambaran umum struktur template blogger yang jika saya bahasakan sendiri pembagiannya antara lain sebagai berikut :

1. Head Meta,
2. Style CSS, dan
3. Body Html.

1. Head Meta
   Head meta berisi identitas blog, yang di dalamnya mencakup title dan meta tag blog kamu.
   Peranannya cukup penting dalam posisi pencarian Search Engine. Dalam beberapa kasus, posisi meta tag di buat se SEO mungkin, agar trafik blog meningkat dan semakin bersahabat dengan mesin pencari ^Θ.
   Contoh bagian Head Meta :
   

   <?xml version="1.0" encoding="UTF-8" ?>
   <!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>
   <b:include data='blog' name='all-head-content'/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <title><data:blog.pageName/></title>
   <b:else/>
   <title><data:blog.pageTitle/></title>
   </b:if>
   <meta content='your description here' name='description'/>
   <meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
   <meta content='INDEX, FOLLOW' name='ROBOTS'/>
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCTD-eIROkC3yIq5OvdWdzQsLrGtW9-MbWUFL5oNJMrVg2WycRJkuU_HK4Ke5hiZRypV_sn0g6ZMat20OPcOXgj8vPYbnHTm45nUx0bXNCvEv8vscMg1kdl-zY5mRZLucEYnU_BP8GSg/s1600/Gear.png' rel='shortcut icon' type='image/x-icon'/>

2. Style CSS
   Style CSS merupakan bagian yang cukup penting yang sangat berpengaruh pada tampilan blog. Bagian ini di susun dari bahasa CSS.
   Dari sinilah sumber pengaturan tinggi, lebar, warna, garis, gaya tulisan, dan sebagainya berasal. Atau dengan kode seperti .posting {color:#55aa44;},#wrapper {backgroud-image:url(http://...);} dan sebagainya.
   
   Style css dapat di tulis dengan 3 cara yaitu :
   
   
   • Menggunakan sumber css dari web direktori lain :
     
     Contoh :
     

     <link rel="stylesheet" href="http://alamat.css" type="text/css" />

   • Di tulis di antara kode tag <b:skin><![CDATA[/* dan ]]></b:skin>
     
     Contoh :
     

     <b:skin><![CDATA[/*
     
     body {}
     .post {}
     #sidebar {}
     @media {}
     
     ]]></b:skin>
     </head>

   • Di tulis dalam apitan Kode Tag HTML
     
     Contoh :
     

     <div style='font-style:italic;'>contoh css dalam body</div>

3. Body Html
   Body html pada umumnya di tulis dengan bahasa html. Bagian ini mempunyai peranan penting sebagai output kode template yang kita tulis ke browser. Jadi html boleh di katakan sebagai penampil grafik struktur blog yang kita buat.
   
   Kode html template blogger terletak antara tag <body> dan </body>.
   Contoh bagian body html template blogger :
   

   <body>
   <!-- skip links for text browsers -->
   <span id='skiplinks' style='display:none;'>
   <a href='#main'>skip to main </a> |
   <a href='#sidebar'>skip to sidebar</a>
   </span>
   <!-- sesi penting bloogger 1. heading -->
   <b:section class='header' id='kepala-blog' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Best Template (Header)' type='Header'/>
   </b:section>
   <!-- sesi penting bloogger 2. Blog Posting-->
   <b:section class='post' id='blog-posting' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   <!-- sesi penting bloogger 3. sidebar-->
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='HTML1' locked='false' title='ads1' type='HTML'/>
   </b:section>
   <!-- sesi penting bloogger 4. footer-->
   <b:section class='footer' id='sidebar' preferred='yes'>
   <b:widget id='Footer' locked='false' title='footer' type='footer'/>
   </b:section>
   </body>

   
   Keterangan :
   * kalimat yang berwarna hijau adalah sesi penting dalam body template blogger

Baca lanjut : Judul: cara membuat template blogger sederhana secara offline bagian+3.

Membuat animasi bergerak dengan css3 tanpa gambar dan javascript

Di kesempatan kali ini saya mau berbagi trik lagi menggunakan efek animasi css3. Bagaimana membuat sebuah objek bergerak tanpa javasript dan gambar seperti objek di bawah ini?

CodeStyle
Animation

Tentu kita berpikir objek ini terbentuk dari gambar atau dari pengaruh javascript yang di tuliskan pada halaman artikel atau yang di tanam pada pengaturan kode html. Hilangkan prasangka tersebut, karena css3 mampu melakukan hal ini.

Coba simak kode berikut sebagai referensi dan praktekan pada browser anda.

Berikut Kodenya :

<style>
#animated_div {
width:100px;
height:60px;
background:#92B901;
color:#000;
position:relative;
font-weight:bold;
font-size:20px;
text-shadow:1px 1px 3px #000;
margin-left:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 4px 8px #000;
}


@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

</style>
<div id="animated_div"><a title='membuat animasi dengan css3' href='http://codestyle.blogspot.com'>CodeStyle</a><br><span style="font-size:12px;color:white;">Animation</span></div>

demikian posting kali ini. semoga saja bermanfaat buat kita semua, hitung-hitung saling berbagi ilmu..

Spyning icon Rotasi pada gambar menggunakan css3

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...

Membuat pop up slider tampilan android di blog

Dari judulnya saja udah menarik, bagaimana nanti praktiknya yah.... tanpa basa basi, tanpa padang bulu,,,
langsung kita sikat saja kodenya !!!
Sikat tapi jangan di makan yahh ....

berawal dari kode css :

<style>
#page-wrap {width: 720px; margin: 0 auto; padding:300px; position:fixed; background:transparant center;}
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));

border: 2px solid #454545;
overflow: hidden;

-webkit-user-select: none;
}
#codestyle {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

-moz-background-clip: text;
-webkit-background-clip: text;

-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;

-webkit-animation: slidetounlock 5s infinite;

font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; color:#666;
padding: 0;
width: 200%;

-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zdI1ln-Pyb-BgKVB03aGDoZmdHp_sSNGzQpPL13n7sRAahEKjLU3jRiFhZLU_Q6EaXu-5Bd2jsfFFyCJda9a2BjM4rS8bttgs5lwiK2L_XbELwXh1ltR-1N6hAfTPBCQeZNzzWOnTVg-/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -820px 0;
}
100%{
background-position: 820px 0;
}
}
</style>

Berlanjut dengan kode 3 buah script yang tanpa repot dan tanpa ragu kamu hanya copas ajah hehe... :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='http://ycusoy.googlecode.com/files/code%2Bstyle%2Bslide.js'></script>

Lalu kode htmlnya yang nanti di paste pada halaman posting...

<div id="page-wrap">
<div id="well">
<div id='codestyle'><strong id="slider"></strong> <span>slide to unlock</span></div>
</div>
</div>

bagaimana bro and sista... mudah bukan ?? silahkan praktekan dan sebar luaskan artikel ini. dan jangan lupa yah sumbernya ...

contohnya pasti udah kamu lihat kan ??

slide to unlock

Membuat tombol menu unik dengan javascript+css+html

Pada pagi ini kita akan membuat tombol menu yang unik dan bisa di jadikan referensi kamu untuk memilih menu mana yang kamu suka, jika tertarik boleh langsung praktekan...


berikut kode css nya :

<style>
a { text-decoration: none; }
ul { list-style: none; }
.box { background: #a7a7a7; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px; margin: 0 0 15px 0; }
.box ul li { font-size: 11px; margin: 0; border-bottom: 1px solid #666; }
.box ul li a { color: #222; display: block; padding: 4px 4px; margin: 0;
border-bottom: 1px solid #ccc; }
.box ul li:last-child,
.box ul li:last-child a { border: none; }
.box ul li a:hover { background: #ccc; text-decoration: none; }
#catNav { background: #494949; padding: 5px 5px 5px 37px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
overflow: hidden; margin: 0 0 10px 0; }
#catNav li { display: inline; }
#catNav li a { display: block; width: 50px; height: 50px; text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglnlTqDVsNkXMWSd8qUvRI1fdxFlm5WCFJqoRvNHhE7_LdFrTjilBSJPd1mvog6RynMDI2mzG678mjjsA_O0OCq-PMHx6NvmPoQ4KGvXbkTD37cj9gTFncejYr7AhkX8r7N9jK5tAkCMC/s1600/tombol%252Bunik%252Bcode%252Bstyle.png); float: left;
border: none; padding: 0; }
#catNav li a#list-satu-button { background-position: -50px -50px; }
#page-wrap #catNav li.activeCatButton a#list-satu-button { background-position: -50px -100px; }
#catNav li a#list-satu-button:hover { background-position: -50px 0px; }
#catNav a#list-dua-button { background-position: -100px -50px; }
#page-wrap #catNav li.activeCatButton a#list-dua-button { background-position: -100px -100px; }
#catNav li a#list-dua-button:hover { background-position: -100px 0px; }
#catNav a#list-tiga-button { background-position: 0px -50px; }
#page-wrap #catNav li.activeCatButton a#list-tiga-button { background-position: 0px -100px; }
#catNav li a#list-tiga-button:hover { background-position: 0px 0px; }
#catNav a#list-empat-button { background-position: -150px -50px; }
#page-wrap #catNav li.activeCatButton a#list-empat-button { background-position: -150px -100px; }
#catNav li a#list-empat-button:hover { background-position: -150px 0px; }
</style>

Sedangkan untuk sriptnya adalah :

<script src="http://ycusoy.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// ycusoy creator
$(function(){

$("#list-dua").hide();
$("#list-tiga").hide();
$("#list-empat").hide();
$("#list-satu-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-satu").slideDown(600);
});

$("#list-dua-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-dua").slideDown(600);
});

$("#list-tiga-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-tiga").slideDown(600);
});

$("#list-empat-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-empat").slideDown(600);
});

$("#catNav li a").click(function() {
$("#catNav li").removeClass("activeCatButton");
$(this).parent().addClass("activeCatButton");
});
});
</script>

Dan yang terakhir kode htmlnya :

<div id="page-wrap">

<div class="box">
<ul id="catNav">
<li class="activeCatButton"><a id="list-satu-button">Apple</a></li>
<li><a id="list-dua-button">Linux</a></li>
<li><a id="list-tiga-button">Microsoft</a></li>
<li><a id="list-empat-button">News</a></li>
</ul>

<ul class="cat-list" id="list-satu">
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
</ul>
<ul class="cat-list" id="list-dua">
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
</ul>
<ul class="cat-list" id="list-tiga">
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
</ul>
<ul class="cat-list" id="list-empat">
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
</ul>

</div>

</div>

Bagaimana, Apakah kamu berhasil membuatnya. Oke sekian dulu postingan kali ini. sampai jumpa ...

contoh :

• Apple
• Linux
• Microsoft
• News

• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu

• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua

• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga

• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat

dan jangan lupa tinggalkan komentar jika masih dikau sempat..

Membuat Tombol Source Code Html dengan css+ javascript+html

Nah pada kesempatan kali ini kita akan membuat sendiri tools seperti layaknya firebug addon pada mozila, gunanya untuk melihat isi html blog kita dengan javascript, css dan html.

Baiklah untuk kode css nya sebagai berikut :

<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { width: 960px; margin: 60px auto; }
a img { border: 0; }
h1 { font: bold 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; margin: 50px 0 20px 0; }
p { margin: 0 0 20px 0; }
/* Pretty printing styles. Used with prettify.js. */
.str { color: #61ff74; }
.kwd { color: #ea5eff; }
.com { color: white; }
.typ { color: red; }
.lit { color: red; }
.pun { color: white; }
.pln { color: white; }
.tag { color: #ffab58; }
.atn { color: #fabb4e; }
.atv { color: #ffd996; }
.dec { color: red; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
#source-code { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
#source-code:target { display: block; }
#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }
.button { background: #00ccff; padding: 10px 20px; color: white; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
</style>

Dan untuk scriptnya (javascriptnya) seperti ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ycusoy.googlecode.com/files/codestylesource.js"></script>
<script>
$(function() {
$("<pre />", {
"html": '&lt;!DOCTYPE html>\n&lt;html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n&lt;/html>',
"class": "prettyprint"
}).appendTo("#source-code");

prettyPrint();
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-30788315-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Dan yang terakhir adalah kode htmlnya :

<div id="page-wrap">
<h1>Code Style Model Baru</h1>
<p>Klik tombol untuk melihat dalam tampilan modern kode html. Ini menggunakan js dan css3. </p>
<a class="button" href="#source-code" id="view-source">Model Baru</a>
<h1>Code Style Model Lama</h1>
<p>Hanya bekerja pada Mozila dan Chrome. Mungkin bisa juga yang lainnya, tapi tidak untuk safari dan opera.</p>
<a class="button" onClick='window.location="view-source:" + window.location.href'>Model Lama</a>
<div id="source-code">
<a href="#" id="tutup"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6YfPY-h61TJ6a9FaAjVrRs4QauHKJU-LmKImS6x5-WAE-8VP58YOVOOuv9xspgnUZz_sm_YKmMgWoBrgaTx2ZcT0J9HYtPQruWRglwnoidwcglss4FRvKX-Ie_zQ8AbFTUAx8Axqw5hh/s1600/x.png" alt="close"></a>
</div>
</div>

Contoh :

Jadi malu nih, kelihatan semua codestyle yang berantakan hehehe,,,, semoga manfaat ya...(jangan lupa tingalkan komentar yahhh))

Code Style Model Baru

Klik tombol untuk melihat dalam tampilan modern kode html.
Ini menggunakan js dan css3.

Model Baru

Code Style Model Lama

Hanya bekerja pada Mozila dan Chrome.
Mungkin bisa juga yang lainnya, tapi tidak untuk safari dan opera.

Model Lama

Cara Menampilkan Widget Hanya Pada Halaman Tertentu di Blog Website

Sebelum memulai cara ini, yang anda harus lakukan adalah Login ke Akun Blogger anda > Template > Centang Tanda Expand. Kemudian cari widget yang akan anda modifikasi dengan menekan Ctrl+F > masukan kata pencarian.
Berikut ini conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan bercetak tebal itulah yang harus ditambahkan:

Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Setelah conditional tags ditambahkan, save template dan lihat hasilnya. Sekian..