Azhara Blog

Pada Trik Blogspot Sebelumnya Saya sudah Menjelaskan Bagaimana cara membuat Tombol home,back to top,dan bottom...dan pada trik blogspot kali ini saya akan menjelasakan tentang bagaimana cara membuat Teks Area Yg cantik Buat Blog.teks area sangat berguna untuk blog! karna dengan teks area kita dapat memodifikasi pesan/kata kata/atau juga berguna untuk menaruh kode html pada setiap posting artikel tentang blog.

dibawah ini sudah tersedia macam macam teks area for blog,Tinggal kalian pilih sesuai keinginan anda:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="width: 300px; height: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Text atau kode yang ingin di masukan di kotak text area di sini

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

 <textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI</textarea>

 <textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE </textarea>

 <textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS AREA SOBAT DISINI </textarea>

 <textarea name="code" rows="3" cols="20" style="background:#DAFFBF; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI </textarea>

 <textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS/KODE </textarea>

<br /><textarea name="code" rows="3" co2ls="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"><br />ISI TEKS AREA SOBA DISINI </textarea>

Cara Meletakannya adalah dengan mengopy kode yg ada di dalam teks area tersebut

~SEMOGA BERHASIL~

Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Smua Tentang Bagaimana Cara Menghilangkan Garis Bintik-bintik Jejak Link.Dan Pada Tutorial Yg Sama Juga Yaitu Tutorial Blog Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara  Membuat Sudut  Menjadi Tumpul Atau Juga Disebut Rounder Corner.
Tentu Sobat Semua  Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).
Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok Tutorial blogger tentang membuat rounded corner :


Full rounded corner :



Rounded corner di kiri atas :


Rounded corner di atas :


Rounded corner di bawah :


Catatan :

1. Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
2. Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
3. Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
4. Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Nah Pada Tutorial Kali Ini Tutorial Yg Sama Juga Yaitu Tutorial Blog .Blog Sharing ilmu pengetahuan akan menjelaskan pada sobat smua tentang Bagaimana Cara Membuat Efek Blur Pada Semua Gambar Yang Ada Di Blog Dengan Css.Nah Pada Tutorial Sebelumnya Juga Pernah Dibahas Cara Yg Sama Juga,..Yaitu Cara Membuat Efek Blur Otomatis Di Blog,Tapi Cara Itu Menggunakan JAVASRIPT Dan Kali Ini Dengan Cara Menggunakan CSS.Kata Sobat Blogger Lain Sich..Javascipt Membuat Loading Blog Agak Lama,atau Tertahan Oleh Javascript.Nah Maka Dari Itu Saya Membuat Tutorial Ini Dan Menerapkannya JUga Pada Blog Saya Yg Ini..Semoga Sobat Semua Senang Apa Yabg Saya Share Kali Ini...

1. Login Ke Akun Blogger Sobat 
2. Klik Rancangan --> EDIT HTML.
3.  Cari Kode  ]]></b:skin> Dan Copy Kode Berikut Tepat Diatas kode ]]></b:skin

   

a:link {
color:#346ba4;
text-decoration:none;
}
a:visited {
color:#346ba4;
text-decoration:none;
}
a:hover {
color:#346ba4;
text-decoration:none;
}
a img {
border-width:0;
}

3.Tambahkan kode bewarna biru seperti dibawah ini

a:link {
color:#346ba4;
text-decoration:none;
}
a:visited {
color:#346ba4;
text-decoration:none;
}
a:hover {
color:#346ba4;
text-decoration:none;
text-shadow: 2px 2px 6px #ff0000;
}
a img {
border-width:0;
}

4.Sekarang yang paling penting adalah SIMPAN...
5.Taraa...... selesai deh.......

Silahkan edit code yang bewarna hijau dengan code warna yang kamu suka...

Semoga tutor ini bermanfaat..

Sudah banyak sekali yang membahas Highlight Author Comment, Tetapi masalahnya adalah pada Emoticon/Smiley yang tidak bisa tampil. Tapi pada postingan saya kali ini tidak usah hawatir Emoticon/Smiley pada blog anda tidak bisa muncul, Karena saya sudah perbaiki kode yang saya cari di google.
Sebelum itu kenapa kita harus memasang Highlight Author Comment, Karena sekarang banyak orang yang mengaku Admin blog padahal dia cuma guest, maka dari itu pastinya sobat jengkel karena ulah guest yang tidak bertanggung jawab.... Aduh banyak basa-basinya gue :P langsung aja ya...

