This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Sabtu, 10 Desember 2011

Memasang Widget Google Plus Button

Memasang Widget Google Plus Button | Tutorial Blog

Berikut cara Memasang Widget Google Plus :
  1. Masuk ke http://www.google.com/webmasters/+1/button/
  2. Atur ukuran tombol Google Plus.
    Memasang Widget Google Plus
  3. Copy kode yang diberikan.
    Memasang Widget Google Plus
  4. Selanjutnya Login ke blogger, Lalu Klik Design / Rancangan.
    Memasang Widget Google Plus
  5. Klik Add a gadget / tambah gadget.
    Memasang Widget Google Plus
  6. Pilih Menu HTML/Java Script.
    Memasang Widget Google Plus
  7. Lalu letakkan Kode Google Plus sobat pada area konten widget.
  8. Terakhir klik Save.
    Memasang Widget Google Plus
    Selesai...
Untuk memasang tombol Google Plus pada setiap postingan silakan baca Memasang Tombol Google Plus di Pojok Postingan.
Semoga Bermanfaat...

Jumat, 09 Desember 2011

Membuat Efek Bintang Pada Kursor

Membuat Efek Bintang Pada Kursor | Tutorial Blog

Untuk mempercantik blog, mungkin Anda bisa menggunakan effect bintang berjatuhan pada cursor, trik yang satu ini akan membuat bintang berjatuhan dari cursor saat cursor digerakkan, walaupun menurut saya itu hanya tanda [+] yang berjatuhan. hehe...

Untuk membuat efek bintang berjatuhan pada blog sobat dapat memasangnya pada widget HTML/JavaScript blog sobat, atau melalui menu Edit HTML.
  • Melalui widget HTML/JavaScript
  1. Login Ke Blogger. Pilih Design/Rancangan > Page Element.
  2. Klik Add a Gadget / Tambah Gadget. Pilih HTML/JavaScript.
  3. Masukkan kode berikut ke dalam area konten.
    <script src='http://wadah-tutorial.googlecode.com/files/red_star.js' type='text/javascript'/></script>
    Warna bintang diatas berwarna merah. Anda dapat menggantinya dengan warna lain.
    Berikut beberapa kode yang lain :
    <script src='http://wadah-tutorial.googlecode.com/files/yellow_star.js' type='text/javascript'/></script>   *Warna Kuning
    <script src='http://wadah-tutorial.googlecode.com/files/green_star.js' type='text/javascript'/></script>   *Warna Hijau
    <script src='http://wadah-tutorial.googlecode.com/files/blue_star.js' type='text/javascript'/></script>   *Wana Biru
  4. Terakhir klik Simpan / Save.
  • Melalui menu Edit HTML
  1. Login Ke Blogger. Pilih Design/Rancangan > Edit HTML.
  2. Beri centang pada Expand Widget Templates.
  3. Cari kode ]]></b:skin>
  4. Kemudian copy kode diatas dan taruh dibawah kode ]]></b:skin>
    penting : hapus tanda </script> pada kode tersebut.
  5. Terakhir Save / Simpan Template.
Silakan dicoba dan semoga berhasil Membuat Efek Bintang Pada Kursor.

Kamis, 08 Desember 2011

Mengganti Next-Prev Navigasi Dengan Judul Post

Mengganti Next-Prev Navigasi Dengan Judul Post | Tutorial Blog

Sebelumnya saya pernah posting tentang Mengganti Navigasi Next-Prev dengan Image. Untuk kali ini saya akan berbagi cara Mengganti Next-Prev Navigasi Dengan Judul Post.

