Berapa Berat Badan Blog Anda ???

T

ak terasa udah begitu banyak pernak-pernik yang sudah saya tempel di sana-sini pada tubuh blog aku. Dari semua artikel yang aku tulis disini, hampir seluruhnya sudah aku terapkan / aplikasikan di blog saya ini, seperti halnya widget, banner, header picture, musik dan lain sebagainya, sehingga membuat blog saya jadi enak dipandang dan terlihat elegan [itu kata temen-temenku lho, hehe5..].

Tanpa saya sadari, bahwa pernak-pernik yang bejibun terpasang di blog saya itu ternyata membuat badan blogku jadi "gendut", sehingga pas begitu loading jalannya macem keong sawah, lemot abis dah, hehe5. Apalagi waktu itu saya pasang juga musik yang sudah jelas memakan memori yang lumayan gede, yang membuat loading blog saya makin "ngos-ngosan". Dari kejadian itu lah, saya mulai berfikir, gimana cara merampingkan badan blog saya supaya langsing dan singset tapi masih menyisakan kesan anggun dan elegan.

Namun sebelum membahas kiat-kiat supaya badan blog jadi ramping, disini saya akan memberikan referensi bagi Anda para blogger untuk menimbang berat badan blog Anda dengan menggunakan tools online service, diantaranya sebagai berikut :

1. WebSiteOptimization.com : Hasil analisis lebih lengkap, kita dapat mengetahui seberapa cepat waktu loading sebuah website apabila diakses menggunakan 6 kecepatan koneksi internet. Hasil tes juga disertai dengan analisis website yang dapat dipakai sebagai acuan untuk optimasi website lebih lanjut.
2. Tool Pingdom  : Tools ini hasilnya lumayan lengkap dan rinci sebab menampilkan grafik lamanya loading dari semua objek  link yang ada dalam blog kita.
3. Iwebtool Speed Test : Caranya tinggal masukan URL blog Anda, klik Submit dan Anda akan tahu seberapa berat size-nya (kb) dan berapa lama loadingnya (seconds).
4. Tool Stopwatch  : Seperti namanya "stopwatch" kita akan tahu berapa detik loading blog kita.

Nah.., sekarang kita bahas kiat-kiat merampingkan badan blog kita agar saat loading tidak terasa berat. Berikut beberapa kiat yang bisa Anda terapkan pada blog Anda :

1. Jika dalam blog Anda terdapat widget atau image dengan ukuran yang besar, lebih baik diletakkan di bagian bawah blog.
2. Hapus widget yang menurut Anda tidak perlu atau tidak penting.
3. Kurangi jumlah image dan perkecil resolusi image yang Anda pasang di blog.
4. Silahkan Anda kompres CSS atau script template Anda untuk memperkecil ukurannya.

Mungkin hanya itu saja kiat-kiat yang bisa Anda lakukan agar loading blog Anda tidak merasa berat. Namun jika Anda memiliki kiat-kiat yang lainnya bisa Anda tambahkan di kotak komentar di bawah ini, hehe5..

Selamat mencoba yaa dan semoga bermanfaat..

READ MORE . . .

Cara Membuat Auto Hide Navbar Pada Blogspot

A

pa itu navbar..?? Navbar adalah bagian yang terlihat pada bagian teratas blog kamu. Yang mana pada bagian tersebut terdapat tulisan Entri Baru, Rancangan, dan Keluar. Nah, ada beberapa temen blogger yang ingin menghilangkan navbar ini, hal ini tentu saja melanggar peraturan yang telah ditetapkan oleh Blogspot. Namun untuk mewujudkan keinginan Anda tanpa menghilangkan navbar secara permanen, Anda bisa kok menyembuyikan navbar tersebut dengan auto hide navbar. Penasaran..??? Berikut cara membuat auto hide navbar pada blogspot :

