December 23, 2013

Bonus Hingga $500 Tanpa Deposit Di Akhir Tahun 2013

Selamat pagi sob...

Pada postingan kali ini, saya akan mengangkat tema tentang bisnis forex. Kalau sebelumnya saya share mengenai teknik trading, maka kali ini mengenai broker yang memberikan bonus tanpa deposit, yang biasanya banyak sekali dicari oleh para trader, yang tersedia di akhir 2013 ini.

Nah, di broker ini bonus tanpa deposit yang diberikan adalah $100 atau $500. Berapa yang kalian dapatkan tergantung pada hoki happy tapi berapapun yang didapatkan menurut saya sangat bermanfaat khususnya untuk yang mau mencoba teknik trading baru, ataupun bagi pemula yang ingin belajar forex.

Bagaimana? Tertarik untuk mendaftar?


1. Masuk kesini sob.

2. Pilih "Register".

3. Masukkan identitas kalian pada kolom yang tersedia.

4. Selesai, maka kalian akan mendapatkan link aktivasi pada email yang didaftarkan.

5. Sampai pada tahap ini, kalian sudah terregistrasi, namun baru mendapatkan akun demo.

6. Nah, selanjutnya klik tombol "Activation" dibawah foto profil / avatar akun kalian untuk mendapatkan akun live.

7. Kemudian, kalian akan diarahkan pada halaman baru, dimana pada halaman ini kalian harus kembali mengisi identitas diri beserta informasi rekening bank dan upload identitas yang akan digunakan (KTP/SIM)

8. Klik "Submit" dan masukkan password.

9. Setelah akun live dibuat, klik banner "Lucky Wheel Open Everyday" pada home page kalian.

10. Kalian akan diarahkan pada halaman untuk mendapatkan bonus. Setelah bonus didapat maka klik "Receive" agar bonus dapat di kreditkan pada akun kalian.

11. Enjoy. happy

Setelah itu, maka secara otomatis bonus akan dikreditkan ke akun kalian, dan tinggal trading saja dengan unduh MT4 disini. Bonus dan profit dari trading sendiri bisa di withdrawal dengan aturan main tertentu.



Terima kasih, semoga bermanfaat...

December 11, 2013

Google Update Page Rank di Bulan Desember 2013

Selamat pagi sob...

Alhamdulillah, itulah kata pertama yang terucap saat membuka blog Alya Zahra pagi ini. Gak nyangka nih kalo si google melakukan update page rank bulan ini. Awal nya ga tau kalo ada update, dan cukup kaget saat liat sidebar kok PR blog ini udah jadi 3, padahal sebelumnya hanya PR 1. Yang saya bingung, katanya update itu terjadi tanggal 6 Desember 2013, tp sampai tanggal 10 Desember kemarin PR saya masih 1 dan baru hari ini saya lihat sudah berubah.



Tapi ga masalah kok, yang penting kan ada kenaikan, artinya ada perbaikan, perubahan ke arah yang lebih baik, hehehe cheer. Kenaikan menjadi PR 3 kali ini jadi rekor buat blog Alya Zahra, karena sebelumnya blog ini hanya pernah mencicipi PR 2, dan saat terjadi update sebelumnya malah mengalami penurunan menjadi PR 1.

Saya mengucapkan terima kasih pada para visitor blog ini, karena tanpa kalian blog ini tidak bisa berkembang. Saya harap blog ini bisa menjadi lebih baik ke depannya. Sekali lagi terima kasih pada kalian semua... pleased

December 3, 2013

Membuat Kotak Berlangganan Dengan Jquery Dialogue Box



Selamat siang sob...

Postingan pertama di bulan Desember nih... pleased

Pada postingan kali ini, saya ingin berbagi sebuah tutorial membuat kotak berlangganan di blog. Awal nya, saya tertarik saat melihat artikel dari blog Kang Ismet tentang simple dialog box dengan jquery, dialog box nya menarik sekali. Lalu, saya berpikir sepertinya tidak cukup bila hanya sekedar dialog box berisi sebuah atau lebih kalimat. Bagaimana bila dikreasikan dengan sesuatu yang digunakan dalam blog? Akhirnya, saya mencoba untuk memadukannya dengan kotak berlangganan, sehingga kotak berlangganan nya pun menjadi lebih menarik.

Setelah lebih dari 168 jam mencobanya  wat2 saya buatlah tutorial ini dengan tujuan dapat membantu temen-temen dalam mempercantik blog nya... cheer


Ok, mari kita mulai menerapkannya :

1. Jalan-jalan dulu ke Feedburner.

2. Login dengan akun Google nya.

3. Masukkan url RSS feed nya, yaitu http://aiizahh.blogspot.com/feeds/posts/default dimana temen-temen dapat mengganti yang berwarna ungu sesuai alamat blog nya masing-masing, lalu klik "Next".



4. Isi judul dan alamat feed nya dan klik "Next".



5. Akan muncul tampilan seperti dibawah, klik "Next" lagi.



6. Pada halaman berikutnya, silahkan klik "Publicize" dan pilih "Email Subscriptions".



7. Selanjutnya klik "Activate".



8. Silahkan simpan kode kotak berlangganannya dahulu.




Lanjut, kita buat dialog box nya :

