Cara Membuat Tulisan Berkedip

Sebenernya membuat huruf berkedip Caranya gampang sekali, tapi atas permintaan teman2 ya terpaksa harus saya posting disini…
Cara nya sangat lah mudah tinggal tambah <blink>  Dan akhiri Dengan  </blink>
Mudah Kan..!!!!
Sebagai Contoh Lihatlah Tulisan yang ada dibawah ini..?



Hallo Teman-teman Semua Apa Kabarnya…???


Jika anda ingin tulisannnya berjalan dan berkedip seperti contoh dibawah ini


Hallo Teman-teman Semua Apa Kabarnya…???
 
Semoga berhasil……….

Cara Mudah Membuat Menu Horizontal Dropdown

Ini dia Cara Membuat Menu Navigasi Horizontal Dropdown . Dalam bahasan Tutorial Blog kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:


Membuat Menu Navigasi Horizontal Dropdown


Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html  lebih mudah ditelusuri oleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.

Untuk membuatnya bisa lakukan langkah berikut:

1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML


 Cari Kode Berikut : ]]></b:skin>

2. Copy Kode Dibawah Ini Diatas Kode Langkah 1 :

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}


3. Lalu Klik Tombol Simpan Template

4.Buka halaman "Tata Letak -> Elemen Halaman"


5.Pada Elemen header , klik " Tambah Gadget"



Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan BLog Lain  tentang cara menampilkan "tambah gadget" di header


6.setelah mengklik tombol "tambah gadget" pilih HTML/Javascript


7.pada kotak dialog html/javascrpit masukkan kode html berikut:


<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>



Setelah Itu Edit Pada Tanda # Dengan Link Yang Anda Punya Selesai Deh...

Cara Menambah Slot (elemen) Gadget di Header

Jika anda menggunakan template default blogger, maka anda akan mengalami kesulitan untuk menyisipkan gadget ke bagian header blog. Karena fungsi add gadget dinonaktifkan oleh blogger. Anda bisa mengaktifkan gadget tersebut, kemudian bisa menyisipkan obyek seperti script html/javascript, link, gambar, atau widget tertentu.

Tampilan default pada saat anda membuka halaman tata letak -> Elemen halaman adalah seperti di bawah ini:


Untuk mengubah atau menambah elemen gadget ke header, lakukan prosedur berikut:

1. Login ke dashboard => Tata Letak => Edit HTML , centang pada "Expand widget template"



2. Cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Ubah
maxwidgets='1' menjadi maxwidgets='4'
showaddelement='no' menjadi showaddelement='yes'


hasilnya bisa dilhat di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>


3. Klik tombol Simpan Template

4. Jika berhasil, bisa lihat tampilannya akan berubah seperti di bawah ini

Follow Twitter Melayang Mengikuti Arah Kursor

Pada postingan kali ini kita akan membahas sedikit tutorial cara memasang widget twitter animasi di blog yang selalu mengikuti krusor. tanpa sengaja saya menemukan tutorial ini di search Engine Mbah google,.hehee Oia, Untuk contohnya anda bisa lihat langsung pada postingan ini.

Demonya bisa dilihat disini


Tertarik??Baiklah, bagi sobat blogger yang tertarik untuk memasangnya di blog, silahkan ikuti tutorial di bawah ini.
1. Login ke akun Blog sobat.
2. Pilih rancangan, add gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget sobat.


<!-- floating twitter Bird -->
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZs829-f-9kmZc0g62ZsuLHgmNObZbtFWYQRyjUT0cAcOpwq1O7qBpKB563geLiguTlab2guy4A8qqsCEsYpJzoLxkN3kbn3ZmfnUE-c2glUSgbEYwgzIP50ExeuTuoFTruAGNTfkUTU/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/http://arnandatkj.blogspot.com/";var tweetThisText = "Twitter - UserID http://arnandatkj.blogspot.com/.blogspot.com/";tripleflapInit();
</script>

NB: perhatikan teks yg berwarna biru, anda ganti semua sesuai dengan ID anda.

4. Terakhir Simpan. Lihat hasilnya.

Jangan lupa untuk meninggalkan pesan anda.. .

Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka

Mungkin sobat sudah paham dengan Judul postingan saya kali ini Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka , maka Di postingan saya kali ini hanya menambahkan saja,.sebagai contoh Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka sobat bisa lihat buku tamu saya.



Gambar di atas yg di tunjuk oleh panah adalah Buku tamu yang saya miliki,sobat tidak perlu meng klik nya,tinggal sorot saja dengan Mouse,maka akan kuluar sendiri.
jika sobat berminat untuk memasang di blog sobat,mari kita mulai saja Cara pembuatan nya.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya


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

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizOyH9GiPZ9zvY5a03WJzF78XXmKblZ4w1LDq4PkHIjx-lQLs1kYcayRSqxXnx3v9o67XIcP7icOH5o3yHLpSErvOrd1JRj0tEQuCGThwc4J1lYI_4vvgp7yetCN4BdCQWRSRhso9vbg0/s1600/api.gif) no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

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

<div class="gbcontent">
<center>
Letakan Script Buku tamu sobat Disini
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>

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

5. Ubah Kata Letakan Script Buku tamu sobat Disini Dengan Script Buku Tamu Sobat
6.Simpan Dan Lihat Hasilnya.

Membuat Read More Otomatis (Automatic Read More + Thumbnail Image)