[1]. Login Blogspot
[2]. Klik Rancangan kemudian Edit HTML
[3]. Silahkan Anda cari kode body {, kemudian copas script berikut ini dan letakkan di atas kode body { tadi

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Sehingga formatnya menjadi seperti ini :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
body {

[4]. Jika sudah, silahkan klik Simpan Template dan lihat hasilnya di blog Anda

Silahkan Anda arahkan mouse pada bagian teratas blog Anda, maka akan muncul navbar yang telah disembunyikan. Apabila mouse Anda arahkan ke tempat lain, maka navbar akan kembali hilang atau tersembunyi kembali.

Saya kira cukup sekian saja pembahasan cara membuat Auto Hide Navbar pada Blogspot. Jika ada pertanyaan silahkan Anda tuliskan komentar Anda di kotak komentar di bawah ini.

Selamat mencoba dan semoga bermanfaat..

READ MORE . . .

Cara Membuat Slide Out Navigation

K

etika Anda membuka halaman blog saya, tentunya Anda akan melihat beberapa menu navigasi berupa "Home", "About Me", "Bannerku" dan lain sebagainya yang tentunya unik dan menarik. Dan sering kali temen-temen blogger menyebutnya dengan istilah "Slide Out Navigation". Tuuhh...lihat yang paling atas tuhh.. Menarik kan..??? hehe5.. Saya yakin deh Anda pasti penasaran dengan menu navigasi tersebut dan bertanya dalam hati, bagaimana yaa cara membuatnya, yaa kan..?? Jangan bohong deehhh..!!! hehe5..

Tapi Anda jangan khawatir, kali ini saya akan mencoba untuk share ilmu dan pengalaman saya ini kepada Anda semua [kurang baik apa cobaa... hihi5..].

Oke.., berikut langkah-langkah cara membuat Slide Out Navigation :

[1]. Login Blogger

[2]. Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>

[3]. Copas script berikut dan letakkan di atas kode ]]></b:skin> tadi :

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left; 
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
    
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsyijKEhsc1coLtM4Q-2Pe70DUHJ9jKtMStEHrl3mjVD6lQQlpcqiAtOFX7zl21zCgSPZ-l02ZmkLJsDACslLRe8KNPeVNrWeNHMNmnZBWMUu3LVVQ0Cwf7Zu-S1DqQqdgZlqoNkvQbs/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBFJVt5ct26O21daJ_L2UL0oTLp3C8nv3BxrPZ6H4r_vvmkuucamyFq4d2bgFXkAXoYKPRb_Q8XpLoB5uQzOaHF-Didr0lYgBEEpoFqt-n3ZXTS9d7c0UfOS1mlZYUTq_J0OIFcUR5zeA/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiKB5HJmkH0LKUOnz3dIIhp_7eifclLZYaRzApxDsqS_IbDczIRGzPkbPeMznju7fvKE4n9JFuWJlNy6soMAdDB0oEln290fkBMEPYZ2Lr5uCGIBh00b_Ylw8HlaULDw1ATw3prgDkzkg/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrARR0juvLz5QwMFYJuAovX8lbNc-MTadcA7k9BJFoVm-4M91a1qhSIiRNGTcQJQnOF4zNNmidscKbtlIuoYFjlbHwi6pABGOQDe0VmMy9oeuXG34uuaZGhxwEtYB5xd5gWv9EE6GwnHg/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKy_pxEj7V557N7loQXweSczk8b2TrPVBFnSoE5b4T1__tJePJgUM_bJUBtlxRryA4nxkhp1xy6rKdfH-m5cXdCq_Ne4iVxFcvMBI4QAWPDSHTkbT00Nds7cN2wH98MWxV9CFKk8imHo/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwUF3EoiWBrYieuFUyiZq0-Uy1ZuP20a6N7dPGEno5Z2HepQkIU7tjonbRnGQvy6mOias50GwLbFCnA48bTL-BpI8SnMtNmdLixp_XKid2qlhJAUksCoKrAGddVzozmD1VkUjwuIXjxQ/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHwasMlZko7HMkN0Bbgk_Q324iBIqLH7gE0CSCdPSz0a6aA0K_OHdg1aaDpFBvo6Z8G0GtM0_GWLqROwvPwWoYZ1ZcG08FbENUjqSqwhmLKfqw6tTLT0yegCDtZHsQ-ji4JX4SvG15O4/s1600/mail.png);
}

[4]. Kemudian cari kode </head> dan letakkan script berikut ini di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

[5]. Terakhir, cari kode </body> dan letakkan script berikut ini di atas kode </body> :

<ul id='navixed'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

Catatan :
# : Silahkan Anda ganti dengan masing-masing link menu navigasi di blog Anda

[6]. Selesai deh.. dan jangan lupa Simpan Template

Bagaimana, mudah kah cara membuat Slide Out Navigation..??? Yakin deh Anda semua pasti bisa membuat SLide Out Navigation seperti yang saya terapkan di blog saya.

Selamat mencoba yaa dan semoga bermanfaat..

READ MORE . . .

Memasang Kotak Komentar Facebook Dengan Fitur Reply Pada Blogspot

F

acebook memang tidak ada matinya. Benar saja, facebook ternyata terus mengembangkan plugin sosial yang disinergikan dengan keberadaan web atau blog. Salah satunya adalah mengembangkan kotak komentar facebook dengan fitur reply yang bisa dipasang di template blog kita. Sebagai contoh, Anda bisa lihat penerapan plugin kotak komentar facebook di blog saya ini : http://talipati.blogspot.com. Bagaimana menarik bukan..??

Penggunaan kotak komentar facebook dengan fitur reply ini banyak manfaat yang bisa didapat bagi kita sebagai penggila dunia maya. Salah satunya ya mencoba memberikan ruang bagi para pembaca blog kita untuk mengomentari artikel di blog kita lewat akun facebook. Hhmm.. lebih menariknya lagi, kotak komentar facebook ini memiliki fitur reply yang akan memberikan kenyamanan bagi pembacanya untuk saling balas komentar. Inilah nilai plus yang dimiliki kotak komentar facebook ini. Dan bagi si empunya blog, kotak komentar ini bisa disetting sesuai dengan keinginannya, karena terdapat ruang moderasi untuk setiap komentar yang masuk. Artinya, si empunya blog bisa menyaring mana komentar yang mau ditampilkan dan mana yang tidak. Yahh, boleh dibilang inilah ruang "hak siar" bagi pemilik blog, hehe5..