1. Letakkan kode CSS berikut diatas ]]></b:skin> .

 #aiizahh-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:white;
    background-color:#C6E5E9;
    border:8px solid #5DC1D0;
    box-shadow: 0 0 2px 1px black,0 0 3px #C6E5E9;
    font:normal 11px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:3px;
    z-index:1000;
    display:none;
}
.close {
    background:#C7D578;
    color:#000;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#5DC1D0
}
#box-overlay {
    position:fixed !important;
    position:absolute; /*tambahkan posisi ini supaya fix di IE*/
    z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background : url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png);
    display:none;
}

2. Lalu, tambahkan kode berikut diatas </body>.

<script type='text/javascript'>
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .popup diklik
     $('.popup').click(function() {
          $('#aiizahh-box').fadeIn();
          $('#box-overlay').fadeTo("normal", 0.6);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#aiizahh-box').fadeOut();
          $('#box-overlay').hide();
     });
});
//]]>
</script> 

3. Terakhir, tambahkan kode HTML berikut.*

<button class='popup'>Subscribe</button>
<div id='box-overlay'></div>
<div id='aiizahh-box'>  
>>>KODE FORM SUBSCRIPTION DISINI <<<   
<div class='close'>OK</div></div>

4. Simpan.

*Keterangan : Silahkan ganti yang berwarna merah dengan kode form subscription temen-temen dari feedburner.

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar di kotak komentar dibawah...

Dan, jangan lupa subscribe Alya Zahra pada kotak admin dibawah... happy

November 26, 2013

Konsep Dropdown Menu Berbeda Agar Blog Lebih Cantik



Selamat pagi sob...

Setelah cukup lama rehat dari dunia blogging, kali ini saya akan coba share mengenai konsep dropdown menu yang unik dan berbeda sehingga dapat membuat tampilan blog juga menjadi lebih cantik.

Seperti biasa, dropdown menu ini saya buat dengan komponen warna yang girly, namun bisa diubah sesuai dengan keinginan, yaitu dengan melihat beberapa kode html warna yang sudah saya berikan sebelumnya.

Dropdown menu ini sendiri menggunakan CSS dan kode HTML agar dapat diletakkan pada blog.

.aii:before,
.aii:after {
    content: " ";
    display: table;
}

.aii:after {
    clear: both;
}

.aii {
    *zoom: 1;
}
/* Main level */
.menu {            
    margin: 50px auto;
    width: 800px;
    width: fit-content;    
}

.menu > li {
    background: #FE80DF;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial;
    font-size: 13px;
}        

.menu li:hover {
    background: #FE80DF;
}        

.menu > li > a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: #FEBFEF;
    position: relative;
    overflow: hidden;        
}                        

.submenu > li > a {
    padding: 1em 2em;            
}

.submenu > li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;            
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);            
}        

/* Odd stuff */
.submenu > li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
    transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}                

/* Even stuff */
.submenu > li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
    transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;            
}

.submenu li {
    transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}        

.menu > li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);            
}

.menu > li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);            
}



Lalu, terakhir tambahkan kode HTML nya :

<ul class="menu aii">
    <li><a href="">Menu 1</a></li>
    <li>
        <a href="">Menu 2</a>
        <ul class="submenu">
            <li><a href="">Submenu 1</a></li>
            <li><a href="">Submenu 2</a></li>
            <li><a href="">Submenu 3</a></li>
        </ul>            
    </li>
    <li>
        <a href="">Menu 3</a>
        <ul class="submenu">
            <li><a href="">Submenu 1</a></li>
            <li><a href="">Submenu 2</a></li>
            <li><a href="">Submenu 3</a></li>
            <li><a href="">Submenu 4</a></li>
        </ul>            
    </li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
</ul>


DEMO :



Bagaimana, menarik bukan?
Silahkan dicoba dan jangan lupa tinggalkan komentar di kolom komentar...

Terima kasih....

July 25, 2013

Link Nudging Dengan CSS3



Pernah melihat efek link seperti gambar diatas???

Tertarik untuk menggunakannya???

Ok, kalo tertarik silahkan ikuti langkah-langkah nya sob :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas ]]></b:skin> atau </style> :

 ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 14px Comic Sans;
}

ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:black;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.29s ease-out;
  -moz-transition:all 0.29s ease-out;
  -ms-transition:all 0.29s ease-out;
  -o-transition:all 0.29s ease-out;
  transition:all 0.29s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
} 

5. Simpan Template.

6. Letakkan link-link yang ingin diberi efek seperti contoh dibawah :

 <ul class="nudging">
    <li><a href="#">Apel</a></li>
    <li><a href="#">Belimbing</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Durian</a></li>
    <li><a href="#">Elai</a></li>
</ul> 

7. Enjoy.

DEMO :



Terima Kasih...
Semoga bermanfaat...

June 28, 2013

Cara Mencegah Link Aktif Dengan Menampilkan Salinan Komentar Pada Blog

Selamat siang...

Kali ini saya ingin berbagi tutorial yang rasanya cukup penting, meskipun sebelumnya saya sudah share tutorial yang mirip. Selain untuk tujuan berbagi tutorial, postingan ini juga saya buat untuk mengakomodir permintaan sahabat Dhestar Wirawan.



Jika sebelumnya kita hanya dapat menghapus link aktif yang disertakan dalam sebuah komentar seperti tutorial yang lalu, maka kali ini kita dapat menampilkan salinan dari komentar asli nya.


