ads

Template SEO Friendly dan Valid Html

tanggal 16 Des 2012 | 03.51 tanggal tanggal No comments | 5
Description : Untuk para blogger yang memerlukan Template yang SEO Friendly dan Valid Html mungkin tidak ada salahnya bila anda mencoba template yang saya...
Untuk para blogger yang memerlukan Template yang SEO Friendly dan Valid Html mungkin tidak ada salahnya bila anda mencoba template yang saya buat ini.. Template ini saya beri nama QUICK LOAD karena memiliki Loading Page yang cepat, selain itu Template ini sudah saya cek di chkme.com dan memiliki SEO Score 100% serta sudah saya cek juga di w3.org untuk validasi structur htmlnya dan hasilnya sudah full Valid Html, untuk tampilannya Template ini saya buat dengan tipe Template 3 kolom yaitu 2 Sidebar dan bagian posting, pada bagian sidebar sebelah kiri saya seting khusus untuk digunakan pemasangan banner iklan PPC seperti kumpulblogger.com dsb sehingga nantinya akan terlihat pas, pada bagian Footer juga saya bagi menjadi 3 Kolom. untuk penampakan dan Demo Templatenya bisa anda lihat dibawah ini :

Template

DEMO        DOWNLOAD

Cara Mempertahankan SEO Score dengan Menggunakan Template ini :
1. Setiap kali anda menambahkan widget baru, jangan lupa untuk menghapus semua kode yang seperti ini <b:include name='quickedit'/> pada bagian Template Html anda.
2. Setiap anda memasukan Gambar jangan lupa untuk menambahkan atribut alt dan title pada gambar tersebut.
juga memberikan atribut title pada setiap Link yang dipasang pada blog.
3. Bila anda mengedit hal apapun yang ada pada Template ini, sebelum anda menyimpan hasilnya, ada baiknya anda Edit dulu kode diatas Head yang seperti ini .

<html lang='id' 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'>

sehingga jadi seperti ini   <html lang='id'> lalu klik Simpan.

4. Edit bagian kode yang dibawah Head seperti berikut.

<link href='http://gt-generation.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://gt-generation.blogspot.com/feeds/posts/default' rel='alternate' title='GT Generation - Atom' type='application/atom+xml'/>
<link href='http://gt-generation.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='GT Generation - RSS' type='application/rss+xml'/>
<link href='http://www.blogger.com/feeds/7771985431968737994/posts/default' rel='alternate' title='GT Generation - Atom' type='application/atom+xml'/>
<link href='http://www.blogger.com/rsd.g?blogID=7771985431968737994' rel='EditURI' title='RSD' type='application/rsd+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://gt-generation.blogspot.com/' rel='openid.delegate'/>

Ganti tulisan yang berwarna Biru dengan Link Blog dan nama Blog anda
Ganti Tulisan yang berwarna kuning dengan Blog ID anda.

Selamat mencoba dan semoga template ini bisa bermanfaat bagi anda
Readmore
Add your Comment 0 komentar
Posted by: Umar Backry - Artikel Tutorial, Updated at: 03.51

Membuat Animasi Led Pada Blog dengan CSS

tanggal | 03.24 tanggal tanggal No comments | 5
Description : Blogger Tips : Membuat Animasi Kit Led Pada Blog Blogger Tips kali ini saya akan membahas tentang bagaimana caranya untuk membuat Animas...
Blogger Tips : Membuat Animasi Kit Led Pada Blog

Blogger Tips kali ini saya akan membahas tentang bagaimana caranya untuk membuat Animasi Kit Led atau sebuah animasi yang berupa beberapa lampu led yang berjalan bolak balik, untuk contohnya anda bisa lihat dibawah ini..


Untuk membuat sebuah Animasi Led seperti diatas pada template blog anda.caranya adalah sebagai berikut :
1. Masuk pada menu Template kemudian klik Edit HTML
2. Pada edit html anda cari kode seperti ini ]]></b:skin>
3. Kemudian Copy kode CSS dibawah ini lalu letakan kode tersebut diatas kode ]]></b:skin>

Code CSS :

.kotak{background:black;text-align:center;float:left;width:100%;margin:0;padding:0}
.barlittle{background-color:#c30000;background-image:0;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;width:32px;height:20px;float:left;margin-left:5px;opacity:0.1;-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-moz-animation:move 1s infinite linear;-webkit-animation:move 1s infinite linear}
#block_1,#block_10{-moz-animation-delay:.1s;-webkit-animation-delay:.1s}
#block_2,#block_6{-moz-animation-delay:.2s;-webkit-animation-delay:.2s}
#block_3,#block_7{-moz-animation-delay:.3s;-webkit-animation-delay:.3s}
#block_4,#block_8{-moz-animation-delay:.4s;-webkit-animation-delay:.4s}
#block_5,#block_9{-moz-animation-delay:.5s;-webkit-animation-delay:.5s}
@-moz-keyframes move{
0%{-moz-transform: scale(1.1);opacity:1;}
100%{-moz-transform: scale(1.1);opacity:0.0;}
}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.1);opacity:1;}
100%{-webkit-transform: scale(1.1);opacity:0.0;}
}

Keterangan :
silahkan anda sesuaikan kode yang saya beri warna biru ini width:32px;height:20px; sesuai dengan yang anda inginkan agar tampilan animasi Lednya bisa terlihat pas.

4.Setelah itu klik Simpan Template
5. Masuk ke Tata Letak kemudian tambah gadget Html/Javascript
6. Copy Code Xhtml dibawah ini pada gadget Html/Javascipt yang anda pilih tadi

Code Xhtml :

<div class='kotak'>
<div class='barlittle' id='block_5'></div>
<div class='barlittle' id='block_4'></div>
<div class='barlittle' id='block_3'></div>
<div class='barlittle' id='block_2'></div>
<div class='barlittle' id='block_1'></div>
<div class='barlittle' id='block_10'></div>
<div class='barlittle' id='block_6'></div>
<div class='barlittle' id='block_7'></div>
<div class='barlittle' id='block_8'></div>
<div class='barlittle' id='block_9'></div>
</div>

7. klik Simpan dan buka Blog anda untuk melihat hasilnya

Selamat mencoba dan semoga Artikel ini bermanfaat bagi anda.
Readmore
Add your Comment 0 komentar
Posted by: Umar Backry - Artikel Tutorial, Updated at: 03.24
 
Copyright © 2012 ARTIKEL TUTORIAL | Powered by Blogger | Design by Umar Backry