Rabu, 22 Mei 2013

Design : Aiizahh Try To Colorful Template


Selamat siang...
Kali ini saya ingin berbagi sebuah template (pertama kalinya, jadi mungkin berantakan... **p ) yang saya desain sendiri, mencoba untuk sedikit berbeda meskipun mengedepankan konsep simple dan colorful. Saya namakan "Aiizahh Try To Colorful" merujuk pada tampilannya yang penuh warna, juga merupakan representasi dari blog ini yang mencoba untuk terus berwarna di dunia blogging.
Template ini sendiri saya desain dengan menggunakan kerangka template nya Mas Taufik, sehingga didalam template saya sertakan juga nama beliau sebagai bentuk terima kasih, karena tanpa kerangka template tersebut saya mungkin akan kesulitan dalam mendesainnya menjadi seperti yang saya ingin buat, disamping banyak juga tutorial dari sana yang saya terapkan.
Bagaimana dengan informasi template ini??

1. Responsif.
2. Mode pencarian cepat.




3. Navigasi halaman AJAX.




4. Emoticon include. :-bd
5. Efek animasi loading. \o/
6. Colorful. 0:)


Bagaimana sob???
Bila tertarik menggunakannya silahkan download pada link dibawah, dan mohon untuk tidak menghapus credit link pada template.


Terima kasih...
Read More

Selasa, 21 Mei 2013

Update!!! Cara Membuat Emoticon Di Kotak Komentar




Melihat banyaknya pertanyaan yang disampaikan kepada admin blog, yang mengatakan bahwa kode emoticon sebelumnya tidak berhasil diterapkan, maka saya sengaja membuat sebuah postingan baru guna mengakomodir permintaan teman-teman.
Untuk tutorial cara membuat emoticon kali ini sudah saya lakukan tes, work, dan contohnya bisa dilihat disini, sehingga postingan ini sekaligus menjadi pengganti dari postingan sebelumnya. Saya katakan ini sebagai tutorial pengganti, mengapa??? Karena, baik visual dari hasilnya maupun implementasi tutorialnya pun akan berbeda dengan postingan terdahulu.
Ok, langsung saja buka editor template temen-temen dan kemudian cari kode </body> lalu letakkan kode berikut ini diatas nya :


<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}

img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}

input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = false;
//]]>
</script>
<script src='https://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' 
type='text/javascript'></script>


Setelah itu, simpan template temen-temen dan lihat hasilnya. Untuk membuat emoticon tersebut tampil pada komentar, lakukan klik pada salah satu emoticon lalu copy paste pada kotak komentar.

Terima kasih dan semoga bermanfaat...



Thanks to : Mas Taufik & Forum MT5
Read More

Blogroll Ganteng Dengan Efek Animasi

Dari judulnya, mungkin temen-temen sudah bisa menebak postingan apa kali ini???
Kali ini, saya ingin share mengenai cara membuat blogroll yang animatif, sehingga tampilan nya menjadi lebih menarik untuk dipandang...
DEMO :
Tutorial ini saya buat berdasarkan tutorial yang saya pelajari dari Mas Taufik, dan saya share kembali kepada temen-temen yang lain yang merasa tertarik dengan model blogroll seperti ini.
1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas kode </head> :

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});
</script> 

5. Simpan Template.

6. Letakkan link-link yang akan ditampilkan secara animasi pada tempat yang temen-temen inginkan seperti contoh dibawah :

<ul id="blog-roll">
    <li><a href="#">Alya Zahra 1</a></li>
    <li><a href="#">Alya Zahra 2</a></li>
    <li><a href="#">Alya Zahra 3</a></li>
    <li><a href="#">Alya Zahra 4</a></li>
    <li><a href="#">Alya Zahra 5</a></li>
    <li><a href="#">Alya Zahra 6</a></li>
    <li><a href="#">Alya Zahra 7</a></li>
    <li><a href="#">Alya Zahra 8</a></li>
    <li><a href="#">Alya Zahra 9</a></li>
    <li><a href="#">Alya Zahra 10</a></li>
</ul>

7. Enjoy.

*Kode yang digaris bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa

Bagaimana sob???
Semoga postingan ini bermanfaat....
Read More

Cara Mengetahui Kode HTML Warna Part 2




Selamat siang...
Mungkin postingan mengenai kode warna ini sudah begitu banyak dan sangaaaattt baaasiii buat di bikin postingan lagi... :-a
Maka dari itu, tujuan utama membuat postingan ini sendiri sebenarnya hanya untuk membantu saya untuk melihat kode-kode warna, meskipun sebenarnya saya sudah membuat postingan mengenai hal yang sama dulu.
Alasannya satu, karena postingan sebelumnya menggunakan layanan dari pihak ketiga dan merupakan file flash. Nah, disinilah masalahnya... :\
Saat sedang ngeblog menggunakan laptop kantor (waktu jam istirahat loh ngeblognya... **p) ternyata saya mendapati bahwa Adobe Flash di laptop ini sudah outdated version dan pluginnya di nonaktifkan oleh browser. Meskipun ada opsi untuk mengaktifkan sementara pada halaman yang bersangkutan, namun tampilan file flash nya menjadi tidak bagus. Parahnya, saya ga bisa update tuh Adobe Flash karena inet yang lemooottt kayak siput. :'(


Akhirnya, daripada ribet mending saya bikin saja postingan seperti ini. Selain warnanya lebih variatif dan membantu saya sendiri, juga untuk para pengunjung yang mungkin juga terbantu dengan adanya postingan ini.
Akhir kata, terima kasih telah membaca cerita sedih saya di siang bolong ini... :Ozz


WARNA
HEX
RGB

#EC8195 254,202,192

#FECAC0 236,129,149

#D1D698 209,214,152

#967878 150,120,120

#FDEDDB 253,237,219

#F8FBC1 248,251,193

#F8D9B5 248,217,181

#9D8675 157,134,117

#943329 148,51,41

#EF2D19 239,45,25

#49E84C 73,232,76

#A5E7F2 165,231,242

#F37164 243,113,100

#A735E0 167,53,224

#4DDD13 77,221,19

#14E0D6 20,224,214

#F931DF 249,49,223

#0492F7 4,146,247

#F1FFEA 241,255,234

#E2FFEB 226,255,235

#DEFCED 222,252,237

#DBFCEC 219,252,236

#C9FFE7 201,255,231

#CBDB53 203,219,83

#91590F 145,89,15

#F0A93E 240,169,62

#91CBDA 145,203,218

#D38F37 211,143,55

#00C9FF 0,201,255

#FF0000 255,0,0

#00FF10 0,255,16

#F1FF00 241,255,0

#FF00D7 255,0,215

#853800 133,56,0

#FBF0C6 251,240,198

#F5D247 245,210,71

#E1B300 225,179,0

#E22500 226,37,0

#6E7E79 110,126,121

#FECAC0 254,202,192

#ABCFAF 171,207,175

#C7D578 199,213,120

#F1F5AE 241,245,174

#008D9F 0,141,159

#5DC1D0 93,193,208

#F49AC2 244,154,194

#C6E5E9 198,229,233

#A29A9A 162,154,154

#F2E3E5 242,227,229

#F3DEFC 243,222,252

#659343 101,147,67

#637E5C 99,126,92

#009BB9 0,155,185

#9A854E 154,133,78

#CFBC8A 207,188,138

#F9D800 249,216,0

#FA8D63 250,141,99

#320345 50,3,69

#807417 128,116,23
Read More
Searching...