Latest Article Get our latest posts by subscribing this site

Cara Membuat Link berwarna Pelangi Di Blog

Jika pengunjung blog sobat blogger mengarahkan Cursor ke arah salah satu link yang ada di blog sobat, maka teks dari link tersebut langsung berubah warnanya menjadi teks yang berwarna warni dan teks tersebut berkedip. Efek link yang berubah warna dan berkedip seperti itu di sebut dengan nama Multi-Color Link Hover Effect atau Rainbow link effect (Link efek pelangi). Untuk membuat link kita menampilan efek warna yang berubah-ubah, saya sudah membuatkan sobat blogger sebuah kode JavaScript. Dengan memasang kode ini, semua link yang ada di blog sobat secara otomatis menampilkan efek pelangi. Satu lagi, sobat blogger tidak perlu Edit Template.

Untitled


Cara Membuat Link Pelangi Pada Blog


langkah%2520install

  1. Kunjungi dan langsung masuk di blogger.com
  2. Klik tombol di bawah ini dan klik "Add Widget"
  3. Perhatikan gambar yang ada di atas!


sumber : tutorialblogspot.com

Cara Memasang Widget Google Plus Slide Out di Blog

Kalau sobat blogger belum pernah membaca postingan di atas, silahkan langsung klik link-nya, siapa tahu ada informasi menarik tentang widget pengikut Google Plus yang belum sobat blogger tahu.

Widget Followers Google+ sudah menjadi widget default bawaan blogger. Widget ini menjadi ciri khas sebagian besar blog yang bernaung di bawah Flatform blogger.com. Sedikit sentuhan menarik harus ditambahkan pada widget Google Plus, supaya pemilik blog yang belum memasang widget ini tertarik untuk memasangnya. Oleh karena itu, saya sebuah kode untuk membuat widget Google+ terlihat lebih keren yaitu dengan menambahkan fitur Slide Out. Slide Out itu yang bagaimana sih? Itu lho... Supaya

google+followers+widget

Cara Memasang Widget Google+ Slide Out
  • Login ke blogger.com
  • Pada menu drop down, pilih Layout (Tata Letak)
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy Paste kode berikut pada kolom yang tersedia
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipsf1pI1RF6hZtcTYZCyX8WnYj1Vua6DMQmoqzt4H3P56we2jMhQSq9FlcAvwd9Y1xmTxu0jDyKf0g-WooqLLpEGnZmQMpGu-VxQNtzQR-NdUaHNQ94QHoqdz1aejGI1140-sS6XoNh0Y/s1600/google+plus+gemar+html.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 16px;
background: white;
border: 1px solid #ff4747;
border-right: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108329354747256877665" data-source="blogger:blog:followers" data-width="320">
</div>
<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\x57\x69\x64\x67\x65\x74\x20\x47\x6F\x6F\x67\x6C\x65\x2B\x20\x46\x6F\x6C\x6C\x6F\x77\x65\x72\x73\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\x42\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>​
  • Simpan widget Google Plus sobat.

Tambahan :
Silahkan ganti https://plus.google.com/108329354747256877665 dengan URL akun Google+ sobat.

sumber : tutorialblogspot.com

Cara Membuat Efek Gelembung Di Blog


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.

bubble

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.

Cara Memasang Burung Twitter Terbang di Blog


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

Twitter%2520Terbang


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/AVvXsEiylbpWWa4RN7mEtVkKoKP5FUl1yxOVCjSGVivarWqzI7XawMRqvmbzi73FQcko4dFhxWw07UzkgEME8f2ix_fBHIxKzQ54sLj4ACVXamZZJS75d4IT7OSFSrMZfb2XkZzMrJAP6mBFGZg/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 - UserIDhttp://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/AVvXsEgOjjNkSZFVdV-GVt_j5fRLTaSNS6IIsy-u63bSNjeTnTzLy_Ym5toWjx7c2Fh6IGzOvhDmvOvW_0vaIb_hyz3bEc66BcI-2quDSTQWDbkWSayxiZ16DKvFi4ZxHdg8m4R_usvL_4HwLmk/s1600/yellow+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTPujFlox2lr0nAheutaitUEUdk-M7ciF2euCCVOdZzv_hNZmbPqYEWaRgqGVk28JTk5D8y9EvaQJDFZCV7RWz4XrogrMSI0PEUS7YClfkEl42n08EPaBAE3UOxyqUqw8wyQnSbMEz8M0/s1600/black+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbCI6gXYPZjwcjCpp8urKaRgbFeKUmFqQ5xsSggBRZDtOD1GWxUBm_fitza9MZRJKvYBi9kkerFWDA3WO8BJI_gqlpUiEYryGaS1dKv-zUTisi9MeyxpBD3eDpbs7FsTOWVQbXZzfZhc/s1600/Blue+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnoLH6BTLrlrz2Lv6GJlMVcLz1cBpRVVmeDU1Y-1d8H-BGUbaI3ZNJv-GPU2ZOkBAHxzPkF3NiMmYyVDZWRpUxN1Jn4lOvMmrFm4-Z1H26RgmXBgDusFaJRBii_z_2cwRn2P0-T8LYJJI/s1600/brown+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vVZxLnOmxXGHqTJ-AeSSxALVPHlpKo8Of_w_qhkFXK5dKNjCmZkJ6gUwgXef9UNgomRdcYKeoz7h3OZVjdNFdGxWQaxXOfTKdVhiGgXRwYf2VplZZhpiEfTnFyexVi13CJ5v9tSSZHk/s1600/Green+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6p6AhiNEF3zYMCaxL3thvxrhDaJMKIA5SDdXLMTFS_gNlnty-VOMZ16SPZc5Ruwg-VL3BaaC6hh3AM0L7GHphxlXzGkucMsj3x3DGio-WKbi9vCJEkKoKb1dvWmw44L53nkHPgSkZ80/s1600/purple+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSC8bshxoHOpyvvt7tTZlVUU3Rl0vDQ36OcIcjySDzvYzo8CNHMr0VgHq1XiCSBMjyeuOR4jMtP42TqKXGvfzxl2XpHRZJioyU-pf3NsQKAGqL7Owri-Fq9xkwhMiGzpukuh8gk-ZtZQ/s1600/white+bird.png

Twitter Flying Bird atau Burung Twitter Terbang Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EIYoevs2F1ANbZf7bGCjLaGVtSIPsTyf0AjeeJ79pCFhisv70qJk7HLG0EHKoyOI_lEonRKJS1XNGzL6Baf8lxKpbN05fotY4W_3cOXF4q-3RESuoiS4i7WmHc0jLM7pwkIZW5Zu23M/s1600/red+bird.png

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

sumber : tutorialblogger.com

Cara Membuat Tampilan Posting Seperti Koran/Majalah Di Blog

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

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.

tanggal

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!
edit
Langkah 1
laman-entri
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/AVvXsEhFNdH9qW-nix7er4TQ4u6qS-gSOlSUFLy-GNT_59ReSR21L_X-TJM6CvizNFtPbhpHBAaYMRagPuLbQ4sg3iURFNha2uHnmR5FfmRRCmjUPefNm6Jz_D1AZqL2iy_UR-gM4tyepeXbfsQ/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;

Cara Membuat Teks/ Tulisan Berjalan Diblog

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".

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>

sumber : tutorialblogger.com

Menambahkan efek ketikan pada teks atau tulisan di Blog

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


sumber : tutorialblogger.com

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 warnaScroll Bar adalah kode CSS (Cascading Style Sheets).

Scroll-Bar

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
sumber : tutorialblogspot.com

Translate to

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Support : TWITTER | FACEBOOK | BLOG
Copyright © 2013. Selamat Datang ! Di Kawasan Super Lengkap - All Rights Reserved
Proudly powered by Blogger