Tutorial Template Webmaster Ebook Source Blogger Faq Contact
  • blogger

    Pengenalan Blogger

  • blogger

    Mengenal Elemen Template Blogger

  • Snowalker

    Membuat Dropdown Menu dengan css3

  • robottxt

    Tentang File Robots.txt

  • meta

    Meta tag untuk membatasi akses

Tampilkan postingan dengan label Template. Tampilkan semua postingan
Tampilkan postingan dengan label Template. Tampilkan semua postingan

Portal CSS3 with jQuery / Reverse Animation

Portal web sederhana Tutorial by Alessio Atzeni . 







CSS3 with jQuery Reverse Animation






CSS3 with jQuery / Reverse AnimationTutorial by Alessio Atzeni 

  • 
LINKED IN                
    • 


  • 
FOORST                
    • 


  • 
TWITTER                
    • 


  • 
FACEBOOK                
    • 

Follow Me!

Demo : ying.16mb.com
Download source : CSS3 with jQuery / Reverse Animation

New Template Googler

Original From Minima Theme
Name : Googler
Date : 16 Juni 2012
Author : EmilyJosan

Demo : Googler Template
Demo II : Googler Template 2
Download : Googler Template
Download II : Googler Template 2

Thanks..

Mengenal Elemen Template Blogger Part 5 

/* Footer
----------------------------------------------- */
Bagian footer berawal di sini
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.
]]>
Ini merupakan akhir dari css yang ada pada template blogger. Setelah kode ini, Anda bisa menyisipkan javascript dari autoreadmore, artikel terkait, dll. Setelah kode ini, bagian-bagian selanjutnya berisi kode HTML.



Ini merupakan tag penutup dari head pada dokumen HTML
Bagian body berawal pada tag ini
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS
Bagian ini merupakan header-wrapper yang bias kita ubah tampilannya dengan CSS
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini


Widget blog terletak di sini
Ini merupakan kode HTML dari main-wrapper yang bisa kita ubah tampilannya dengan CSS.
Ini merupakan kode HTML dari sidebar-wrapper yang bisa kita ubah tampilannya dengan CSS.



 
Ini mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.

Ini merupakan akhir dari content-wrapper


Ini merupakan kode HTML dari footer yang bisa kita ubah tampilannya dengan CSS



Ini merupakan tag penutup dari outer-wrapper




Ini merupakan tag penutup dari body pada dokumen HTML




Ini merupakan tag penutup dari dokumen HTML



Mungkin pembahasan akan lebih panjang jika kita membahas template dengan tanda centang pada 'expand widget template'.

Maka dari itu, script dari template di atas tidak dengan tanda centang pada 'expand widget template' sehingga terlihat simple.















































Mengenal Elemen Template Blogger Part 4











/* Comments
----------------------------------------------- */

Bagian Comments dimulai dari sini


#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

Mengubah tampilan judul bagian komentar


#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}

Mengubah tampilan bagian komentar


#comments-block .comment-author {
margin:.5em 0;
}

Mengubah tampilan link author atau link komentator


#comments-block .comment-body {
margin:.25em 0 0;
}

Mengubah tampilan isi komentar


#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

Mengubah tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.


.deleted-comment {
font-style:italic;
color:gray;
}

Mengubah tampilan komentar yang telah dihapus


.feed-links {
clear: both;
line-height: 2.5em;
}

Mengubah tampilan link feed


/* Sidebar Content
----------------------------------------------- */

Sidebar dimulai dari sini


.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Mengubah tampilan sidebar secara keseluruhan


.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

Mengubah tampilan daftar pada sidebar


.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Mengubah tampilan definisi daftar dari tag 


.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Mengubah tampilan widget



dan di lanjut ke bagian 5















































Mengenal Elemen Template Blogger Part 3











/* Posts
-----------------------------------------------
*/

Bagian Post dimulai dari sini


h2.date-header {
margin:1.5em 0 .5em;
}

Mengubah tampilan tanggal artikel blog


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Mengubah tampilan post atau artikel blog


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Mengubah tampilan judul artikel blog


.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

Mengubah tampilan link


.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

Mengubah tampilan bagian postingan


.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Mengubah tampilan footer atau catatan kaki postingan blog


.comment-link {
margin-$startSide:.6em;
}

Mengubah tampilan link komentar


.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}

Mengubah tampilan gambar pada postingan



selanjutnya ke bagian 4















































Mengenal Elemen Template Blogger Part 2











/* Header
-----------------------------------------------
*/