Ahh, sepertinya pengantar di atas sudah terlalu banyak saya ngomong, hehe5.. Langsung aja deh kita ke pokok bahasan, gimana memasang kotak komentar facebook dengan fitur reply ini ke dalam blog kita. Berikut langkah-langkahnya :

[1]. Login dulu ke Blogger

[2]. Kemudian masuk ke "Rancangan" dan klik "Edit HTML"

[3]. Silahkan Anda cari kode berikut ini <data:post.body/>, kemudian copas script di bawah ini persis di bawah kode tadi. (catatan : jika Anda telah menggunakan readmore, tentunya kode <data:post.body/> ada dua, maka dari itu silahkan letakkan script di bawah setelah kode <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=ISIKAN ID APP ANDA DISINI&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='600'/>
</b:if>

Silahkan Anda ganti kata "ISIKAN ID APP ANDA DISINI" dengan ID App Anda. Jika Anda belum memiliki ID App silahkan daftar terlebih dahulu di : http://developers.facebook.com/setup

[4]. Cari kode berikut ini <b:skin><![CDATA[/, kemudian letakkan script di bawah ini di atas kode tadi.

<meta content='ID Profile Anda' property='fb:admins'/>
<meta content='ID App Anda' property='fb:app_id'/>

ID Profile Anda, bisa Anda dapatkan di halaman profil Anda. Silahkan klik tab Profile Facebook Anda, kemudian perhatikan URL yang tertera di address bar, contohnya : http://www.facebook.com/profile.php?id=100000095143813 dan 100000095143813 adalah ID Profile Anda.

[5]. Simpan Template

Setelah Anda selesai memasang kotak komentar facebook tersebut, silahkan Anda cek terlebih dahulu dengan membuka salah satu postingan Anda. Crriiiinnggg... Selamat Anda telah berhasil! hehe5..

Sementara sekian dulu postingan kali ini. Nah, jika ada yang ingin ditanyakan, silahkan tulis pertanyaan Anda di kotak komentar di bawah ini. Selamat mencoba dan semoga bermanfaat..

READ MORE . . .

Memasang Tombol "Like" Facebook Pada Blogspot

F

acebook telah mensetting sebuah plugin sosial baru yang memungkinkan kita untuk berbagi pengalaman menarik atau hal yang disukai di sebuah website atau blog kepada pengguna lainnya hanya dengan sebuah tombol.

Yahh, tombol "Like" facebook. Tombol ini akan terpasang di seluruh halaman posting blog, dan untuk setiap halaman posting berbeda-beda jumlah orang yang "like/recommend". Jumlahnya ya tergantung berapa banyak orang yang menyukai halaman / postingan tersebut. Sebagai contoh, silahkan lihat tombol "Like" facebook di bawah postingan ini. Keren kan..?? hehe5..

Rasanya saya tidak perlu basa-basi lagi, berikut ini langkah-langkah memasang tombol "Like" facebook pada blogspot :

[1]. Login ke akun Blogger dan buka menu Layout --> Edit HTML dan klik "Expand Widget Templates"
[2]. Kemudian cari kode <data:post.body/>, dan copas kode tombol like facebook di bawah ini persis di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

[3]. Simpan Template

Bagaimana, mudah bukan..?? Nah, sekarang giliran Anda yang mencobanya, key.. hehe5..

Selamat mencoba kawan, semoga bermanfaat..

READ MORE . . .

Cara Membuat Tulisan Berjalan [Marquee]

K

etika Anda membaca salah satu artikel, di bagian bawah di atas kotak komentar pastinya Anda bakal melihat tulisan berjalan berwarna putih dengan background hijau. Dan pastinya Anda juga bertanya, kok bisa yaa tulisannya berjalan..?? hehe5.. Tujuan adanya tulisan berjalan ini tentunya kita semua sudah banyak yang tahu, apa lagi kalau bukan untuk mempercantik tampilan blog kita, yaa kan..!!

Nah.., kali ini saya akan membuat membuat tulisan atau postingan tentang bagaimana cara membuat tulisan berjalan di postingan, widget ataupun menempel pada template Anda. Mungkin beberapa dari Anda sudah penasaran kan. Berikut cara pembuatannya :

[1]. Login ke Blogger
[2]. Kemudian klik Tata Letak dan Elemen Halaman
[3]. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
[4]. Lalu pilih HTML/JavaScript
[5]. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

A. Tulisan Berjalan Dari Kanan Ke Kiri

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

B. Tulisan Berjalan Dari Kiri Ke Kanan

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="right" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

C. Tulisan Berjalan Bolak-balik

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3' behavior="alternate"><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

D. Tulisan Berjalan Dari Atas Ke Bawah

Kode :

<div cols="45" rows="5" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background-color: #5fb404; border: 1px double rgb(95, 180, 4); color: white; font-size: 16px; line-height: 1.1em; padding: 5px;">
<marquee align="center" direction="down" scrollamount="3"><center><span style="font-family: Gruppo;">HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

E. Tulisan Berjalan Dari Bawah Ke Atas

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3'><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

F. Tulisan Berjalan Naik-Turun

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

G. Tulisan Berjalan Zig-Zag Tembus

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate" ><marquee direction="right"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>

Hasil :

HARIO PAMUNGKAS

H. Tulisan Berjalan Zig-zag Mantul

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>

Hasil :

HARIO PAMUNGKAS

I. Gambar Berjalan Zig-zag Mantul

Kode :

<div cols='45' rows='7' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><a href="http://hariopamungkas.blogspot.com/" target="_blank"  title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a></marquee></marquee></div>

Hasil :

Catatan :

direction="left/right/up/down" --> mengatur arah gerakan teks.
scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi
Jika ingin menghapus background, tinggal hapus saja background-color:#5FB404; pada kode di atas.
Jika ingin mengganti tulisan "HARIO PAMUNGKAS" dengan gambar seperti pada contoh terakhir, silahkan ganti tulisan tersebut dengan kode sumber gambar yang ingin Anda tampilkan, contoh : <a href="http://hariopamungkas.blogspot.com/" target="_blank" title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a>

Nahh.. di atas ada berbagai macam contoh tulisan atau gambar berjalan. Jika Anda ingin mempercantik blog Anda dengan tulisan berjalan, alangkah lebih baiknya Anda mencobanya, hehe5..

Selamat mencoba yaa dan semoga bermanfaat...

READ MORE . . .

Cara Memasang Tools Parse HTML Pada Blogspot

P

arse HTML adalah salah satu cara yang di gunakan para blogger untuk memposting artikel yang berkaitan dengan code HTML/javascript. Kegunaannya agar kode yang kita posting di dalam artikel akan tampil menjadi sebuah karakter/tulisan. Karena jika kita memposting kode script ke dalam artikel, maka tulisan tidak akan muncul atau malah muncul sebagai widget.

Sebagai alat bantu untuk memudahkan kita memparse kode HTML supaya dapat ditampilkan menjadi tulisan di postingan kita, kita membutuhkan tools parse HTML

Jika Anda ingin memasang tools parse HTML di postingan atau halaman blog Anda, silahkan lakukan beberapa langkah mudah di bawah ini :

[1]. Login ke akun blogger anda, sehingga anda akan di bawa ke halaman dasbor akun blogger anda.
[2]. Posting sebuah entri/artikel baru dengan memasukkan code script di bawah ini pada mode "Edit HTML" (Ingat! Masukkan pada mode "Edit HTML")

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=320&amp;h=200&amp;title=Code+HTML+Converter&amp;border=%23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66&amp;output=js"></script>

Dan berikut ini hasilnya :

[3]. Terbitkan entri/artikel anda. Maka tools parse HTML sudah ada di dalam postingan atau halaman blog anda.

Saya kira cukup mudah bagaimana membuat dan memasang tools parse HTML di blog kita. Jika ada pertanyaan mengenai cara memasang tools parse HTML ini, silahkan tuliskan pertanyaan Anda di kotak komentar di bawah.

Selamat mencoba dan semoga bermanfaat..

READ MORE . . .

Cara Daftar Dan Memasang Cbox Pada Blogspot

S

ebelumnya kita telah membahas tentang bagaimana cara membuat buku tamu tersembunyi, dimana dalam penerapan /aplikasinya nanti dibutuhkan penyedia buku tamu/chatbox dari pihak ketiga. Banyak situs penyedia chatbox yang beragam dengan fasilitas dan kelebihanya masing-masing, tapi dibalik kelebihan tersebut terdapatlah sebuah kekurangan, kali ini saya tidak akan membahas kelebihan dan kekurangan masing-masing situs penyedia layanan chatbox tersebut, tetapi menurut saya situs penyedia chatbox yang sangat dianjurkan untuk para pengguna blog adalah situs www.cbox.ws dengan nama chatbox-nya adalah Cbox, karena rata-rata blogger menggunakan Cbox dan banyak pula saat ini situs yang menggunakan layanan Cbox karena fiturnya yang sederhana dan memiliki banyak kegunaan dibandingkan penyedia chatbox lainnya, baiklah langsung saja saya akan memandu Anda untuk mendaftar dan memasang Cbox pada blog Anda, silahkan ikuti langkah-langkah di bawah ini :


[1]. Pertama buka situs www.cbox.ws

[2]. Setelah itu klik Sign Up dan isi formulirnya sesuai dengan data-data Anda. Untuk Penjelasan silahkan dibaca agar tidak terjadi kesalahan dalam mengisi formulirnya :

• Cbox Name = Isi dengan nama untuk cbox Anda, yang nantinya bisa dibuka melalui address dengan www.namaAnda.cbox.ws sebagai contoh punya saya adalah www.hariopamungkas.cbox.ws
• Email Address = isi dengan alamat Email Anda
• Pasword = isi dengan password yang nantinya digunakan untuk loggin akun cbox
• Confirm Pasword = ketik ulang password yang Anda tuliskan pada kolom di atas 
• Website = isikan dengan alamat blog Anda, contoh : http://www.hariopamungkas.blogspot.com
• Language = Pilih bahasa yang Anda suka, tapi ini tidak tersedia untuk bahasa Indonesia
• Style = Pilih Tampilan yang Anda sukai dan contoh dari tampilan tersebut bisa Anda lihat pada bagian kanan formulir tersebut
• Setelah semua diisi, silahkan dicentang pada tulisan "I have read and do agree to the Cbox terms and conditions of service."

[3]. Setelah selesai klik tombol Create my Cbox.

[4]. Setelah langkah Sign Up dilakukan dengan benar maka akan ada tulisan CBOX CREATED! pada halaman selanjutnya, naaahhhh sekarang Anda baca penjelasannya dan sebuah email telah terkirim pada email yang Anda pakai saat melakukan Sign Up tadi. Pada email tersebut terdapat sebuah link dan Anda klik link tersebut untuk menuju ke langkah selanjutnya.

[5]. Lalu Anda akan akan menuju Cbox kembali untuk mengambil kode yang nantinya akan dipasangkan ke blog Anda, setelah dapat maka copy kode tersebut dengan mengklik Copy to Clipboard dan setelah dicopy, saatnya untuk memasang Cbox tersebut di blog Anda dengan langkah-langkah di bawah ini :

• Loggin ke akun Blogger
• Klik "Tata Letak" dan "Tambah Gadget"
• Pilih "HTML/Java script", setelah itu paste-kan kode Cbox yang telah Anda copy tadi dan "Simpan".
• Selesai dehhh, dan fasilitas chatbox telah tersedia di blog Anda.

Catatan :
Jika Anda ingin menggunakan fasilitas chatbox ini dan diletakkan pada buku tamu tersembunyi, caranya gampang tinggal sisipkan saja kode Cbox tadi.

Selamat mencoba dan semoga bermanfaat..

READ MORE . . .

Cara Membuat Buku Tamu Tersembunyi

M

emasang sebuah buku tamu (guestbook) pada sebuah blog adalah hal yang cukup penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang Anda dengan para pengunjung blog. Dengan adanya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang Anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi lebih menarik.

Pastinya Anda penasaran kan dengan buku tamu di blog saya ini. Ternyata buku tamu ini bisa disembunyikan dengan tujuan tidak memakan tempat seperti di sidebar blog Anda dan membuat blog Anda jadi lebih menarik.

Namun sebelum Anda membuat buku tamu, Anda harus menggunakan penyedia buku tamu dari pihak ketiga, tapi Anda nggak usah khawatir, ada kok penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com atau http://www.cbox.ws. Nah, dari penyedia buku tamu inilah kita nanti akan mendapatkan kode buku tamu yang akan kita pasang bersama script di bawah ini.

Ahh.. sepertinya kita tidak usah bertele-tele lagi kali yaa, berikut ini cara membuat buku tamu seperti yang saya miliki :

[1]. Masuk ke Blogger
[2]. Pilih "Rancangan/Layout" kemudian "Page Elements"
[3]. Klik "Add a Gadget" lalu pilih "HTML/JavaScript" dan copy-paste kode di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyctgEOU-qt7ORmM55swYJgttLgXV08A2QQMMROPmKvgEesw_p1NbD0WQe-Woy0hHUF0fU6hy7K317stbRemwbiEeTzkAImebZqOtwZVtlDyCvr5z_CmVOgot9KT9MfVlR0NI4nDmjT6A/s128/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://hariopamungkas.blogspot.com/2011/05/cara-membuat-buku-tamu-tersembunyi.html">
disini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

[4]. Pada kode di atas, cari kode <!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->  dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya. Sebagai referensi, saya tambahkan cara mendapatkan kode buku tamu dari Cbox.
[5]. Yang terakhir klik "Simpan", selesai deh.

Catatan :
Jika Anda ingin mengatur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.

Bagaimana..?? Makin penasaran..??? Saran saya lebih baik Anda langsung aja deh mencobanya, mudah kok.

Selamat mencoba yaa dan semoga bermanfaat..

READ MORE . . .

Cara Memasang "Readmore" Otomatis Pada Blogspot

P

ada postingan kali ini, saya akan membahas bagaimana membuat "Readmore Otomatis", seperti yang Anda lihat pada halaman pertama blog saya ini. Pada dasarnya penggunaan "readmore" ini bertujuan untuk meringkas artikel pada setiap postingan dan dimunculkan pada halaman pertama blog. Dan lebih menariknya lagi dalam ringkasan tersebut kita bisa tambahan image thumbnail untuk memberikan kesan menarik dan elegan yang diletakkan di awal paragraf.

Bukan hanya itu saja, disini kita dapat pengatur jumlah karakter yang akan ditampilkan dalam ringkasan. Ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image thumbnail yang ikut ditampilkan dalam postingan dan yang kedua jumlah karakter tanpa image thumbnail. Dan Anda bisa juga mengatur lebar dan tinggi image thumbnail yang akan di tampilkan.

Oke.. untuk lebih jelasnya, langsung saja kita pada pembahasan inti tentang bagaimana cara memasang "Readmore Otomatis" dalam template blog kita. Berikut langkah-langkahnya :

[1]. Silahkan Anda login dulu ke Blogger
[2]. Masuk ke "Rancangan/Layout" dan klik "Edit HTML"
[3]. Jangan lupa centang "Expand Template Widget"
[4]. Cari kode </head> kemudian letakkan script di bawah ini di atas kode </head> tadi.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Jika sudah silahkan klik "Simpan Template" untuk mengamankan script di atas.

[5]. Langkah berikutnya, silahkan Anda cari kode berikut ini : <data:post.body/>
[6]. Ganti kode <data:post.body/> dengan script berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><span style='font-style:italic;'> &gt;&gt; read more.. </span></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

[7]. Kemudian "Simpan Template" dan silahkan lihat hasilnya.

Catatan :
var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (banyak karakter akan ditampilkan di ringkasan tanpa gambar/thumbnail)
summary_img = 250; (banyak karakter akan ditampilkan di ringkasan dengan gambar/thumbnail)
img_thumb_height = 120; (tinggi gambar/thumbnail)
img_thumb_width = 120; (lebar gambar/thumbnail)

Bagaimana, mudah bukan..??
Yahh, mudah-mudahan postingan kali ini bisa membantu Anda dan membuat blog Anda jadi lebih menarik dan elegan seperti yang Anda inginkan.

Selamat mencoba dan semoga bermanfaat..

READ MORE . . .

Menghilangkan "Langgan: Entri (Atom") dan "Subscribe to: Poskan Komentar (Atom)"

L

anggan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) adalah sebuah fitur yang dibuat oleh blogger. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini Cara Menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot:

A. Cara Menghapus Langgan: Entri (Atom):

[1]. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template dan gunakan tombol Find untuk memudahkan pencarian kode;
[2]. Cari kode di bawah ini:

<b:include data='feedLinks' name='feedLinksBody'/>

[3]. Hapus/delete semua kode di atas, lalu Save Template, selesai.


B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

[1]. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template dan gunakan tombol Find untuk memudahkan pencarian kode;
[2]. Cari kode di bawah ini:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

[3]. Hapus/delete semua kode di atas, lalu Save Template, selesai.


Demikian tips ngeblog sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Selamat mencoba dan semoga bermanfaat.

READ MORE . . .

Mengganti Tulisan "Poskan Komentar" Pada Kotak Komentar Blogspot

P

ada tips ngeblog sebelumnya saya sudah menjelaskan tentang bagaimana cara Mengubah Background Kotak Komentar Blogspot. Dan pada tips ngeblog kali ini saya akan menjelaskan pada Anda tentang bagaimana cara Mengganti Tulisan "Poskan Komentar" Pada Kotak Komentar Blogspot, seperti kotak komentar yg saya miliki itu sudah saya ubah tulisan poskan komentar dengan kata-kata saya sendiri, kalau Anda tidak percaya,Anda bisa lihat sendiri kotak komentar saya di bawah.

Anda berminat dan ingin mengganti tulisan Poskan Komentar dengan kata yang sesuai keinginan Anda sendiri! Mari ikuti langkah-langkah berikut :

[1].Login ke akun Blogger
[2].Pilih Rancangan/Tata Letak--->Edit Html
[3].Centang Kolom Expand Template
[4].Cari Kode berikut ini :

<data:postCommentMsg/>

Nanti Anda akan menemukan "dua kode" yg sama seperti kode tersebut di atas
[5].Ubah kedua kode yg sama tersebut dengan kata yang sesuai keinginan Anda
[6].Simpan Template

Bagaimana..?? Simpel bukan..?!!

Catatan :
Selain tulisan, Anda bisa ganti kode tersebut di atas dengan gambar atau tulisan bergerak seperti punya saya di bawah ini.

READ MORE . . .

Mengubah Background Kotak Komentar Blogspot

S

elamat bertemu kembali para blogger semua, posting kali ini saya akan kasih tahu cara buat mempercantik tampilan kotak atau form komentar blogspot. Di sini saya akan kasih tahu caranya memberi backround di form komentar blog Anda sehingga tampilanya akan semakin menarik, tapi kalau Anda ingin mempraktekkan cara ini pastikan pengaturan tampilan komentar blogger Anda tidak di tampilkan di halaman pop up, trik ini hanya berhasil jika kotak komentar kamu berada di bawah posting, tidak di halaman pop up Sekarang gimana caranya ??

Silahkan Anda masuk ke
Blogger
Design
Edit HTML >> beri tanda centang di opsi expand widget template.

Sekarang cari kode berikut :

<div class='comment-form'>

Kalau sudah sekarang gantikan kode di atas dengan kode

<div id='ib-form'>

Kalau sudah sekarang kamu cari kode ]]></b:skin> dan letakan kode berikut sebelum atau tepat di atas kode ]]></b:skin>

