Cara Merubah Warna Scroll Bar

Tidak hanya tampilan blog yang kita bisa modifikasi melalui kode HTML template kita, namun warna scroll bar dari media browser yang kita gunakan pun bisa kita modifikasi warnanya, dari warna standar ke warna yang kita sukai. Kode untuk merubah warna Scroll Bar adalah kode CSS (Cascading Style Sheets).

Sebelum Anda menerapkan tutorial ini, sebaiknya Anda menggunakan media browser (Firefox, Chrome, internet Explorer) yang terupdate karena tutorial ini tidak bekerja dengan baik pada media browser yang lawas.

Cara Memodifikasi Warna Scroll Bar

• Kunjungi laman Dashboard blogger
• Klik Template dan Edit HTML
• Cari kode ]]></b:skin>
• Setelah menemukan kode ]]></b:skin> letakkan kode berikut diatasnya :

/* tutorialblogspot.com scrollbar effect */
::-webkit-scrollbar {
width:14px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#eee;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(116,188,99,0.5);

• Simpan template Anda.

Catatan penting :

1. Ganti #eee dengan kode warna yang Anda inginkan. Untuk melihat kode warna, klik disini atau disini
2. untuk mengganti lebar Scroll Bar, rubah angka berikut 14px dan 8px

Widget Popular Post Yang Menakjubkan

Widget Popular Post merupakan widget bawaan blogger. Widget ini menampilkan list posting yang paling sering di baca oleh pengunjung per minggu, bulan atau sepanjang waktu. Bentuk dasar widget ini menampilkan thumbnail posting, ringkasan posting dan judul posting. Untuk membuat widget Default blogger ini terlihat lebih stylish, kita akan menambahkan sedikit kode CSS. Kenapa kita harus tambahkan kode CSS? Untuk membuat widget ini berwarna-warni (Seperti widget popular post sebelumnya), supaya daftar posting di atur menggunakan nomor dan supaya terbentuk efek hover pada gambar atau thumbnail.

Cara membuat widget popular post lebih stylish

• Pasang terlebih dahulu widget popular post (Cara pasangnya bisa di lihat disini "Cara Membuat Atau Memasang Widget Populer Post Di Blog"
• Setelah itu pilih template dan Edit HTML
• Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>

<!-- Popular posts multi colored tutorialblogspot.com -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored tutorialblogspot.com -->

• Save Template.

Jika posting ini bermamfaat buat sobat blogger, jangan lupa untuk membagikan posting ini ke lingkaran sobat di situs jejaring sosial Google+

Menambahkan efek ketikan pada teks atau tulisan

Apakah sobat blogger pernah mendengar istilah Typing Text? Typing Text merupakan sebuah metode untuk menampilkan teks seperti sedang di ketik. Teknik yang digunakan untuk membuat Typing Text bukan marquee, walaupun keduanya sama-sama menampilkan teks yang bergerak. Sobat blogger dapat memamfaatkan Efek Typing Text yang di buat oleh Dynamic Drive ini dalam banyak hal seperti untuk membuat Announcement, Warnning, Pesan dan lain-lain.

Demo

Selamat datang buat semua pengunjung Tutorial Blogspot!
Anda adalah segalanya bagi kami (We are nothing without you)

Sebagai ungkapan terima kasih kami kepada Anda semua, kami akan selalu menyuguhkan tutorial terbaik, salah satunya seperti yang Anda lihat saat ini.

---

Cara membuat tulisan ala ketikan

---

Sobat blogger tidak perlu edit template untuk menambahkan efek ini. Sobat blogger cukup meng-copy paste kode berikut dan meletakkannya di tempat yang diinginkan:

<script type="text/javascript" src="https://googledrive.com/host/0BwlVU1_5kLcNMzRHTkFiTjJMX0E"></script>
<div id="example1">Letakkan teks Anda disini...</div>
<p id="example2">Letakkan teks Anda disini...</p>
<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));
//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });
//Type out examples:
TypingText.runAll();
</script>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x54\x79\x70\x69\x6E\x67\x20\x54\x65\x78\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x20\x42\x6C\x6F\x67\x73\x70\x6F\x74\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>

Tambahan :

• Ganti tulisan yang warna merah sesuka hati sobat blogger

Mengganti Default Credit Footer Blogger dengan yang lebih menarik

Credit Footer blogger yang bertuliskan Powered by Blogger atau diberdayakan oleh Blogger terdapat di bagian bawah blog di bagian widget Atribusi. Pemilik blog dapat menambahkan beberapa karakter teks atau link di widget tersebut. Karena jumlah karakter teks dibatasi di widget tersebut, banyak pemilik blog jadi memilih untuk menghapus Credit Footer itu dan menggantinya dengan Credit Footer yang baru. Termasuk di blog ini juga, Credit Footernya saya ganti beberapa waktu yang lalu.