Read more otomatis (Automatic Read more ) adalah read more atau baca selengkapnya dengan secara otomatis mengambil ringkasan dari blog kita di tambah lagi read more otomatis ini juga akan mengambil gambar thumbnailnya. Klo pake read more / baca selengkapnya yang biasa kan agak repot tuh di saat setiap kali mau New Post / menambah postingan baru kita harus menambahkan kode <span class="fullpost> isi postingan </span> atau <span id="fullpost">isi postingan</span>,, Capeeek Dhe.hh...!!! jaman sekarang mah da basi nieh yang ginian...hehehehe... nah bagi yang gak mau lagi disusahkan oleh read more yang seperti ini sekarang ikutin aja nieh tips dan trik membuat Read more otomatis berikut ini


klik untuk memperbesar gambar
Read more otomatis (otomatis baca selengkapnya)

Ikuti langkah-langkah berikut ini untuk membuatnya

1. Login di Blogger > pada Dasboard pilih Rancangan > Edit HTML
2. Centang / Check List dulu "expand widget templates"
3. Cari kode </head> kemudian copy - paste kode di bawah ini sebelum kode tersebut

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

kamu juga bisa mengubah kode tersebut sesuai selera

summary_noimg = 430; kode ini untuk memotong / mengatur tinggi tanpa gambar

summary_img = 340; kode ini untuk memotong / mengatur tinggi dengan gambar

img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya

img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

4. Sekarang cari kode


<data:post.body/> , hati-hati ya bagi yang sudah memakai read more yg tidak otomatis, biasanya ada dua kode yang seperti itu, jadi pilih yang pertama. Klo Udah ketemu copy - paste kode berikut lalu ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>


<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>


</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

tulisan read more disana bisa kamu ganti sesuai keinginan. gmn..? sudah blom.?? Hm..klo sudah di SAVE ya..!!!

Sekarang coba liat Blog kamu pasti jadi lebih menarik dan tidak repot lagi klo mo posting. ^_ ^

Trus Bagai mana dengan yang udah pakai read more yang lama?? gman cara ganti dengan read more otomatis ini??
Nah kode yang read more yang lama kan seperti ini (setiap template boleh jadi berbeda lho, jadi hati-hati ya)

<div class='post-header-line-1'/>

<div class='post-body entry-conten'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>

</b:if>


lalu hapus kode yang di tebalkan kemudian ikuti langkah 1 sampai 4.
Semoga bermanfaat, jangan lupa kritik dan sarannya . . .
GOOD LUCK..!!!

Cara Menambah Animasi di pojok Blog

Gimana cara membuat "animasi" itu selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana.Untuk bisa tahu bagaimana caranya,.,.,
Yukz,,kita lihat langkahnya di bawah ini. :
1. Login ke blogger trus klik Layout -->> Edit HTML


2. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
 
3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "buttom", jika pingin di posisi atas bisa diganti dengan "top".Untuk contoh punya saya, letaknya berada di pojok bawah sebelah kanan.

4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok">
<a href="http://arnanda-tutorial.blogspot.com">
<img src="http://www.geocities.com/bannernyadonie.jpg" border="0" /></a>
</div>

"http://arnanda-tutorial.blogspot.com" adalah link. ganti dengan link kamu.
"http://www.geocities.com/bannernyadonie.jpg" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu ingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.


Selamat Mencoba. . .

Cara Mengganti Tampian Cursor

Bingung,,, ???
Bosan dengan tampilan kursor yang seperti itu-itu saja,,.,.???

Untuk kali ini, saya akan berbagi pengetahuan tentang bagaimana cara mengganti tampilan kursor pada blog agar lebih terlihat menarik dan indah. Cara menggantinya ikuti langkah - langkah brikut :
1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan atau Tata letak 
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Setelah itu kita masuk ke alamat Disini untuk memilih bentuk kursor yang kita inginkan.
6.Copy Paste Script nya, , ,
7.Simpan dan lihat hasilnya,.,.,,

SEmoga Berhasil . . . .

Tips Untuk Menghemat Energi pada Blog dengan Online Leaf

Online Leaf Untuk Menghemat Energi - apa itu Online leaf ..? Online Leaf adalah script yang dibuat oleh onlineleaf.com yang bertujuan untuk mengurangi sekaligus mencegah globalwarming, apahubungannya dengan script ini, ini pasti yang ditanya-tanya, script ini nanti akan kita pasang di blog kita yang akan secara otomatis dalam kurang lebih kalau tidak salah satu 1menit, maka halaman blog kita akan secara otomatis sreensaver, dan ini akan mengurangin energi, dan tida membuang-buang energi yang tidak penting, ingat dalam satu menit blog atau web kita jika kita diamkan maka akan mucul tulisan "Energi Saving mode" yang bacKgroundnya berwarna hitam, seperti pada blog ini.
Cara pasang script ini cukup mudah ikuti saja langkah-langkah dibawah ini.:
1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan atau Tata letak 
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kodenya 


<script language="javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=id" type="text/javascript"> </script>

 6.Klik Simpan Dan Lihat Hasilnya...

Cara Mudah Membuat Daftar Isi

Untuk dapat membuat daftar isi yang menampung isi dari postingan yang kita postkan,pasti kita akan lebih mudah untuk membuat daftar isi yang dapat muncul link postingan kita secara otomatis.
Dalam hal ini saya punya script untuk dapat membuat daftar isi seperti yang ada di blog saya.
Ikuti saja langkah-langkahnya :

1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan atau Tata letak 
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kodenya 

<style></style>
<div style="margin: 0px; padding: 0px; overflow: auto; width: 155px; height: 200px; background-color: #F6E3CE;">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 150;var showpostdate = false;var showpostsummary = false;var numchars = 150;var standardstyling = true;</script><script src="http://arnanda-tutorial.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></div>
 6.Klik Simpan Dan Lihat Hasilnya

Ket :
Tulisan yang berwarna, silahkan Anda ganti dengan nama Blog Anda.