#ib-form iframe{
background:#ffffff url(http://i1191.photobucket.com/albums/z464/izoel1/Alam04.jpg) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(http://i1191.photobucket.com/albums/z464/izoel1/Alam04.jpg) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Catatan :
Gambar backgroundnya bisa kamu ganti sesuka kamu.
Selanjutnya kamu tinggal simpan pengaturan template kamu dan lihat blog kamu.

Selamat mencoba dan semoga bermanfaat...!!

READ MORE . . .

Cara Membuat Tag Cloud / Label Cloud

K

emarin ada yang nanyain tentang gimana cara membuat tag cloud/label cloud (tag atau label yang berputar-putar itu lho..). Nah bagi Anda yang ingin punya tag cloud seperti yang ada di kategori pada blog saya, silahkan Anda terapkan cara berikut ini, baik cara manual maupun cara otomatis.

Rasanya saya tidak mau basa-basi lagi bagaimana membuat tag cloud atau label cloud, berikut caranya :

a. Cara Manual

[1]. Log in dulu ke blogger.com
[2]. Klik "Rancangan" dan kemudian pilih "Elemen Laman"
[3]. Tambahkan "Gadget" dengan memilih "HTML/Javascript"
[4]. Kemudian copy-paste kode berikut ini :

    <embed allowscriptaccess="always" bgcolor="#ffffff" flashvars="tcolor=669900&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Ujian%20Nasional'style='12'&gt;Ujian Nasional&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Software'style='12'&gt;Software&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Renungan'style='12'&gt;Renungan&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Tokoh%20Matematika'style='12'&gt;Tokoh Matematika&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Ceritaku'style='12'&gt;Ceritaku&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/SNMPTN'style='12'&gt;SNMPTN&lt;/a&gt;

    &lt;/tags&gt;" height="200&quot; id="tagcloud" name="tagcloud" quality="high" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" type="application/x-shockwave-flash" width="200&amp;quot;"></embed>

