Membuat Menu Melayang

Tips Dan Trik Tutorial Blogspot

Membuat Menu Melayang | Tutorial Blog

Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.

Berikut cara Membuat Menu Melayang :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya :
<style>
div.floating-menu {
position: fixed;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
background: -moz-linear-gradient(top, #000, #666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#999999');
border: 1px solid #000;
width: 150px;
z-index: 500;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border:none;
padding:10px 10px 10px 10px;
}
div.floating-menu a, div.floating-menu h4 {
display: block;
margin: 0 0.5em;
color:#FFF; }
div.floating-menu a:hover {
color:#0000FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0088ff), to(#bbddff));
background: -moz-linear-gradient(top, #0088ff, #bbddff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088ff', endColorstr='#bbddff');
color:#FFF;
cursor: pointer;
text-decoration: none;
padding: 5px 5px 5px 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
</style>
Setelah itu sobat cari kode <body> dan masukan kode di bawah ini di bawah <body>.
<div class="floating-menu">
<h4>Menu</h4>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
</div>
Ganti http://alamat-url/ dan Anchor Text,
Terakhir klik Save / Simpan Template.

Selamat mencoba dan semoga berhasil Membuat Menu Melayang.

Membuat Widget Daftar Isi Tersembunyi

Tutorial Blogspot Widget / Gadget

Membuat Widget Daftar Isi Tersembunyi | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Daftar Isi Blog, pada tutorial kali ini daftar isi tersebut akan kita pasang pada widget di sidebar blog dengan mode Show Hide.

Buat yang ingin mencobanya, silakan ikuti tutorial berikut :

Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget, pilih HTML/Java Script
Lalu masukkan kode berikut :
<div class="widget-content">
<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

<script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

</div></div></div></div></div></div></div>
Keterangan :
blue : warna background, silakan ganti sesuai keinginan Anda.
width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.
alamatblog.com : Ganti dengan alamat blog Sobat.
Widget diatas daftar isi berdasarkan label, untuk Daftar Isi Berdasarkan Tanggal berikut kodenya :
<div class="widget-content">
<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

<script src="http://post-xml.googlecode.com/files/feed-dates.js"> </script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script>

</div></div></div></div></div></div></div>
Lalu klik Save.
hasilnya akan seperti ini, silakan di klik.
Daftar Isi
Judul Postingan
Judul Postingan
Judul Postingan
Judul Postingan
Dan Seterusnya

Sekian tutorial tentang Membuat Widget Daftar Isi Tersembunyi.

Widget Google Followers Valid XHTML

Tips Dan Trik Tutorial Blogspot Widget / Gadget

Widget Google Followers Valid XHTML | Tutorial Blog

Dari hasil Tes Valid XHTML lewat validator.w3.org, widget Follower default dari blogger dinyatakan tidak valid. Widget ini mengandung error. Pada tutorial kali ini kita bahas cara memasang widget Google Followers yang Valid XHTML, caranya kita gunakan kode asli dari google friend connect.

Berikut Tutorialnya :

Masuk ke situs http://www.google.com/friendconnect/, dan Login menggunakan account gmail anda.
Pilih blog Sobat yang ingin di pasang widget Google Followers, lalu klik pada Tambahkan Gadget Anggota.
Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
Copy kode yang diberikan oleh Google Friend Connect tersebut.
Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
Kemudian pilih Add a Gadget.
Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
Lalu klik Save. Selesai...

Supaya benar-benar valid, Masuk ke menu Edit HTML, dan beri tanda centang pada box Expand Widget Template, Cari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari template anda.

Selanjutnya akan saya buat tutorial tentang Widget Google Followers Hide Show.

Sekian tutorial tentang memasang Widget Google Followers Valid XHTML.

Cara Menghapus Waktu Postingan

Tips Dan Trik Tutorial Blogspot

Cara Menghapus Waktu Postingan | Tutorial Blog

Settingan waktu / jam secara default pada blogspot akan muncul di setiap postingan, beberapa blogger tidak senang dengan adanya waktu / jam postingan tersebut, pada tutorial kali ini saya akan berbagi cara menghilangkan waktu / jam postingan tersebut secara permanen.

Berikut langkah-langkahnya :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Kemudian cari kode di bawah ini :
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url'
rel='bookmark' title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></
a>
</b:if>
</b:if>
</span>
Akan lebih mudah untuk menemukan kode di atas dengan menggunakan fungsi Ctrl+F (find) dan cari kode <span class="post-timestamp">, Jika sudah ketemu, delete kode yang ada di dalam kotak berwarna biru diatas.
Terakhir klik Save / Simpan Template.

Perhatian, cara ini akan menghilangkan waktu / jam pada postigan secara permanen.

Sekian dan terima kasih...

Membuat Widget Melayang di Blogger

Tips Dan Trik Tutorial Blogspot

Membuat Widget Melayang di Blogger | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Widget Melayang di Wordpress.com, untuk kali ini Membuat Widget Melayang di Blogger / Blogspot.

Ok Sob , berikut caranya :

Login ke blogger, klik Design > Edit HTML.
Beri tanda centang pada kotak Expand Template Widget.
Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
#floating-widget { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
<div id='floating-widget'>
Letakkan kode widget disini
</div>
Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.

Silakan dicoba dan Semoga berhasil...

Cara Menampilkan Share Button

Blogger Templates Tutorial Blogspot

Cara Menampilkan Share Button | Tutorial Blog

Bagi sobat blogger yang sudah pernah atau sering gonta ganti template yang diambil dari penyedia template mungkin tidak bisa memakai fitur Share Button. karena kode Share botton pada design template tersebut mungkin fiturnya tidak ada, jadi Share botton-nya tidak muncul.

Berikut Cara Memunculkan Share Button di Blogger :

Masuk ke blogger, klik Design > Page Element
Kemudian klik Edit pada Blog Posts
Beri centang pada Show Share Buttons
Klik Save dan cek apakah muncul tombol sharenya
Jika masih belum muncul silahkan ke tab menu Edit HTML
Beri centang pada Expand Widget Templates.
Cari kode <b:includable id='backlinks' var='post'>.
Letakkan kode berikut diatas kode <b:includable id='backlinks' var='post'>.
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
</a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
</a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a></b:if>
<b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>
Selanjutnya cari kode <div class='post-footer'> atau di posisi line 2, line 3,misalnya line 3 : <div class='post-footer-line post-footer-line-3'>.
Lalu letakkan kode berikut di bawah kode tersebut.
<div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
Klik Save Template dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat...

Membuat Widget Melayang di Wordpress.com

Tips Dan Trik Tutorial Wordpress

Membuat Widget Melayang di Wordpress.com | Tutorial Blog

Widget melayang (Floating Widget) mungkin dapat Sobat gunakan untuk mempercantik tampilan blog, cara memasangnya mudah saja, namun tidak semua widget dapat di pasang menggunakan trik ini.

Langsung saja Sob, berikut caranya :

Login ke Wordpess Anda, Klik Appearance > Widgets.
Pilih Widget Text, Drag ke Sidebar
Lalu letakkan kode berikut ;
<div style='display:scroll;position:fixed;top:5px;right:5px;'>
Kode Widget
</div>
Sebagai contoh saya gunakan kode pagerank
<div style='display:scroll;position:fixed;top:5px;right:5px;'>
<a href="http://www.getrank.org" target="_blank"><img title="Pagerank" src="http://www.getrank.org/prbutton/pagerank-display.php?s=17" alt="PageRank Checker" border="0px" /></a>
</div>
Keterangan :
top:5px;right:5px; : kode yang berwarna merah merupakan posisi widget yang akan Anda pasang, seperti contoh diatas. top right menunjukkan posisinya di atas bagian kanan dengan jarak 5 pixel dari pinggir layar monitor Anda. Bila ingin merubah posisinya di atas kiri, maka codenya menjadi ; top:5px;left:5px posisi bawah kiri : bottom:5px;left:5px dan posisi dibawah kanan ganti codenya dengan bottom:5px;right:5px
Terakhir klik Save.

Selamat mencoba dan semoga berhasil...

Cara Merubah Cursor Blog

Tips Dan Trik Tutorial Blogspot

Cara Merubah Cursor Blog | Tutorial Blog

Bagi Sobat yang ingin mengganti tampilan cursor di blog, itu sangat mudah, bagi yang sudah tau, bagi yang belum tau pasti tidak mudah. hehe...

Sebelumnya saya pernah posting tentang Membuat Efek Bintang Pada Kursor, kali ini saya akan berbagi tentang cara untuk merubah tampilan cursor blog, berikut caranya :

Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
Cari kode </head>
Letakkan kode berikut tepat diatas kode </head>
<style type='text/css'>HTML,BODY{cursor:url("http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif"), auto;}</style>
Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
Setelah Itu Save Template Anda dan selesai...

Jika sobat tidak memiliki icon kursor, silakan kunjungi http://www.totallyfreecursors.com situs tersebut menyediakan ribuan icon cursor,pilih icon yang sobat mau..

Dan Sobat juga dapat langsung memasangnya melalui widget HTML/Javascript, berikut caranya :

Kunjungi http://www.totallyfreecursors.com
Lalu pilih salah satu cursor yang ingin Sobat gunakan.
Copy kode yang diberikan.
Lalu pasang pada widget HTML/Javascript blog sobat. jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot

Semoga tutorial ini bisa membantu sobat yang ingin Merubah Cursor Blog.

Widget Recent Comment Valid XHTML

Tutorial Blogspot Widget / Gadget

Widget Recent Comment Valid XHTML | Tutorial Blog

Sebelumnya saya pernah posting tentang Widget Recent Post Valid XHTML. Pada tutorial kali ini saya berbagi tentang Widget Recent Comment Valid XHTML.

Berikut cara Memasang Widget Recent Comment Valid XHTML :

Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget, pilih HTML/Java Script
Lalu isikan kode berikut :
<div style="height: 250px; overflow: auto; padding: 3px; text-align: left;"><script type="text/javascript" src="http://wadah-tutorial.googlecode.com/files/comments.js"></script>
<script type="text/javascript">
var numcomments = 10;
var showcommentdate = false;var
showposttitle = true;var
numchars = 100;var
standardstyling = true;var
showfooter = true;
</script>
<script type="text/javascript" src="http://alamatblog.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>
Ganti alamatblog.com dengan Alamat blog Sobat.
Keterangan:
numcomments: jumlah koment terakhir yg ditampilkan
showcommentdate: false menunjukkan tanggal tidak ditampilkan, jika ingin menampilkan ganti dengan true
showcommenttitle: true menunjukkan judul artikel ditampilkan, ganti false jika tidak ingin menampilkan.
Numchars: Maksimal karakter yang tampil pada setiap list coment terakhir.
Lalu klik Save.
Selanjutnya, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Cari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari blog Anda.
Terakhir klik SIMPAN / SAVE TEMPLATE.

Recent comment ini sangat cepat update, jika ada komentar baru, lakukan refresh dan komentar akan langsung ditampilkan. Selamat mencoba...

Memasang Widget Popular Posts

Tutorial Blogspot Widget / Gadget

Memasang Widget Popular Posts | Tutorial Blog

Sebelumnya saya pernah posting tentang Memasang Widget Recent Post, untuk kali ini Memasang Widget Popular Posts. Widget ini berfungsi untuk menampilkan postingan yang sering di baca pengunjung pada blog Anda.

Berikut cara Memasang Widget Popular Posts :

Untuk Blogspot :

Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget/Tambah Gadget.
Lalu pilih Popular Posts
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

Untuk Wordpress :

Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
Drag Top Posts & Pages dan letakkan pada Sidebar.
Selanjutnya atur tampilan widget seperti keinginan Anda. Lalu klik Save.

Semoga Bermanfaat...

Memasang Widget Recent Comment

Tutorial Blogspot Tutorial Wordpress

Memasang Widget Recent Comment | Tutorial Blog

Sebelumnya saya posting tentang Memasang Widget Recent Post, untuk kali ini Memasang Widget Recent Comment. Widget ini berfungsi untuk menampilkan komentar terbaru pada blog Anda.

Berikut cara Memasang Widget Recent Comment :

Untuk Blogspot :

Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget/Tambah Gadget.
Pilih pada menu Featured.
Lalu pilih Recent Comment
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

Untuk Wordpress :

Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
Drag Recent Comment dan letakkan pada Sidebar.
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

Semoga Bermanfaat...

CSS3		Javascript
HTML5		Photoshop
PHP		CorelDraw