Header berawal di sini


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Kode CSS ini mengubah tampilan header bagian dalam


#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:#ffffff;

}

Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan


#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Mengubah tampilan judul dan deskripsi blog tingkat 1


#header a {
color:#fff;
text-decoration:none;
}

Mengubah tampilan link yang terdapat pada header


#header a:hover {
color:$pagetitlecolor;
}

Mengubah tampilan link pada header jika pointer mouse berada di atas link.


#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2


#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Mengubah tampilan gambar header


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog


#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget.

Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper


/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll



lanjut bagian 3 mengenal elemen template blogger part 3















































Mengenal Elemen Template Blogger Part 1










Berikut penjelasan susunan elemen beserta kode cssnya, saya ambil contoh pada template minima blogspot :


<?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 lang='en' xml:lang='en' 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'> 
merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan tabel.


<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

head atau disebut dengan kepala template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.


body {
background:#000000;
margin:0;
color:#ffffff;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.


a:link {
color:#ff0000;
text-decoration:none;
}

kode untuk penempatan link


a:visited {
color:#ff0000;
text-decoration:none;
}

Ini untuk mengubah tampilan link yang pernah dikunjungi.


a:hover {
color:#ffffff;
text-decoration:underline;
}

Mengubah tampilan link jika pointer mouse berada di atas link.


a img {
border-width:0;
}

Mengubah tampilan link bergambar



lanjut pada bagian Mengenal Elemen Template Blogger Part 2









































            

          

          

        

          

        







Mengenal Elemen Template Blogger











Dalam pembuatan template khususnya blogger, ada elemen - elemen yang perlu kita ketahui. Karena dalam pembuatan template setidaknya kita harus tau elemen mana yang ingin kita ganti. Berikut adalah elemen - elemen template blogger standart yang perlu anda ketahui.:




  1. Elemen Template Blogger Part 1
    2. 

  2. Elemen Template Blogger Part 2
    3. 

  3. Elemen Template Blogger Part 3
    4. 

  4. Elemen Template Blogger Part 4
    5. 

  5. Elemen Template Blogger Part 5
    6. 











































            

          

          

        

          

        







Membuat Template Maintenance Blogspot











Demo : http://belajarmembuatblogdi.blogspot.com/      



 langkah untuk memasangnya

buat pengguna dasbor baru baiknya dikembalikan ke versi yg lama dulu

>> login blogger

>> rancangan

>>Edit HTML

>>Back up dulu Template aslinya

>>Expand Template

>>hapus smua code/sourcnya



Copy codenya dan pastekan


<?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 expr:dir='data:blog.languageDirection' 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>
<meta content='This Site is under construction aka maintenance' name='description'/> <meta content='Manitenance,under construction' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/> <meta content='Devilzc0der' name='author'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
    
<b:skin><![CDATA[/*
---------------------------------------
Name   : Devilzc0ntruction
Desc   : Maintenance Theme For blogspot
Author : Devilc0der

---------------------------------------
/* hide navigation bar */
#navbar-iframe {
display: none !important;
}

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
font-size:16px;
line-height:16px;
text-align:center;
background-color:#000;
font-family:Quark,sans-serif;

}
a:link,a:visited{
color:#ff0000;
text-decoration:none;
}
h1{
color:#626262;
font-size:18px;
line-height:16px;
}
h2{
color:#626262;
font-size:16px;
line-height:16px;
}
p{
color:#333;
font-size:11px;
line-height:16px;
}
    
]]></b:skin>

</head>

<body onunload='mberuh();'>
<table border='0' cellpadding='0' cellspacing='0' height='100%' width='100%'>
<tr>    
<td align='center'>        
<div>    
<h1>[-] This Site is Under Contruction [-]</h1>        
<br/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNAF8Fp0CLECJwfrEge4weViKPr-U9ng7k91qTqsYD6J3a0bmhvHCRr-5XAK6XUEY1iCzjR223jBtof_38D-cAKqt9tclPlIMZIMwQAhfF6q8XnXdIKKDaaAQuIHx4TAvdSPREQs_et4/s364/gif_boy_laptop_computer_hg_blk4.gif'/></div>                
<h2>[-] Come Back Again [-]</h2><br/>
<p>by Devilzc0der</p>        
</td>  </tr></table>

</body></html>











































        

      










Langganan:
Postingan (Atom)











 








© Copyrigt 2012 | Design by  Emily.Josan | Powered by  Blogger.com.

 Thanks to ndung - ndung