Keterangan :
Warna Biru : Ganti kode warna biru dengan kode link masing-masing label
Warna Merah : Ganti dengan nama masing-masing label
Warna Orange : Ubah ukuran tinggi dan lebar tag cloud sesuai dengan yang Anda inginkan

b. Cara Otomatis

[1]. Login ke dashboard
[2]. Pilih Tata Letak -> Edit HTML
[3]. Carilah kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Jika menggunakan template blogger designer (template baru) coba cari kode seperti di bawah ini :

<b:section-contents id='sidebar-right-1'>

[4]. Setelah menemukan kode di atas masukkan kode berikut :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[5]. Simpan Template

Catatan :

Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud

Jika ingin mengubah warnanya Anda bisa coba ganti beberapa variabelnya
tagcloud", "240", "300", "7", "#ffffff" ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa Anda ganti sesuai lebar widget Anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain sesuai background template Anda

Selamat mencoba dan semoga bermanfaat...!!

READ MORE . . .

Membuat Text Area Yang Unik Dan Menarik

T

ext area adalah kotak aktif yang dapat digunakan untuk menempatkan teks atau kode atau script, untuk memudahkan dalam kita melakukan copy-paste [copas] pada blog. Nah kali ini saya akan membahas bagaimana cara membuat text area dengan berbagai macam dan bentuk yang unik dan menarik tentunya, mungkin Anda akan tertarik?? Silahkan Anda lihat dan terapkan sendiri berbagai macam text area yang akan saya sajikan untuk dipasang di blog Anda. Berikut macam-macam text area yang saya tawarkan [kayak dagangan aja, hehe5..].