Blog saya ini jauh terlihat lebih cantik dan manis setelah diganti credit footer bawaan aslinya. Sampai-sampai banyak orang yang tidak percaya kalau blog ini menggunakan template default blogger (Wajar juga mereka tidak percaya, soalnya terlalu banyak perubahan yang saya lakukan untuk memodifikasi tampilannya).

Cara Membuat Credit Footer di Blogger

• Login di blogger.com
• Pilih Template dan Backup template sobat terlebih dahulu untuk menghindari adanya kesalahan saat edit template.
• Setelah Template di backup, klik Edit HTML
• Cari kode seperti di bawah ini!

      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>

• Hapus kode tersebut dan ganti dengan kode di bawah ini

<div class='credit-wrapper'>
<div class='credit'>
<div style='float: center; text-align: center;'>
<a href='http://www.tutorialblogspot.com/2012/08/contact-us.html'>Contact us</a> &#9827; <a href='http://www.tutorialblogspot.com/2012/08/privacy-policy-for-www.tutorialblogspot.com.html'>Privacy Policy</a><br/>
Copyright &#169; 2013 <a href='http://www.tutorialblogspot.com'>Tutorial Blogspot</a>
</div>
</div>
</div>

• Cari kode ]]></b:skin> dan letakkan kode berikut di atasnya