Navigasi next-prev yang menggunakan judul post cukup memancing para pembaca dan pengunjung blog untuk melihat artikel sebelum dan sesudah dari post yang sedang dibaca, karena yang tampil adalah judul artikelnya. Trik ini belum terbukti dapat mengoptimalkan seo, namun secara logika trik ini cukup berhubungan dengan seo karena jika kita ganti next-previous dengan judul post sesudah dan sebelumnya, mungkin ada pengunjung yang tertarik untuk membaca dan mengklik judul tersebut, otomatis jumlah pageviews akan bertambah.
Berikut cara Mengganti Next-Prev Navigasi Dengan Judul Post :
  1. Login ke blogger, pilih Rancangan/Design, kemudian pilih Edit HTML, lalu beri centang expand template widget.
    Tips : Biasakan membackup / mendownload template anda terlebih dulu sebelum meng-edit template.
  2. Cari kode berikut ini dibawah kode ]]></b:skin>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">
    </script>
    Ket : Jika belum ada Copy kode tersebut dan paste dibawah kode ]]></b:skin>
  3. Save template Anda
  4. Selanjutnya pilih Elemen Laman / Page Element, klik Tambah Gadget / Add a Gadget dan pilih HTML/Javascript, lalu letakan kode dibawah ini pada area konten widget.
    <style type="text/css">
    #blog-pager-newer-link {width:200px;text-align:left;}
    #blog-pager-older-link {width:200px;text-align:right;}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link").text();
    $("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link").text();
    $("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
    });
    });
    </script>
  5. Klik Save dan lihat navigasi pager blog Sobat.
Sekian trik untuk Mengganti Next-Prev Navigasi Dengan Judul Post.

Rabu, 07 Desember 2011

Membuat Tombol Share Post Melayang

Membuat Tombol Share Post Melayang | Tutorial Blog

Share button memang berpengaruh dalam mempromosikan artikel blog kita. Karena itu kali ini saya akan berbagi cara memasang floating share button pada blog. Dalam widget ini terdapat tiga share button, yaitu Twitter, Digg, dan Facebook, widget ini akan selalu melayang, sehingga akan selalu terlihat oleh pengunjung blog.

Berikut langkah memasang Tombol Share melayang :
  1. Login ke akun blogger anda.
  2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Design Page Element
  3. Klik Add a Gadget/Tambah Gadget.
    Add Gadget
  4. Pilih HTML/Java Script.
    Html JavaScript
  5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
    <style  type="text/css">  *{margin:0;padding:0;}  * html #z33sHare{ position: absolute; }  #z33sHare{ right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px; position:fixed; top: 20%; }  #z33sHare div{ padding:6px 6px 6px 5px; }  #stw{ margin-left:-2px; }  #sfs{ margin-left:-5px; } </style>  <div id="z33sHare"> <div id="ssl-box"> <div id="stw"><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php"></a><script src="http://widgets.fbshare.me/files/fbshare.js"></script></div> <div><a  href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script  type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  <div><script  type="text/javascript"> (function() {   var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];  s.type =  'text/javascript'; s.async = true; s.src =  'http://widgets.digg.com/buttons.js';  s1.parentNode.insertBefore(s, s1); })();</script> <a class="DiggThisButton  DiggMedium"></a></div> </div>
    <div  style="clear:both;"></div> </div>
  6. Terakhir klik Save.
    Save Widget
    Silakan lihat hasilnya di blog Anda.
Artikel yang lain :
  • Membuat Daftar Isi Blog
  • Widget Google Followers Static
  • Widget Google Followers Show Hide

Selasa, 06 Desember 2011

Membuat Widget Follow Twitter Melayang

Membuat Widget Follow Twitter Melayang | Tutorial Blog

Membuat Widget Follow Twitter melayang ini sangat mudah karena kita tidak perlu pusing mengutak atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar.

Berikut langkah memasang Widget Follow Twitter melayang :
  1. Login ke akun blogger anda.
  2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Design Page Element
  3. Klik Add a Gadget/Tambah Gadget.
    Add Gadget
  4. Pilih HTML/Java Script.
    Html JavaScript
  5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
    <script type="text/javascript" src="http://tutorial-blog.googlecode.com/files/twitbird.js"></script><br /> <script type="text/javascript"> var birdSprite="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/m4d13";var tweetThisText = "Official blog twitter page ";tripleflapInit();</script>
    Ganti tulisan yang berwarna merah dengan url twitter Anda.
  6. Terakhir klik Save.
    Save Widget
    Silakan lihat hasilnya di blog Anda.
Sekian Artikel tentang Membuat Widget Follow Twitter Melayang.

Senin, 05 Desember 2011

Mengganti Navigasi Next-Prev dengan Image

Mengganti Navigasi Next-Prev dengan Image | Tutorial Blog

Untuk merubah tampilan Navigasi Next-Prev, kita dapat menggantinya dengan Image / Gambar, bisa juga kita ganti dengan judul postingan, untuk kali ini kita bahas Cara Mengganti Navigasi Next-Prev dengan Image / Gambar.

Berikut Cara Mengganti Navigasi Next-Prev dengan Image / Gambar :
  1. Login ke Blogger anda, Plih Design/Rancangan > Edit HTML.
    Mengganti Navigasi Next-Prev dengan Image
  2. Lalu centang Expand Widget Template.
    Mengganti Navigasi Next-Prev dengan Image
    Tips : Biasakan membackup / mendownload template Anda sebelum di edit.
  3. Cari kode berikut:
    Prev
    <data:newerPageTitle/>
    ganti dengan
    <img alt="newer post" src="URL-IMAGE-PREVIOUS" border="0" />
    Next
    <data:olderPageTitle/>
    ganti dengan
    <img alt="older post" src="URL-IMAGE-NEXT" border="0" />
    Home
    <data:homeMsg/>
    ganti dengan
    <img alt="home" src="URL-IMAGE-HOME" border="0" />
    Untuk icon Gambarnya bisa Sobat gunakan yang ini:
    Mengganti Navigasi Next-Prev dengan Image
    Home : http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/Optimize/home.png
    Mengganti Navigasi Next-Prev dengan Image
    Prev : http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/Optimize/newerpost.png
    Mengganti Navigasi Next-Prev dengan Image
    Next : http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/Optimize/oldpost.png
    Bisa juga menggunakan icon Sobat sendiri.
  4. Terakhir, klik Save Template.
    Mengganti Navigasi Next-Prev dengan Image
Untuk hasilnya dapat Sobat lihat gambar berikut,
Sebelum
Mengganti Navigasi Next-Prev dengan Image
Sesudah
Mengganti Navigasi Next-Prev dengan Image
Selamat mencoba dan semoga berhasil...

Minggu, 04 Desember 2011

Widget Google Followers Static

Widget Google Followers Static | Tutorial Blog

Pada tutorial ini saya akan berbagi cara memasang Widget Google Followers Static, maksudnya Widget Followers yang letaknya selalu di pojok Blog, walaupun halaman blog sobat di scroll / di geser, widget Follower sobat akan terus berada di bagian pojok blog.

Ada juga cara lain dalam memasang widget followers, yaitu Widget Google Followers Show Hide, namun kali ini kita bahas tentang Widget Followers Static.
Berikut cara Memasang Widget Google Followers Static :
  1. Login ke Blogger, klik Design / Rancangan > Edit HTML.
    Design Html
  2. Beri tanda centang pada kotak Expand Template Widget.
    Expand Widget Template
  3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya
    #followers-pojok { 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); }
  4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
    <div id='followers-pojok'> <div style='background:#dddddd; overflow: auto; padding: 1px; text-align: right;'>
    Letakkan kode Follower disini
    <font size="0.1"><span style="color: #eeeeee;">Widget by </span><a href="http://wadahtutorial.blogspot.com/" target="_blank"><span style="color: #eeeeee;">Tutorial Blog</span></a></font> </div></div>
    Ganti tulisan yang berwarna merah dengan kode followers blog soabt, Untuk mendapatkan kode Follower silakan baca Widget Followers Google Friend Connect.
  5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
    SaveTemplate
Silakan dicoba dan Semoga berhasil...
Sekian postingan tentang Widget Google Followers Static.

Sabtu, 03 Desember 2011

Widget Google Followers Show Hide

Widget Google Followers Show Hide | Tutorial Blog

Widget followers pada umumnya memperberat loading blog, karena itu pada tutorial ini saya akan berbagi cara membuat widget followers yang lebih ringan dengan mode Show-Hide.