Kalau tertarik silahkan ikuti :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Cari kode </body> dan letakkan kode berikut ini diatas nya :

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            var salinan = content[i].innerHTML;
          content[i].innerHTML = "<div>Maaf, komentar Anda telah disembunyikan kemungkinan karena Anda menyisipkan link aktif yang tidak diperlukan oleh para pembaca. Berikut ini merupakan salinan dari komentar yang Anda berikan :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas perhatian Anda <div align='right'><img alt='no spam' src='http://2.bp.blogspot.com/-RZsMhoJUjs4/UczlQ0PEvdI/AAAAAAAABjE/JhA4CdVb_u0/s50/order.gif' style='border:0;'/></div></div>";
            content[i].className = "spammers";
        }
    }
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]> 
</script>

4. Selanjutnya, cari kode ]]></b:skin> dan letakkan kode berikut diatas nya :

p .spammers {background-color:#A29A9A;color:white}
textarea {
 background-color:#F8D9B5;
 width:98%;
 height:80px;
 overflow:auto;
 display:block;
 margin:10px auto} 

5. Simpan Template.

6. Enjoy. smoke

Bagaimana sob? Kode-kode diatas dapat di edit sesuai dengan keinginan masing-masing termasuk warna dan kalimat mutiara nya.

Terima kasih dan semoga bermanfaat. :)

June 25, 2013

Alternatif Dari Google Drive Untuk Hosting Javascript

Halo, selamat siang sob...

Bagaimana kabarnya hari ini? Ga kerasa udah beberapa hari ga posting dan ga online bikin tangan jadi gatal untuk melakukan kegiatan ketik-mengetik... winds

Pada postingan kali ini saya ingin berbagi, sesuai judul, yaitu tempat hosting file javascript selain di google drive. Mungkin banyak dari kalian yang sudah tahu bahwa layanan google code, yang kebanyakan orang menggunakannya untuk hosting file-file javascript sudah mulai dikurangi omg dan para "javascript's uploader" (kita sebut saja begitu yah... :D ) disarankan untuk bermigrasi, transmigrasi, atau apalah istilahnya peace2 ke google drive.

Nah, selain google drive yang saya yakin tutorialnya sudah banyak di luar sana, saya ingin membuat tutorial upload file javascript di YourJavascript. Saya pikir upload file-file javascript disana lebih sederhana dan kita bisa membuatnya menjadi file private, yang hanya domain-domain "terpilih" saja yang bisa menggunakannya.

Ok, langsung saja :

1. Jalan-jalan dulu ke YourJavascript.

2. Cari file javascript yang ingin di upload, lalu centang pada opsi private jika ingin membuat file tersebut hanya digunakan pada domain yang ingin dipilih.





3. Masukkan email, ini berfungsi bagi yourjavascript untuk mengirimkan  link file javascript yang sudah berhasil di upload.

4. Masukkan kode verifikasi captcha yang ada lalu klik "Upload".


5. Tunggu sebentar, jika berhasil silahkan buka email yang telah dimasukkan sebelumnya.


6. Enjoy. smoke

Terima kasih dan semoga bermanfaat... :)

June 21, 2013

Membuat Efek Animasi Dan Warna Pada Sebuah Elemen

Selamat siang...



Pada postingan ini saya hanya ingin share cara membuat efek animasi dan warna pada sebuah elemen. Untuk demo nya bisa dilihat berikut ini :



Pertama, tambahkan javascript berikut ini :

<script>

$(function() {

var state = true;

$( "#button" ).click(function() {

if ( state ) {

$( "#effect" ).animate({

backgroundColor: "#D580FE",

color: "#fff",

width: 600

}, 1000 );

} else {

$( "#effect" ).animate({

backgroundColor: "#fff",

color: "#000",

width: 240

}, 1000 );

}

state = !state;

});

});

</script>


Lalu, tambahkan kode CSS agar tampilan dari elemen yang dimaksud menjadi lebih cantik. Disini saya coba menambahkan fungsi scroll agar tampilan default dari elemen nya tidak terlalu jatuh kebawah meskipun diisi dengan kalimat yang panjang, sehingga kode nya menjadi seperti ini :

.toggler { width: 500px; height: 200px; position: relative; }

#button { padding: .5em 1em; text-decoration: none;background:#FEBFBF }

#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; overflow:auto; }

#effect h3 { margin: 0; padding: 0.4em; text-align: center; background:#FEBFBF; }

Terakhir, eksekusi dengan kode HTML seperti dibawah ini :

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Lorem Ipsum</h3>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

</div>

</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Click Here</a>


Untuk aplikasi pada blog, tinggal tambahkan javascript dan CSS tersebut dalam template dan letakkan kode HTML dimana temen-temen ingin efek seperti ini muncul, misalnya pada sebuah halaman statis atau pada halaman postingan.

Terima kasih dan semoga bermanfaat. :)

June 17, 2013

Design : Aiizahh Cheer Templates



Selamat sore...

Postingan kali ini saya mau berbagi template blog yang saya bikin sendiri, meskipun jelek, tapi ya ga papa lah namanya juga kreasi tangan newbie... :D


Template kali ini tidak jauh berbeda dengan template terakhir yang saya buat, meskipun ada beberapa perubahan kecil yang saya lakukan termasuk warna dasar template nya.


Terima kasih dan semoga bermanfaat.... smoke

June 14, 2013

Membuat Guest Book Berbeda Pada Blog

Selamat siang...

Postingan kali ini berhubungan dengan hal-hal yang klasik dari kegiatan ngeblog, yaitu blogwalking. Nah, tentu banyak dari blogger yang biasanya memasang buku tamu atau guest book pada blog nya agar para blogwalker bisa meninggalkan jejak dan kemudian saling ganti mengunjungi.