.credit-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqRcYkg6ipD_6T1N_LbnUQDvk2zqh1DFBL5FQtenXwTC8aBJduDj3BxihbOE3HgnywftnIgrLAY2tiSK9qgfV-Rd7SkQzRMfonKgoS3Ft_VCUF_v-Y43bbVCm7oSAp-GOgzpn6MMs5Vkfk/s320/post-divider%2520%25281%2529.png) no-repeat center; padding-top:70px}.credit a:link,.credit a:visited,.credit a:hover{color:#222;text-decoration:none}

• Preview template, kalau sudah mantap, Simpan template.

Tambahan :

1. Ganti link di atas sesuai dengan link tujuan Anda
2. Link Gambar / devider (Yang berwarna merah) bisa diganti sesuai dengan yang Anda inginkan

Teknik mengganti Credit Footer ini sudah di coba beberapa kali, hasilnya selalu sesuai dengan yang diinginkan. Jika Anda tidak berhasil atau mengalami kesulitan, mamfaatkan komentar Google+ di bawah ini untuk menggambarkan kesulitan Anda.

Cara Membuat Teks / Tulisan Berjalan Di Blog

Ketika kita menonton program berita di stasiun Televisi baik itu Trans TV, Metro TV, RCTI, ANTV atau stasiun televisi yang lainnya, kita sering menemukan beberapa berita penting ditampilkan dalam bentuk teks yang berjalan. Teks yang berjalan itu di sebut dengan nama Running Text. Dalam dunia Webmaster, Running Text mempunyai istilah yang lain yaitu "Marquee".

Dengan menambahkan efek marquee pada teks, pusat perhatian pengunjung pada teks itu akan lebih terfokus. Jadi buat sobat blogger yang ingin membuat sebuah pengumuman, pembeitahuan atau catatan penting, sebaiknya menggunakan efek marquee.
Menambahkan efek marquee pada sebuah teks tidaklah sulit karena kode HTML yang digunakan sangat sederhana yaitu "<marquee> Teks Disini... </marquee>". Berikut ini kode marquee beserta contohnya:

Demo Marquee

Teks berjalan ke kiri

Selamat datang di tutorialblogspot.com

Teks Berjalan ke kanan

Happy blogging for all of Indonesians blogger

Teks berjalan ke atas

This is the best site to learn about blog

Teks berjalan ke bawah

Cara membuat teks bergerak di blog

Teks berjalan bolak balik (Ke kiri dan ke kanan)

Dapatkan tips trik komputer disini

Teks berjalan Zig-Zag

Teks Tulisan Berjalan Zig Zag

Kode Marquee

1. Teks berjalan ke kiri

<marquee> Teks disini... </marquee>

2. Teks Berjalan ke kanan

<marquee direction="right"> Teks disini... </marquee>

3. Teks berjalan ke atas

<marquee direction="up"> Teks disini... </marquee>

4. Teks berjalan ke bawah

<marquee direction="down"> Teks disini... </marquee>

5. Teks berjalan bolak balik (Ke kiri dan ke kanan)

<marquee behavior="alternate"> Teks disini... </marquee>

6. Teks berjalan Zig-Zag

<marquee direction="up" behavior="alternate"><marquee behavior="alternate"> Teks disini... </marquee></marquee>

Apakah kode marquee di atas bisa kita kostumisasi? Jelas bisa, kode HTML marquee di atas dapat disesuaikan dengan style atau keinginan sobat blogger. Perhatikan contoh di bawah ini!
1. Teks berhenti ketika diarahkan Cursor

Kode : onMouseOver="this.stop()" onMouseOut="this.start()"
Contoh penerapan kode : <marquee onMouseOver="this.stop()" onMouseOut="this.start()"> Teks disini... </marquee>

2. Menambahkan Background pada teks berjalan

Kode : bgcolor="blue" (Blue adalah kode warna, bisa diganti dengan warna favorite sobat)
Contoh penerapan kode : <marquee bgcolor="Blue"> Teks disini... </marquee>

3. Mengatur kecepatan teks berjalan

Kode : scrollamount="2" (Angka 2 adalah kecepatan teks berjalan, silahkan disesuaikan)
Contoh penerapan kode : <marquee scrollamount="2"> Teks disini... </marquee>

4. Mengatur lebar teks berjalan

Kode : width="300" (Atur sendiri lebarnya. Kalau sobat blogger ingin mengatur tingginya juga, sobat blogger tinggal mengganti kata width menjadi hight)
Contoh penerapan kode : <marquee width="300"> Teks disini... </marquee>

Teks marquee atau teks berjalan bisa juga diterapkan pada widget. Sobat cukup meletakkan kode widget DIANTARA kode marquee. Contoh:
<marquee direction="down"> Kode Widget disini.... </marquee>

Menambahkan Garis Di Sidebar Blog Sebagai Pemisah

Tutorial ini menunjukkan kepada Anda tentang bagaimana menambahkan atau menyisipkan garis di antara satu widget dengan widget yang lainnya. Garis ini nanti akan berfungsi sebagai pemisah widget yang tentunya dapat memperindah sidebar blog Anda. Untuk menjalankan tutorial ini, Anda tidak akan kebingungan karena Anda tidak akan mengobrak abrik kode Template Anda (Kok bisa Sich..!!!). Karena kita akan melakukannya melalui "Perancang Template Blogger". Follow me!

Memasang Garis Pemisah Di Antara Widget Blogger

• Masuk menggunakan akun blogger Anda di blogger.com
• Pilih Template dan Klik tombol "Sesuaikan"
• Klik "Tingkat Lanjut" dan "Tambahkan CSS"
• Paste kode berikut di kolom yang tersedia

.sidebar .widget {
border-bottom: 1px solid #474747;
}

• Lihat Live Preview yang ada di bawahnya. Jika sukses, klik tombol "Terapkan ke blog"

Tambahan :

1. Angka 1 adalah ketebalan Garis, rubah saja sesuai yang diharapkan
2. #474747 adalah kode warna. Bisa dirubah sesuai selera Anda. Untuk melihat kode warna, klik disini.

Membuat Waktu Posting Seperti Kalender

Blog yang menggunakan style kalender untuk waktu posting (Post Time) biasanya adalah blog yang bernaung di bawah platform Wordpress. Kini, blog blogger dapat menggunakan style yang seperti itu untuk mempercantik tampilan blog. Teknik merubah bentuk post time dari default post time ke bentuk kalender post time ini saya dapatkan beberapa waktu yang lalu dan sudah di coba.

Sebelum kita mengedit template blog kita, ada satu hal yang perlu dilakukan terlebih dahulu yaitu "Merubah form waktu". Urutan form waktu yang digunakan adalah tanggal, bulan dan tahun (Jangan menggunakan form waktu yang lain). Bagaimana caranya? Caranya sesuai dengan gambar di bawah ini!

Langkah 1

Langkah 2

• Selanjutnya klik "Template" dan "Edit HTML"
• Cari kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> dan ganti dengan kode berikut

<div id='Date'><script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script></div><b:else/><div id='Date'><script>changeDate(&#39;&#39;);</script></div>

• Letakkan kode berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRgQ4oySt7d9OGqqYQr9_usnOn6D5niL6sH5WA-8dtSFfnGH5ZU9Eb5p_BXraL_Ydv8lz9MNZNgM0KBEVlVtBh2wONXvnskd2WVnVGCa5DUioOiUgCcDMrm227Wwb2w-iGyaH6vEdNkI/h120/dateformat.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month&#39;s color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day&#39;s color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year&#39;s color */
}
</style>
</b:if>

• Preview template sebelum di simpan

Tambahan :
Jika kalender tidak muncul dengan benar, ganti -108 dengan 0;

Sticky Bar Cantik Untuk Blogger

Sticky Bar mulai tenar di kalangan Webmaster atau blogger semenjak munculnya Hello Bar. Hello Bar bisa didapatkan oleh pemilik blog secara gratis dengan melalui proses registrasi di salah satu website yang mengeluarkan menu bar tersebut. Sekarang, untuk mendapatkan menu bar seindah Hello Bar, pemilik web blog tidak perlu melakukan proses registrasi yang berbelit-belit karena saya sudah menyediakan beberapa baris kode CSS dan HTML yang bisa membentuk sebuah Sticky Bar yang cantik dan keren. Sticky Bar ini memiliki warna Orange dan Hitam plus teks warna putih.

Seperti Sticky Bar pada umumnya, Sticky Bar ini pun memiliki sebuah panah yang berfungsi untuk membuka dan menutup menu bar ini (Fitur Hide and Show). Apa kelebihan Sticky Bar ini dengan Sticky Bar yang lain? Sobat blogger tidak perlu Edit Template untuk memasang Sticky Bar ini dan sobat blogger bisa melakukan kostumisasi menu bar ini sesuai dengan yang diinginkan.

Cara Memasang Sticky Bar di Blog

• Masuk ke blogger.com menggunakan akun blogger sobat
• Pada menu Drop Down, pilih tata letak.
• Klik "Tambahkan gadget"
• Lalu pilih HTML/JavaScript
• Copy Paste kode berikut pada kolom yang tersedia

<style>
/*---Codes by www.tutorialblogspot.com---*/
#wg-rosebar {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#F60;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}
#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}
#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}
.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}
.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<center id="wg-rosebarbtmshow" onmouseup="document.getElementById('wg-rosebarbtm').style.display='block'"><div class="wg-rosebarbtmblock"></div><div class="wg-rosebarbtmdownarrow"></div></center>
<div id="wg-rosebarbtm" >
<center id="wg-rosebarbtmhide" onmouseup="document.getElementById('wg-rosebarbtm').style.display='none'"><div class="wg-rosebarbtmuparrow"></div><div class="wg-rosebarbtmblock"></div></center>
<center id="wg-rosebarbtmdata"><a href="http://www.tutorialblogspot.com">Teks Yang Tampil</a></center>
</div>
</div>

