Headlines News :

Latest Post

Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Cara Membuat Template Valid HTML 5 [blogspot]

Written By Akbaromadhon on Sabtu, 15 September 2012 | 09.09

Cara membuat template blogspot/blogger valid HTML5 - kali ini kita akan update dan mengambil dari posting Mas Zaid mengenai berbagi tehnik membuat template valid HTML 5

Untuk tutorialnya kita mulai dulu mengenal apa itu HTML 5, menurut wikipedia HTML 5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Setelah mengenal apa itu HTML 5 kali ini saya akan membawa anda untuk mempelajari bagaimana memvalidkan HTML 5 pada blogspot. Ayo kita mulai.

Tutorial Valid HTML 5 [blogspot]

1) Masuk ke validator.w3.org
2) Masukkan url anda pada kolom address dan lakukanlah seperti gambar dibawah ini.
Cara Membuat Template Valid HTML 5 [blogspot]

3) Klik Check dan lihat hasilnya, seberapa banyak eror terjadi, coba perbaiki satu demi satu, lihat pada validator output.
Cara Membuat Template Valid HTML 5 [blogspot]

4) Ubah meta tag anda menjadi default seperti ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Keyword blog anda' name='keywords'/></b:if>
<link href='http://zaid-info.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://zaid-info.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://zaid-info.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='kode validasi dari google webmaster' name='google-site-verification'/>
<meta content='kode validasi alexa' name='alexaVerifyID'/>
<meta content='kode validasi dari bing' name='msvalidate.01'/>
<meta content='Nama Anda' name='Author'/>
  • silahkan ubah http://zaid-info.blogspot.com/ ke url blog anda.
  • kembalikan <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'> menjadi <html> setiap kali edit HTML
5) Perbaiki kesalahan pada Edit HTML ( Expand Widget Templates )
6) Jangan terpaku dengan Edit HTML cek juga kesalahan pada post
7) Selamat berjuang

 Update 
Setelah selesai semua anda bisa ke setting (pada tampilan baru) >> Searh preferences >> setting robot.txt, Description, Custom robots header tags



Update 2 September 2012

Meta tag lebih seo friendly berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
<meta content='Keyword anda' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, Keyword anda, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>
kode validasi google alexa dan bing<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='nama anda' name='author'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://url anda.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http:// url anda.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>

Jika ada kesulitan bisa PM Mas Zaid di https://www.facebook.com/zaidblogger



Refrensi http://zaid-info.blogspot.com/2012/08/cara-membuat-template-valid-html-5.html
Diposting oleh Akbaromadhon di 09.09 2 komentar
Label: ,

Cara Membuat Auto Backlink ( Tukar Link ) Otomatis Di blogspot

Written By Akbaromadhon on Selasa, 17 Juli 2012 | 23.42

Pasang Link Blenza Mister Linky

Cara Membuat Auto Backlink ( Tukar Link ) Otomatis Di blogspot ~ Salam X-WaHz All About Info :)
Widget tukar link otomatis ini sebenarnya punyanya Blenza Mister linky, yang dapat di pasangkan langsung pada blog kita. bagaimana cara pemasangan widget tukar link otomatis ini...?


1. Kunjungi Blenza Mister linky Disini
2. KLIK register Lalu
3. Isi Form yang tersedia seperti User ID, Password dan yang lainnya
4. Setelah di Isi lengkap KLIK Register
5. Kemudian anda akan dikirim email verifikasi dari Mister Linky
6. Copy kode konfirmasi yang diberikan lewat email dan paste pada form konfirmasi
7. KLIK Confirm, Kemudian Login dengan Username dan Password kalian
8. Masuk ke Menu Wizard
9. Pada bagian server pilih Blogger, Pada Bagian Widget Klik Original Auto-Linkies
10. KLIK Generate code
11. Copy Script yang diberikan mister linky

  • CARA PASANG PADA BLOGGER
Setelah kalian mendapatkan script dari Mister linky, kalian buat Posting baru ( Kalian harus login ke blogger kalian lalu pilih entry baru )
pastekan script yang kalian copy dari Mister linky pada content postingan lalu klik terbitkan entry.

Untuk Hasilnya Kalian bisa melihat dan bertukar link dengan saya DISINI...

Sumber
Diposting oleh Akbaromadhon di 23.42 0 komentar
Label:

Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentang membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

image slider otomatis


Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :
  1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
  2. Pilih blog yang ingin anda tambahkan slider image ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
    Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
  6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    Keterangan :
    Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Warna biru : Jumlah post yang ditampilkan dalam slider
    Warna hijau : Panjang dan lebar image besar
    Warna merah tua : Panjang dan lebar image kecil
  7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
    Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
    script src=\"/feeds/posts/default/-/sport?max-results
    dengan kode berikut :
    script src=\"/feeds/posts/default?max-results
  8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
    view plainprint?
    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  
    4. word-wrap: break-word; overflow: hidden;}   
    5. .slide {color: #666666;line-height: 1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .slide .widget {margin:0px 0px 6px 0px;}  
  9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    view plainprint?
    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </b:if>   
    G3RTAQDV75WT
Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Membuat Content Slider Image Otomatis

Diposting oleh Akbaromadhon di 06.26 0 komentar
Label:

Cara Membuat SubMenu di Blogspot

Written By Akbaromadhon on Jumat, 13 Juli 2012 | 05.58

Hi... Sobat!!
Alhamdulillah kita masih diberi nikamat sehat dan sempat Oleh Allah sehingga dengan sehat dan sempat saya dapat berposting kembali setelah postingan terakhir  Kerjain Monitor Temen Dengan Screen Shaker
saat ini dapat berkembali dengan judul Cara Membuat SubMenu di Blogspot.


Membuat submenu bukanlah hal yang mudah tetapi setelah bertemu dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak sedikitpun merasa sulit.
nah untuk mengetahui Cara Membuat SubMenu di Blogspot dapat anda ikuti langkah berikut :
1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML
4. Copas kode berikut tepat diatas ]]></b:skin>

/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
5. cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>
6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->
7. lalu di simpat
mudah bukan??
SELAMAT MENCOBA!!

Sumber
Diposting oleh Akbaromadhon di 05.58 0 komentar
Label:

Translate

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. WaHz WebBlog - All About Info - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger