09 Maret, 2012

Cara buat web gratis

Cara buat web gratis

Memberikan link publisher pada home page

Posted: 08 Mar 2012 05:49 PM PST

Memberikan link publisher pada home page sama pentingnya dengan memberikan link author pada halaman post.
Pemberian Link publisher dimaksudkan untuk menegaskan bahwa kita sebagai penerbit blog yang kita tambahkan pada halaman google plus. Dan link author menegaskan bahwa kita yang memiliki profil google plus adalah sebagai penulis artikel atau penulis konten pada blog yang kita tambahkan pada halaman google plus tersebut.

Kalau sebelumnya kita sudah berganti profil dari profil blogger menjadi profil google plus yang langkah -langkahnya saya tulis pada artikel "Mengganti profil Blogger ke google plus", lalu setelah itu saya juga sudah jelaskan langkah - langkah memberi link author pada blog yang saya tulis pada artikel "Cara menampilkan Author blog di google".

Nah..., sekarang akan saya jelaskan secara mudah menambahkan link publisher pada blog kita yang tepatnya pada home page. Karena penempatan link publisher tidak diterima bila diletakkan pada halaman yang sama dengan link author. Dan google sendiri sangat menyarankan penempatan link publisher pada homepage dan link author pada halaman post atau halaman konten.

Jadi silahkan anda ikuti beberapa langkah mudah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :
<head>

5. Copy kode di bawah ini dan taruh tepat setelah kode <head> :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://plus.google.com/105300861809836021402' rel='publisher'/>
</b:if>
Catatan : Ganti teks berwarna merah dengan profil google plus anda.

6. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal kita TES dengan menggunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR blog anda.
Bila berhasil maka akan tampak seperti pada gambar berikut :
Gambar diatas menunjukkan penempatan link publisher sudah benar pada homepage.

Sekarang anda masukkan ULR artikel anda pada "Rich Snippets Testing Tool", untuk membedakan antara link publisher dengan link author, yang cara masangnya saya jelaskan pada artikel "Cara menampilkan Author blog di google".
Bila berhasil maka akan tampak seperti pada gambar berikut :
Gambar diatas menunjukkan penempatan link author sudah benar pada halaman post.

Nah... bila semua sudah berhasil, maka akan kita lanjutkan ke tahap berikutnya yaitu "Cara Memasang Rating Bintang Rich Snippets" pada artikel yang akan datang.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Diposting oleh di Tidak ada komentar:

08 Maret, 2012

Cara buat web gratis

Cara buat web gratis

Cara menampilkan Author blog di google

Posted: 08 Mar 2012 09:06 AM PST

Untuk menampilkan author blog atau informasi penulis kedalam alat pencarian google, tentu kita harus memiliki Profile Google plus terlebih dahulu.

Ada dua cara bila kita ingin memiliki Profile Google plus :

Yang pertama, silahkan langsung menuju ke https://plus.google.com untuk membuat akun Google plus baru.

Yang kedua, memindahkan profil blogger ke profil google plus seperti yang saya bahas pada waktu yang lalu. Bila anda belum memindahkan profil blogger anda  ke profil google plus, silahkan anda bisa ikuti langkah - langkahnya pada artikel "Mengganti profil Blogger ke google plus".

Dengan menampilkan author blog atau informasi penulis kedalam alat pencarian google, tentu sangat membantu pengguna google benar - benar menemukan konten atau artikel yang dicari, selain itu pengguna langsung dapat mengetahui penulis artikel pada hasil pencarian google. Dan informasi yang ditampilkan bisa nama atau foto profil google plus. Tapi sayangnya Google tidak menjamin untuk menampilkan informasi penulis pada pencarian google ataupun hasil Google News.

Tapi yang jelas menampilkan author blog pada alat pencarian google, juga sangat membantu kita untuk meyakinkan pengunjung untuk benar - benar memilih konten atau artikel yang jelas penulisnya. maklum.... banyak juga blog-blog spam yang bertebaran...

Kembali kepokok masalah...., Setelah memiliki profil google plus langkah selanjutnya menambahkan web atau blog kita kedalam google plus.
Berikut ikuti langkah - langkah yang saya bagi menjadi dua tahap A dan B :

A. Edit Profile Google plus
     1. Buka profile Google plus anda.

     2. Edit profile Google plus anda.

Dan berikut yang paling penting untuk di Edit:
  • Pilih Kontributor untuk:
 
  •  Tambahkan tautan ubahsuaian

  •  Isi ULR blog yang ingin ditambahkan :
  • Langkah selanjutnya kirim Email. 



Klik tombol "Tentang", lalu scroll kebawah. Pada poin Rumah dan Kantor, silahkan isikan Email anda pada form yang disediakan. Saran saya pada pengaturan yang ada dibawah form, pilih hanya anda yang tahu. Hal ini untuk menghindari hal - hal yang tidak diinginkan :

  • Selesai, kemudian pada bagian atas Klik "Pengeditan selesai"
  • Yang terakhir tinggal Verifikasi Emal
Silahkan anda verifikasi kedua email yang anda kirimkan :
Kemudian buka pesan verifikasi yang dikirim pada kedua email anda, dan klik link yang diberikan. Bila anda berhasil verifikasi kedua email anda, maka pada halaman profil, email anda muncul tanda centang.

Tahap pertama selesai, sekarang menuju tahab kedua :

B. Menambahkan link author pada Blog.
Untuk menambahkan link author, google menyarankan untuk meletakkan link author didalam halaman post, dan "Link publisher" pada home page. Mengenai "Link publisher" akan saya bahas pada artikel berikutnya.

     1. Masuk Rancangan - Edit HTML - Centang "Expand Template Widget", kemudian cari kode seperti dibawah ini :

<span class='fn'><data:post.author/></span>


     2. Ganti kode diatas dengan kode dibawah ini :
<span class='fn'><a href='https://plus.google.com/ID PROFIL GOOGLE PLUS' rel='author'><data:post.author/></a></span>
Catatan : Jangan lupa ganti teks merah "ID PROFIL GOOGLE PLUS" dengan Id Profil Google Plus Anda.

Berikut contoh milik saya :
<span class='fn'><a href='https://plus.google.com/105300861809836021402' rel='author'><data:post.author/></a></span>


     3. SIMPAN TEMPLATE

Sekarang tinggal kita lihat, apakah google berhasil mengekstrak link author yang anda pasang dalam blog, anda dapat mempergunakan "Rich Snippets Testing Tool".

Bila anda berhasil maka akan tampak seperti gambar berikut :

Setelah berhasil, langkah paling akhir adalah mengirim permohonan Authorship pada halaman Authorship Request di alamat "Authorship Request".
Pada halaman tersebut isi form sama dengan yang anda isikan pada profil google plus pada gambar seperti berikut :

Nah selesai semua .... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Diposting oleh di Tidak ada komentar:

05 Maret, 2012

Cara buat web gratis

Cara buat web gratis

Cara buat tab menu atau multi tab

Posted: 05 Mar 2012 05:42 AM PST

Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu tab, mengganti warna menu tab baik pada saat aktif ataupun ketika hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog anda.

Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau  multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :

Seperti biasa ....
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

5. Copy kode javascript di bawah ini dan taruh tepat sebelum kode </head> :

6. Kemudian Copy juga kode CSS di bawah ini dan taruh tepat setelah kode javascript diatas, atau sebelum kode </head> :

7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan anda cari pada bagian sidebar, pada blog ini kodenya seperti berikut :
<div id='rsidebar-wrapper'>
Catatan :
  • Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
  • Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"
8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) :
<div class='tabber'>

<div class='tabbertab' id='tab1'>
<h2>TAB MENU 1</h2>
<b:section class='sidebar101' id='sidebar101' preferred='yes'>
<b:widget id='HTML101' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab2'>
<h2>TAB MENU 2</h2>
<b:section class='sidebar102' id='sidebar102' preferred='yes'>
<b:widget id='HTML102' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab3'>
<h2>TAB MENU 3</h2>
<b:section class='sidebar103' id='sidebar103' preferred='yes'>
<b:widget id='HTML103' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

</div>
<div style='clear:both;'/>
Catatan :
  • Teks warna biru adalah Judul tab menu.
  • Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
  • Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.
9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat  :
 

Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 6) yang perlu di ganti :
<style type='text/css'>


.tabberlive{
margin-left:0px;
margin-right:0px;
padding-left:5px;
padding-right:5px;
padding-top:6px;
padding-bottom:5px;
clear:both;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5budeyBRbgnMmfus_zxJUjT0U9RqwurbKIG3jK9eMlL-3gVaDiZ0rcu2i2xyVHoMvQgP9B3CRBEkPJkr5jSevNJWvQLQyEFK9EjArlqnxS4swu2qfPcBQhjKR0GQVxv7ppkKAp33-Ig/h1600/bg_post.jpg) top left repeat-x;
border:1px solid #DDD;
} 
<---------------------------------------------------------->
Warna biru adalah background tab menu menggunakan background gambar, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->

.tabbernav {
list-style:none;
list-style-type:none;
margin-left:0;
padding-left:0px;
padding-top:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}




.tabbernav li {
list-style:none;
list-style-type:none;
width:20%;
margin-right:1px;
margin-bottom:0px;
display:inline;
}




.tabbernav li a {
padding-top:7px;
padding-bottom:7px;
padding-left:6px;
padding-right:6px;
list-style:none;
list-style-type:none;
margin-right:1px;
background:#3e5fa2;
text-decoration:none;
color:#ffffff;
outline:none;
} 
<----------------------------------------------------------> 
Warna biru adalah background Judul tab menu (#3e5fa2 / biru tua), dan warna hijau adalah warna teks Judul tab menu (#ffffff/ putih). Silahkan anda lihat tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabbernav li a:hover {
list-style:none;
list-style-type:none;
color:#000;
background:#7290ce url() center left no-repeat;
text-decoration:none;
outline:none;
} 
<---------------------------------------------------------->  
Warna biru adalah warna background Judul tab menu (#7290ce / biru muda) ketika hover, dan warna hijau adalah warna teks Judul tab menu (#000/hitam)ketika hover. Silahkan anda lihat dan coba arahkan mouse anda pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
list-style:none;
list-style-type:none;
background:#fff;
color:#3e5fa2;
outline:none;
padding-bottom:22px;
padding-left:6px;
padding-right:6px;
border-right:2px solid #ddd;
border-left:2px solid #ddd;
border-top:1px solid #ddd;
} 
<---------------------------------------------------------->  
Warna biru adalah warna background Judul tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna teks Judul tab menu (#3e5fa2/biru tua)ketika aktif. Silahkan anda lihat dan coba Klik pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->



.tabberlive .tabbertab {
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding-top:5px;
padding-left:6px;
padding-right:6px;
padding-bottom:5px;
background:#fff;
border:2px solid #ddd;
}
 <---------------------------------------------------------->  
Warna biru adalah warna background konten tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna border konten tab menu (#ddd/abu-abu).
<---------------------------------------------------------->



.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}




.tabbertab .widget-content ul{
margin-top:5px;
margin-left:5px;
padding:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5budeyBRbgnMmfus_zxJUjT0U9RqwurbKIG3jK9eMlL-3gVaDiZ0rcu2i2xyVHoMvQgP9B3CRBEkPJkr5jSevNJWvQLQyEFK9EjArlqnxS4swu2qfPcBQhjKR0GQVxv7ppkKAp33-Ig/h1600/bg_post.jpg) top left repeat-x;
} 
<----------------------------------------------------------> 
Warna biru adalah background pada widget yang menggunakan tag "ul", contohnya bisa anda lihat pada tab menu "Arsip" yg ada di blog ini. Background "ul" tab ini menggunakan gambar gradasi abu-abu putih, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->



.tabbertab .widget-content ul a:hover{
text-decoration:none;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04jStDOh2Zo4nXNL8jhWjNCeiPmq4NVAnIttLYbqrmUj6DcTANWhKZ1hyVdozsyEfIHxxBfNA6NJUcq31YkM7DjUff0p2E_1LeDkazjugIUxz9jWdY1n-5ClKa1DMEYizMOqfBzLm8fI/h1600/bg_menu.jpg)top repeat-x;
}
 <---------------------------------------------------------->  
Warna biru adalah background pada widget yang menggunakan tag "ul" ketika hover.  Background "ul" hover tab ini menggunakan gambar gradasi abu-abu putih terang, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #fff;
<---------------------------------------------------------->



.tabbertab .widget-content li {
color:#488040;
border-bottom:1px solid #ddd;
margin:0 5px;
padding:5px;
}



</style>

Nah.... selesai, mudah - mudahan penjelasan diatas membantu.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)