Kebanyakan dari blogger (termasuk saya dulu... :D ) lebih cenderung memasang guest book melayang, biasanya di sisi kanan halaman blog, meskipun tidak sedikit pula yang memasangnya seperti widget-widget statis lainnya di bagian sidebar.

Pada tutorial ini, saya ingin berbagi cara memasang guest book pada blog namun dengan tampilan yang sedikit berbeda, dan untuk guest book nya sendiri saya gunakan dari cbox jadi bila temen-temen menerapkan tutorial ini, saya anggap kode cbox nya sudah temen-temen miliki.


1. Login ke blogger.

2. Buka menu Template - Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

.aii-guest-boox {

  font:normal normal 12px/1.4 Awesome;
  color:#333;
  width:auto;
  border:1px solid #D580FE;
  border-bottom:none;
  background-color:#FEBFBF;
  position:fixed;
  left:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.aii-guest-boox > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:auto;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}
.aii-guest-boox > navibox {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#D580FE;
  text-align:justify;
  color:#fff;
  font-weight:bold;
  padding:0 1em 1px;
}
.aii-guest-boox > navibox:before {content:attr(data-collapsed)}
.aii-guest-boox .aii-guest-boox-content {
  /* padding-bottom:10px; */
  display:none;
}
.aii-guest-boox > input[type="checkbox"]:hover + navibox {background-color:#FEBFBF}
.aii-guest-boox > input[type="checkbox"]:checked + navibox {background-color:#D580FE}
.aii-guest-boox > input[type="checkbox"]:checked + navibox:before {content:attr(data-expanded)}
.aii-guest-boox > input[type="checkbox"]:checked ~ .aii-guest-boox-content {display:block}


4. Simpan Template.

5. Lanjut, buka menu Tata Letak - Tambahkan Gadget - HTML/Javascript.

6. Letakkan kode berikut di dalam nya :
<div class="aii-guest-boox">
    <input type="checkbox" />
    <navibox data-expanded="Close Guest Book" data-collapsed="Open Guest Book"></navibox>
    <div class="aii-guest-boox-content">

<-- KODE GUEST BOOK -->

.........................................................................

.........................................................................

.........................................................................

    </div>
</div>

7. Simpan.

8. Enjoy. smoke

Terima kasih dan jangan lupa tinggalkan komentar pada kotak komentar dibawah... :)

June 10, 2013

Cara Mengubah Widget Arsip Blog Menjadi Kalender

Selamat siang...

Postingan kali ini saya ingin membagi tutorial mengenai bagaimana mengubah widget arsip blog menjadi tampilan kalender.



Sebenarnya, secara default ada tiga opsi gaya yang diberikan blogger untuk mengkonfigurasikan arsip blog, yaitu hierarki, daftar flat, dan menu dropdown. Namun, seperti nya ketiga tampilan tersebut terlihat "biasa saja" dan lebih menarik kalau kita sedikit memodifikasi nya.

Bila tertarik memodifikasi nya, coba ikuti cara dibawah ini :

1. Login ke blogger.

2. Masuk menu Tata Letak - Tambahkan Gadget dan pilih "Arsip Blog" / "Blog Archieve".

3. Ganti opsi-opsi yang ada saat mengkonfigurasikan widget Arsip Blog tersebut dan Simpan.



4. Selanjutnya, masuk menu Template - Edit HTML.

5. Cari kode yang kurang lebih seperti ini :

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>

...................................

...................................

................................... 

</b:widget>


6. Lalu ganti kode tersebut diatas dengan kode berikut ini :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
            <b:includable id='main'> 
  <b:if cond='data:title'> 
    <h2><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
  <div id='ArchiveList'> 
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> 
    <b:if cond='data:style == &quot;HIERARCHY&quot;'> 
     <b:include data='data' name='interval'/> 
    </b:if> 
    <b:if cond='data:style == &quot;FLAT&quot;'> 
      <b:include data='data' name='flat'/> 
    </b:if> 
    <b:if cond='data:style == &quot;MENU&quot;'> 
      <b:include data='data' name='menu'/> 
    </b:if> 
  </div> 
  </div> 
  <b:include name='quickedit'/> 
  </div> 
</b:includable>
            <b:includable id='flat' var='data'> 
<div id='bloggerCalendarList'> 
  <ul> 
    <b:loop values='data:data' var='i'> 
      <li class='archivedate'> 
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) 
      </li> 
    </b:loop> 
  </ul> 
</div> 
<div id='blogger_calendar' style='display:none'> 
<table id='bcalendar'><caption id='bcaption'> 
</caption> 
<!-- Table Header --> 
<thead id='bcHead'/> 
<!-- Table Footer --> 
<!-- Table Body --> 
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> 
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> 
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> 
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> 
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> 
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> 
</tbody> 
</table> 
<table id='bcNavigation'><tr> 
<td id='bcFootPrev'/> 
<td id='bcFootAll'/> 
<td id='bcFootNext'/> 
</tr></table> 
<div id='judul' style='underline; text-align:center;'>Baca Artikel :</div>  
<div id='calLoadingStatus' style='display:none; text-align:center;'> 
<script type='text/javascript'>bcLoadStatus();</script> 
</div> 
  <div id='calendarDisplay'/>
</div> 
<script type='text/javascript'> initCal();</script> 
</b:includable>
            <b:includable id='interval' var='intervalData'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
            <b:includable id='menu' var='data'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
            <b:includable id='posts' var='posts'> 