• Klik Simpan

Tambahan :
Ganti teks yang berwarna merah sesuai dengan yang sobat inginkan.

Cara Membuat Tampilan Posting Seperti Koran Atau Majalah

Let's make posting like a news paper! Mari belajar membuat tampilan posting seperti tampilan berita di dalam koran. Seperti yang kita ketahui bahwasannya koran menampilkan berita dalam bentuk pargraf yang terbagi dalam beberapa kolom. Hal ini adalah ciri khas yang terdapat pada koran yang tidak pernah lekang di makan rayap. Coba perhatikan paragraf di bawah ini! Ini adalah contoh paragraf yang bergaya koran (News Paper Style)

A kangaroo is an animal found only in Australia, although it has a smaller relative, called a wallaby, which lives on the Australian island of Tasmania and also in New Guinea.
Kangaroos eat grass and plants. They have short front legs, but very long, and very strong back legs and a tail. These are used for sitting up and for jumping. Kangaroos have been known to make forward jumps of over eight metres, and leap across fences more than three metres high. They can also run at speeds of over 45 kilometres per hour.
The largest kangaroos are the Great Grey Kangaroo and the Red Kangaroo. Adult grow to a length of 1.60 metres and weigh over 90 kilos.
Kangaroos are marsupials. This means that the female kangaroo has an external pouch on the front of her body. A baby kangaroo is very tiny when it is born, and it crawls at once into this pouch where it spends its fi rst fi ve months of life.

Untuk membuat postingan sobat blogger seperti Koran, sobat blogger cukup memberikan kode css pada area postingan. Ini kode CSS yang digunakan :

<style type="text/css">
.koran{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;}
</style>
<div class="koran">
Letakkan tulisan sobat blogger disini...!!!
</div>

Kode CSS di atas bisa dikostumisasi sesuai keinginan sobat blogger.
Keterangan singkat dari kode CSS di atas :

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

1. Angka 3 adalah jumlah kolom dari posting, silahkan di rubah dan disesuaikan dengan template sobat.
2. Kode warna pemisah kolom (Warna garis) adalah #ff0000; silahkan diganti menggunakan kode warna yang lain. Untuk melihat kode Warna silahkan lihat salah satu posting dari blog ini.
3. Teks warna merah disesuaikan juga dengan teks sobat

Saat memasang kode CSS ini ke dalam postingan sobat blogger, jangan lupa dimasukkan dalam mode HTML bukan Compose

Menambahkan Warna Background Pada Widget Atribusi Diberdayakan Oleh Blogger

Sabtu, 18 Agustus 2012, saya mempublikasikan sebuah artikel yang membahas tentang Cara Menghilangkan Tulisan Powered by Blogger dan Rabu, 26 September 2012, saya menulis sebuah posting tentang Apakah Boleh Menghapus Tulisan Diberdayakan Oleh Blogger? Untuk melengkapi kedua posting diatas, hari ini saya akan berbagi posting tentang cara menambahkan background pada widget atribusi Powered by Blogger / Diberdayakan oleh Blogger. Contoh dari widget atribusi yang sudah ditambahkan background bisa di lihat di blog saya ini atau bisa melihat gambar pada posting ini.

Klik untuk memperbesar ukuran gambar

Untuk memodifikasi tampilan Diberdayakan oleh Blogger, kita perlu membubuhkan sedikit kode CSS. Kode CSS yang saya maksudkan adalah sebagai berikut :