Contoh [1]

<center><textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Contoh [2]

<center><textarea name="code" rows="3" cols="42" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Contoh [3]

<center><textarea name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Contoh [4]

<center><textarea name="code" rows="2" cols="42" style="background: #F8ECE0; color: #848484; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Contoh [5]

<center><textarea name="code" rows="2" cols="42" style="background:#A9F5A9; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Contoh [6]

<center><textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"><center><textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center></textarea></center>

Contoh [7]

<center><textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Nah, dari beberapa macam text area di atas, Anda bisa edit kode tersebut sesuai dengan keinginan Anda.

Selamat mencoba..!!

READ MORE . . .

Dukung "Go Green" Dengan Memasang Energy Saving Mode Pada Blog

B

eberapa waktu yang lalu, ku menemukan keunikan dari blog seorang teman (jogsa.net), yakni munculnya screen saver sebagaimana yang kita temui di desktop komputer/laptop kita. Di halaman screen saver blog tersebut tertulis “Energy Saving Mode“.

Karena penasaran, akhirnya kucoba telusuri alamat web yang tertera di screen saver tersebut (onlineleaf.com), dan isinya adalah tentang kampanye “Go green” untuk blog/website dengan menerapkan setting halaman web yang hemat energy. lebih lanjut, di blog tersebut kutemui sebuah script yang bisa kita gunakan untuk memoles blog kita agar lebih “Green”. Berikut cara pasangnya di Blog sahabat sekalian.