<!-- posts not needed for Calendar --> 
</b:includable>
            <b:includable id='toggle' var='interval'> 
  <!-- Toggle not needed for Calendar --> 
</b:includable>
          </b:widget>


7. Selanjutnya letakkan kode berikut ini diatas kode </head> :

<script type='text/javascript'> 
//<![CDATA[ 
var bcLoadingImage = "http://3.bp.blogspot.com/-0b8RdG8tb1g/UbVZqWANxiI/AAAAAAAABdM/QG6my2g1-j4/s1600/ajax-loader(2).gif"; 
var bcArchiveNavText = "Lihat Arsip Blog"; 
var bcArchiveNavPrev = '◄'; 
var bcArchiveNavNext = '►'; 
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; 
// Nothing to configure past this point ---------------------------------- 
var timeOffset; 
var bcBlogID; 
var calMonth; 
var calDay = 1; 
var calYear; 
var startIndex; 
var callmth; 
var bcNav = new Array (); 
var bcList = new Array (); 
//Initialize Fill Array 
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; 
function openStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'block'; 
   document.getElementById('calendarDisplay').innerHTML = ''; 
  } 
function closeStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'none'; 
  } 
function bcLoadStatus(){ 
   cls = document.getElementById('calLoadingStatus'); 
   img = document.createElement('img'); 
   img.src = bcLoadingImage; 
   img.style.verticalAlign = 'middle'; 
   cls.appendChild(img); 
   txt = document.createTextNode(bcLoadingMessage); 
   cls.appendChild(txt); 
  } 
function callArchive(mth,yr,nav){ 
// Check for Leap Years 
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
   calMonth = mth; 
   calYear = yr; 
   if(mth.charAt(0) == 0){ 
      calMonth = mth.substring(1); 
      } 
   callmth = mth; 
   bcNavAll = document.getElementById('bcFootAll'); 
   bcNavPrev = document.getElementById('bcFootPrev'); 
   bcNavNext = document.getElementById('bcFootNext'); 
   bcSelect = document.getElementById('bcSelection'); 
   a = document.createElement('a'); 
   at = document.createTextNode(bcArchiveNavText); 
   a.href = bcNav[nav]; 
   a.appendChild(at); 
   bcNavAll.innerHTML = ''; 
   bcNavAll.appendChild(a); 
   bcNavPrev.innerHTML = ''; 
   bcNavNext.innerHTML = ''; 
   if(nav <  bcNav.length -1){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavPrev; 
      bcp = parseInt(nav,10) + 1; 
      a.href = bcNav[bcp]; 
      a.title = 'Previous Archive'; 
      prevSplit = bcList[bcp].split(','); 
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; 
      bcNavPrev.appendChild(a); 
      } 
   if(nav > 0){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavNext; 
      bcn = parseInt(nav,10) - 1; 
      a.href = bcNav[bcn]; 
      a.title = 'Next Archive'; 
      nextSplit = bcList[bcn].split(','); 
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; 
      bcNavNext.appendChild(a); 
     } 
   script = document.createElement('script'); 
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; 
   document.getElementsByTagName('head')[0].appendChild(script); 
} 
function cReadArchive(root){ 
// Check for Leap Years 
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
    closeStatus(); 
    document.getElementById('lastRow').style.display = 'none'; 
    calDis = document.getElementById('calendarDisplay'); 
    var feed = root.feed; 
    var total = feed.openSearch$totalResults.$t; 
    var entries = feed.entry || []; 
    var fillDate = new Array(); 
    var fillTitles = new Array(); 
    fillTitles.length = 32; 
    var ul = document.createElement('ul'); 
    ul.id = 'calendarUl'; 
    for (var i = 0; i < feed.entry.length; ++i) { 
      var entry = feed.entry[i]; 
      for (var j = 0; j < entry.link.length; ++j) { 
       if (entry.link[j].rel == "alternate") { 
       var link = entry.link[j].href; 
       } 
      } 
      var title = entry.title.$t; 
      var author = entry.author[0].name.$t; 
      var date = entry.published.$t; 
      var summary = entry.summary.$t; 
      isPublished = date.split('T')[0].split('-')[2]; 
      if(isPublished.charAt(0) == '0'){ 
         isPublished = isPublished.substring(1); 
         } 
      fillDate.push(isPublished); 
      if (fillTitles[isPublished]){ 
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; 
          } 
      else { 
          fillTitles[isPublished] = title; 
          } 
      li = document.createElement('li'); 
      li.style.listType = 'none'; 
      li.innerHTML = '<a href="'+link+'">'+title+'</a>'; 
      ul.appendChild(li); 
      } 
   calDis.appendChild(ul); 
   var val1 = parseInt(calDay, 10) 
   var valxx = parseInt(calMonth, 10); 
   var val2 = valxx - 1; 
   var val3 = parseInt(calYear, 10); 
   var firstCalDay = new Date(val3,val2,1); 
   var val0 = firstCalDay.getDay(); 
   startIndex = val0 + 1; 
  var dayCount = 1; 
  for (x =1; x < 38; x++){ 
      var cell = document.getElementById('cell'+x); 
      if( x < startIndex){ 
          cell.innerHTML = ' '; 
          cell.className = 'firstCell'; 
         } 
      if( x >= startIndex){ 
          cell.innerHTML = dayCount; 
          cell.className = 'filledCell'; 
          for(p = 0; p < fillDate.length; p++){ 
              if(dayCount == fillDate[p]){ 
                  if(fillDate[p].length == 1){ 
                     fillURL = '0'+fillDate[p]; 
                     } 
                  else { 
                     fillURL = fillDate[p]; 
                     } 
                  cell.className = 'highlightCell'; 
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; 
                 } 
              } 
          if( dayCount > fill[valxx]){ 
             cell.innerHTML = ' '; 
             cell.className = 'emptyCell'; 
             } 
          dayCount++; 
         } 
      } 
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; 
    if(visTotal >35){ 
        document.getElementById('lastRow').style.display = ''; 
       } 
  } 
