Background

Background

Silahkan klik beberapa gambar di bawah ini

  • image1
  • image2
  • image3
  • image4
  • image2
  • image1
  • image4
  • image3
Daftar isi yang akan kita buat sekarang ini akan menggunakan efek jquery accordion, jika sebelumnya pernah kita bahas mengenai cara membuat daftar isi kang farhan, dengan efek jquery akan menampilkan efek dan bentuk yang lebih menarik. Script jquery accordion ini dibuat oleh teman netterku dalam dunia blog saudara Hendriono (http://modification-blog.blogspot.com). Untuk melihat bagaimana bentuk tampilan dan efek yang dihasilkan dari jquery accordion, kawan bisa meng-klik link demo dibawah ini :


Bagaimana menurut kawan? tertarik untuk membuatnya dalam blog kawan? jika tertarik kawan bisa mengikuti caranya seperti dibawah ini :
  • Masuk Design - Edit HTML
  • Jika diperlukan, kawan membuat backup template terlebih dahulu dengan cara men-Download Full Template untuk menghindari segala kesalahan.
  •  Selanjutnya cari kode ]]></b:skin> dan letakan kode css dibawah ini diatas kode ]]></b:skin> 
 
#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
  • Kemudian cari kode </head> dan letakan kode dibawah ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
 Penting!!! periksa dalam tag head template kawan, jika sudah ada script jquery tersebut diatas, kawan tidak perlu menambahkan script jquery tersebut (cukup satu saja script jquery) dimaksudkan untuk menghidari konflik script, karena script yang dibuat berdasar perintah javascript termasuk jquery sebagai turunan javascript, rentan terjadi bentrok antar script.
  • Save template kawan.
Script dibawah ini adalah untuk menampilkan daftar isi, kalian bisa meletakan pada postingan, widget atau bisa memanfaat halaman sebagai media untuk menampilkannya.
  • Copy paste script dibawah ini pada postingan atau post page (halaman) dalam mode editor Edit HTML
 <script type="text/javascript" src="http://situseo.googlecode.com/files/Table-of-Content.js"></script>
<script src="http://iq-dua3.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Keterangan : ganti url blog yang berwarna merah dengan url blog kawan.


^_^ semoga bermanfaat ^_^
 
Selamat pagi kawan, Kali ini saya akan posting tutorial blog yang mungkin kawan butuhkan, langsung saja. kali ini membuat macam-macam kotak dalam postingan, biasanya ini dibutuhkan/dipergunakan untuk kode HTML, kata yang penting juga banyak yang lainnya, oke dech mungkin kawan sudah mengerti jadi. Langsung saja, Cekidot>

Berikut langkah-langkah untuk bikin macam-macam tampilan kotak dalam postingan :

1. Kode untuk Solid Border

<div style="border: 2px #FF0000solid; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :


Isi dengan tulisan kawan disini

2. Kode untuk Ridge Border

<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

3. Kode untuk Groove Border

<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

4. Kode untuk Inset Border

<div style="border: 2px #FF0000 inset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div> 

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

5. Kode untuk Outset Border

<div style="border: 2px #FF0000 outset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div> 

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

6. Kode untuk Double Border

<div style="border: 2px #FF0000 double; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

7. Kode untuk Dotted Border

<div style="border: 2px #FF0000 dotted; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

8. Kode untuk Dashed Border

<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

9. Kode untuk Dashed Border

<div style="border: 2px #FF0000 dashed; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini

10. Kode untuk Border dengan scroll, lebar dan tinggi

<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>

Maka hasilnya seperti ini :

Isi dengan tulisan kawan disini


Keterangan :
1. Tulisan berwarna pink : silahkan ganti dengan kode HTML yang anda inginkan.
2. Tulisan yang berwarna biru : ganti dengan kode warna menurut selera anda. Untuk mengganti kode warna silahkan kawan lihat di postingan saya mengenai Kode warna
3. Perlu diketahui : Dalam penulisan kode HTML yang ingin kawan tampilkan pada postingan harus pada posisi HTML bukan Compose.
Selamat pagi kawan ^_^. kali ini saya akan posting tutorial Facebook. Langsung saja, Cekidot>
Lagi iseng-iseng buka facebook liat bahasa ko banyak banget, dicoba dech yang baru eh tau tau ko jadi alay gini ya hehehe. ga ada salahnya kan memberi tahu ke kawan semua.

Untuk caranya.
1. Kawan log-in dahulu ke facebook
2. Paling bawah pada beranda ada bahasa (kawan klik)
3. Pilih leet speak
4. Dan liat hasilnya hehehehe ^_^

Note: Kawan tapi sayangnya masih Beta ni, Mungkin Masih dalam Tahap percobaan ^_^, Tapi tidak ada salahnya mencoba kan ^_^
Kali ini Afika versi 2 ni.. Langsung saja>


 ^_^ Semoga Kawan Terhibur ^_^
Kali ini saya akan posting software buat kawan semua.
Softwarenya yaitu Photo MakeUp Editor. Dari namanya kawan sudah bisa menyimpulkan apa kegunaan dari software ini bukan.
Yups software ini berguna untuk memberi make up pada wajah, juga bisa menghilangkan jerawat, memperhalus wajah, memutihkan gigi, dan masih banyak lagi.
langsung saja, Cekidot>

ScreenShot>>


Sebelum>>
 Sesudah>>
Gimana tertarik-kah, silahkan kawan download. Maaf editingnya jeulek hehehe tidak bisa editing saya mohon dimaklum saja ^_^
Password: iq-dua3
 Size: 3 Mb

^_^ Semoga Bermanfaat ^_^
Bagaimana Cara pasang meta tag di postingan? Apa fungsi meta tag? Apa gunanya meta tag? Mungkin ada yang bertanya seperti itu. Ok lah langsung saja, meta tag tersebut sangat berguna untuk mengoptimalkan atau optimasi onpage, kenapa bisa seperti itu? Karena dengan memasang meta tag di setiap postingan, kita akan memiliki meta deskripsi yang berbeda antara satu postingan dengan postingan yang lain. Dengan memasang meta tag di setiap postingan secara otomatis maka meta deskripsi dan keyword pada setiap postingan akan tergenerate secara otomatis. Ini menjadi solusi bagi kamu yang mengalami duplikasi meta deskripsi.
Jadi gimana cara pasang meta tag deskripsi dan keyword setiap postingan secara otomatis? Berikut ini cara pasang nya:
- Pertama silahkan kamu login ke blogger terlebih dahulu, kemudian menuju ke Design lalu Edit HTML. Setelah itu cari kode di bawah ini:
<title><data:blog.pageTitle/></title>
Untuk mempermudah mencarinya gunakan Ctrl + F
- Setelah kamu dapatkan tersebut, silahkan kamu hapus lalu ganti dengan kode berikut:
<b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG KAWAN'/>
<meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>
- Setelah selesai silahkan kamu Save
Selamat mencoba dan semoga bermanfaat...