Dari hasil uji coba sementara, script ini bisa disematkan pada widget jenis html/javascript, dan berhasil di beberapa penyedia layanan blog, semisal Blogger, Blogdetik. Untuk menggunakakannya, hampir sama dengan pemasangan widget biasa. berikut langkah2nya;

[a]. Untuk pengguna Blogger/Blogspot:

Cara Pertama :

[1]. Login ke blogger.com
[2]. Klik “Rancangan” –> “Edit HTML” 
[3]. Backuplah terlebih dahulu template blog sobat dengan mengklik “Download Full Template”
[4]. Centang kotak kecil “Expand Template Widget”
[5]. Kemudian carilah kode </head> dan copy-pastekan kode di bawah ini tepat di atas kode </head>

<!– save your energy –>
<script language=’javascript’ src=’http://www.onlineleaf.com/savetheenvironment.js’ type=’text/javascript’></script>
<!– save your energy end –>

Jika Anda ingin memiliki modus save energy seperti punya saya silahkan Anda copy kode di bawah ini dan letakkan di atas kode </head>

<!-- save your energy -->
<script language='javascript' src='http://hariopamungkas.googlecode.com/files/scripthematenergy.js' type='text/javascript'/>
<!-- save your energy end -->

[6]. Klik tombol “Simpan Template” kemudian lihatlah blog sobat sekarang telah terpasang modus save energy

