Navbar Auto-Hidden disisi kanan

Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang  kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi    yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;

Screen shot

Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
• Copas Script berikut kedalamnya

<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width: 42px;
border:0px;
display: block;
padding:1px;
}
ul#navigation1 li a {
display: block;
width: 150px;
height: 42px;
padding: 20px 5px 0 20px;
margin-top: -20px;
color: #FFF;
text-align: center;
font-family:"Tahoma", Verdana;
font-size:16px;
font-weight:bold;
background-color:transparent;
background-repeat:no-repeat;
background-position:left center;
border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px;
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .Home a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrRrMiJnPyXjsj4kgXAu_GQgjFu2pN18AQWKryDt5YOoWD-wj2w4fwzbwIjmFwgj3FpOabUVyQ2rHivvTXrKqL5D3v2gOlhF9c6L8nzxJlDkmf8Oe7O5KG7ju9ajJYiwpertcCYe5vMA/s1600/Home.png);
}
ul#navigation1 .Kreasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZRRsDzJOyqSlBJSRH9A-1HjviQLlAvNMyk9-q4gTnimzJ0MuBd-ah5OXCKhHxTaTtul0gfsgSxx_EpYiMuRCTU5jCzSqPUc5naIZubQVMoUhRQRoFkD3EuIzxHKLI5XzLxR1IvY9hBo/s1600/Kreasi.png);
}
ul#navigation1 .TipsTrik a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNW5WPZKJ_bz_-Zi5iGEA3UwrJamm12Ix8kq2JQljAyq_smPaxCmDM0nD5ExFgVJIlvKw4jy1E-aSPpQaP9sAPmLcppTiMBhnQsXm1-VfB5Y-gB7UoXM-Xdx3C0YyHggxjyzByMjamhM/s1600/Tips+Trik.png);
}
ul#navigation1 .Tutorial a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijdr8y27cEEm8JI9XrduRr5s0xW-9nbMwJ06uskkdYe0pdWIO6qEqhs8PF78yh3KQjU1Vpgdc8zyJN64XVZzgMNgJFZvj-ziQE0C2v57Q1JOtUfaIxzpT-_jU7glBbuPt0EMKQxAx2CbA/s1600/Tutorial.png);
}
ul#navigation1 .Widget a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaewn0Jwkml6bCXtbsO1Ni2Vv3pJht_A87vm22yx1DpPn5sjEZqBT0t6-uH9IXhS7SdMraroJOEzd3Ms060h-wBUL9FSZv9TfHNqApa8-gLtwZPFOFITBIdiDWjYe1sAbrbDpvR-Gd4xs/s1600/Widget.png);
}
ul#navigation1 .Animasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyllgxWsxSZOsM3fq8qBQpxdm1SUbxoP-Pyq3ZJbcbFreldoVAHX0kdscVjhLPm9nVzzhQofGzat2Bva6wVh2SEiv5H1UxztQ5_nSBJS956tkBDg74ZrdCQ0pVW5xMlGNRGblXkv2GHQs/s1600/Navbar.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'5px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-112px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'5px'},200);
}
);
});
</script>
<ul id="navigation1">
<li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li>
<li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li>
<li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li>
<li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li>
<li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li>
<li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li>
</ul>

• Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan, 
• Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya 
• sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan

Contoh Image Navbar

• Selamat Mencoba, sukses selalu :

Read more ...

Daftar Isi BBC Gaya punya

Dari sekian Daftar Isi Blog yang sudah saya bahas, baik yang biasa maupun yang seperti Slide / Animasi Otomatis silahkan kawan nanti lihat contohnya di Blog Demo saya :y; agar pembicaraan saya tidak ngelantur sekarangpun saya akan membahas Daftar Isi berdasarkan Katagori Otomatis Buka-Tutup yang saya beri Judul Daftar Isi BBC :z;

Walau model yang ini sudah cukup lama, tapi tak ada salahnya saya bagikan sama kawan setia pengunjung BlogBego Creation ini yang belum mengetahui dan ingin mencobanya :w;

Setelah kawan melihat Demonya, sekarang mari kita ke Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
• Copas Script berikut kedalamnya

