Macam macam border 2

Border digunakan untuk mempercantik tampilan post atau konten Anda.
Baca Macam macam border 1

Berikut tampilan dan codenya:

<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px">Coba coba</p>

<p style="border: solid 10px #ddddff; background: #005588; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</p>

<p style="border: solid 10px #00FF00; background: #FFD700; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</p>

Sekarang cara mempercantik border

-Border yang berisikan text kelap kelip

<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px"><blink>Coba coba</blink></p>

-Border yang berisikan text berjalan

Selamat Datang Di K-blogger

ini dia kodenya:
<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px"><marquee direction="left">Selamat Datang di K-blogger</marquee></p>

Kode yg berwarna merah adalah warna garis border
Baca Kode warna
Sudah dulu ya
tunggu seri ketiganya

Readmore..

Memberi warna dan border pada kotak komentar

Pada post Cara menambah scroll pada kotak komentar ada yang bertanya
"bagaimana cara membuat komentar ada bordernya?"
sekarang saya akan menjawab pertanyaan itu
caranya begini:
1. Masuk dasbor
2. Pilih Rancangan ---> edit html
3. Cari kode berikut:

.comment-form {

4. Lalu paste kode berikut dibawah kode diatas

border:5px solid #8C748F;

dan simpan template

Catatan: kode yang berwarna merah adalah ketebalan border

Sekarang cara memberi warna pada kotak komentarnya
1.Cari kode:

.comment-form {

2.Lalu paste kode berikut dibawah kode diatas:

background:#191970;

Dan simpan template

Catatan: kode yang berwarna merah adalah kode warna
Untuk mengetahui kode warna baca ini

Readmore..

Macam macam border 1

Border digunakan untuk mempercantik tampilan post atau konten Anda.
Pada dasarnya kodenya diapit oleh kode berikut:

<div>...</div>

berikut tampilan dan codenya:

<div style="border: 10px solid red">coba coba coba</div>

<div style="border: 10px double blue">coba coba coba</div>

<div style="border: 10px groove red">coba coba coba</div>

<div style="border: 10px outset red">coba coba coba</div>

<div style="border: 10px ridge green">coba coba coba</div>

Catatan:
1.Code yang berwarna biru adalah bentuk bordernya
berikut bentuk-bentuk bordernya: nonedotteddashedsoliddoublegrooveridgeinsetoutset
2.Code yang berwarna merah adalah warna border

Selamat mencoba!

Readmore..

Membuat Menu Vertikal Cantik

Sebelum anda mencoba membuatnya ada baiknya anda melihat screenshot contoh widgetnya:

Apakah anda tertarik?
berikut caranya:
1.Masuk dasbor
2.Pilih rancangan ->> elemen halaman
3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript
4.Berikut codenya:

<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://www.ardi33.web.id/
----------------------------*/
*{
margin:0;
padding:0;

}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX724E8XfGzqETo5u2-rbtMgTamfosA4lUH9BshCR2cYdx8ZRVaft7CDpGq83IaB-ntyf4PWT2Eqf-BnpKESF5gMxyusCMCjIhI0xxQVO-iub6ze1vMpogjq03aCAPR50LO-xa9EbZFB4/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{

list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{

list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_jcmcrIhMW_cuffgOja9mBB1wQc4FRBK7EOyMnku30fXq7YpYj89gx7OeiFLkXqTXy3mBtpZ-enYOe6KKn7_6iOgLfHunQKjwIJt3aajndOmlGCmTSlf7vw1BjAF1rDaX3XKJU4qy5Q/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;

line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;

font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
</style>

5.Simpan

Catatan:
Kode yang berwana merah disesuaikan dengan blog anda

Readmore..

Cara menambah scroll pada kotak komentar

Trik blog ,Bagi anda yang tidak ingin kotak komentarnya terlihat terlalu memanjang saya punya triknya.
Berikut caranya:
1.Masuk ke blogger
2.Pilih Rancangan (Dulu tata letak)
3.Klik edit html
4.Beri tanda centang pada Expand Template Widget
5.Cari kode berikut:

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2157145678768874645&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Balas Komentar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOja-JLrGay3T9SYr59dDOKGU-eZjAkaVinJChbDxuVaFKRLK1PlEVBrr7rz_TMwjSHu4b_Ptmf5LcBfVNL_DLm6g1O7YQ8oc0KSZJXFdOvkAOBotAErOLB3i_sHVcW6IF9meYebxA4lA/s400/+-.bmp'/></a></span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>

6.Hapus code diatas lalu diganti dengan kode berikut:

<div class='scrollbox' style='overflow:auto; height:310px;'>
<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>
</div>

7.Simpan template

Sebagai contoh ini:

Readmore..

Menambah efek pelangi pada link

Trik blog , Kali ini saya akan membahas cara "Menambah efek pelangi pada link"
cara ini untuk kamu yang bosan dengan tampilan link yang gitu-gitu saja
sebagai contoh coba arahkan mouse anda pada link berikut:
>>K-BLOGGER<<
apakah kamu tertarik?
oke langsung saja caranya:
1.Login Blogger kemudian pilih rancangan
2.Klik edit html dan cari kode </head> untuk memudahkan pencarian, gunakan Ctrl+F
3.Lalu paste code berikut tepat pada atasnya

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>

4.Simpan template

Readmore..

Cara Mengelola Blog Lebih dari Satu Akun

Cara ini digunakan bagi anda yang sering kehabisan ide ataupun untuk membagi tugas dengan orang yang kita percayai untuk mengelola blog.
Apakah anda tertarik?
Oke jika anda tertarik begini langkahnya:
1.Masuk dasbor-->pilih pengaturan
2.Lalu pilih izin






3.Klik menambah penulis










4.Lalu tulis email orang yang anda undang sebagai penulis diblog anda









5.Klik undang
6.Tunggu konfimasinya
7.Jika sudah dikonfirmasi maka orang yang anda undang resmi menjadi penulis diblog anda

Cara memberi Privilese Admin pada penulis
-Hanya perlu mengklik beri Privilese Admin sebagai contoh:

Readmore..

Archie search engine pertama

Archie diciptakan ditahun 1990 oleh seorang mahasiswa Universitas McGill di Montreal Canada, yang bernama Alan Emtage. Ia menciptakan Archie sebagai tool untuk mengumpulkan file indeks di internet.
Pada zaman itu, Archie merupakan sebuah program yang menjadi favorit bagi pengguna internet.Program ini sebenarnya sederhana hanya sebuah daftar direktori untuk semua file yang bisa didownload dari sebuah ftp anonim di jaringan. Daftar tersebut dapat dikumpulkan dengan jaringan lain dan disimpan ke database
Kemampuan pencariannya tidak sebagus search engine sekarang.Archie bekerja dengan cara mengindeks semua file sehingga memudahkan pengguna komputer untuk mencari lokasi file yang diinginkan
Sumber: BUKU Search engine optimization(seo),Wahana komputer penerbit andi

Readmore..

Kapan search engine didirikan?

Apa kau tau?
Saat saya menulis tentang 25 Nama Domain .com tetua banyak yang menanyakan kapan google dan yahoo didirikan?

oleh karena itu berikut ini adalah detail kapan search engine didirikan.

1. Excite ditahun 1993
2. Yahoo! ditahun 1994
3. Web Crawler ditahun 1994
4. Lycos ditahun 1994
5. Infoseek ditahun 1995
6. Altavista ditahun 1995
7. Inktomi ditahun 1996
8. Ask Jevees ditahun 1997
9. Google ditahun 1997
10. MSN Search ditahun 1998 sekarang manjadi Live Search

Sumber: BUKU Search engine optimization(seo),Wahana komputer penerbit andi

Readmore..

Cara mengubah rotation gambar

Trik blog ,Sering melihat gambar seperti yang dibawah ini?

Pasti seringkan?
Agar terbentuk seperti itu kita hanya perlu mengubah rotationnya
Caranya seperti ini:
1.Buka Ms word 2007
2.Lalu klik insert --> picture (untuk menambah gambar yang akan diubah rotationnya)
3.Klik kanan pilih format picture
4.Lalu akan muncul ini:5.Pilih 3-D rotation
6.Lalu atur sesuai selera anda

Readmore..

Dasar-dasar pembuatan option

Trik blog ,Option digunakan untuk mendefinisikan suatu elemen yang bisa dipilih dalam suatu daftar pilihan.
Fungsi Option pun sering digunakan dalam widget-widget
Pada dasarnya codenya sebagai berikut:
<html>
<select>
<option>--Negara--</option>
<option>Indonesia</option>
<option>Cina</option>
<option>Malaysia</option>
<option>Arab</option>
</select>
</html>
sebagai contoh:

--Negara--IndonesiaCinaMalaysiaArab


Contoh widget yang menggunakan fungsi option:
-Blogroll dengan menu dropdown
Code:
<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://k-blogger1.blogspot.com/">K-blogger</option>

<option value="http://z-bebas.blogspot.com/">Zonabebas</option>

</select>

</form>

Hasilnya:

- Blogroll - K-bloggerZonabebas

-Widget change this font
Baca Cara membuat widget change font this blog

sekian dlu
sampai jumpa lagii

Readmore..