Admin Bar Widget untuk Blogger

Ketika ingin mengupdate blog kadang-kadang kita mendapatkan beberapa ide posting baru atau untuk melakukan beberapa perubahan dengan blog. Admin bar ini memudahkan untuk menavigasi langsung kepada point-point yang ingin kita rubah secara langsung.

widget ini menciptakan link yang akan membawa langsung ke pilihan blogger. Ada dua jenis dan masing-masing memiliki cara instalasi yang berbeda. Kita akan membahas kedua cara tersebut.

1. Instalasi Custom jenis-jenis ini adalah lebih bergaya, dapat melihat screenshot di bawah ini.

Untuk memasang widget ini, pergi ke PAGE ELEMENT>> ADD A GADGET>> HTML/JavaScript dan salin kode di bawah ini.

<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=####" target="_blank">Change Settings</a></li>
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=####" target="_blank">Change layout</a></li>
<li><a class="editpost" href="http://www.blogger.com/post.g?blogID=####" target="_blank">Edit posts</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=####" target="_blank">New post</a></li>
</ul>

Rubah #### dengan id blog Anda. Anda dapat menemukan ID blog anda pada Adress Bar diatas, kemudian jangan lupa disimpan.

Kemudian pergi ke EDIT HTML lalu temukan ]]></b:skin> kemudian salin kode berikut diatasnya:

ul.adminbar
{background-color:#EEEEEE;
border:1px solid #E6E8E9;
margin-bottom:8px;
padding:5px 5px 0;
}
ul.adminbar li {
background-color:#FAFAFA;
border:1px solid white;
list-style:none outside none;
margin-bottom:6px;
outline:1px solid #DDDDDD;
padding:12px;
}
ul.adminbar li a
{display:block;
color:#888888 !important;
text-shadow:1px 1px 0 #FFFFFF;
text-decoration:none;
font-size:22px;
height:27px;
margin:0 0 0 15px;
}
a.dashboard
{background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;
padding:4px 0 2px 47px;
}
a.settings
{background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;}
a.layout
{background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.editpost
{background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.newpost
{background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}

Kemudian Simpan & Selesai sudah.

Sekarang jika Anda mengalami kesulitan dengan widget diatas, ada cara lain yang lebih sederhana untuk menginstalnya tanpa menggunakan CSS.

2. Instalasi jenis klasik ini lebih sederhana dan mudah. Hanya pergi ke PAGE ELEMENT>> LINK LIST dan tambahkan link berikut di dalamnya.

Dashboard : http://www.blogger.com/home

Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####

Change Layout : http://www.blogger.com/rearrange?blogID=####

Edit Posts : http://www.blogger.com/post.g?blogID=####

New Post : http://www.blogger.com/post-create.g?blogID=####

Ganti #### dengan ID blog kamu dan kemudian simpan.

[ Baca selengkapnya ]

2 Gadget baru untuk Blogger

Setelah meluncurkan fitur statistik blog untuk blogger yang kini telah meluncurkan sebuah widget Blog's Stat bersama dengan widget Popular Post. Ini adalah dua widget baru yang telah ditambahkan blogger di draft.blogger untuk diuji.

Popular Post

widget ini menampilkan semua posting yang populer yang dapat diurutkan berdasarkan tiga cara baik waktu Semua, Terakhir 30 hari, lalu 7 hari. Anda juga dapat memilih untuk menampilkan thumbnail dari posting tersebut. Anda dapat melihat screenshot di bawah ini.

Blog’s stats

widget ini menampilkan total tampilan halaman gadget blog.Tampil dalam berbagai gaya dan juga dilengkapi dengan grafik sparkline opsional. Lihat gambar di bawah.

Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.

[ Baca selengkapnya ]

Lagi Malas Posting SEO dan Trik Blogger

Emang, kalau sudah kedatangan tamu "Malas", rasanya bikin apa saja jadi serba salah.  Enaknya sih dibawa tidur :-D   Dan sekarang sedikit kesempatan, OB manfaatkan untuk hanya sekedar ber-hello ria dengan kawan-kawan narablog.  Apalagi mumpung pas lebaran, pas kondisinya, pas waktunya, pas tempatnya, pas...pas...salonpas.  OB tidak akan mengupas atau berdiskusi tentang SEO atau trik blogger.  Namun untuk ngucapin ini nih:

Saat ada...
Tiada bersuara
Saat tiada...
Teriak sesal bergema
Sebelum adamu menjadi tiada bagiku

Izinkan sesalku menghampiri lembut dalam pangkuanmu
Mohon maaf lahir dan batin

Selamat Hari Raya Idul Fitri 1431 H

[ Baca selengkapnya ]

Animasi Transparent Navbar

Sumber : (blogspot) Animasi jQuery untuk Navbar by Ardianzzz

Yang perlu dijadikan catatan pada trik ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, mengganti dengan jenis navbar lain, bahkan menghilangkan secara permanen navbar tersebut.

Nah, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin trik blogger ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. Trik ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){

$(this).fadeTo("slow", 0.1);
});
});
</script>

Silakan Copas jQuery di atas di atas tag </head>.

Catatan :
Ganti kode yang berwarna merah (0.1 = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai 0.0 :)

Ganti kode yang berwarna hijau (1.0) menjadi 0.75 jika ingin transparasi navbar saat didekati mouse bernilai 25%. Sedangkan jika tetap pada nilai 1.0, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.
Selamat mencoba...

[ Baca selengkapnya ]