#Attribution1{background:#FAFAFA;border:1px solid #DCDCDC;padding:7px 12px}

Bagaimana cara menerapkan kode CSS ini ke dalam template?

1. Masuk ke akun blogger.com
2. Pada menu Drop Down, pilih Template
3. Klik tombol "Edit Template"
4. Masukkan kode CSS di atas SEBELUM kode ]]></b:skin>
5. Pratinjau dulu kode sobat sebelum disimpan.

Tambahan :
Kode #FAFAFA adalah kode warna. Jadi sobat blogger bisa mengganti warna background widget atribusi sesuai dengan yang sobat blogger harapkan. Untuk melihat kode warna, silahkan kunjungi link di bawah ini!

1. Web Color Chart
2. Hex Color Code Generator

Cara Membuat Widget Popular Post Berwarna Warni Di Blogger

Multi-colored popular post widget adalah widget default blogger untuk menampilkan beberapa posting yang paling populer dengan modifikasi tampilan yang berwarna warni. Warna background yang digunakan oleh widget ini adalah Merah, kuning, hijau, biru, ungu, orange, pink, dan banyak lagi warna lainnya. Widget populer post ini memiliki tampilan yang sangat indah dan sangat menyejukkan mata sehingga tidak mengherankan kalau banyak situs atau blog manca negara yang memasang widget ini.

Untuk memodifikasi tampilan widget populer post, sobat blogger hanya menambahkan kode CSS (Cascading Style Sheet). Jadi, sobat blogger tidak perlu edit template, karena kode CSS tersebut dapat kita masukkan melalui laman Blogger Template Designer. Untuk lebih jelasnya, ikuti saja tutorial blogger di bawah ini!

---

Cara Membuat Multi-Colored Popular Posts Widget

---

Langkah Pertama

1. Sign In blogger.com
2. Pada Menu drop down, pilih layout
3. Klik add a gadget lalu pasang widget Populer post dengan setting atau pengaturan seperti gambar di bawah ini!

Langkah Kedua

• Sign in di blogger.com
• Pada menu drop down pilih template.
• Klik tombol Costumize
• Klik Advanced dan klik Add CSS
• Pada kolom yang tersedia, copy paste kode yang ada di bawah ini!

#Label1 ul li a:hover{color:#fff;text-decoration:none}
#Label1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label1 ul li:first-child:after,
#Label1 ul li:first-child + li:after,
#Label1 ul li:first-child + li + li:after,
#Label1 ul li:first-child + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label1 ul li:first-child + li + li + li + li:after{content:"5"}
#Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label1 ul li:first-child + li + li + li:after{content:"4"}
#Label1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label1 ul li:first-child + li + li:after{content:"3"}
#Label1 ul li:first-child + li{background:#ff764c; width:90%}
#Label1 ul li:first-child + li:after{content:"2"}
#Label1 ul li:first-child{background:#ff4c54 ;width:90%}
#Label1 ul li:first-child:after{content:"1"}
#Label1 ul{margin:0;padding:0px 0;list-style-type:none}
#Label1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Klik tombol Apply To Blog

Cara Memasang Burung Twitter Terbang

Twitter Flying Bird merupakan sebuah widget yang bisa digunakan untuk memperindah tampilan blog. Burung Twitter terbang yang disiapkan oleh tutorialblogspot.com, terdiri atas banyak warna, sehingga sobat blogger bisa menyesuaikan warna background blog sobat dengan warna burung Twitter terbang yang akan sobat blogger pasang. Untuk memasang widget yang cantik ini, sobat blogger tidak perlu edit template, yang sobat blogger perlu lakukan adalah memasang kode yang sudah saya siapkan di bawah ini

---

Cara Membuat Burung Twitter Terbang Di Blog

---

• Sign In di blogger.com
• Pada menu drop down, pilih Layout
• Klik Add a gadget dan pilih HTML/JavaScript
• Copy Paste kode kode di bawah ini pada kolom yang tersedia:

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBakExptkHE0MsRi71ybkMcrGJtxhKgkAV7_gEHxMDwFAasAjgVahroigowJNnbJU-QE5kVQYEnqfcilsm__G4pw2Nau3HGRmKcbNiVNaAqgX__-Yn0CAtNVEmisc3OQHufUPaaJfveWA/s1600/burung+twitter+terbang.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/2torialBlogspot";
var tweetThisText = "Twitter - UserID http://www.tutorialblogspot.com/";
tripleflapInit();
</script>

• Simpan Widget sobat

Tambahan:

1. Ganti 2torialBlogspot dengan nama akun Twitter sobat
2. Ganti URL http://www.tutorialblogspot.com dengan URL blogger sobat tentunya.

Untuk mengganti warna dari burung Twitter terbang, silahkan ganti yang warna biru dengan URL gambar di bawah ini:

Twitter Flying Bird atau Burung Twitter Terbang Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6Xvtjh831AkE3iDbP_bE4pyGtqFq2AJRckNX8xMiqqkuT9pDpcpeOoZRM8m8raDiNMtCs-7hixTfQd1DHv_I8s_UrL_f7RXBCPwFGllR0IQSoC5y3nsGRlbfkgetfGSWW4NTxjDlsTA/s1600/yellow+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVwOKPqEG7rYW3063x4Jk74qZ3BiVLUI52hzoczU-FJMn97HVUCdJ2xl3Za7jZHauFzUJ7yZbreXk8Qy0RMSVhhwypQmOBV0W6NGLKmEKeSNMbL8VO0gTu5uE4notR4tlJZfmVChSBTqo/s1600/black+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBugaVdm1JzMXc48W4RbZm5q78jNuYj_ngoiruFLMwIqPdKwOocGCLl0tFAv0kxxx6SRwj5cSSIU_CBBP9VnJUIZ2YR3r3orK1vSWtiLZNxiA-ArtcXIY9SSZnt9WaKhLu6YVq3U8wzPY/s1600/Blue+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-coWtJ8MZzlBM2pwB0KMiEaRCchgC88eo1iq7Hu6K9sWQbPstTsg6sgx4XJSCNBKpHwh1rEnps0ciMXTmPm2K_YvUYZkC-qPbcQBeoPfDj4DFwrzPJgCwt3bj5DcNZemuBNivfMDTa0/s1600/brown+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmT9Fa-PqJeHvveevpCb4859cCRVJMUT4XPRSnJUCaUzO-5bNZoWy15NKFscUqT0c7KqRd6zuBwjj1Oruf7dzCXoxiUfUYcViIXmhhyphenhyphenY0_vng2A6_Wpqj1R3m8hbcJ7GtoFwYLBc0ixs/s1600/Green+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPogz-AlWROLmVLiq8wskLpX_MtlrMcG02FdAstGKyDDJ4WO2FNZ8FVLqg6FRzK19k5joJSdNf2qngH4KrghBWNH2C6e3GzoCpwj6i9rZPj2SKWfy9GlR3EcOaqTrS6CN2GJjM82tbFI/s1600/purple+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVqy_2IVHMJedJW3OMejO4vH8MeZRMQtKmRf3jwv7wcERkSL3a8uAdpziaqKoEnvVTwnIelZnhP20QWWoWxgIQgnbNZuFlI4dWt5JJl4QJSgAKiWeqXeOMeOIM_rR6d3U77VgtYppot8/s1600/white+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rlt0NenILJdaKJpAPiJFklPvxUwkYHX5OiWxXXUrSOcFdnJh_TeHGZY4gxuGXlki4UMWdp4UIXdY4GoTSIHW73C6pZe4QZlucqrDlDQ9Jx8dqfTcJe8teLtaROspNznSYBKGcHf7Ydk/s1600/red+bird.png

Blog harus diperkaya dengan fitur-fitur yang dapat memperindah blog. Happy Blogging

Cara Membuat Efek Gelembung Di Blogger

Salah satu cara untuk memperindah tampilan blog atau salah satu cara untuk memancing detak kagum pengunjung blog adalah dengan cara memasang Bubble Effect di blog sobat blogger. Bubble dalam bahasa Indonesia berarti Gelembung, jadi Bubble effect adalah sebuah fitur blog yang menampilkan efek gelembung pada blog. Gelembung yang dihasilkan memiliki warna biru dan putih yang transparan.

Pasti sobat blogger tidak tahu tampilan dari efek gelembung ini. Jadi, ketimbang penasaran dan bertanya-tanya sama orang lain, buruan sobat blogger pasang Bubble Effect ini di blog sobat blogger. Bagaimana Caranya? Ikuti tips trik blogspot di bawah ini!

---

Cara Membuat Efek Gelembung Di Blog

---

• Sign In di blogger.com
• Pada menu drop down, pilih Template
• Klik edit Html dan Cari kode <body>
• Copy Paste kode JavaScript berikut di bawah kode <body>

<script src="http://clief.googlecode.com/files/bubble.js"></script>

• Simpan template sobat blogger

Semoga tutorial blogger yang singkat ini ada mamfaatnya.

Pesta Kembang Api Blogger Untuk Menyambut Tahun Baru

Kembang Api termasuk juga ke dalam kategori bahan peledak, tapi perlu sobat blogger garis bawahi sedikit bahwa Kembang Api bukan bahan peledak yang beradaya tinggi seperti Bom Atom yang di lepas di Hirosima dan Nagasaki akan tetapi bahan peledak yang memiliki daya ledak rendah (Saya lupa apa istilah-nya dalam ilmu kimia). Saat ini, kembang api digunakan dalam dua hal yaitu untuk hiburan dan untuk meminta pertolongan (Biasanya kembang api dinyalakan saat kapal laut dalam kondisi bahaya).