function initCal(){ 
   document.getElementById('blogger_calendar').style.display = 'block'; 
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none'; 
   calHead = document.getElementById('bcHead'); 
   tr = document.createElement('tr'); 
   for(t = 0; t < 7; t++){ 
       th = document.createElement('th'); 
       th.abbr = headDays[t]; 
       scope = 'col'; 
       th.title = headDays[t]; 
       th.innerHTML = headInitial[t]; 
       tr.appendChild(th); 
      } 
   calHead.appendChild(tr); 
  for (x = 0; x <bcInit.length;x++){ 
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; 
     var stripMonth = bcInit[x].href.split('_')[1]; 
     bcList.push(stripMonth + ','+ stripYear + ',' + x); 
     bcNav.push(bcInit[x].href); 
     } 
  var sel = document.createElement('select'); 
  sel.id = 'bcSelection'; 
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0; 
  for (r = 0; r <bcList.length; r++){ 
       var selText = bcInit[r].innerHTML; 
       var selCount = bcCount[r].innerHTML.split('> (')[1]; 
       var selValue = bcList[r]; 
       sel.options[q] = new Option(selText + ' ('+selCount,selValue); 
       q++ 
       }                   
   document.getElementById('bcaption').appendChild(sel); 
   var m = bcList[0].split(',')[0]; 
   var y = bcList[0].split(',')[1]; 
   callArchive(m,y,'0'); 
} 
function timezoneSet(root){ 
   var feed = root.feed; 
   var updated = feed.updated.$t; 
   var id = feed.id.$t; 
   bcBlogId = id.split('blog-')[1]; 
   upLength = updated.length; 
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} 
   else {timeOffset = updated.substring(upLength-6,upLength);} 
   timeOffset = encodeURIComponent(timeOffset); 
} 
//]]> 
</script> 
<script src='/feeds/posts/summary?max-results=0&amp;amp;alt=json-in-script&amp;callback=timezoneSet'/>


8. Kemudian, letakkan kode CSS* berikut ini diatas kode ]]></b:skin> :


/* Start of Post Navigator (Black n White Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #FFFFFF;padding:2px;margin:10px 0 0;background:#000000;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #FFFFFF;color:#000000;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #FFFFFF;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #000000;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* Links in Calendar */

table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{background:#FFFFFF}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#000000;border:2px solid #FFFFFF}
td.highlightCell:hover{background:#FFFFFF;border:1px solid #000000}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#000000;border:1px solid #FFFFFF;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#FFFFFF}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;border:2px solid #FFFFFF;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Black n White Theme) ------ */


9. Simpan Template.

10. Enjoy. smoke

*)Tema lain yang dapat digunakan :





/* Start of Post Navigator (Chocolate Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #ffffff;padding:2px;margin:10px 0 0;background:#D38F37;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #ffffff;color:#D38F37;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #ffffff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #D38F37;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* Links in Calendar */

table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{color:#ffffff;text-decoration:none;background:#D38F37}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#D38F37;border:2px solid #ffffff}
td.highlightCell:hover{background:#ffffff;border:1px solid #D38F37}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#D38F37;border:1px solid #ffffff;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#ffffff}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;border:2px solid #ffffff;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Chocolate Theme) ------ */


Tips : Coba lihat URL berwarna hijau, Anda dapat menggantinya dengan URL loader lain seperti dibawah ini.

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"


Bagaimana hasil modifikasi widget arsip blog nya???
Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar ya... :)

June 4, 2013

Modifikasi Widget Followers Pada Blog



Selamat siang...

Postingan kali ini saya buat untuk membantu temen-temen yang ingin memodifikasi widget followers pada blog nya sehingga menjadi lebih menarik.

Sebenarnya, untuk memodifikasi warna dan lain sebagainya cukup hapus tanda centang pada bagian "Gunakan Gaya Template Default" saat kalian menambahkan widget followers bawaan blogger seperti gambar dibawah ini.



Namun, bukan hanya untuk alasan itu saja hal ini menjadi perlu untuk dilakukan, karena dengan memodifikasi nya pula maka blog akan lolos (pada bagian ini) saat validasi HTML 5. Jadi, bisa dikatakan kita melakukan satu hal untuk dua manfaat, hehehe...

Ok, langsung saja :

1. Login ke blogger.
2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript.
3. Masukkan script dibawah ini :

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-13f90a5odka7x" style="width:auto;border:none;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#D580FE';
skin['ENDCAP_BG_COLOR'] = '#FEBFBF';
skin['ENDCAP_TEXT_COLOR'] = '#000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#33FF00';
skin['CONTENT_BG_COLOR'] = '#FFFFFF';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#1919B3';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#FF0000';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-13f90a5odka7x',
   site: '14360626934896265745' },
  skin);
</script>


4. Simpan.
5. Enjoy. dad