Apakah Highlight Author Comment itu? ini loh liat contoh dibawah ini:

1.Login Blogger
2.Masuk>>Rancangan>>Edit HTML ( Jangan Lupa Back up HTML Blog sobat )
3.Centang seperti ini:
Expand Template Widget
4.Cari kode "]]></b:skin>"
5.Jika sudah ketemu tambahkan kode berikut diatas kode "]]></b:skin>"

.owner-Body {
background:#212121;
margin-left:10px;
color:#ffffff;
}

.owner-Body p {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
font-weight:bold;
background:#000000
border-left:#80ff00 dotted 2px;
border-top:#80ff00 dotted 2px;
border-bottom:#80ff00 dotted 2px;
border-right:#80ff00 dotted 2px;
-moz-border-radius:4px;
}

Assalamualaikum wr wb,


1.)Klik Rancangan pada beranda blogger.
2.)Pada Elemen Laman, Klik Tambah Gadget.
3.)HTML/JavaScript HTML/JavaScript Tambah Klik gambar seperti disamping
4.)Copykan kode dibawah ini

<style type="text/css">
.gb_fixed{position:fixed;
top:60px;
right:-4px;
z-index:+10;
-moz-border-radius:3px;
border-radius:3px
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;
border:1.5px solid #cccccc;
-border-radius:5px;
background:#000000;
padding:10px;
padding-top:0px;
-moz-border-radius:5px;
border-radius:5px;
}
</style>

<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://lh4.ggpht.com/_oFXd4wU3lK8/TSQrWfZqfnI/AAAAAAAAADQ/OzM7TygiCdM/Close.png" title="Click to Close"/></a></div>

LETAKAN KODE HTML CHATBOX ANDA

<div>
<center><blink><a href='http://rizkyariff.blogspot.com/2011/12/cara-memasang-float-chatbox-diblog.html' target='_blank'>Get This Widget</a></blink>
</center></div>
<center>
</center></td></tr>
</table>
</div>
<script src="http://yourjavascript.com/21261405011/cbox-bitexp.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img style="border:0; cursor:pointer" src="http://lh4.ggpht.com/_oFXd4wU3lK8/TTe7ZFV0vII/AAAAAAAAAD4/ZFesT6A_s2c/Chatbox.png" alt="Widget By: Fullka Dot" />
</a></div>

5.)Yang paling penting adalah SIMPAN

Semoga artikel ini bermanfaat buat sobar blogger

Trik ini adalah trik yan pernah di share oleh master joy crazydavinci. Saya hanya ingin menambahkan bagaimana menerapkannya pada blogspot, karena blog saya sendiri memakai blogspot. Loading page ini sangat sederhana namun menarik menurut saya. Jika kamu berminat silahkan praktekkan dan terapkan di blog kamu :D.



Untuk hasilnya silahkan lihat LIVE DEMO .

Ok langsung ke caranya :

• Pertama , Letakkan kode berikut dalam tag <head> atau lebih baik letakkan tepat di atas kode </head> .

<!-- Loading Page Script – CrazyDaVinci – http://crazydavinci.net -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>

Kemudian letakkan kode berikut tepat di bawah kode <body>

<div id="page">

Dan tambahkan kode </div> tepat di atas kode </body>

Maka contohnya akan menjadi seperti ini :

<html>
<head>
blah blah…
</head>
<body>

      <div id="page">
      <div></div>
      blah blah…
      <div></div>
      </div>

</body>

Tambahan : Lihat kode yang saya bold merah tebal. Silahkan edit jika kamu ingin merubah warna background blog, atau menambahkan gambar menjadi background. contoh  #fff url(http://static.desktopnexus.com/thumbnails/18573-bigthumbnail.jpg) .
 
Sekarang klik pratinjau untuk melihat hasilnya. Jika sukses dan berminat silahkan tetapkan di blog kamu. Untuk versi wordpress nya kurang lebih sama penerapannya, untuk lebih jelasnya kamu bisa baca di blog nya AaEzha.

Catatan : Cara ini pernah saya coba di blog yang menggunakan script hidden. Seperti hidden chatbok, Berhasil namun tampilan hidden chatbox menjadi tidak terload dengan baik. Sebaiknya jangan gunakan hidden chatbox agar loading bekerja dengan baik.