Wahhh... Sebentar lagi Tahun Baru 2013. Pesta kembang api pasti akan memeriahkan setiap acara penyambutan tahun baru 2013. Buat sobat blogger yang ingin memeriahkan Tahun Baru, saya sudah siapkan Kembang Api spesial untuk di pasang di blog sobat.

Cara Memasang Efek Kembang Api Di Blog

1. Kunjungi blogger.com dan langsung Login.
2. Klik tombol di bawah ini dan klik Add Widget

Refresh blog sobat untuk melihat hasilnya!

Memasang Kupu-kupu Terbang Ke Dalam Blog

Anak ayam turun sepuluh
Mati seekor tinggal sembilan
Bangun pagi sembahyang subuh
Minta ampun kepada Tuhan

Asam kandis asam gelugur
Ketiga asam si riang-riang
Menangis mayat dipintu kubur
Teringat badan tidak sembahyang

Waduh... Pantun di atas benar-benar mengingatkan saya pada keponakan saya yang masih duduk di bangku sekolah dasar. Keponakan yang sangat lucu dan unik. Kalau keponakan saya makan bakso, dia wajib menghabiskan bakso-nya terlebih dahulu, baru makan mie-nya. Sobat tau kenapa dia seperti itu? Karena dia takut saya mengambil bakso-nya! Haaaa.... Dasar anak kecil.

Setiap sore, keponakan saya selalu mengajak saya untuk mencari kupu-kupu di sawah atau di kebun milik tetangga. Dia sangat menyukai kupu-kupu, sampai-sampai binatang kecil itu sering hadir dalam mimpi indahnya.

Berbicara tentang kupu-kupu, ternyata ada lho widget yang menampilkan kupu-kupu terbang di blog. Ga' percaya? Cobain dulu widget ini!

Cara Pasang Kupu-kupu Terbang Di Blog

1. Go to blogger.com (Masuk menggunakan akun email yang sobat blogger biasa gunakan).
2. Selajutnya, klik tombol biru yang terdapat di bawah ini dan klik Add Widget.

Cara Membuat Link Nudging Atau Link Bergoyang Pada Blog

Apa itu Link Nudging dan Bagaimana cara membuat Link Nudging? Link Nudging adalah sebuah efek animasi yang dimunculkan pada sebuah link sehingga link akan terlihat bergerak ke sebelah kanan dari posisinya semula bila cursor diarahkan ke link tersebut. Ketika ada pemilik blog yang menanyakan bagaimana cara membuat link bergoyang atau bagaimana cara membuat link bergerak, maka inilah jawabannya "Dengan cara menambahkan efek Link Nudging pada Blog".

Untuk melihat Demo dari Link Nudging, arahkan cursor sobat pada link di bawah ini!

1. Daftar Nama Situs Untuk Download Template Secara Gratis
2. Cara Memasang Yahoo Web Player Di Blog
3. Kebijakan Konten Blogger Untuk Pemilik Blog
4. Cara Menghias Judul Posting Dengan CSS
5. Cara Membuat Halaman Privacy Policy Untuk Blog
6. Cara Membuat Widget Animasi Doraemon

Ketika saya mengunjungi beberapa blog untuk mencari tutorial blogspot tentang cara membuat Link Nudging pada link blog, tidak ada satu pun dari blog itu yang memberikan saya kemudahan untuk menerapkan efek Link Nudging di blog saya. Semuanya mengajarkan memasang Efek Link Nudging dengan cara edit template. Yang saya bingungkan, kalau ada cara mudah untuk memasang Link Nudging di blog, kenapa harus melakukan cara yang susah, artinya tanpa harus edit template. Emangnya ada cara lain untuk menerapkan efek Link Nudging di blog kita tanpa harus edit template? Ya jelas ada, yaitu dengan menggunakan kode CSS. Untuk tutorial lengkapnya, baca petunjuk di bawah ini!

---

Cara Membuat Link Nudging Di Blog

---

• Sign In di blogger.com
• Pada Menu drop down, pilih Template
• Klik tombol Costumize untuk menuju laman Blogger Template Designer
• Klik Advanced dan klik Add CSS

• Copy Paste kode CSS berikut pada kolom yang tersedia