<style type="text/css">
#daftar-Bbc{
font-family:"Helvetica", Tahoma, Verdana;
font-size:13px;
font-weight:bold;
color:#FF0;
background:-moz-linear-gradient(top,#FFF,#000);background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#FFF));
padding:5px 0;
border: 1px solid #0FF;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
.daftar-label{
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
font-weight:bold;
font-size: 13px;
font-family: segoe Print;
line-height:1.4em;
text-transform: uppercase;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 5px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 3px 10px;
color: #FFF;
border:1px solid #2F94BA;
}
.daftar-label:hover{
background:#7CA9C0;
color:#FF0;
text-shadow: 2px 2px 2px #036;
font-size: 13px;
border: 1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.daftar-daf ol{
margin:0 0 0 35px !important;
padding:0 !important;
}
.daftar-daf ol li{
background-color:#C9E9F4 -moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#95CAFF),to(#FFF));
line-height:1.5em;
margin:0 5px !important;
padding: 3px;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.daftar-daf ol li a{
text-decoration: none !important;
color:#333; !important;
display:block;
font-size: 13px;
padding:0 0 0 10px;
}
.daftar-daf ol li a:hover{
background:#7CA9C0;
border: 0px #FFF solid;-moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;
padding: 0 5px;
color: #FFF;
font-size: 13px;
text-shadow: 2px 2px 2px #F00;
}
</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/Bbc.js" type="text/javascript"></script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Ganti teks yang berwarna merah [Nama Blog Kawan] dengan URL Blog Kawan :q;
• Simpan Blog kawan dan lihat hasilnya

Read more ...

Tampilkan Rating Bintang di Blog

Setelah sebelumnya saya berbagi Tampilkan Image Author di Pencarian G+ tanpa harus Profil Blogger beralih ke Profil G+ :z; dan untuk melanjutkan G+ saya berbagi lagi dengan kawan Cara Menampilkan Rating Bintang pada Blog, apa itu Rating, apa gunanya / tujuannya dan lain sebagainya kalau kawan ada bertanya - jawaban saya sangat simple biar Blog kelihatan menarik, karena saat saya selusuri di mbah Google cara pemasangan Ranting Bintang [Rating Rich Snippet Review] pada umumnya dipasang secara manual dibawah posting setiap kali kita posting, sedangkan posting lama perlu diadakan setting ulang supaya bisa menampilkan Rating [Ribet dan membosankan],  :r;  

Menurut pemikiran saya pribadi Rating seharusnya otomatis akan kelihatan berdasarkan banyaknya pengunjung yang memberikan penilaian seperti pada Alexa yang berisi 5 tanda bintang [1, 1.5 sampai 5], tapi kenyataannya para Blogger mengisinya diatas 4 - 4.5 dan 5 bintang, belum pernah saya lihat memakai 1 Bintang [termasuk saya juga] kwek kwek :q;

Kalau kawan ingin memasang Rating Bintang di Blog dengan cara seperti saya ini [otomatis] tanpa perlu Ribet setiap posting tambahkan Rating Bintang :q;

Caranya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Beri tanda check  disamping  Expand Template Widget 
• Sebaiknya Simpan dulu Template kawan untuk jaga-jaga :w; 
• Cari tag <body> dan letakan Kode berikut dibawahnya 

<div><div itemscope=''itemtype='http://data-vocabulary.org/Review'>

• Tambahkan </div></div> sebelum tag </body> 
• Selanjutnya cari <h1 class='post-title entry-title'> atau Script Judul Postingan kawan [untuk cepatnya pencarian kawan pakai Ctrl+F dan ketik <data:post.body/> terus scroll sedikit keatas perhatikan gambar berikut 

Keterangan Gambar :
- <h1 class='post-title entry-title'> karena struktur Template berbeda-beda khusus h1 bisa h2 atau h3
- Kode yang berlatar belakang warna biru <span itemprop='itemreviewed'><span itemprop='description'> letakkan diatas <h1 class='post-title entry-title'> merupakan tambahan yang selanjutnya ditutup dengan </span></span> setelah </h1> kwek kwek kwek ribet ya kawan, jangan khawatir saya kasi contoh

<span itemprop='itemreviewed'><span itemprop='description'>
<h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</span></span>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>

• Berikutnya cari  <span class='fn'><data:post.author/></span> atau pada Template saya kodenya seperti <div class='vcard' id='hcard-En sin' style='display: inline;'><span class='fn'><data:post.author/></span></div> tambahkan atau selipkan <span itemprop='reviewer'> sebelum  <data:post.author/></span></span> jadinya sebagai berikut

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

atau punya saya seperti 

<div class='vcard' id='hcard-En sin' style='display: inline;'><span class='fn'><span itemprop='reviewer'><data:post.author/></span></span></div>

• Selanjutnya untuk Pemasangan Kode Rating Bintang, kawan cari <data:post.body/>, seandainya ada  lebih dari 2 [karena pakai Readmore], kawan pilih yang pertama atau setelah Readmore [baca selengkapnya] 

Rating: <span itemprop="rating">4.5</span>

atau bisa yang lebih lengkap seperti berikut:

 <p>Description: <span itemprop="description"><data:post.title/></span> - 

Rating: <span itemprop="rating">4.5</span></p> 

<p>Reviewer: <span itemprop="reviewer"><data:post.author/></span> - 

Itemreviewed: <span itemprop="itemreviewed"><data:post.title/></span></p> 

Penjelasan » 4.5  seperti penjelasan saya diatas bisa dirubah antara 1 - 5 [1. - 1.5 - 2. - 2.5 sampai maksimal 5.]  INGAT :  jangan lebih dari 5 !!! :y;

• Simpan Template dan cek pada Google Rich Snippet Testing dengan memasukkan URL salah satu Artikel / Postingan kawan yang ada pada kotak disamping Review atas

contoh hasilnya »

• Seandainya kawan hasilnya belum seperti Gambar diatas ini coba cek ulang, mungkin ada kesalahan menempatkan kode 

Read more ...

Tampilkan Image Author di Pencarian G+

Dilema para Blogger yang mempergunakan modem USB [baca : Internet Unlimated] sangat terasa kalau beralih ke G+ [Google Plus] karena semua Profil Blogger diwajibkan beralih ke G+ yang berisi banyak fasilitas terkandung didalamnya, menyebabkan menjadi sangat berat :y;  salah satu fasilitasnya adalah agar Image / Gambar Author bisa tampil di Pencarian G+ :w; 

Cara menampilkan Image Author di Pencarian G+ tanpa beralih ke Profil G+ [kawan tetap memakai Profil Blogger], saya bagikan dengan Gambar dan penjelasan seperlunya :

• Masuk Account Blogger dengan ID kawan 

• Coba masuk ke Google Rich Snippet - Masukkan URL salah satu postingan kawan pada kotak yang atas terus tekan Preview, maka hasilnya seperti dibawah ini

Nah itulah salah satu kelebihan dari G+

Sekarang mari kita mencoba menampilkan Image Author di Pencarian G+ dengan Cara beda dan sangat simple, silahkan baca dan simak kelnjutannya :

• Masuk ke Google Authorship 

• Kawan diminta buka Email untuk meng-verifikasi 

• Setelah kawan meng-Klik Verifikasi, selanjutnya akan dibawa ke Frofil G+ 
• Disamping Foto Profil kawan pilih [Klik] Edit Profil - terus scroll ke bawah sampai pada Kontributor untuk - arahkan mouse dan backgroundnya akan berubah dan silahkan Klik untuk Edit dan akan muncul PopUp 

• Silahkan isi kotak Label untuk Nama Blog kawan dan URLnya, kalau sudah selesai jangan lupa Klik Simpan

• Selanjutnya scroll ke atas lagi dan Klik Pengeditan selesai disamping Foto Profil kawan
• Copy URL / ID kawan di pencarian contoh [https://plus.google.com/u/0/113381860722075883522] 

Sekarang beralih ke Dasbor dan pilih Template - Edit HTML - Lanjutkan

• Cari ]]></b:skin>
• Copas Kode berikut dibawahnya <link href='URL G+ Anda' rel='author'/>
• Ganti teks yang berwarna merah itu dengan ID Google Plus Blog kawan [yang di copy tadi]

Contohnya :

<link href=' https://plus.google.com/u/0/113381860722075883522 ' rel='author'/>

• Simpan Template kawan

Sampai disini sudah selesai :x; silahkan cek kembali di Google Rich Snippet 

Kalau hasilnya sudah sepeti Gambar itu berarti kawan sudah sukses menampilkan Image Author di Pencarian, cuma untuk melihat hasil riilnya tidak bisa sesegera mungkin :w; 

Mudah-mudahan ada manfaatnya untuk kawan dan selamat mencoba

Read more ...