Coba lihat kode yang saya beri warna ungu dan warna biru, yang mana kode tersebut dapat dilihat pada blog kalian dengan cara berikut :

1. Klik kanan dan pilih "View Page Source" atau dengan menekan CTRL+U.



2. CTRL+F dan cari kode " renderMembersGadget ".



3. Copy paste kode yang diberi kotak sesuai gambar dalam script diatas.

Terima kasih dan semoga bermanfaat...

June 3, 2013

Perubahan Pada Layanan Download Google Code


Selamat pagi...

Sebelumnya saya sudah pernah membuat sebuah postingan mengenai Cara Upload File Javascript Ke Google Code namun kemarin, beberapa pengunjung blog ini mengatakan bahwa tab download yang merupakan bagian dari tahap upload file ke Google Code sudah tidak ada.

Ternyata setelah saya coba, memang benar adanya dan mengapa itu terjadi telah terjawab di blog ini. Google memang telah menutup layanan download pada Google Code, baik untuk proyek-proyek yang baru dibuat maupun proyek-proyek yang sebelumnya sudah dibuat. Perbedaannya, untuk proyek-proyek yang baru dibuat, seperti yang terjadi, tidak akan ada lagi layanan download mulai akhir Mei kemarin, sedangkan untuk proyek-proyek yang sebelumnya sudah ada, masih tetap tersedia layanan download sampai tanggal 14 Januari 2014.

Hal ini sendiri terjadi, karena Google merasa telah terjadi peningkatan yang signifikan pada kekerasan akibat penyalahgunaan pelayanan, dan oleh karenanya, baik yang sebelumnya telah memiliki proyek pada Google Code maupun yang belum untuk segera berpindah ke Google Drive.

May 30, 2013

Membuat Sidebar Accordion Pada Blog



Selamat siang...

Mungkin sudah biasa melihat sidebar accordion yang kebanyakan dibuat dalam satu widget "HTML/Javascript", seperti dalam postingan saya dulu. Hanya, kekurangannya mungkin dalam menu accordion tersebut kita hanya dapat memasukkan widget-widget tertentu, namun untuk widget bawaan, seperti follower, popular post, dan arsip blog tidak dapat masuk dalam menu accordion nya.

Agar widget-widget tersebut, yang kalian taruh di sidebar misalnya, dapat kita masukkan dalam menu accordion, maka yang perlu dilakukan adalah membuat efek accordion pada sidebar nya.

Lalu, bagaimana caranya ?

1. Login ke blogger.
2. Pilih Template - Edit HTML.
3. Cari kode </head> dan letakkan kode berikut ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper1 .widget-content').hide();
    $('#sidebar-wrapper1 h2').css('cursor', 'pointer').click(function() {
        $('#sidebar-wrapper1 h2').removeClass('active').next().slideUp('slow');
        if ($(this).next().is(':hidden')) {
            $(this).addClass('active').next().slideDown('slow');
        } else {
            $(this).removeClass('active').next().slideUp('slow');
        }
    });
});
//]]>
</script>


4. Simpan Template.

 *Keterangan : Apabila didalam template sudah terdapat kode jQuery seperti yang saya beri garis bawah, maka tidak perlu diletakkan lagi.

Tips : Coba lihat kode yang saya beri warna ungu, kode tersebut tidak 100% sama, karena ID tiap template mungkin berbeda-beda. Coba temukan kode yang kurang lebih seperti ini :

<aside id='sidebar-wrapper1'>

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

..................................................................

..................................................................

        </b:section>

 </aside>


atau mungkin yang seperti ini :

<div id='sidebar-wrapper1'>

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

..................................................................

..................................................................

        </b:section>

 </div>


Lihat kode berwarna kuning, itulah ID sidebar template yang harus sama dengan kode berwarna ungu dalam script untuk menciptakan efek accordion pada sidebar blog.

Bagaimana sob?
Terima kasih, semoga bermanfaat yah...

Postingan ini sekaligus menjawab pertanyaan Agan Sophie Riswandono, semoga membantu...

May 23, 2013

Design : Aiizahh Simple Blue Template



Selamat siang sob...

Wah, ga kerasa udah beberapa hari sejak post terakhir saya, dan terus terang saya lagi mendesain template beberapa hari ini. Maklum, sedang ada semangat dan ide, jadi langsung saja saya aplikasikan menjadi sebuah bentuk yang nyata...

Bila membaca posting terakhir saya, disitu saya katakan bahwa itu adalah "template pertama jadi mungkin berantakan", maka kali ini yang kedua masih juga dan bahkan tambah berantakan... **p **p **p

Template kali ini saya namakan Aiizahh Simple Blue, karena warna dasar nya memang biru dengan tampilan yang "sama tapi beda" dan "beda tapi sama" dengan template sebelumnya. **p **p **p .


Untuk informasi template ini :

1. SEO friendly.

2. 3 Kolom pada bagian footer.

3. Quick search dengan Json blogger dengan tampilan yang lebih simple.

4. Navigasi halaman AJAX.

5. Floating breadcumbs pada halaman posting.

6. Efek animasi loading pada halaman blog.

7. Emoticon include, baik pada komentar maupun pada postingan.

8. Menu chatbox ala Facebook, dimana bisa diletakkan kode buku tamu didalamnya.


Bagaimana sob???

Terima kasih, apabila tertarik untuk mengunduh dan menggunakannya mohon untuk tidak menghapus credit link didalamnya...

May 20, 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...

May 16, 2013

Mengubah Tampilan Blog Dengan Style Switcher