Berikut cara Memasang Widget followers yang lebih ringan dengan mode Show-Hide :
  1. Login dengan akun blogger sobat, klik Rancangan / Design > Elemen laman / Page Element.
    Page Element
  2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.
    Html JavaScript
  3. Letakkan kode berikut didalam area konten;
    <style type="text/css">
    #fl{position:fixed; left:150px; z-index:+1000;}
    * html #fl{position:relative;}
    .flcontent{
    float:left;
    border:2px solid #676767;
    background:#dddddd repeat-x bottom center scroll;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideFL(){
    var fl = document.getElementById("fl");
    var w = fl.offsetWidth;
    fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
    fl.opened = !fl.opened;
    }
    function moveFL(x0, xf){
    var fl = document.getElementById("fl");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    fl.style.bottom = x.toString() + "px";
    if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="fl">
    <div class="fltab" onclick="showHideFL()"> </div>
    <div class="flcontent">

    Letakan Kode Widget Follow Disini

    <div style="text-align: right;">
    <a href="javascript:showHideFL()">
    [Close]
    </a></div>
    <font size="2"><a href="http://wadahtutorial.blogspot.com/"target=_blank"><div style="color: #eeeeee;">
    <span >Tutorial Blog</span></div></a></font>
    </div>
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script></div>
  4. Selanjutnya buat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan ikuti tutorial Widget Followers Google Friend Connect
  5. Setelah dapat kode-nya, paste kode tersebut pada area konten Widget Follow tadi (Ganti Letakan Kode Widget Follow Disini [kode yang berwarna merah] dengan kode Widget Follow dari google friend connect), Lalu Save
  6. Terakhir, masih pada Elemen Halaman, klik Tambahkan gadget > HTML/Java Script sekali lagi, Kemudian copy paste-kan kode berikut ini:
    <a href="javascript:showHideFL()"/><img border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" alt="Follow" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:30px;right:50px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="49px" width="130px" /></a>
  7. Save dan lihatlah hasilnya.
Selain mode Show Hide Sobat juga bisa memasang Widget Google Followers Static.
Semoga artikel ini bisa membantu sobat yang ingin Memasang Widget Google Followers dengan mode Show Hide.

Jumat, 02 Desember 2011

Widget Followers Google Friend Connect

Widget Followers Google Friend Connect | Tutorial Blog

Widget Followers dari Google Friend Connect ini sama saja dengan Widget Followers default dari blogger, cuman widget ini menggunakan kode dari Google Friend Connect.

Langsung saja Sob, berikut tutorialnya :
  1. Masuk ke situs http://www.google.com/friendconnect/, dan Login menggunakan account gmail anda.
  2. Pilih blog Sobat yang ingin di pasang widget Google Followers, lalu klik pada Tambahkan Gadget Anggota.
    Widget Google Followers
  3. Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
    Widget Google Followers
  4. Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
    Widget Google Followers
  5. Copy kode yang diberikan oleh Google Friend Connect tersebut.
    Widget Google Followers
  6. Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
    Design Page Element
  7. Kemudian pilih Add a Gadget.
    Add Gadget
  8. Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
    Html JavaScript
  9. Lalu klik Save.
    Selesai...
Selanjutnya saya akan berbagi tentang Widget Google Followers Show Hide.

Kamis, 01 Desember 2011

Memasang Widget Google Followers

Memasang Widget Google Followers | Tutorial Blog

Tutorial kali ini mungkin bukan hal yang asing bagi para blogger yang sudah lama pakai Blogspot, jadi tutorial ini buat para pemula saja. Google Followers atau Google Friend Connect (GFC) adalah suatu program komunitas sosial seperti BlogCatalog, MyBlogLog, dan lain-lain. Tepatnya, Google Friend Connect merupakan sarana penghubung untuk memudahkan kita berinteraksi satu sama lain. Kita bisa menambah, mengundang, mengunjungi teman-teman kita dengan mengklik fotonya. Dan dari sini pula kita dapat meningkatkan trafik blog kita.
Widget Google Friend Connect dapat memudahkan pengunjung agar bisa dengan mudah menjadi pelanggan artikel. apalagi jika Anda menggunakan blogger, maka setiap artikel yang terbit dari blog yang diikuti ( Di Follow ) akan tampil di dashboard blogspot Anda.
Berikut cara Memasang Widget Google Followers :
  1. Login ke Blogger klik Design/Rancangan > Page Element/Elemen Laman.
    Design Page Element
  2. Klik Add a Gadget/Tambah Gadget.
    Add Gadget
  3. Pilih Followers.
    Widget Followers
  4. Terakhir klik Save.
    Widget Followers
Selesai... Widget Google Followers sudah terpasang di blog Anda.
Selanjutnya postingan saya tentang memasang Widget Followers Google Friend Connect.