Cara Kedua :

[1]. Login ke halaman admin blogger.com
[2]. Klik Rancangan
[3]. Kemudian "Add Widget" (boleh di bagian manapun yang sesuai, karena tidak ditampilkan penuh)
[4]. Pilh widget jenis "Html/JavaScript", judul boleh dikosongkan
paste kode berikut:

<script language=”javascript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js”></script>

[5]. Kemudian "Save/Simpan"

[b]. Untuk pengguna Blogdetik/Wordpress:

[1]. Login ke halaman admin [alamat blog anda/wp-admin]
[2]. Klik "Apperarance/Tampilan" -> "Widget"
[3]. Pilih "Teks/Html" atau bisa juga disisipkan pada widget yang sudah ada
[4]. Judul bisa dikosongkan, kemudian isikan kode berikut:

<script language=”javascript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js”></script>

[5]. Kemudian, "Simpan/Save"

Sebagai bentuk kepedulian kita sebagai blogger, mari kita dukung gerakan "Go Green"  dengan memasang "Energy Saving Mode" di blog kita.

Selamat mencoba yaa..!!

READ MORE . . .

Menambah Icon Pada Judul Postingan

M

emasang gambar atau icon di dalam blog pada satu sisi mungkin akan membuat blog kita lebih menarik tapi di sisi lain juga akan membuat loading blog kita semakin lambat. Tapi untuk temen-temen blogger yang ingin blognya tampil lebih menarik, kali ini saya punya satu lagi cara untuk memperindah blog, yaitu dengan menambah icon atau gambar di sebelah judul postingan. Tampilan judul postingan setiap template blogger berbeda-beda, tapi kebanyakan dari template tidak menyediakan fasilitas icon untuk judul postingannya. Nah, jika temen-temen tertarik berikut ini saya akan berikan langkah-langkah pembuatannya :
 

Langkah Pertama

[1]. Siapkan gambar atau logo yang ingin anda pasang dalam format .gif atau .png karena kualitasnya lebih bagus.
[2]. Resize gambarnya menjadi (20px x 20px) atau (25px x 25px). Usahakan ukuran gambarnya jangan terlalu besar agar loading blog tidak berat. 
[3]. Jika sudah, upload icon atau gambarnya ke image hosting yang anda gunakan atau upload saja pada blogger anda.

[4]. Setelah upload, copy alamat gambarnya. Untuk contoh url gambar diatas : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_ghED19Fd-lFi14IkVVITXWDAmoqkfWMVsL9eVdtAjXtxdfQYNgyTqmWiGgf2QiXHzB4Oo0kC02ODkFkjqSh_6_yhv7u0ZMOIngupTYg2RzeAF2K7sSKQNGjh13nHxdohniq5WGBTZY/s1600/mata+%255B+HARI+%255D.png.

Langkah Kedua

[1]. Login ke blogger dengan akun anda
[2]. Kemudian menuju Tata Letak  
[3]. Pada tab menu klik Edit HTML  
[4]. Silahkan back-up dulu template dengan mengklik kotak kecil Expand Template Widget jika dirasa perlu. 
[5]. Cari kode berikut :

.post h3 {
color: #444;
font-size: 140%;
font-weight:100;
padding: 6px 0 5px 48px;
margin: 3px 5px 3px 5px;
border-bottom: 1px solid #ddd;
}

[6]. Setiap template mempunyai kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah tulisan post h3  
[7]. Kalau sudah ketemu, tambahkan kode background: url(URL gambar) no-repeat; dan edit nilai padding menjadi 6px 0px. Sehingga hasilnya menjadi seperti ini :

.post h3 {
color: #444;
font-size: 140%;
font-weight:100;
padding: 6px 0 5px 48px;
margin: 3px 5px 3px 5px;
background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJChmER2L0XhxM1-o70v-Z48WzGiYz6Zma799WUolFTSEOdpXAeI3O19XfOheEvc7cazJWZKYhMtOtdvI2a4WMuErASpaUQlQzozpUkYJpzKMiPY3H8_cwKtPzfMfpr29A962joPrqxI/s1600/headset-icon.png") 6px 0px no-repeat;
border-bottom: 1px solid #ddd;
}

[8]. Kalau sudah, klik Save Template  
[9]. Selesai

Anda bisa ganti background icon atau gambar sesuai selera, dan jika temen-temen sudah memasangnya dengan benar maka hasilnya akan tampak seperti gambar di bawah ini :

 

Bagaimana, menarik bukan..?!! hehe5..

Selamat mencoba yaa..

READ MORE . . .