Selamat pagi sob...

Kali ini saya ingin berbagi sebuah tutorial yang sangat menarik, yakni mengenai cara mengubah tampilan blog dengan menggunakan style switcher. Style switcher sendiri adalah sebuah aksesoris bagi blog yang dapat digunakan oleh, baik pemilik blog maupun pengunjung blog dengan tujuan mengganti tampilan blog tersebut sehingga menjadi semakin menarik.



Selain membuat blog semakin menarik, tentu saja diharapkan pengunjung blog akan lebih betah untuk berkeliling di dalam blog kita.

Mungkin sudah banyak sekali tutorial tentang aksesoris ini, namun saya lebih suka dengan tampilan style switcher ala Mas Taufik ini, sehingga saya mencoba untuk melakukan modifikasi pada beberapa bagian. Jadi, dengan style switcher ini kita tidak hanya bisa mengubah background menjadi warna saja, namun juga dengan tambahan opsi pattern yang menarik.


Disamping itu, ada juga opsi untuk mengganti font, baik style, ukuran, maupun warna, serta ditambah dengan javascript cookie sehingga meskipun pengunjung membuka halaman blog yang berbeda-beda namun perubahan itu akan tetap bertahan, bahkan meskipun pengunjung blog tersebut mengakses blog kita besok, lusa, minggu depannya, sampai bulan depannya karena masa kadaluarsa dari cookie ini sendiri adalah selama satu tahun.

1. Login ke blogger.
2. Masuk ke Template - Edit HTML.

3. Letakkan kode berikut ini tepat diatas </head> atau </body> :

<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/cookieforblog.js'></script>
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/styleswitcher.js'></script>

4. Simpan Template.

5. Masuk ke Tata Letak - Tambahkan Gadget - HTML/Javascript dan letakkan kode berikut didalamnya :

<style type="text/css">

#styleSwitcher {

  border:none;

  margin:0 0;

  padding:0 0;

  width:98%;

  text-align:left;

  font:normal 11px Tahoma,Arial,Sans-Serif;

  border-collapse:collapse;

}

#styleSwitcher th,

#styleSwitcher td {

  vertical-align:middle;

  border:none !important;

  padding:2px 10px;

}

#styleSwitcher th.title {

  background-color:#ccc;

  padding:5px 10px;

  margin:0 0 10px;

  text-transform:uppercase;

  font-size:12px;

  font-family:Arial,Sans-Serif;

}

#styleSwitcher select,

#styleSwitcher input[type="text"] {

  width:130px;

  border:2px solid #bbb;

  background-color:#9D8675;

  padding:2px;

  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;

  color:#000;

  display:block;

  margin:0 0 0;

  height:24px;

}

#styleSwitcher select option {

  color:white;

  padding:5px 10px;

  cursor:pointer;

}

#styleSwitcher button {

  font:normal 11px Tahoma,Arial,Sans-Serif;

  padding:3px 5px;

  cursor:pointer;

}

#styleSwitcher #bgColorer {

  overflow:hidden;

  margin:10px 0 10px;

}

#styleSwitcher #bgColorer span {

  display:block;

  float:left;

  width:20px;

  height:20px;

  border:1px solid black;

  margin:0 5px 0 0;

  cursor:pointer;

}

#styleSwitcher #bgpattern {

  overflow:hidden;

  margin:10px 0 10px;

}

#styleSwitcher #bgpattern span {

  display:block;

  float:left;

  width:20px;

  height:20px;

  border:1px solid black;

  margin:0 5px 0 0;

  cursor:pointer;

}

#styleSwitcher input[type="text"] {

  width:118px !important;

  padding:4px !important;

  height:auto !important;

}

</style>

<table border="0" id="styleSwitcher">

  <tr><th class="title" colspan="2">Ubah Tampilan Blog</th></tr>

  <tr>

    <td colspan="2">

     <div id="bgColorer">

      <span style="background-color:#A735E0;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#EF2D19;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#F1FF00;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#F49AC2;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#FA8D63;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#967878;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#49E84C;" onclick="bgSwitch(this.style.backgroundColor);"></span>

            </div>

     <div id="bgpattern">

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/amazing%20willows.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20circle.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/pattern%20flowers.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20square.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/tie.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/kinder%20floral.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

            </div>

        </td>

    </tr>

    <tr><th>Tipe Font</th>

        <td>

            <select onchange="fontSwitch(this.value);">

                <option selected="true">--</option>

                <option value="'Book Antiqua',Serif">Book Antiqua</option>

                <option value="'Times New Roman',Serif">Times New Roman</option>

                <option value="Georgia,Serif">Georgia</option>

                <option value="Arial,Sans-Serif">Arial</option>

                <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>

                <option value="'Trebuchet MS',Arial,Sans-Serif">Trebuchet</option>

                <option value="Verdana,Arial,Sans-Serif">Verdana</option>

                <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif">Century Gothic</option>

                <option value="'Comic Sans MS',Serif">Comic Sans</option>

            </select>

        </td>

    </tr>

    <tr><th>Warna Font</th>

        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>

    </tr>

    <tr><th>Ukuran Huruf</th>

        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>

    </tr>

    <tr><th>Reset</th>

        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>

    </tr>

</table>

<small><a href="http://aiizahh.blogspot.com/2013/05/mengubah-tampilan-blog-dengan-style.html" target="blank">Pasang Widget Ini</a></small> 

6. Simpan.
7. Enjoy.


Terima kasih, semoga bermanfaat...