a:link {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
a:hover {
padding-left: 12px;}

• Klik Apply to blog.

Cara Menambahkan Efek Opacity Pada Gambar Posting Atau Blog

Gambar dengan Efek Opacity artinya gambar akan terlihat meredup ketika cursor membayangi gambar tersebut atau sebaliknya, gambar akan tetap meredup kalau cursor tidak diarahkan di gambar itu. Bingung dengan penjelasan yang singkat itu? Wajarlah sobat blogger bingung, karena jarang ada blog yang menerapkan Opacity Effect pada gambar mereka. Untuk diketahui, Efek Opacity hanya berlaku pada gambar yang terdapat di bagian blog post atau posting. Jadi, kalau ada gambar yang terdapat di Header, Footer atau di Sidebar, maka gambar tersebut tidak akan menampilkan efek Opacity.

Untuk memasang efek Opacity pada gambar blog, sobat blogger tidak perlu melakukan Editting Template, sobat blogger hanya perlu menambahkan sedikit kode di kolom HTML/JavaScript. Untuk lebih jelasnya, ikuti saja tutorial blogspot di bawah ini!

---

Cara Memasang Efek Opacity Pada Gambar Blog

---

1. Sign In di blogger.com
2. Klik tombol di bawah ini!
3. Terakhir klik Add Widget (Untuk lebih jelasanya, lihat gambar di atas!)

Kode Opacity Effect Bagian Satu

Kode Opacity Effect Bagian Dua

Cara Memperindah Tampilan Posting Baru, Beranda Dan Posting Lama

Teks yang bertuliskan Newer Post, Home dan Older Post (Dalam bahasa Indonesia Posting Baru, Beranda dan Posting Lama) merupakan link yang berfungsi sebagai menu navigasi untuk menuju laman Home Page, menuju posting yang terbaru atau untuk menuju posting yang lebih lawas. menu navigasi ini terdapat di bagian bawah kolom komentar. Karena bentuk dari menu navigasi ini sebatas teks, sudah pasti tampilannya terlihat simple atau sederhana. Sehingga untuk membuatnya lebih cantik atau menawan, sobat blogger perlu memodifikasi tampilannya.

Karena alasan itulah, saya akan sharing tentang bagaimana cara memodifikasi tampilan Newer Post, Home dan Older Post supaya ketiga teks tersebut terlihat indah dengan tampilan bingkai dan background yang menghiasinya. Untuk menghias tampilan Newer Post, Home dan Older Post, sobat blogger hanya membutuhkan sedikit penambahan kode CSS yang dimasukkan melalui laman Blogger Template Designer. Berarti saya tidak perlu edit template? Ya... Sobat blogger tidak perlu edit template untuk memperindah tampilan Posting Baru, Beranda dan Posting Lama.

---

Cara Mempercantik Newer Post, Home dan Older Post

---

• Sign In di blogger.com
• Pada Menu Drop Down pilih template
• Klik tombol Costumize
• Klik Advanced dan klik Add CSS
• Copy Paste kode berikut pada kolom yang tersedia

.blog-pager-newer-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}
.blog-pager-older-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}
.home-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

• Terakhir, klik Apply to blog

Alangkah berartinya trik ini jika ada pesan, saran atau komentar dari sobat blogger yang dicantumkan melalui kolom komentar yang kami sediakan.

Cara Memasang Jam Digital SpongBob Yang Lucu Dan Imut Di Blog

SpongBob adalah salah satu tokoh kartun yang banyak di sukai oleh anak-anak dan orang dewasa. SpongeBob diciptakan dan dirancang oleh seorang kartunis yang bernama "Stephen Hillenburg" pada tahun 1996. SpongBob adalah tokoh kartun yang sangat na'if dan konyol yang bekerja sebagai seorang juru masak di sebuah kota di bawah laut. Kota tersebut bernama "Bikini Bottom". Untuk lebih jelasnya tentang siapa dan bagaimana SpongBob, silahkan kunjungi URL berikut : http://en.wikipedia.org

Buat sobat blogger yang suka sama SpongBob, hari ini saya akan membagikan sobat blogger sebuah widget SpongBob yang sangat lucu. Widget ini tidak hanya menampilkan lucunya SpongBob, tetapi juga menampilkan sebuah jam digital yang dipegang oleh SpongBob. Widget ini sering disebut dengan nama SpongeBob Clock Widget.

Cara Memasang SpongeBob Clock Widget

1. Log In di www.blogger.com
2. Klik tombol yang ada di bawah ini, lalu klik Add Widget

Cara Membuat Efek Gelembung Atau Bubble Pada Cursor Blog

Setelah memberikan Tutorial tentang Cara Buat Cursor Bertabur Bintang, sekarang saya akan melanjutkan tutorial tersebut dengan Cara Membuat Efek Bubble Pada Cursor. Efek Bubble atau efek gelembung yang muncul dari cursor blog akan memperindah atau mempercantik tampilan blog. Itu adalah keuntungan dari memasang cursor bertabur gelembung ini.

Gelembung yang bertaburan dari cursor, dalam jumlah yang sangat banyak. Gelembung tersebut bertaburan dari posisi cursor sampai dengan posisi navbar (Di atas header).

---

Cara Membuat Efek Gelembung Atau Bubble Pada Cursor Blog

---

1. Login di blogger.com
2. Klik tombol di bawah ini dan klik Add Widget

Tambahan :
Kalau sobat blogger ingin merubah warna gelembung atau bubble, silahkan ganti kode yang warna yang terdapat pada kata "var colours=new Array" dengan kode warna yang lain. Untuk melihat kode warna kunjungi laman ini : Hex Color Code Generator atau Web Color Chart