tag:blogger.com,1999:blog-6797965490167697712024-03-18T10:04:06.724+07:00Belajar Komputer Melalui InternetKumpulan Tutorial KomputerDesa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.comBlogger124125tag:blogger.com,1999:blog-679796549016769771.post-79163753126715295402013-12-22T20:41:00.000+07:002013-12-22T20:41:14.921+07:00Memasang Ad-on Emoticon FB<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Lama rasanya tidak memposting di blog ini... namun tiba-tiba saja hari ini ingin memposting.. mungkin ini hanya iseng aja daripada bengong gak karuan... pada kesempatan ini saya ingin share tentang <b>Memasang Ad-on Emoticon FB.</b> Emoticon ini adalah ad-on di browser mozilla, mungkin sudah banyak yang tau dan memasang ad-on ini namun gak salah juga kalau kesempatan ini saya share buat yang belum tau.</div>
<div style="text-align: justify;">
<b>Ad-on Emoticon</b> ini bisa digunakan pada saat membuat status Fb......</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1DfNsUVq3JkAJ5S-ARUz88Ob822tm7oSKGhYwepL6habeOcVdlj1nnqJvDx_AnxxwpSLs82j5BBywbEHBTcEhdswy71KvbpmjLz87v-bWQ6hZdZWdMaelMjBVa356cg-eC9c9Z8q6J6E/s1600/Screenshot_45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ad-on Emoticon" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1DfNsUVq3JkAJ5S-ARUz88Ob822tm7oSKGhYwepL6habeOcVdlj1nnqJvDx_AnxxwpSLs82j5BBywbEHBTcEhdswy71KvbpmjLz87v-bWQ6hZdZWdMaelMjBVa356cg-eC9c9Z8q6J6E/s320/Screenshot_45.png" title="Ad-on Emoticon" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
bisa juga digunakan pada komentar status...</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSDk4ZZIxNKKS9cUOLfoa3uo__Z4Q3fMnH1xSKwzLFLAjYmSqrxodHAsPLxP1DxsWqALFmGV9DR1vgwOzmTJ6Kp9dPJvYu3r9-prGbjaVdWNkbmtSGbxM7p-VS-3SxewM-ZmuCM6DGV3g/s1600/Screenshot_46.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ad-on Emoticon" border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSDk4ZZIxNKKS9cUOLfoa3uo__Z4Q3fMnH1xSKwzLFLAjYmSqrxodHAsPLxP1DxsWqALFmGV9DR1vgwOzmTJ6Kp9dPJvYu3r9-prGbjaVdWNkbmtSGbxM7p-VS-3SxewM-ZmuCM6DGV3g/s320/Screenshot_46.png" title="Ad-on Emoticon" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
dan juga bisa digunakan pada pesan/inbox, namun ini mungkin hanya tambahan emoticon aja kalau di inbox karena tidak pasang ad-on ini juga udah banyak emoticonnya..</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmeJQoSyjZhIzsWAsnEiVC46-wr66qhjBpXyAt2aPcaQalq31vEyDes_BwNq7RSPQZi_7m-jNVi_ZpCkD9Vk7uRfvw7_XrFqnOkYPIjl8jndY6zj4Ycbg1ettI5NcPoV3mqe1N7qfsma1/s1600/Screenshot_44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ad-on Emoticon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmeJQoSyjZhIzsWAsnEiVC46-wr66qhjBpXyAt2aPcaQalq31vEyDes_BwNq7RSPQZi_7m-jNVi_ZpCkD9Vk7uRfvw7_XrFqnOkYPIjl8jndY6zj4Ycbg1ettI5NcPoV3mqe1N7qfsma1/s1600/Screenshot_44.png" title="Ad-on Emoticon" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Itulah sebagai gambaran fungsi ad-on ini, selanjutnya kita langsung aja ke cara pemasangannya..</div>
<div style="text-align: justify;">
Pertama kali kita buka browser mozilla kemudian klik tombol Firefox dibagian atas kanan kemudian klik pengaya ( Bhs. Indonesia ) ad-on (Bhs. Inggris).</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-98LoZhYCjGjg3SfWNTwf8JZD0XHgHq6p492yKFPbl7UmWH3T5v5tCYLfpPFX4prhV-E8swAQyJBuaumx93oLxsxLQ7QOFeRKtTN7ZmItoyxX4l5CRYwlAymtWbHCC-bocakKmz-I3TS/s1600/Screenshot_48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ad-on Emoticon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-98LoZhYCjGjg3SfWNTwf8JZD0XHgHq6p492yKFPbl7UmWH3T5v5tCYLfpPFX4prhV-E8swAQyJBuaumx93oLxsxLQ7QOFeRKtTN7ZmItoyxX4l5CRYwlAymtWbHCC-bocakKmz-I3TS/s1600/Screenshot_48.png" title="Ad-on Emoticon" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
atau kalau yang tampilannya belum dirubah (standard) klik alat kemudian pengaya/ add-on..</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56MltdQDPALHUsA4a-D5gxYLs5eE0lgjPPzlX9F52l9k-r5HHa0rveeQyOKGN9V7wkuzYrv4AcdsNcG4ShRxX6gozS0lGGJ3tdHcctRaBiBA3Iz4tJ4tqQeygTEpja2Ool0nxqIGNrDsZ/s1600/Screenshot_47.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Ad-on Emoticon FB" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56MltdQDPALHUsA4a-D5gxYLs5eE0lgjPPzlX9F52l9k-r5HHa0rveeQyOKGN9V7wkuzYrv4AcdsNcG4ShRxX6gozS0lGGJ3tdHcctRaBiBA3Iz4tJ4tqQeygTEpja2Ool0nxqIGNrDsZ/s320/Screenshot_47.png" title="Memasang Ad-on Emoticon FB" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
setelah halaman pengaya terbuka masukan "<b>facebook secret emoticons 2.2.5</b>" di pencarian.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpciUsxvhivtvAzDE4vWR1979TjWlYMAkHdO5z7QT-5LmHMDLHMsoIrqdqnUd6uR2Llc8GH8ONxVDDIUYC7SMSzZlwjGhEty-KMiofeN4JBcrmMu0zgEb-AmsbWSkDxCo_Ic5LKJN72pmi/s1600/Screenshot_49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Ad-on Emoticon FB" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpciUsxvhivtvAzDE4vWR1979TjWlYMAkHdO5z7QT-5LmHMDLHMsoIrqdqnUd6uR2Llc8GH8ONxVDDIUYC7SMSzZlwjGhEty-KMiofeN4JBcrmMu0zgEb-AmsbWSkDxCo_Ic5LKJN72pmi/s320/Screenshot_49.png" title="Memasang Ad-on Emoticon FB" width="320" /></a></div>
<div style="text-align: justify;">
kalau tidak ditemukan cari di unduh pengaya dan klik "see all" yang ada di bagian yang akan datang..</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDly5ON_xXjWAbibIaHZTVakbhctfxO_HU2dcEKKJCz_5u888bMXywCqi1TxJhQ736KNuMGcvBczbgMh6nvvydPfzNIlGiENN3j_Rab36fwdptdi1yHCHGoXCIXVdQ7XYf6FUJvv2vxwiy/s1600/Screenshot_50.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Ad-on Emoticon FB" border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDly5ON_xXjWAbibIaHZTVakbhctfxO_HU2dcEKKJCz_5u888bMXywCqi1TxJhQ736KNuMGcvBczbgMh6nvvydPfzNIlGiENN3j_Rab36fwdptdi1yHCHGoXCIXVdQ7XYf6FUJvv2vxwiy/s320/Screenshot_50.png" title="Memasang Ad-on Emoticon FB" width="320" /></a></div>
<div style="text-align: justify;">
kemudian cari Ad-on Emoticon FB tersebut..</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVmF_rGBGKUPtnVfi6AEAXfxeL0eL2zO9od3O-kYZlDrhMddBNr4VXxDSEhQudajsy_q5KG6sn9zB_aTvHGwFI0ZWHTXXVn-9Blk6UEwj_deRyRCeI3gumvkP92pDQxIrLkWOAhqSPHWY/s1600/Screenshot_51.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Ad-on Emoticon FB" border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVmF_rGBGKUPtnVfi6AEAXfxeL0eL2zO9od3O-kYZlDrhMddBNr4VXxDSEhQudajsy_q5KG6sn9zB_aTvHGwFI0ZWHTXXVn-9Blk6UEwj_deRyRCeI3gumvkP92pDQxIrLkWOAhqSPHWY/s320/Screenshot_51.png" title="Memasang Ad-on Emoticon FB" width="320" /></a></div>
<div style="text-align: justify;">
kalau gak menemukan di halaman pertama cari di halaman berikutnya sampe ketemu dengan cara klik selanjutnya yang ada dibagian bawah...</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDPMv1eu4ceVSaTQOlZPbij6rIExz3kAdJraWESSk8bEJIw9kCjAQ4WPX2gh8j8EQv-1J7GHYSTHY-zZMROamRZEcOSRLMkw6qdU-19RkqF7DWn8licA_KwvPRQ-UstEVmn-UnvEcoEHy/s1600/Screenshot_53.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDPMv1eu4ceVSaTQOlZPbij6rIExz3kAdJraWESSk8bEJIw9kCjAQ4WPX2gh8j8EQv-1J7GHYSTHY-zZMROamRZEcOSRLMkw6qdU-19RkqF7DWn8licA_KwvPRQ-UstEVmn-UnvEcoEHy/s320/Screenshot_53.png" width="320" /></a></div>
Kalau sudah menemukan tinggal arahkan mouse ke ad-on tersebut dan klik aja.<b>Add to firefox</b>..<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UYuf49_Q7HJA8tKWd7QbzeSAf4isITKpZFBEIfovU9P8WCZnLaheDHWVDXMdTLwdLkhvEgY_jV-1SjA55wrzKkngNoHTKQkpJgArekYsoy3l3-1Ji193wbib3euwjjspvom8nYfH2usG/s1600/Screenshot_54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UYuf49_Q7HJA8tKWd7QbzeSAf4isITKpZFBEIfovU9P8WCZnLaheDHWVDXMdTLwdLkhvEgY_jV-1SjA55wrzKkngNoHTKQkpJgArekYsoy3l3-1Ji193wbib3euwjjspvom8nYfH2usG/s1600/Screenshot_54.png" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
Tunggu sampai pengunduhan dan pemasangan selesai..selanjutnya Refsesh halaman FB anda.. maka akan ada icon kecil di kiri Pembaharuan status, Komentar dan Inbox..</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKybnBH1A349pvNBBFHbFb0ZoVsYnc0tvDdqF4WSlgPxV8SBc5OOsDTixJA7WF3UnlrpDUHhnjXep_sJVpXDWr62dyZPKYpJrWRKjSs3ZSkQ_F1iE0IWqk8n0-nQvoaVe8Hu_GjwwHpMw/s1600/Screenshot_55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="59" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKybnBH1A349pvNBBFHbFb0ZoVsYnc0tvDdqF4WSlgPxV8SBc5OOsDTixJA7WF3UnlrpDUHhnjXep_sJVpXDWr62dyZPKYpJrWRKjSs3ZSkQ_F1iE0IWqk8n0-nQvoaVe8Hu_GjwwHpMw/s320/Screenshot_55.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: justify;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj0Lk-VGsCGJOoO4aYUZFjt1rypronZ2K6UABhoCMz_EuAz0HGel0OPJlUv1a6gZFmIt30sb19e6cqzCjGZcMSSN8LX3trZoUjgPFOo_88CALhMcmvtHj-crY2z5slERjF_rMog6pxTwxr/s1600/Screenshot_56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj0Lk-VGsCGJOoO4aYUZFjt1rypronZ2K6UABhoCMz_EuAz0HGel0OPJlUv1a6gZFmIt30sb19e6cqzCjGZcMSSN8LX3trZoUjgPFOo_88CALhMcmvtHj-crY2z5slERjF_rMog6pxTwxr/s320/Screenshot_56.png" width="320" /></a></div>
<br />
<br /></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com38tag:blogger.com,1999:blog-679796549016769771.post-28586798634986218462012-10-08T15:33:00.001+07:002012-10-08T15:38:08.940+07:00Cara Copy Paste Tabel pada Excel agar hasilnya sama<div style="text-align: justify;">
<b>Cara Copy Paste Tabel pada Excel agar hasilnya sama</b> mungkin perlu sedikit penjelasan mengenai tutorial ini. Yang dimaksud pada judul tutorial ini yaitu cara copy paste pada lembar kerja excel baik itu berupa kolom, tabel maupun format lain. dimana secara default atau biasanya copy paste pada excel ini akan dihasilkan beda dengan yang aslinya, saya berikan sedikit contoh, sobat perhatikan baik-baik gambar dibawah;</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MC1JPla7wnQA5rNSqgYTYhod4KyMobR0U1sL4cJQFw4gc0rSvI6TQSfOY_uiQEVr2Gu2BIeaif1iHT1KXkWl3kRj1LmdtPfNYq3a2DJ2Yw2N4fTigSZO2UlT5YRhhYmHTabn0A69NiRy/s1600/Screenshot_129.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Copy Paste pada Excel agar hasilnya sama" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MC1JPla7wnQA5rNSqgYTYhod4KyMobR0U1sL4cJQFw4gc0rSvI6TQSfOY_uiQEVr2Gu2BIeaif1iHT1KXkWl3kRj1LmdtPfNYq3a2DJ2Yw2N4fTigSZO2UlT5YRhhYmHTabn0A69NiRy/s320/Screenshot_129.png" title="Cara Copy Paste pada Excel agar hasilnya sama" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Perhatikan pada tabel kolom kedua dimana terlihat ukuran lebarnya sesuai dengan huruf yang ada, apabila kita mengkopy paste maka hasilnya akan seperti berikut:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwd5sEr7e6oZDU4WOSsUNLLKKg9Pwq9gh8ObOgLPGwaoLUC9GrZEt8Pzfw77ipInYU_GcIs8bvN0oGlh7U4srIS4gmmV8lDMH-t8mXkN-X_9fSSmJuTQMDGxxxxs6_n5wC-Pg3qlUhyuF/s1600/Screenshot_130.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Copy Paste pada Excel agar hasilnya sama" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwd5sEr7e6oZDU4WOSsUNLLKKg9Pwq9gh8ObOgLPGwaoLUC9GrZEt8Pzfw77ipInYU_GcIs8bvN0oGlh7U4srIS4gmmV8lDMH-t8mXkN-X_9fSSmJuTQMDGxxxxs6_n5wC-Pg3qlUhyuF/s320/Screenshot_130.png" title="Cara Copy Paste pada Excel agar hasilnya sama" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Perhatikan gambar diatas maka terlihat hasil yang berbeda, dimana pada kolom kedua huruf akan hilang sebagian karena kolom tersebut ukurannya sama.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Agar hasil copy paste tersebut bisa sama maka perlu kita menyesuaikan pada paste optionnya yaitu dengan cara mengklik icon yang tampil pada saat kita mempaste dan kita dapat melihat icon tersebut dibagian kanan bawah kolom yang dipaste.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cara merubah paste optionnya yaitu, klik icon tersebut maka akan tampil kotak yang berisi radio button dimana secara default radio button tersebut berada pada posisi "Use Destination Theme" agar hasil copy paste sama maka kita rubah dengan mengklik "Keep Source Column Widths" lihat gambar dibawah ini;</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UtaaLv2A0DrD_3DaGn6Tx6LiddwCNurp0d5DLtTZysc-NwFAexFSUO3n-H23VPOmXcEHqpvLokaEh-mBjXgkiK3rJKmZPr9LDS1R1muBeAp7O_AKY4I2n67WpKJ-ecPsFJ1NE2B1alCj/s1600/paste+options.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Copy Paste pada Excel" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UtaaLv2A0DrD_3DaGn6Tx6LiddwCNurp0d5DLtTZysc-NwFAexFSUO3n-H23VPOmXcEHqpvLokaEh-mBjXgkiK3rJKmZPr9LDS1R1muBeAp7O_AKY4I2n67WpKJ-ecPsFJ1NE2B1alCj/s1600/paste+options.png" title="Copy Paste pada Excel" /></a></div>
<div style="text-align: justify;">
Dengan cara tersebut maka copy paste pada excel akan menghasilkan hasil yang sama sehingga kita tidak usah lagi merubah lebar kolom yang berbeda.</div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com38tag:blogger.com,1999:blog-679796549016769771.post-14676240013235709592012-10-08T12:18:00.000+07:002012-10-08T16:31:01.614+07:00Artikel hilang dari penulusan google<div style="text-align: justify;">
<b>Artikel hilang dari penulusan google</b>, ini adalah pengalaman yang terjadi pada blog ini dimana pada saat membuat postingan ini blog ini benar-benar tidak ada satupun artikel yang tampil di penelusuran google. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Beberapa minggu yang lalu pengalaman ini pernah terjadi namun yang terjadi hanya pada beberapa artikel saja dan pada saat ini semua artikel hilang entah kenapa. ini dapat dilihat dari jumlah pengunjung yang sangat menurun sekali, untuk sekarang ini pengunjung blog ini hanya 15% dari sebelumnya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hal ini terjadi setelah saya merubah sebuah artikel dengan menambahkan beberapa gambar dan pada ganbar tersebut saya menggunakan alt kata kunci serta menambahkan link artikelnya pada gambar tersebut, nah setelah beberapa saat setelah itu terjadi masalah ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
mungkin saja terjadi hilangnya seluruh artikel dari <a href="http://google.com/">google.com</a> dan <a href="http://google.co.id/">google.co.id</a> karena hal saya lakukan dianggap spam namun yang aneh ko semua artikel jadi imbasnya. apakah ada hal lain yang saya lakukan yang membuat ini terjadi? saya jadi bingung dibuatnya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Apakah ini terjadi karena kasus beberapa waktu lalu yang ada artikel hilang karena masuk google sandbox? sehingga ini terjadi. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Buat sobat yang pernah mengalami hal serupa mungkin bisa memberikan masukan atau idenya buat saya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Buat <a href="http://google.com/">google.com</a> atau <a href="http://google.co.id/">google.co.id</a> mungkin sudi kiranya dapat mengembalikan blog ini seperti semula, kami ga bermaksud untuk melakukan spam atau hal lain yang melanggar aturan itu semata dari ketidak tahuan kami semata.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com22tag:blogger.com,1999:blog-679796549016769771.post-27954562173117066782012-09-30T06:08:00.000+07:002012-10-09T18:45:59.732+07:00Menyusun Struktur Heading Tag H1 sampai H6<div style="text-align: justify;">
<a href="http://azzam10.blogspot.com/2012/09/struktur-heading-tag-h1-h2-h3-sampai-h6.html"><b>Struktur Heading Tag H1 sampai H6</b></a>,
sampai dimanakah sobat memperhatikan hal itu? atau selama ini sobat
tidak memperdulikannya? ingat sobat Heading tag sangatlah perlu kita
atur strukturnya terutama tag H1 dan H2, Khususnya lagi tag H1 ini
sangat perlu sekali dalam blog kita karena tag H1 inilah yang akan
dirayapi paling pertama oleh mesin pencari, seandainya blog kita
struktur headingnya tak beraturan maka itu sangat mempengaruhi posisi
artikel kita di mesin pencari.</div>
<div style="text-align: justify;">
Sebelum berlanjut pembahasannya alangkah lebih baiknya kalau sobat coba cek Judul dan H1 blognya <a href="http://www.givegoodweb.com/tools/page-check/" rel="nofollow" target="_blank">DISINI</a> sobat harus mengecek halaman utama dan halaman salah satu postingan. <b><br /></b></div>
<div style="text-align: justify;">
Selanjutnya untuk melihat struktur H1 sampai H6 apakah sudah lengkap atau belum <a href="http://www.seoanalyser.net/" rel="nofollow" target="_blank">DISINI</a> bila mengalami kesulitan cara penggunaannya baca di <a href="http://azzam10.blogspot.com/2012/04/optimalkan-blog-dengan-bantuan.html" title="Optimalkan blog dengan SEO Analyser">Optimalkan blog dengan SEO Analyser</a>.</div>
<div style="text-align: justify;">
Bagaimana sobat apakah blognya sudah mempunyai struktur heading tag H1 sampai H6? </div>
<div style="text-align: justify;">
Bila
blog sobat sudah lengkap strukturnya berarti blog sobat sudah SEO
friendly. namun bila belum usahakan untuk memperbaiki struktur tersebut.</div>
<div style="text-align: justify;">
Perlu
diperhatikan tag H1 adalah yang pertama dirayapi mesin pencari baik itu
di halaman utama atau halaman postingan, namun kita tau default
template blogspot hanya menggunakan Judul blog untuk H1 dan Judul
postingan H3 sementara judul di sidebar adalah H2, dengan keadaan
demikian maka mesin pencari merayapi judul blog terlebih dahulu untuk
semua halaman. Nah agar maksimal dalam perayapannya terhadap Judul
postingan untuk setiap halamannya maka perlu kita siasati dengan
menggunakan Heading tag dinamis dimana H1 akan mengikuti halaman artinya
bila pada halaman Utama H1 adalah Judul blog dan judul posting menjadi
H2 dan apabila berada di halaman posting maka H1 adalah judul posting
dan H2 judul blog. untuk membuat tag heading dinamis tersebut baca di <a href="http://azzam10.blogspot.com/2012/06/cara-agar-template-seo-friendly.html" title="Merubah Tag H1 Agar Template SEO Friendly">Merubah Tag H1 Agar Template SEO Friendly.</a></div>
<div style="text-align: justify;">
Buat
judul sidebar headingnya sobat ganti jadi H3, buat tanggal H4 buat
komentar H5 atau H6. dan apabila kita sedang memposting artikel usahakan
menggunakan Subheading atau minor heading. Nah bila sobat sudah
menyesuaikan Tag H1 sampai H6 cek kembali menggunakan 2 Tool diatas,
bila strukturnya masih juga bermasalah sobat mungkin bisa memperhatikan
jumlah postingan yang ada di homepage maksimalnya 6 post.</div>
<div style="text-align: justify;">
<span itemprop="itemreviewed"><span itemprop="description">
Membuat struktur H1 sampai H6 ini terkadang banyak kendala bahkan buat
yang memposting masalah inipun terkadang struktur tersebut tidak komplit
semuanya. Namun yang sangat perlu diperhatikan paling utama adalah
heading tag H1, dan perlu diperhatikan pula tag H1 ini jangan sampai
melebihi dari satu karena ini akan menjadi masalah besar pada mesin
pencari. </span></span></div>
<div style="text-align: justify;">
<span itemprop="itemreviewed"><span itemprop="description">Struktur
Heading Tag H1 sampai H6 blog inipun terkadang bermaslah, boleh sobat
cek sendiri untuk melihat struktur blog ini. atau kunjungi <a href="http://www.seoanalyser.net/view/azzam10.blogspot.com" rel="nofollow" target="_blank">DISINI</a></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com10tag:blogger.com,1999:blog-679796549016769771.post-5981976573758250922012-09-29T14:00:00.000+07:002012-10-09T18:51:15.296+07:00Artikel Masuk Google sandbox, ini pengalaman berharga<div style="text-align: justify;">
<b>Artikel Masuk Google sandbox, ini pengalaman berharga</b> buat saya yang selama ini tidak memperhatikan hal ini. Selama ini tak pernah terpikirkan untuk mengetahui hal ini namun setelah merasa heran dengan sebuah artikel yang baru 2 hari diposting yang berjudul <a href="http://azzam10.blogspot.com/2012/09/deprimaterra-kawasan-industri-pergudangan-eksklusif-dengan-penghijauan.html" title="Deprimaterra.com kawasan industri dan pergudangan eksklusif dengan penghijauan">Deprimaterra.com kawasan industri dan pergudangan eksklusif dengan penghijauan </a>yang awalnya ada di serp walau dalam halaman 3 an namun hari ini lenyap entah kemana. setelah saya mencoba cek melalui ceker google sandbox eh ternyata artikel tersebut masuk google sandbox, atas kepenasaran tersebut selanjutnya saya cek artikel yang lain <a href="http://azzam10.blogspot.com/2012/09/membuat-efek-accordion-sidebar-dengan-jquery.html" title="Membuat Efek Accordion Sidebar dengan JQuery">Membuat Efek Accordion Sidebar dengan JQuery</a> dan <a href="http://azzam10.blogspot.com/2012/09/cara-menyembunyikan-scroll-bar-dengan-css.html" title="Cara Menyembunyikan Scroll Bar Dengan CSS">Cara Menyembunyikan Scroll Bar Dengan CSS </a>eh ternyata masuk juga. </div>
<div style="text-align: justify;">
Setelah mengecek di serp <a href="http://google.co.id/">Google.co.id</a> dan <a href="http://google.com/">google.com</a> memang tidak ditemukan selanjutnya saya mencoba meneliti artikel-artikel tersebut dan ternyata kemungkinan besar kesalahan saya ada pada peletakan kata kunci yang terlalu banyak, saya terlalu banyak memberi tanda huruf tebal pada pada postingan tersebut dan hal ini saya lakukan beberapa hari kebelakang dan terbukti artikel yang terkena sandbox adalah artikel baru, namun mungkin juga artikel lama ada yang kena tapi saya tidak sempat untuk mengeceknya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Entah apa yang harus saya lakukan untuk mengembalikan artikel yang dipenjara tersebut, namun artikel-artikel tersebut sudah saya edit dengan menormalkan huruf dan mudah-mudahan saja itu yang menjadi penyebabnya dan artikel tersebut bisa keluar dari penjara google.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mungkin ada diantara sobat yang sudah berpengalaman mengatasi masalah ini bisa membantu saya menghadapinya. <span itemprop="itemreviewed"><span itemprop="description"></span></span> <span itemprop="itemreviewed"><span itemprop="description"></span></span> <span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com8tag:blogger.com,1999:blog-679796549016769771.post-19642135286219456692012-09-28T13:39:00.001+07:002012-09-28T14:01:17.165+07:00Pengalaman Peninjauan Daftar Adsense<div style="text-align: justify;">
<b>Pengalaman Peninjauan Daftar Adsense</b>, saat ini saya akan berbagi pengalaman tentang daftar iklan adsense yang saya alami, setelah saya daftar yang kesekian kalinya pada daftar adsense kali ini saya lolos pada tahap pertama dan mendapat Email berikut screenshotnya;</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhudpU5UXnd3WLrEnEiSnwVgFvTp-9eRO2yl4Azuh5bpiIBM-GdUPm8v4eO6o2tYlOngpUgUMOyeQr81WnXbzd8rHoJ9bSP4zaspjuvinUwxYJF1P77hUiirQhM4UEkzOMAsjnBw6lrTuFL/s1600/Screenshot_115.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Pengalaman Peninjauan Daftar Adsense" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhudpU5UXnd3WLrEnEiSnwVgFvTp-9eRO2yl4Azuh5bpiIBM-GdUPm8v4eO6o2tYlOngpUgUMOyeQr81WnXbzd8rHoJ9bSP4zaspjuvinUwxYJF1P77hUiirQhM4UEkzOMAsjnBw6lrTuFL/s320/Screenshot_115.png" title="Pengalaman Peninjauan Daftar Adsense" width="320" /></a></div>
Setelah saya mendapatkan Email tersebut, saya langsung saja mengunjungi <a href="http://www.google.com/adsense" target="_blank">http://www.google.com/adsense</a><br />
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
sebagaimana yang disarankan di email tersebut dan disitu saya mulai mengambil script iklan dan saya pasang diblog, itu merupakan syarat untuk peninjauan kedua. karena iklan akan tampil setelah peninjauan kedua lolos saya hanya bisa berharap untuk lolosnya peninjauan kedua. Namun selang satu hari saya mendapatkan email lanjutan atau email peninjauan tahap kedua dengan hasil seperti screenshot berikut;</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFDIBrm_DIrZz5KD8DbNWKY-syHky4MYX4_ji6kFB0BTVFmTe9HDtYkdfZQ5n_xWQ9IKMVeppPQcem8rvO4mjLcq7agkyFe_rxxAm5op3mzjeWspxnxd1mTJ_dVmguYYT_yhrXnStJzLL/s1600/Screenshot_116.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Pengalaman Peninjauan Daftar Adsense" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFDIBrm_DIrZz5KD8DbNWKY-syHky4MYX4_ji6kFB0BTVFmTe9HDtYkdfZQ5n_xWQ9IKMVeppPQcem8rvO4mjLcq7agkyFe_rxxAm5op3mzjeWspxnxd1mTJ_dVmguYYT_yhrXnStJzLL/s320/Screenshot_116.png" title="Pengalaman Peninjauan Daftar Adsense" width="320" /></a></div>
<div style="text-align: justify;">
Email tersebut sangat mengejutkan saya, karena peninjauan kedua adsense ternyata ditolak dengan alasan masalah materi berhak cipta.</div>
<div style="text-align: justify;">
Dengan Ditolaknya pada peninjauan kedua inilah saya jadikan suatu pengalaman yang sangat berharga mengenai daftar adsense. Namun dengan penolakan tersebut saya tidak patah arang bahkan menjadikan motivasi saya untuk memperbaiki konten blog saya ini agar lebih baik dan berkualitas. </div>
<div style="text-align: justify;">
Setelah termenung beberapa saat memikirkan apa yang harus diperbuat akhirnya saya memutuskan untuk memeriksa semua konten blog saya sehingga akhirnya saya menemukan diantaranya artikel yang memuat download-an software gratis dengan menggunakan hostingan ziddu. dengan berat hati demi kebaikan blog ini maka semua artikel itu saya hapus saja, kenapa saya berat hati karena ada satu artikel yang termasuk popular pos pertama dan artikel itulah yang paling dikunjungi dari mesin pencari.</div>
<div style="text-align: justify;">
Setelah beberapa artikel yang memuat download-an saya hapus, kemudian saya mendaftar lagi karena itu yang dianjurkan dengan harapan saya kesalahan pada blog ini bisa benar-benar tidak ada dan dapat diterima sepenuhnya oleh adsense. yang saya harapkan blog ini bisa mematuhi aturan an terhindar dari hal yang dilarang sebagaimana tercantum pada <a href="https://support.google.com/adsense/bin/answer.py?answer=1348688#Copyrighted_material" rel="nofollow" target="_blank">https://support.google.com/<wbr></wbr>adsense/bin/answer.py?answer=<wbr></wbr>1348688#Copyrighted_material.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Itulah kisah saya tentang Pengalaman Peninjauan Daftar Adsense. dengan pengalaman tersebut maka saya sarankan buat semua sahabat yang baru menjadi blogger dan menginginkan menjadi penayang iklan adsense usahakan menghindari semua hal yang dilarang. apalagi yang mempunyai harapan besar menjadikan blog/web nya menjadi lahan mencari sedikit rupiah karena adsense masih yang terbaik. tidak hanya itu apapun itu yang namanya hal yang dilarang tetap saja tidak baik jadi meskipun kita tidak diterima adsense jauhi semua itu. untuk lebih lengkapnya hal yang dilarang lihat di <a href="https://support.google.com/adsense/bin/answer.py?hl=id&answer=1348688&topic=1271507&ctx=topic" target="_blank">Konten terlarang</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Diakhir kalimat saya ucapkan banyak terima kasih kepada pihak <a href="http://www.google.com/adsense" target="_blank">Adsense</a> yang telah memberikan kesempatan untuk mendaftar kesekian kalinya, meskipun selalu ditolak namun saya akan tetap berusaha karena dengan penolakan tersebut itu menjadi suatu dorongan untuk memperbaiki dan menjadikan bahan untuk introspeksi. Saya akan berusaha semaksimal mungkin memperbaiki semua kekurangan dan kesalahan dengan harapan pihak Adsense bisa membukakan pintu untuk menerima Saya sebagai publishernya. Artikel ini saya buat sebagai bukti nyata kesungguhan saya untuk menjadikan blog ini lebih baik sekaligus sebagai dukungan atas pendaftaran adsense yang sudah saya lakukan dengan harapan pihak adsense tau bahwa kesalahan masalah konten berhak cipta sudah saya perbaiki.</div>
<br />
<div style="text-align: justify;">
<br /></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com10tag:blogger.com,1999:blog-679796549016769771.post-5711900188050903772012-09-28T01:43:00.001+07:002012-10-08T20:36:33.588+07:00Cara Membuat Tombol Show/hide Area Komentar<div style="text-align: justify;">
<a href="http://azzam10.blogspot.com/2012/09/cara-membuat-tombol-show-hide-area-komentar.html"><b>Cara Membuat Tombol Show/hide Area Komentar</b></a> sebenarnya sudah saya pakai pada blog ini namun baru kali ini saya share buat sobat semua, jadi buat lihat hasil sobat bisa lihat pada kotak komentar blog ini. pada tutorial ini saya menggunakan hosting kode javascript blog saya yang lain jadi bila sobat mau menggunakannya langsung tanpa menghosting sendiripun akan aman karena masih dalam pengawasan saya, perlu sobat ketahui kenapa hal ini saya jelaskan? karena bila kita menggunakan kode yang dihosting oleh penyedia tutorial itu ga ada jaminan sepenuhnya yang tentunya dengan berbagai alasan yang diantaranya; bila yang menggunakan kode tersebut dalam jumlah banyak secara bersamaan maka ada kemungkinan akan terjadinya overload sehingga mungkin akan mengganggu kinerja kode tersebut atau bisa juga situs hostingan tersebut ditutup karena berbagai alasan atau mungkin file kode tersebut dihapus pemiliknya, nah dengan berbagai alasan diatas alangkah lebih baiknya bila sobat menghosting sendiri kode yang perlu di hosting misalnya kode javascript namun buat yang menggunakan hostingan dari tutorial blog ini saya jamin sehingga bila tidak menghosting sendiripun ga apa-apa.</div>
<div style="text-align: justify;">
Ok, kita langsung saja ya pada pokok bahasan yaitu <b>Cara Membuat Tombol Show/hide Area Komentar. </b><br />
<br />
saya tidak akan menjelaskan dari awal login karena mungkin sobat sudah pada paham bagaimana caranya kalau mau mengedit template.</div>
<div style="text-align: justify;">
Sobat letakan kode CSS berikut tepat diatas kode <b>]]></b:skin></b></div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
a.bukacoment {<br />
display:block;<br />
clear:both;<br />
width:auto;<br />
padding:0px 0px;<br />
text-align:center;<br />
font-size:14px;<br />
font-weight:bold;<br />
line-height:30px;<br />
background-color:#000;<br />
color:white;<br />
text-decoration:none;<br />
margin:0px 0px;<br />
position:relative;<br />
}<br />
a.bukacoment em {<br />
width:0px;<br />
height:0px;<br />
display:block;<br />
position:absolute;<br />
top:10px;<br />
right:10px;<br />
border:6px solid transparent;<br />
border-top-color:white;<br />
}<br />
a.bukacoment.active {background-color:#900;}<br />
a.bukacoment.active em {<br />
top:6px;<br />
border-color:transparent transparent white transparent;<br />
}<br />
div.btsbawah {<br />
height:0px;<br />
border-bottom:4px solid #ff0000;<br />
}<br />
div.jqcoment {<br />
padding:0px;<br />
margin:0px 0px !important;<br />
} <b></b></blockquote>
Kemudian sobat letakan kode Javascript berikut tepat diatas kode </head><br />
<div style="text-align: left;">
<blockquote class="tr_bq">
<u><span style="background-color: #eeeeee; color: black;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/></span></u><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var panelSelector = '<span style="color: orange;">#comments</span>',<br />
openPanelText = "<span style="color: orange;">Poskan Komentar</span>",<br />
closePanelText = "<span style="color: orange;">Tutup Komentar</span>",<br />
slideDownPanelSpeed = <span style="color: orange;">600</span>,<br />
slideUpPanelSpeed = <span style="color: orange;">400</span>;<br />
//]]><br />
</script><script src='http://elina.googlecode.com/files/Buka-coment.js' type='text/javascript'/></blockquote>
Perhatikan kode yang diberi garis bawah, itu library JQuery bila template sobat sudah ada kode tersebut maka kode bergaris bawah tersebut hapus saja.<br />
<span style="color: orange;">#comments </span>ini adalah ID area komentar bila ID area komentar sobat berbeda silahkan ganti dengan kode ID area komentar sobat. <br />
<span style="color: orange;">Poskan Komentar </span>ini kalimat yang tampil sebelum diklik, sobat bisa ganti sesuai keinginan<br />
<span style="color: orange;">Tutup Komentar</span> ini kalimat yang tampil setelah diklik, sobat bisa sesuaikan.<span style="color: orange;"><br /></span><br />
<span style="color: orange;">600</span> dan <span style="color: #f6b26b;"><span style="color: orange;">400</span> </span>adalah kecepatan membuka dan menutup kotak komentar.<br />
Sebagai tambahan bila pada template sobat menggunakan Library Jquery versi dibawah 1.7.2 maka sobat ganti saja Jquery tersebut dengan JQuery 1.7.2.</div>
</div>
<div style="text-align: justify;">
</div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com8tag:blogger.com,1999:blog-679796549016769771.post-25736479865668258362012-09-27T14:56:00.002+07:002012-09-27T14:56:44.180+07:00Cara Membuat Box show/hide untuk widget<div style="text-align: justify;">
<a href="http://azzam10.blogspot.com/2012/09/cara-membuat-box-show-hide-untuk-widget.html"><b>Cara Membuat Box show/hide untuk widget</b></a> ini sebenarnya cara yang biasa digunakan untuk memasang Buku tamu, namun pada kesempatan ini saya akan berbagi cara bagaimana untuk digunakan pada widget lain seperti untuk widget visitor dari feedjit, Follower, facebook like atau juga buat widget lain. lihat contoh disudut kanan bawah blog ini pada chatbox, follower dan visitor.</div>
<div style="text-align: justify;">
Langsung saja ya pada langkah pembuatannya:</div>
<h3 style="text-align: justify;">
Langkah Pertama;</h3>
<div style="text-align: justify;">
Pada langkah ini kita akan membuat box atau kotak untuk menyimpan widget, script dibawah ini adalah script yang biasa digunakan untuk membuat buku tamu <b>show/hide</b>. sobat perhatikan kode dibawah ini yang berwarna merah. kode tersebut adalah sebagai kode ID widget jadi apabila sobat mau membuat kotak ini lebih dari satu maka kode tersebut harus diganti dengan ID baru, contoh untuk ID widget dibawah ini <span style="color: red;">gb</span> maka seluruh kode yang berwarna merah harus <span style="color: red;">gb</span>. apabila mau membuat kotak widget baru lagi maka sobat copy paste kode yang ada dan ganti IDnya dengan yang baru misal jadi <span style="color: red;">kt</span>, <span style="color: red;">gt</span> atau apa saja yang gampang. jangan lupa untuk huruf berwarna merah dengan huruf besar jangan sampai salah. untuk kode CSSnya sobat sesuaikan saja.</div>
<blockquote class="tr_bq">
<style type="text/css"><br />#<span style="color: red;">gb</span>{<br />position:fixed;<br />right:133px;<br />z-index:+500;<br />}<br />* html #<span style="color: red;">gb</span>{position:relative;}<br />.<span style="color: red;">gb</span>tab{<br />height:100px;<br />margin:0;<br />width:30px;<br />float:left;<br />cursor:pointer;<br />background:url();<br />}<br />.<span style="color: red;">gb</span>content{<br />margin-top:140px;<br />width:260px;<br />float:left;<br />border:1px solid #404040;<br />background:#333;<br />padding:0px;<br />}<br /></style><br /><script type="text/javascript"><br />function showHide<span style="color: red;">GB</span>(){<br />var <span style="color: red;">gb</span> = document.getElementById("<span style="color: red;">gb</span>");<br />var w = <span style="color: red;">gb</span>.offsetWidth;<br /><span style="color: red;">gb</span>.opened ? move<span style="color: red;">GB</span>(0, -600-w) : move<span style="color: red;">GB</span>(0-w, 0);<br /><span style="color: red;">gb</span>.opened = !<span style="color: red;">gb</span>.opened;<br />}<br />function move<span style="color: red;">GB</span>(x0, xf){<br />var <span style="color: red;">gb</span> = document.getElementById("<span style="color: red;">gb</span>");<br />var dx = Math.abs(x0-xf) > 35 ? 25 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br /><span style="color: red;">gb</span>.style.top = x.toString() + "px";<br />if(x0!=xf){setTimeout("move<span style="color: red;">GB</span>("+x+", "+xf+")", 1);}<br />}<br /></script><br /><div id="<span style="color: red;">gb</span>"><br /><div class="<span style="color: red;">gb</span>tab" onclick="showHide<span style="color: red;">GB</span>()"> </div><br /><div class="<span style="color: red;">gb</span>content"><br /><div align="center"><br /><div style="background:#333;height:415px;width:232px;<br />overflow:hidden;padding-top:10px;"><br /><span style="color: lime;">-------Kode widget disini--------</span><br /></div><br /></div><br /><div align="center"><a href="javascript:void(0);" onclick="showHide<span style="color: red;">GB</span>()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3woE_aUbFM8hyRz2HgqSqXgT9Rey3_oMkDFppOepKU2jhmVasc8WTzWbZwRek_hBO66uSTFmbERT7rBvyeG2t51IKjzUeti9_ZRhSV6r6J7O7w6L4f-qEGTeaLi2-qoQWfDcY0-w0hda/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div><br /></div><br /></div><br /><script type="text/javascript"><br />var gb = document.getElementById("<span style="color: red;">gb</span>");<br /><span style="color: red;">gb</span>.style.top = (-600-<span style="color: red;">gb</span>.offsetWidth).toString() + "px";<br /></script></blockquote>
itulah kode untuk kotak/box widget.<br />
<h3>
Langkah Kedua; </h3>
<div style="text-align: justify;">
Selanjutnya membuat tombol untuk menavigasi box/kotak widget, dimana tombol tersebut bisa sobat letakan dimana saja sesuai dengan keinginan tinggal sobat mengatur kode CSS nya.</div>
<blockquote class="tr_bq">
<div style='position:fixed;<span style="color: yellow;">bottom</span>:0;<span style="color: yellow;">right</span>:0;cursor:pointer;background:#333;border-top:1px solid #444;border-bottom:1px solid #222;font-weight:bold;font-size:14px;padding:3px 16px;'><a href="javascript:void(0);"onclick="showHide<span style="color: red;">GB</span>()"/> <br /><span style="color: lime;">Judul Widget disini</span><br/></a></div></blockquote>
kode yang berwarna merah samakan dengan kode berwarna merah langkah pertama.<br />
kode warna kuning untuk posisi tombol. <br />
<h3>
Langkah ketiga;</h3>
<div style="text-align: justify;">
Untuk langkah ketiga ini sobat bisa gunakan bila sobat mau membuat kotak widget lebih dari satu, caranya sobat buat beberapa kotak widget dengan beda ID (kode berwarna merah) kemudian letakan dalam satu gadget yang ada pada blogger, letakan semua kode menjadi satu dalam tambah gadget HTML/javascript. selanjutnya untuk kode tombol (langkah kedua) sobat hapus kode position:fixed;<span style="color: yellow;">bottom</span>:0;<span style="color: yellow;">right</span>:0; dan ganti dengan tabel seperti dibawah ini:</div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<table style='position: fixed; <span style="color: red;">bottom</span>: 0px; <span style="color: red;">left</span>: 0px;'></div>
<div style="text-align: left;">
<tr><td></div>
<div style="color: lime; text-align: left;">
----kode langkah 2 ke 1 -----</div>
<div style="color: lime; text-align: left;">
----kode langkah 2 ke 2 -----</div>
<div style="text-align: left;">
<span style="color: lime;">----</span><span style="color: lime;">kode langkah 2 ke 3 </span><span style="color: lime;">----- </span><br />
</td></tr></div>
</table></blockquote>
untuk lebih jelas cara peletakan baca <a href="http://azzam10.blogspot.com/2012/09/cara-meletakan-widget-di-sudut-blog.html" target="_blank" title="Cara Meletakan Widget di Sudut Blog">Cara Meletakan Widget di Sudut Blog</a><br />
Biar sobat gak bingung karena tutorial ini yang berbelit-belit sobat bisa lihat saja hasil akhir tutorial ini pada blog ini yaitu widget yang berada disamping kanan bawah Chatbox, follower dan visitor. <span itemprop="itemreviewed"><span itemprop="description"></span></span> <br />
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com10tag:blogger.com,1999:blog-679796549016769771.post-27913394458289294722012-09-27T10:46:00.000+07:002012-10-09T18:54:35.938+07:00Cara Meletakan Widget di Sudut Blog<div style="text-align: justify;">
<a href="http://azzam10.blogspot.com/2012/09/cara-meletakan-widget-di-sudut-blog.html" target=""><b>Cara Meletakan Widget di Sudut Blog</b></a> ini merupakan salah satu trik untuk meringankan loading dan sekaligus memperindah tampilan blog. kenapa saya katakan untuk meringankan loading? karena dengan cara ini kita bisa menyimpan kode widget tersebut berada dalam akhir tag body tepatnya diatas kode </body>, sehingga pemanggilan widget tersebut akan dilakukan setelah keseluruhan isi dalam blog tersebut dimuat. namun bila ingin dimuat secara normal bisa kita letakan didalam Tambah gadget HTML/javascript juga. widget ini akan selalu nampak di sudut blog sehingga diusahakan meletakannya pada ruang yang tidak akan mengganggu isi blog.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut kode untuk <b>Cara Meletakan Widget di Sudut Blog</b>;</div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<div style="position: <span style="color: yellow;">fixed</span>; <span style="color: red;">bottom</span>:0; <span style="color: red;">right</span>: 0;"></div>
<div style="text-align: justify;">
------- <span style="color: lime;">Kode widget disini</span>--------------------</div>
<div style="text-align: justify;">
</div> </div>
</blockquote>
Penjelasan :<br />
Sobat perhatikan kode yang berwarna kuning, itu merupakan kode posisi widget yang akan selalu kelihatan atau tidak akan mengikuti scroll.<br />
Perhatikan kode warna merah, itu letak widget dan sobat bisa menggantinya dengan kode berikut;<br />
<ul>
<li><span style="color: red;">bottom</span>:0; <span style="color: red;">right</span>:0 berarti ada di Sudut bawah sebelah kanan</li>
<li><span style="color: red;">bottom</span>:0; <span style="color: red;">left</span>:0 berarti ada di Sudut bawah sebelah kiri</li>
<li><span style="color: red;">top</span>:0; <span style="color: red;">right</span>:0 berarti ada di Sudut atas sebelah kanan </li>
<li><span style="color: red;">top</span>:0; <span style="color: red;">left</span>:0 berarti ada di Sudut atas sebelah kiri</li>
</ul>
Sebagai contoh untuk meletakan widget Histats disudut bawah sebelah kiri :<br />
<blockquote class="tr_bq">
<div style="position: <span style="color: yellow;">fixed</span>; <span style="color: red;">bottom</span>:0; <span style="color: red;">left</span>: 0;"> <br />
<div style="color: lime;">
<script type='text/javascript'>document.write(unescape(&quot;%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E&quot;));</script><br />
<a href='/' target='_blank' title='counter'><script type='text/javascript'>try{Histats.start(1,1924664,4,604,110,55,&quot;00011111&quot;);Histats.track_hits()}catch(err){};</script></a></div>
</div> </blockquote>
<div style="text-align: justify;">
Untuk penyimpanan kode ini bisa sobat letakan pada tambah gadget HTML/javascript pada halaman tata letak atau untuk memaksimalkan loading sobat bisa letakan kode tersebut tepat diatas kode </body>, namun untuk peletakan di atas kode </body> beberapa widget harus di parse terlebih dahulu. buat parse kode silahkan <b><a href="http://azzam10.blogspot.com/p/kumpulan-tool.html" target="_blank">DISINI</a></b></div>
<div style="text-align: justify;">
Bila sobat tidak mau repot dengan cara pemasangan diatas kode </body> maka sobat usahakan saja peletakan kode pada tambah gadget HTML/javascript berada paling bawah sekali atau pada bagian footer. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tips lain Cara Meletakan Widget di Sudut Blog, untuk pemasangan widget lebih dari satu maka saya sarankan menggunakan kode tabel sehingga hasil yang diharapkan akan maksimal dan sekaligus juga kita tidak usah mengatus posisi berulang. contoh:<br />
<br />
Untuk menderetkan dari atas kebawah: </div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<table style='position: fixed; <span style="color: red;">bottom</span>: 0px; <span style="color: red;">left</span>: 0px;'></div>
<div style="text-align: left;">
<tr><td></div>
<div style="color: lime; text-align: left;">
----Kode widget 1 disini-----</div>
<div style="color: lime; text-align: left;">
----Kode widget 2 disini-----</div>
<div style="text-align: left;">
<span style="color: lime;">----Kode widget 3 disini----- </span><br />
</td></tr></div>
</table></blockquote>
<br />
Untuk menderetkan dari kiri ke kanan: <br />
<blockquote class="tr_bq">
<table style='position: fixed; <span style="color: red;">bottom</span>: 0px;<span style="color: red;"> left</span>: 0px;'><br />
<tr><td><br />
<span style="color: lime;">----Kode widget 1 disini-----</span><br />
</td></tr><br />
<tr><td><br />
<span style="color: lime;">----Kode widget 2 disini-----</span><br />
</td></tr><br />
<tr><td><br />
<span style="color: lime;">----Kode widget 3 disini-----</span><br />
</td></tr><br />
</table></blockquote>
Demikian <b>cara Meletakan Widget di Sudut Blog</b>, buat sobat yang mau mencoba semoga berhasil. sobat bisa meletakan widget apa saja dengan cara ini, sobat mau meletakan tulisan atau gambar juga bisa.atau sobat mau membuat widget dengan show/hide baca di <a href="http://azzam10.blogspot.com/2012/09/cara-membuat-box-show-hide-untuk-widget.html" title="Cara Membuat Box show/hide untuk widget">Cara Membuat Box show/hide untuk widget</a><span itemprop="itemreviewed"><span itemprop="description"></span></span>Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com8tag:blogger.com,1999:blog-679796549016769771.post-75409468132582602582012-09-18T19:21:00.000+07:002012-09-22T14:41:34.386+07:00Cara Membuat Sidebar Auto Slide Melayang<div style="text-align: justify;">
<a href="http://azzam10.blogspot.com/2012/09/cara-membuat-sidebar-auto-slide-melayang.html" target="_blank"><b>Cara Membuat Sidebar Auto Slide Melayang</b></a>, untuk memaksimalkan tampilan sidebar sobat cara ini mungkin bisa sobat coba. dengan membuat sidebar auto slide maka sidebar tersebut akan selalu mengikuti scroll sehingga akan selalu nampak. sobat bisa lihat contohnya di blog ini, namun mungkin bila sidebarnya terlalu banyak widget cara ini kurang baik juga karena widget yang melebihi layar computer/laptop akan tidak bisa dilihat, nah dengan demikian maka sobat perlu memasang terlebih dahulu tutorial <a href="http://azzam10.blogspot.com/2012/09/membuat-efek-accordion-sidebar-dengan-jquery.html" title="Membuat Efek Accordion Sidebar dengan JQuery">Membuat Efek Accordion Sidebar dengan JQuery</a> agar tampilan jadi maksimal. </div>
<div style="text-align: justify;">
Ok, kita lanjut saja pada tutorial <a href="http://azzam10.blogspot.com/2012/09/cara-membuat-sidebar-auto-slide-melayang.html" target="_blank">Cara Membuat Sidebar Auto Slide Melayang</a>, namun sebelum berlanjut ke penerapannya sobat perlu diperhatikan dulu templatenya khususnya mengenai ID sidebarnya, seperti pada tutorial ini saya menggunakan ID sidebar "<span style="color: red;">#rsidebar-wrapper</span>" nah buat template sobat sesuaikan saja, apabila sobat kesulitan mencari ID sidebar sobat bisa menggunakan ad-on Firebug bagi pengguna mozilla.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut langkah membuat sidebar Auto Slide Melayang:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Seperti biasa saja pada edit HTML template sobat cari kode </head> kemudian letakan kode dibawah ini tepat diatas kode tersebut.</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<u><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/></u><br />
<script type='text/javascript'><br />
$(function(){var offset=$(&quot;<span style="color: red;">#rsidebar-wrapper</span>&quot;).offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;<span style="color: red;">#rsidebar-wrapper</span>&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;<span style="color: red;">#rsidebar-wrapper</span>&quot;).stop().animate({marginTop:0})}})});<br />
</script> </blockquote>
Bila template sobat telah terpasang library JQuery seperti kode yang digaris bawah maka sobat hapus saja kode yang digaris bawah tersebut.<br />
Kemudian perhatikan kode yang berwarna merah <span style="color: red;">#rsidebar-wrapper</span> adalah kode ID sidebar, sobat sesuaikan dengan ID sidebar sobat.<br />
Bila sudah selesai simpan template sobat dan lihat hasilnya.<br />
Sekali lagi keberhasilan <b>membuat sidebar Auto Slide Melayang</b> ada pada kode ID sidebar, untuk itu jangan salah memasang IDnya.</div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com19tag:blogger.com,1999:blog-679796549016769771.post-13184765086078916582012-09-17T19:49:00.000+07:002012-10-08T20:48:19.498+07:00Membuat Efek Accordion Sidebar dengan JQuery<div style="text-align: justify;">
<b>Membuat Efek Accordion sidebar dengan JQuery</b>, buat sobat yang suka utak-atik template mungkin cara ini pantas untuk dicoba, selain dapat memperkecil tampilan sidebar membuat efek accordion sidebar<b> </b>ini akan sedikit mempercantik blog karena dengan efek accordion<b> </b>maka yang akan ditampilkan secara utuh hanya satu widget saja sementara yang lain akan tersembunyi. </div>
<div style="text-align: justify;">
Membuat Efek Accordion sidebar dengan JQuery ini bisa sobat terapkan pada blogspot dan yang harus diperhatikan adalah ID dari sidebar sobat, karena setiap template mungkin ada perbedaan. supaya sobat bisa tau ID dari sidebar sobat sobat bisa menggunakan ad-on firebug pada mozilla. sebagai contoh pada tutorial ini ID sidebarnya adalah " <span style="color: red;">rsidebar-wrapper </span>" dengan Header H2. nah mungkin buat yang lain ID tersebut bisa sidebar, right-sidebar atau buat yang menggunakan template blogspot baru IDnya adalah sidebar-right-1, oleh karena itu sobat sesuaikan saja. untuk header H2 mungkin kalau belum diganti akan sama atau bila sudah diganti sesuaikan saja dengan headernya. untuk contohnya lihat sidebar blog ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut Caranya:</div>
<ul>
<li>Seperti biasa saja pada saat ngedit template kemudian sobat cari kode ]]></b:skin> kemudian letakan kode CSS dibawah ini tepat diatasnya.</li>
<li>Dan masih pada halaman yang sama cari kode </head> kemudian letakan kode Javascript tepat diatasnya.</li>
</ul>
<div id="tab">
<div data-tab="Kode CSS">
#<span style="color: red;">rsidebar-wrapper h2</span> {<br />
margin: 0 2px;<br />
padding:3px 7px 3px 13px;<br />
background-color:#111;<br />
border-color:#444 transparent #222;<br />
border-style:solid;<br />
border-width:1px 0;<br />
font:normal bold 12px "arial", Trebuchet, sans-serif;<br />
color:#fff;<br />
text-transform:uppercase;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper h2</span>.active span {<br />
padding-right:10px;<br />
background:#00ff00;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper h2</span>:hover {<br />
margin: 0 2px;<br />
padding:3px 7px 3px 13px;<br />
background:#ddaa6e;<br />
font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;<br />
color:#00FF00;<br />
text-transform:uppercase;<br />
border-bottom:1px solid #404040;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper h2</span>.active {<br />
background-color:#052605;<br />
color:#00ff00;<br />
box-shadow:0 0 3px black;<br />
border-color:#555 transparent #222;<br />
border-style:solid;<br />
border-width:1px 0;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper</span> .widget {<br />
margin:0 0;<br />
padding:0 0;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper</span> .widget-content {<br />
margin-top:5px;<br />
padding:3px 5px 3px 0px;<br />
}<br />
#<span style="color: red;">rsidebar-wrapper </span>.widget-content ul li {<br />
list-style:circle;<br />
border-top:1px solid #444;<br />
border-bottom:1px solid #222;<br />
padding: 3px 5px 3px 0;margin-left:0px;<br />
}</div>
<div data-tab="Kode JavaScript">
<u><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> </u><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(function() {<br />
$('#<span style="color: red;">rsidebar-wrapper</span> .widget-content').hide();<br />
$('#<span style="color: red;">rsidebar-wrapper h2</span>:first').addClass('active').next().slideDown('slow');<br />
$('#<span style="color: red;">rsidebar-wrapper h2</span>').css('cursor', 'pointer').click(function() {<br />
if($(this).next().is(':hidden')) {<br />
$('#<span style="color: red;">rsidebar-wrapper h2</span>').removeClass('active').next().slideUp('slow');<br />
$(this).toggleClass('active').next().slideDown('slow');<br />
}<br />
});<br />
});<br />
//]]><br />
</script> </div>
</div>
<br />
<div style="text-align: justify;">
Sekali lagi perhatikan kode yang berwarna merah dan sesuaikan dengan ID sidebar blog sobat.</div>
<div style="text-align: justify;">
Kalau sudah selesai silahkan simpan template sobat dan lihat hasilnya.</div>
<div style="text-align: justify;">
Dan apabila pada template sobat sudah terpasang JQuery yang digaris bawah sobat hapus saja.</div>
<div style="text-align: justify;">
Buat sobat yang berhasil memasang tutorial ini agar tampilan sidebarnya lebih keren sobat bisa membuat sidebar melayang atau auto slide sehingga sidebar akan mengikuti scroll contohnya pada blog ini,, silahkan baca di <b><a href="http://azzam10.blogspot.com/2012/09/cara-membuat-sidebar-auto-slide-melayang.html" title="Cara Membuat Sidebar Auto Slide Melayang">Cara Membuat Sidebar Auto Slide Melayang</a></b><span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com45tag:blogger.com,1999:blog-679796549016769771.post-68837476887147991402012-09-14T12:31:00.000+07:002012-09-22T13:27:07.118+07:00Cara Menyembunyikan Scroll Bar Dengan CSS<style type="text/css">
#inner0{background:#000;width:80px;height:200px;overflow:auto;padding:20px 0 20px 20px;float:left;margin:0 10px;}
#scroll-hide{width:100px;overflow:hidden;background:#000;margin:0 10px;}
#scroll-hide .inner{width:80px;height:200px;overflow:auto;margin:20px;padding-right:20px;background:#404040;}
#scroll-hide .inner1{width:80px;height:200px;overflow:auto;margin:20px;padding-right:20px;}
</style>
<br />
<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih47hU6CI4-f7K0YM56KoOgOZ8Z4cwmgXGK0yEgCf_RitWRq7IZs-yJfhkbwkkF7JbOq1uYCE84oacHUeeMlupYvboNG5L7Sr5Q1XoEDcmeN35HlWg0-n_0eIEKnfmuR0DsNvF4pvJHjCC/s1600/Screenshot_113.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Menyembunyikan Scroll Bar Dengan CSS" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih47hU6CI4-f7K0YM56KoOgOZ8Z4cwmgXGK0yEgCf_RitWRq7IZs-yJfhkbwkkF7JbOq1uYCE84oacHUeeMlupYvboNG5L7Sr5Q1XoEDcmeN35HlWg0-n_0eIEKnfmuR0DsNvF4pvJHjCC/s200/Screenshot_113.png" title="Cara Menyembunyikan Scroll Bar Dengan CSS" width="110" /></a><b>Cara Menyembunyikan Scroll Bar Dengan CSS</b>, mungkin sobat sudah pada tau scroll bar dan sudah menggunakannya dan mungkin juga sobat sudah menggunakan scroll bar yang disembunyikan namun masih mempertahankan fungsinya. Pada kesempatan ini saya akan berbagi tutorial cara menyembunyikan scroll bar dengan CSS buat sobat yang belum menggunakan fungsi ini.</div>
<div style="text-align: justify;">
Pada prinsip kerjanya menyembunyikan scroll dengan CSS ini hanya menyembunyikan obyek yang menggunakan scroll sehingga scroll bar tersebut tidak kelihatan, adapun caranya yaitu dengan menambahkan kerangka atau wadah untuk menyimpan obyek tersebut yang ukuran lebarnya dikurangi ukuran scrollbar atu dengan memberikan margin kiri selebar scroll bar. lihat gambar disamping.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Adapun cara tersebut bisa menggunakan 2 cara yang biasa saya lakukan, yaitu dengan menggunakan CSS dan HTML yang terpisah atau dengan penambahan kode CSS langsung pada HTML. </div>
<div style="text-align: justify;">
untuk cara pemasangan menggunakan CSS dan HTML yang terpisah bisa lihat contoh dibawah ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
KODE CSS.</div>
<div style="text-align: justify;">
Ini bisa diletakan diatas kode ]]></b:skin> atau apabila setelah kode ]]></b:skin> dengan menambahkan kode <style type='text/css'> CSS disini </style>.</div>
<blockquote class="tr_bq">
#scroll-hide{<br />
width:100px;<br />
overflow:hidden;<br />
background:#000;<br />
}<br />
#scroll-hide .inner{<br />
width:80px;<br />
height:200px;<br />
overflow:auto;<br />
margin:20px;<br />
padding-right:20px;<br />
<span style="color: red;"> background:#404040;</span><br />
}</blockquote>
<br />
KODE HTML.<br />
Pada kode HTML sobat tinggal memasukan tag id atau class <br />
<blockquote class="tr_bq">
<div id="scroll-hide"><br />
<div class="inner"><br />
<span style="color: red;">Konten Disini</span><br />
</div><br />
</div></blockquote>
<br />
Lihat Contoh dibawah ini:<br />
<br />
<div id="inner0" style="float: left;">
Jakarta<br />
Karawang<br />
Bandung<br />
Bekasi<br />
Cianjur<br />
Sukabumi<br />
Sumedang<br />
Cirebon<br />
Tasikmalaya<br />
Garut<br />
Ciamis<br />
Subang<br />
Kuningan<br />
Majalengka<br />
Banjar<br />
<br /></div>
<div id="scroll-hide" style="float: left;">
<div class="inner">
Jakarta<br />
Karawang<br />
Bandung<br />
Bekasi<br />
Cianjur<br />
Sukabumi<br />
Sumedang<br />
Cirebon<br />
Tasikmalaya<br />
Garut<br />
Ciamis<br />
Subang<br />
Kuningan<br />
Majalengka<br />
Banjar</div>
</div>
<div id="scroll-hide" style="float: left;">
<div class="inner1">
Jakarta<br />
Karawang<br />
Bandung<br />
Bekasi<br />
Cianjur<br />
Sukabumi<br />
Sumedang<br />
Cirebon<br />
Tasikmalaya<br />
Garut<br />
Ciamis<br />
Subang<br />
Kuningan<br />
Majalengka<br />
Banjar</div>
</div>
<div style="clear: both;">
<br />
Pada contoh pertama scroll belum disembunyikan atau masih secara default.<br />
Pada contoh kedua itu merupakan ilustrasi scroll bar yang disembunyikan.(obyek diberi warna background berbeda, lihat kode <span style="color: red;">background:#404040; </span>pada CSS)<span style="color: red;"><br /></span><br />
pada contoh ketiga kode background <span style="color: red;">:#404040; </span>pada CSS dihilangkan.<br />
<br />
Apabila mau memasang pada widget di sidebar maka sobat tinggal cari kode <div class='widget-content'> pada setiap kode widget. selanjutnya tinggal mengganti kode tersebut dengan.<br />
<blockquote class="tr_bq">
<div class='widget-content' id='scroll-hide'><br />
<div class='inner'> <br />
-------<br />
</div><br />
</div></blockquote>
<br />
Contoh:<br />
<blockquote class="tr_bq">
<b:widget id='HTML5' locked='false' title='title' type='HTML'><br />
<b:includable id='main'><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != &quot;&quot;'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<span style="color: red;"><div class='widget-content' id='scroll-hide'> </span><br />
<span style="color: red;"><div class='inner'> </span><br />
<data:content/><br />
<span style="color: red;"></div></span><br />
<span style="color: red;"></div></span><br />
</b:includable><br />
</b:widget> </blockquote>
<br />
<div style="text-align: justify;">
Selanjutnya cara menyembunyikan scroll bar secara langsung pada HTML, khususnya pada widget di sidebar namun cara selengkapnya tunggu ya pada postingan berikutnya.... biar lebih lengkap karena meletakan kode untuk menyembunyikan scroll bar pada sidebar tergantung pada widget yang digunakan sehingga perlu penjelasan satu-satu.<br />
<br />
Buat Sobat yang mau mencoba mengedit sendiri kode CSSnya silahkan kunjungi di <b><a href="http://jsfiddle.net/zJue8/" rel="nofollow" target="_blank">SINI</a> </b></div>
</div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com47tag:blogger.com,1999:blog-679796549016769771.post-83332892048900705512012-09-12T01:11:00.000+07:002012-09-22T14:05:09.827+07:00Memasang Cbox tanpa mengganggu loading<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuLUxNHBGEhoHvRTvex4IHqXGkMZDTZS2RA-aIbSeyjKkFq0BLCu6WU6aWw0AhKYYnfYiNl2mt3_KJj4Q5dGLPentNN0DsCJrd5qOZQoyte2i2M5QpWDaUX-R4jQYSRPwWK82tba3tpN3/s1600/Screenshot_112.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Memasang Cbox tanpa mengganggu loading" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuLUxNHBGEhoHvRTvex4IHqXGkMZDTZS2RA-aIbSeyjKkFq0BLCu6WU6aWw0AhKYYnfYiNl2mt3_KJj4Q5dGLPentNN0DsCJrd5qOZQoyte2i2M5QpWDaUX-R4jQYSRPwWK82tba3tpN3/s1600/Screenshot_112.png" title="Memasang Cbox tanpa mengganggu loading" /></a><b>Memasang Cbox tanpa mengganggu loading</b>, maksudnya yaitu <b>memasang Cbox</b> dengan menggunakan iframe sehingga Cbox tersebut akan diload hanya jika diklik saja sehingga tidak mengganggu loading pada awal membuka blog. cara ini sebenarnya sudah disediakan oleh pihak <b>Cbox</b> namun bagi sebagian besar pengguna <b>Cbox </b>cara ini jarang yang menggunakan. </div>
<div style="text-align: justify;">
sebelum berlanjut pada cara tersebut mungkin sobat yang belum memasang Cbok bisa baca cara daftar Cbox point pertama di <a href="http://azzam10.blogspot.com/2012/06/membuat-buku-tamu-showhide.html" title="Membuat Buku Tamu Show/Hide">Membuat Buku Tamu Show/Hide.</a><br />
Buat sobat yang sudah <b>memasang Cbox </b>agar lebih jelasnya cara kerja hasil pemasangan Cbox seperti yg dimaksud bisa dicek dengan melihat status bar yang ada dibagian bawah browser mozilla, dimana sobat bisa refresh halaman blog sobat kemudian perhatikan status barnya, kalau belum memasang cara seperti ini maka pada status bar tersebut akan terlihat URL Cbox. apabila kondisi koneksi kita sedang jelek maka loading Cbox tersebut sangat berat sekali dengan ditandai dengan kata menunggu http://www6.cbox.com/ pada status bar atau terkadang ada peringatan tidak bisa menghubungi situs tersebut sehingga kotak cbox tersebut tidak berfungsi. Nah kalau menggunakan cara ini maka loading Cbox tersebut hanya akan dilakukan manakala kita mengklik Cbox tersebut. coba saja sobat perhatikan Cbok blog ini pertama-tama refresh dulu halaman blog ini kemudian perhatikan status bar, pasti tidak akan meload cbox karena menggunakan cara ini. selanjutnya sobat klik Chatbox yang ada di sebelah kanan bawah blog ini dan perhatikan, kalau kondisi koneksi sedang jelek maka status bar akan kelihatan namun kalau koneksi baik maka status loadingpun nyaris tidak kelihatan karena cepat. begitu penjelasan cara ini dan selanjutnya langsung ke pokoknya; <br />
<ul>
<li>Login ke <a href="http://cbox.ws/" rel="nofollow" target="_blank">Cbox</a> </li>
<li>selanjutnya klik publish</li>
<li>Pada halaman publish perhatikan pada step 2 : Choose a variation.</li>
<li>Klik tombol dan pilih <b style="color: blue;">Floating Button </b></li>
<li>Copy kode yang ada pada kotak</li>
<li>Kemudian ganti kode Cbox sobat dengan kode tersebut. </li>
<li>Simpan dan lihat hasilnya.</li>
</ul>
Bila Tampilannya tidak sesuai dengan keinginan sobat maka sobat bisa mengaturnya dengan mengganti kode CSS pada kode tersebut. perhatikan contoh berikut:</div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<div style="color: black;">
<span style="background-color: #eeeeee;"><div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()"><b>Open Cbox</b></div></span></div>
<div style="color: black;">
<span style="background-color: #d9d2e9;"><div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;"></div></span></div>
<script type="text/javascript"><br />
var cbvis = false;<br />
var cbload = false;<br />
var cbcookie = "cboxvis=";<br />
function togglecbox () {<br />
var cbdiv = document.getElementById("cboxdiv");<br />
var cbbut = document.getElementById("cboxbutton");<br />
if (!cbvis) {<br />
if (!cbload) {<br />
cbdiv.innerHTML = '<span style="background-color: #d0e0e3; color: black;"><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=452937&amp;boxtag=nf3ngq&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-452937" style="border:#333333 1px solid;border-bottom:0px" id="cboxmain7-452937"></iframe><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=452937&amp;boxtag=nf3ngq&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-452937" style="border:#333333 1px solid;border-top:0px" id="cboxform7-452937"></iframe>';</span><br />
cbload = true;<br />
}<br />
cbdiv.style.display = "block";<br />
cbbut.innerHTML = "<span style="color: blue;">Close Cbox</span>";<br />
}<br />
else {<br />
cbdiv.style.display = "none";<br />
cbbut.innerHTML = "<span style="color: blue;">Open Cbox</span>";<br />
}<br />
cbvis = !cbvis;<br />
document.cookie = cbcookie+((cbvis)?1:0);<br />
}<br />
// Toggle Cbox open if it was previously<br />
var cbcookiei = document.cookie.indexOf(cbcookie);<br />
if (cbcookiei >= 0) {<br />
if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {<br />
togglecbox();<br />
}<br />
}<br />
</script> </blockquote>
Sobat bisa atur kode yang ada;<br />
<ul>
<li>yang ada pada warna paling atas adalah kode untuk mengatur tombol Cbox.</li>
<li>yang ada pada warna kedua adalah kode untuk mengatur tata letak kotak form Cbox.</li>
<li>yang ada pada warna ketiga adalah kode untuk mengatur Cboxnya yang terdiri dari kotak komentar dan kotak isian komentar.</li>
<li>Tulisan berwarna biru bisa diganti dengan kata-kata sobat.</li>
</ul>
Selesai.. semoga berhasil. <br />
<br /></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com17tag:blogger.com,1999:blog-679796549016769771.post-54914085510298735792012-09-11T09:19:00.000+07:002012-09-11T20:58:09.232+07:00Cara Membuat Emoticon Komentar JQuery<div style="text-align: justify;">
<b>Cara Membuat Emoticon Komentar JQuery</b> akhirnya bisa saya posting juga setelah beberapa hari ga bisa posting tutorial sehubungan dengan beberapa hal. <b>Membuat Emoticon Komentar JQuery </b>ini sebagai kelanjutan dari postingan sebelumnya <a href="http://azzam10.blogspot.com/2012/08/cara-membuat-emoticon-komentar-blog.html" title="Cara Membuat Emoticon komentar di blog">Cara Membuat Emoticon komentar di blog </a> dimana pada postingan itu sudah berjanji untuk membuat tutorial <b>Membuat Emoticon komentar</b> dengan <b>JQuery</b>.</div>
<br />
Emoticon Komentar dengan JQuery pemasangannya cukup mudah dan berikut caranya:<br />
<ul>
<li>seperti biasa Login ke blogger </li>
<li>klik Layout/ template</li>
<li>Pada tab menu pilih Edit HTML</li>
<li>Centang kotak kecil Expand Template Widget</li>
<li>Sekarang cari kode <span style="color: red;"></body> <span style="color: black;">ingat bukan <body></span></span></li>
<li>Tempatkan kode berikut di atas kode <span style="color: red;"></body> <span style="color: black;">tersebut</span></span></li>
</ul>
<blockquote class="tr_bq">
<code>
<script type='text/javascript'><br />
//<![CDATA[<br />
var emoRange = "#comments p, div.emoWrap",<br />
putEmoAbove = "iframe#comment-editor",<br />
emoMessage = " ";<br />
//]]><br />
</script><br />
<script src='http://azzam10.googlecode.com/files/Emoticonjq.js' type='text/javascript'/></code> </blockquote>
<ul>
<li>Simpan Template , lihat hasilnya.</li>
</ul>
<div style="text-align: justify;">
berdasarkan percobaan ini sangat cocok diterapkan pada template blogspot baru sehingga tidak perlu mengedit lagi, untuk contoh lihat pada emoticon blog ini.</div>
<div style="text-align: justify;">
untuk mengatur letak kotak emoticon bisa sobat baca di<span style="color: red;"> </span><b><a href="http://azzam10.blogspot.com/2012/08/mengatur-pesan-komentar-blog.html">Mengatur Pesan Komentar blog</a></b><span style="font-size: x-small;">,</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nah cukup mudah kan sobat <b>membuat emoticon komentar Jquery</b> ini, bila templatenya cocok dengan tutorial ini. <span style="font-size: x-small;"><br /></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com14tag:blogger.com,1999:blog-679796549016769771.post-89315682249138432472012-08-30T17:44:00.000+07:002012-09-11T10:23:45.912+07:00Cara Membuat Emoticon komentar di blog<div style="text-align: justify;">
<span style="font-size: small;"><b>Cara Membuat Emoticon komentar di blog</b> ini adalah kelanjutan dari postingan sebelumya yaitu</span> <b><a href="http://azzam10.blogspot.com/2012/08/mengatur-pesan-komentar-blog.html">Mengatur Pesan Komentar blog</a></b><span style="font-size: small;">, dimana pada postingan tersebut sudah saya janjikan untuk membuat tutorial </span><span style="font-size: small;"><b>Membuat Emoticon</b>, Ok sobat tidak usah panjang lebar kita langsung saja pada pokok bahasan.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFd7MhG7AuSGgRvbF1Zqi-6f2yrsHpqI6o2QbPHAI55dqggfJ_NepLbeXd4R-1ph_6IAdo_9F_JD0btVlJ4kIn7Py1l4_ZdmDxOUAKi2tDBofHypk8g-yoimDXi6CAW_qnW0IipkcPbnh/s1600/Screenshot_108.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Emotion komentar di blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFd7MhG7AuSGgRvbF1Zqi-6f2yrsHpqI6o2QbPHAI55dqggfJ_NepLbeXd4R-1ph_6IAdo_9F_JD0btVlJ4kIn7Py1l4_ZdmDxOUAKi2tDBofHypk8g-yoimDXi6CAW_qnW0IipkcPbnh/s1600/Screenshot_108.png" title="Cara Membuat Emotion komentar di blog" /></a></div>
Sebelumnya saya sampaikan terlebih dahulu apa yang akan saya bagikan buat sobat semua, saat ini saya akan menyampaikan <span style="font-size: small;"><b>Cara Membuat Emoticon komentar </b>yang
mungkin berbeda dengan sobat bloger yang lain yang telah terlebih
dahulu membuat tutorial ini. disini saya akan sampaikan cara yang
mungkin dapat sobat kembangkan dalam penerapannya sehingga sobat sendiri
bisa berkreasi menurut selera sobat. </span></div>
<div style="text-align: justify;">
<span style="font-size: small;">Dalam pembuatan <b>emoticon</b>
ada beberapa cara namun pada kesempatan kali ini saya akan sampaikan
dengan 2 cara saja, yaitu dengan menggunakan kode javascript dan yang
kedua menggunakan JQuery.</span></div>
<div style="text-align: justify;">
<span style="font-size: small;">Saya akan sampaikan dengan contoh yang simple saja dan silahkan sobat sendiri yang nantinya menambahkan sesuai keinginan. </span></div>
<div style="text-align: justify;">
<h3>
<span style="font-size: small;">1. <b>"Cara membuat Emoticon" </b>dengan javascript </span></h3>
Dalam
membuat emotion ini terkadang mememui kegagalan, dan kegagalan tersebut
dikarenakan tidak cocoknya script yang digunakan dengan template yang
mau dipasangnya. dan ini di akibatkan beberapa faktor ketidak cocokan
namun menurut saya faktor tersebut adalah karena template tersebut sudah
mengalami perubahan/telah diedit sehingga sudah tidak asli lagi sebagai
template bawaan. kalau ini dipasang pada template bawaan maka tutorial
dibawah ini akan bekerja baik tanpa merubah hal lainnya yang ada di
template. yang paling utama untuk keberhasilan <b>membuat emoticon</b> ini yaitu penentuan kode yang berwarna pink dibawah <span style="font-size: small;"><span style="color: magenta;">(comment-holder)</span></span>, dimana kalau pada template sobat ada kode tersebut maka dijamin ini akan berhasil.<br />
<br />
sengaja
saya buat cara seperti ini agar sobat bisa lebih jauh mengenai
pemasangan emoticon di kotak komentar ini, kenapa? karena cara ini bisa
kita kembangkan bukan hanya menggunakan emoticon saja untuk
meletakannya pada komentar tapi bisa kita pasang banner atau gambar
lain, nah agar sobat bisa mengkreasikannya sendiri maka saya bikin
tutorial seperti ini.<br />
<br />
Berikut cara lebih rincinya:<br />
<ul>
<li>seperti biasa Login ke blogger </li>
<li>klik Layout/ template</li>
<li>Pada tab menu pilih Edit HTML</li>
<li>Centang kotak kecil Expand Template Widget</li>
<li>Sekarang cari kode <span style="color: red;"></body> <span style="color: black;">ingat bukan <body></span></span></li>
<li>Tempatkan kode berikut di atas kode <span style="color: red;"></body> <span style="color: black;">tersebut</span></span></li>
</ul>
</div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<script type='text/javascript'><br />
//<![CDATA[<span style="font-size: small;"> </span><span style="font-size: small;">/* Iseng-iseng<br /> * bY KHR<br /> * Url:http://azzam10.blogspot.com<br /> */<br />a = document.getElementById('<span style="color: magenta;">comment-holder</span>');<br />if (a) {<br /> b = a.getElementsByTagName("p");<br /> for (i = 0; i < b.length; i++) {<br /> if (b.item(i).getAttribute('CLASS') == 'comment-content') {<br /> bh_b_smly = b.item(i).innerHTML.replace(/<span style="color: blue;">:aa:</span>/gi, "<img src='</span><span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif</span><span style="font-size: small;">' alt='' class='isengsmly'/>");<br /> bh_b_smly = bh_b_smly.replace(/<span style="color: blue;">:bb:</span>/gi, "<img src='</span><span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif</span><span style="font-size: small;">' class='</span><span style="font-size: small;">isengsmly</span><span style="font-size: small;">'/>");<br /> bh_b_smly = bh_b_smly.replace(</span><span style="font-size: small;">/<span style="color: blue;">:cc:</span>/</span><span style="font-size: small;">ig, "<img src='</span><span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif</span><span style="font-size: small;">' alt='' class='</span><span style="font-size: small;">isengsmly</span><span style="font-size: small;">'/>")<br /> b.item(i).innerHTML = bh_b_smly;<br /> }<br /> }<br />}</span></div>
<div style="text-align: justify;">
<span style="font-size: small;">//]]><br /></script></span></div>
</blockquote>
<ul>
<li>Selanjutnya sobat cari kode dibawah ini dan cari yang paling bawah</li>
</ul>
<blockquote class="tr_bq">
<data:blogTeamBlogMessage/><br />
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br />
<iframe
allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height='410'
id='comment-editor' name='comment-editor' width='100%'/></blockquote>
<ul>
<li>letakan kode dibawah ini tepat diatas kode diatas</li>
</ul>
<blockquote class="tr_bq">
<div style='border: 2px solid #CCC; margint: 0px; overflow: auto; padding: 0px; text-align: center; min-width: 450px;'><br />
<img alt='' class='isengsmly' src='<span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif</span>'/> <span style="color: blue;">:aa:</span><br />
<img alt='' class='isengsmly' src='<span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif</span>'/> <span style="color: blue;">:bb:</span><br />
<img alt='' class='isengsmly' src='<span style="color: red;">http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif</span>'/> <span style="color: blue;">:cc:</span><br />
</div></blockquote>
<ul>
<li>Simpan template sobat.</li>
</ul>
<div style="text-align: justify;">
Sobat perhatikan warna merah
itu adalah URL emoticon sedangkan yang berwarna biru adalah kode yang
dimasukan disaat berkomentar. Sobat bisa mengganti gambar dan kode
tersebut namun perlu diperhatikan adalah posisi peletakan kode dan URL
emotionnya antara yang atas dengan yang bawah. URL emoticon dapat
diganti dengan gambar apapun sesuai dengan keinginan sobat. sedangkan
apabila sobat mau menambahkan emoticonnya maka sobat tinggal
menambahkannya pada kode atas dan bawah, caranya sobat tinggal mengcopy
saja kode tersebut kemudian letakan dibawahnya dan ganti YRL emoticon
dan kodenya contoh:</div>
<br />
<br />
Bila sobat tidak mau repot dengan membuat sendiri sobat bisa pasang kode berikut pada template sobat.<br />
<br />
<br />
<ul>
<li>Letakan kode berikut diatas kode <span style="color: red;"></body></span></li>
</ul>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<script src='http://mygambar.googlecode.com/files/Emo.js' type='text/javascript'/></div>
</blockquote>
<ul>
<li>cari kode berikut dan cari yang paling bawah;</li>
</ul>
<blockquote class="tr_bq">
<data:blogTeamBlogMessage/><br />
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br />
<iframe
allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height='410'
id='comment-editor' name='comment-editor' width='100%'/></blockquote>
<ul>
<li>Letakan kode berikut tepat diatas kode diatas; </li>
</ul>
<blockquote class="tr_bq">
<div style='border: 2px solid
#CCC; margint: 0px;height:80px; overflow: auto; padding: 10px;
text-align: center; min-width: 500px;'><br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> ;-;;<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^<br />
<img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!<br />
</div></blockquote>
<div style="text-align: justify;">
Nah selesai <b>Cara Membuat Emoticon komentar di blog</b> dengan menggunakan javascript, apabila mau mengatur tata letak posisinya silahkan baca di <b><a href="http://azzam10.blogspot.com/2012/08/mengatur-pesan-komentar-blog.html">Mengatur Pesan Komentar blog</a></b><span style="font-size: small;">,</span> selanjutnya saya akan sampaikan cara membuat emoticon dengan
menggunakan JQuery, namun berhubung postingan ini terlalu panjang maka lanjutkan di <a href="http://azzam10.blogspot.com/2012/09/cara-membuat-emoticon-komentar-jquery.html" title="Cara Membuat Emoticon Komentar JQuery">Cara Membuat Emoticon Komentar JQuery</a><span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com12tag:blogger.com,1999:blog-679796549016769771.post-26018194489115644082012-08-28T16:03:00.000+07:002012-08-28T16:46:44.892+07:00Mengatur Pesan Komentar blog<div style="text-align: justify;">
<b>Mengatur Pesan Komentar blog</b>, ini merupakan lanjutan dari<b> <a href="http://azzam10.blogspot.com/2012/08/membuat-pesan-formulir-komentar.html">Membuat Pesan Formulir Komentar dan modifikasinya</a></b> dimana pada tutorial sebelumya tersebut menjelaskan cara membuat <b>pesan</b> formulir <b>komentar</b> di blogger/blogspot, namun masih dalam pengaturan bawaan atau defaulnya. Nah pada kesempatan ini saya akan mencoba menyampaikan cara mengatur tampilan Pesan Formulir Komentar.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtUPMhG2hMR0n-wy6WZ8Ld3WtAo-rOHv3nggx4lA8XVBoEBMG4G46WtruhWCfL_s6RLqFuO6dBifHcFU346j4houdvNCqlaPEWksCIE8gu9Yoo34JDPrHkMxbMwjboYH_aVk3leMq92tL/s1600/Screenshot_107.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengatur Pesan Komentar blog" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtUPMhG2hMR0n-wy6WZ8Ld3WtAo-rOHv3nggx4lA8XVBoEBMG4G46WtruhWCfL_s6RLqFuO6dBifHcFU346j4houdvNCqlaPEWksCIE8gu9Yoo34JDPrHkMxbMwjboYH_aVk3leMq92tL/s320/Screenshot_107.png" title="Mengatur Pesan Komentar blog" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut langkah <b>Mengatur Pesan Komentar blog</b>:</div>
<div style="text-align: justify;">
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>IN</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-fareast-language:EN-US;}
</style>
<![endif]-->
</div>
<ul>
<li>seperti biasa Login ke blogger </li>
<li>klik Layout/ template</li>
<li>Pada tab menu pilih Edit HTML</li>
<li>Centang kotak kecil Expand Template Widget</li>
<li>Sekarang cari kode <span style="color: red;">]]></b:skin></span></li>
<li>Tempatkan kode berikut di atas kode <span style="color: red;">]]></b:skin> <span style="color: black;">tersebut</span></span></li>
</ul>
<blockquote class="tr_bq" style="color: black;">
#psn-comment{<br />
background:#F2F2F2;<br />
min-width:500px;<br />
height:35px;<br />
padding:10px;<br />
font:normal 13px trebuchet ms;<br />
text-align:center;<br />
border:1px solid #EFF0F1;<br />
margin:0 10px 5px 0;<br />
line-height: 1.1em; </blockquote>
Silahkan sobat atur kode CSSnya sesuai dengan selera. <br />
<ul>
<li>Cari kode dibawah ini:<span style="color: red;"></span></li>
</ul>
<blockquote class="tr_bq">
<span style="color: red;"><p><data:blogCommentMessage/></p></span></blockquote>
Apabila menemukan lebih dari satu kode seperti diatas ganti yang paling akhir/bawah<br />
<ul>
<li>Hapus dan ganti kode tersebut dengan kodeberikut ini</li>
</ul>
<blockquote class="tr_bq">
<span style="color: blue;"><div id='psn-comment'><data:blogCommentMessage/></div></span></blockquote>
<div style="text-align: justify;">
Pemasangan kode diatas adalah pengaturan untuk kotak pesan, nah selanjutnya kita beralih ke cara agar kotak pesan tersebut mengikuti kotak komentar pada waktu membalas komentar. sehingga pesan komentar tidak pindah kebawah melainkan tetap ada diatas kotak komentar. lihat saja pesan komentar blog ini sebagai contoh.</div>
<div style="text-align: justify;">
Berikut langkah-langkahnya:</div>
<ul>
<li>Masih melanjutkan dari yang diatas sobat cari kode;</li>
</ul>
<blockquote class="tr_bq">
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(<span style="color: red;">replybox</span>, null);<br />
replybox.src = replyUrlParts[0]<br />
+ (commentId ? '&parentID=' + commentId : '')<br />
+ '#' + replyUrlParts[1];<br />
replyParent = commentId;<br />
}</blockquote>
<ul>
<li>Perhatikan kode yang berwarna merah <span style="color: red;">replybox <span style="color: black;">kemudian sobat ganti kode berwarna merah tersebut dengan; </span></span><span style="color: blue;">document.getElementById('form-wrapper')<span style="color: black;"> sehingga kode akhir akan nampak seperti dibawah ini;</span></span></li>
</ul>
<blockquote class="tr_bq">
if (replybox && (commentId !== replyParent)) {<br />
document.getElementById(domId).insertBefore(<span style="color: blue;">document.getElementById('form-wrapper')</span>, null);<br />
replybox.src = replyUrlParts[0]<br />
+ (commentId ? '&parentID=' + commentId : '')<br />
+ '#' + replyUrlParts[1];<br />
replyParent = commentId;<br />
}</blockquote>
<ul>
<li>Selanjutnya sobat cari lagi kode yang ditambahkan pada awal tutorial ini kodenya;<span style="color: blue;"> <div id='psn-comment'><data:blogCommentMessage/></div></span> selanjutnya perhatikan kode dibawah ini;</li>
</ul>
<blockquote class="tr_bq">
<span style="color: blue;"><div id='psn-comment'><data:blogCommentMessage/></div></span><br />
<data:blogTeamBlogMessage/><br />
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br />
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></blockquote>
<ul>
<li>Tambahkan kode <span style="color: red;"><div id='form-wrapper'></span> sebelum kode diatas dan <span style="color: red;"></div></span> setelahnya, sehingga akan menjadi seperti dibawah ini;</li>
</ul>
<blockquote class="tr_bq">
<span style="color: red;"><div id='form-wrapper'></span><br />
<span style="color: blue;"><div id='psn-comment'><data:blogCommentMessage/></div></span><br />
<data:blogTeamBlogMessage/><br />
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br />
<iframe
allowtransparency='true' class='blogger-iframe-colorize
blogger-comment-from-post' frameborder='0' height='410'
id='comment-editor' name='comment-editor' src='' width='100%'/><br />
<span style="color: red;"></div></span></blockquote>
<ul>
<li>Simpan template sobat, lihat hasilnya.... semoga berhasil.</li>
</ul>
<div style="text-align: justify;">
Dengan cara ini maka apabila mau menambahkan selain kotak <b>pesan</b> formulir <b>komentar</b> sobat juga bisa membuat kotak emotion, iklan atau tobol share didalam area tersebut. sobat tinggal meletakan kode diatas atau dibawah kode <span style="color: black;"><div id='psn-comment'><data:blogCommentMessage/></div> namun harus berada dibawah <div id='form-wrapper'> karena from-wrapper tersebut merupakan tempat meletakan obyek yang akan berpindah-pindah.</span><br />
<span style="color: black;">Buat sobat yang mau memasang emotion diblog seperti diblog ini tunggu postingan berikutnya ......</span></div>
<div style="text-align: justify;">
<span itemprop="itemreviewed"></span></div>
<div style="text-align: justify;">
<span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com11tag:blogger.com,1999:blog-679796549016769771.post-69081647878881065772012-08-28T11:56:00.000+07:002012-08-28T16:33:47.162+07:00Membuat Pesan Formulir Komentar dan modifikasinya<div style="text-align: justify;">
<b><a href="http://azzam10.blogspot.com/2012/08/membuat-pesan-formulir-komentar.html"><span style="background-color: #fce5cd;">Pesan Formulir Komentar</span></a> </b>blogger memang sudah tidak asing lagi bagi sebagian blogger dimana <b>pesan formulir komentar</b> tersebut memang sudah disediakan buat pengguna blogspot. meskipun fasilitas tersebut sudah disediakan oleh blogger itu sendiri namun secara defaultnya terkadang memang tidak cocok dengan apa yang pengguna harapkan, karena pengaturannya yang tidak disediakan adapun pengaturan yang bisa dipakai dengan meletakan beberapa kode seperti <b>, <i>, <a> saja yang bisa digunakan sementara untuk memodifikasi lebih lanjut kita harus merubah/menambahkan kode kedalam HTML template.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUckjdXZo0OcL1AVUgX6oGBLfCpmIV68OpVb6MR9kVXas_QxAV1aas7Ok5vHsfr0yuQ9_xxqvvR93bD3ddomgUT9I6QL5vVUJIMVFs2JoihtWJQXl7Ee0GPnyVebEBMijBJ3FsDW87xYZE/s1600/Screenshot_106.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Pesan Formulir Komentar dan modifikasinya" border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUckjdXZo0OcL1AVUgX6oGBLfCpmIV68OpVb6MR9kVXas_QxAV1aas7Ok5vHsfr0yuQ9_xxqvvR93bD3ddomgUT9I6QL5vVUJIMVFs2JoihtWJQXl7Ee0GPnyVebEBMijBJ3FsDW87xYZE/s400/Screenshot_106.png" title="Membuat Pesan Formulir Komentar dan modifikasinya" width="400" /></a></div>
<div style="text-align: justify;">
Sebagai contoh, untuk penyesuaian dengan tema blog kita mungkin harus ditambahkan beberapa pengaturan pada <b>Pesan Formulir Komentar</b> tersebut seperti posisi teks atau (text align) mungkin kita ingin rata tengah (center) atau rata kiri kanan (justify) nah maka kita harus menambahkannya dalam template karena secara defaultnya menggunakan rata kiri. atau mungkin mau menambahkan efek background, border danlain sebagainya menyangkut modifikasi pesan formulir tersebut. dan satu hal lagi yang memang mungkin perlu diperhatikan bila sobat menggunakan thread comment dimana pada saat kita mau membalas komentar dengan mengklik balas maka secara default Pesan Formulir Komentar tersebut akan diam dibawah jadi tidak ikut bersama form komentarnya, hal itu apabila kita hanya memasang kotak pesan formulis komentar saja tentu kalau hanya admin yang menggunakan mode balas/reply tersebut mungkin tak perlu lagi membaca formulir tersebut namun bila kita memasang objek lain diatas atau dibawah pesan formulir tersebut seperti kita memasang emotion, tentu hal ini kurang baik kalau kotak emotion dan <b>formulir komentar</b> tersebut berada dibawah apalagi yang mempunyai jumlah komentar puluhan atau ratusan. dapat dibayangkan pada blog yang memasang emotion dan mempunyai komentar ratusan terus yang komentar mau menggunakan emotion tersebut dan belum tau kodenya,,,, wah harus berapa kali kita menggulung scroll. tentu repot kan!!!!</div>
<div style="text-align: justify;">
Nah selain kita menerapkan pengaturan untuk formulir komentar kita bisa juga menambahkan pengaturan posisi tersebut.</div>
<div style="text-align: justify;">
Biar sobat tau lebih jelas tentang apa yang saya sampaikan diatas sobat bisa lihat pengaturan yang sudah saya pasang diblog ini, sobat bisa lihat pesan formulir komentar dan emotion yang ada di atas kotak komentar, lalu sobat klik balas pada komentar yang paling banyak diblog ini dan lihat hasilnya. selanjutnya bandingkan dengan blog sobat atau blog lain yang belum menggunakan pengaturan ini. atau mungkin blog sobat pelum memaang/menggunakan pesan formulir komentar? coba pasang dulu ya... sebagai uji coba.. hehehe. </div>
<div style="text-align: justify;">
Buat sobat yang belum memasang formulir komentar ikuti langkah berikut:</div>
<ul>
<li>login ke blogger</li>
<li>klik setelan di dasbor blog sobat (1)</li>
<li>kemudian klik Post dan komentar (2)</li>
<li>scroll ke bawah disamping pesan formulir komentar klik tambah (3)</li>
<li>Masukan kata-kata sobat didalam kotak hingga akan seperti ini.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN79YbvXk9nCscKj18SOIMhJKss8cPB3bpecXiEqBPJAVSCEjZep_b-ieaUnpPGAupj6k-RSd8dmoblRZ2GIhiJveg4ZWjzvlxWSCVwRgMvz0LfnypAS-o5m36-SmTZKavbrXFVFCkcbF/s1600/lightshot2222.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Pesan Formulir Komentar" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN79YbvXk9nCscKj18SOIMhJKss8cPB3bpecXiEqBPJAVSCEjZep_b-ieaUnpPGAupj6k-RSd8dmoblRZ2GIhiJveg4ZWjzvlxWSCVwRgMvz0LfnypAS-o5m36-SmTZKavbrXFVFCkcbF/s320/lightshot2222.png" title="Membuat Pesan Formulir Komentar" width="320" /></a></div>
<ul>
<li>Simpan pengaturan sobat. dan selesai membuat <b>pesan formulir komentar</b>.</li>
</ul>
<div style="text-align: justify;">
Lihat hasilnya pada postingan yang banyak komentar dan lakukan apa yang saya sampaikan diatas untuk memastikan apakah template sobat sudah memasang pengaturannya atau belum dengan melihat tampilan pesan tersebut dan coba juga apakah pesan tersebut pindah mengikuti kotak komentar apabila sobat mengklik balas? kalau tampilan dan posisi masih sebagaimana diutarakan diatas berarti masih keadaan default.</div>
<br />
Langkah Selanjutnya...<br />
Nah buat sobat yang mau menambahkan pengaturan <b>Pesan Formulir Kotak komentar</b> sobat bisa melanjutkan membacanya di <b><a href="http://azzam10.blogspot.com/2012/08/mengatur-pesan-komentar-blog.html" title="Mengatur Pesan Komentar blog">Mengatur Pesan Komentar blog</a></b><span itemprop="itemreviewed"><span itemprop="description"></span></span>Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com6tag:blogger.com,1999:blog-679796549016769771.post-55747006341421549672012-08-26T14:33:00.001+07:002012-08-26T14:33:29.998+07:00Analisa Pengunjung blog<div style="text-align: justify;">
<b>Analisa Pengunjung blog</b>, agar kita lebih tau keadaan blog kita dari berbagai sisi. <b>Pengunjung Blog</b> umumnya adalah datang dari hasil pencarian dibowser pengunjung dan itulah pengunjung blog yang sangat berarti buat perkembangan blog kita pada posisi SERP maupun Pagerank, <b>pengunjung blog</b> selain dari mesin pencari ada juga yang datang dari hasil pertukaran link antar sesama bloger, kunjungan balik dari blog yang kita kunjungi setelah kita berkomentar disana ada juga pengunjung blog yang datang dari shoutbook atau buku tamu yang pernah kita berkomentar disana. Nah dari sanalah pengunjung datang, namun pengunjung yang paling berkualitas adalah pengunjung yang datang dari pencarian di google, bing, yahoo, ask dan lain sebagainya.</div>
<div style="text-align: justify;">
<b>Analisa Pengunjung blog</b> memang perlu kita lakukan dengan maksud dan tujuan supaya kita tau seberapa banyak pengunjung kita dari sumber-sumber datangnya pengunjung diatas. <b>Analisa</b> ini terkadang dilupakan dan dianggap tidak perlu untuk dilakukan karena menganggap pengunjung itu akan datang dengan sendirinya, Ya memang betul pengunjung itu akan datang dengan sendirinya tapi perlu diingat pengunjung tidak akan datang jika mereka tidak menemukan LINK atau alamat blog kita, betul tidak sobat ? sekarang saya akan berbagi pengalaman dengan sobat tentang bagaimana cara <b>Analisa Pengunjung blog</b>, agar kita bisa mengoptimalkan datangnya pengunjung, namun mohon maaf kalau pengalaman saya ini tidak sepaham dengan sobat, atau mungkin sobat menganggap ini omong kosong karena melihat trafik pengunjung blog inipun masih rendah bila dilihat dari data statistik histats. namun tak lepas dari itu perlu sobat ingat trafik pengunjung juga dipengaruhi dengan seberapa banyak jumlah posting dan seberapa lama blog tersebut usianya, mungkin buat blog yang sekarang sudah tumbuh menjadi blog terkenal dengan jumlah pengunjung ribuan perhari analisa ini sudah tidak diperlukan lagi namun buat blog seperti saya ini yang masih minim konten dan usia yang relative masih baru menganalisa pengunjung sangat perlu dilakukan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut cara mudah menganalisa pengunjung blog :</div>
<ul>
<li>Untuk menganalisa pengunjung blog sobat harus memasang beberapa widget yang menyangkut dengan statistik yang diantaranya widget counter stats, site info alexa, counterflag dan yang sangat penting sekali yaitu widget trafic feed dari feedjit.</li>
<li>Secara garis besar kita juga bisa menggunakan beberapa situs penyedia statistic seperti google analytic dan situs penyedia lainnya.</li>
</ul>
<div style="text-align: justify;">
Pada kesempatan kali ini saya akan membahas menganalisa secara mudah dengan menggunakan widget trafic feed dari feedjit dan ini penganalisa yang realtime paling gampang karena kita cukup melihat saja perkembangan widget tersebut. kalau sobat belum pasang widgetnya silahkan kunjungi situsnya di http://feedjit.com.<br />
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnt7RuuQopGS5B3vMY3azEsRYxADhvE6-0KiHwGmAyl0bYY627ZrmdMXf4NBfGDAOvr3pJLC9K6cTXU1e7aEvkMvc-YiZvVE4zP06sEXV29cd1-eHCwYKRgz3lNSDnHMVAuVUFBXJB9vQ/s1600/Screenshot_105.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnt7RuuQopGS5B3vMY3azEsRYxADhvE6-0KiHwGmAyl0bYY627ZrmdMXf4NBfGDAOvr3pJLC9K6cTXU1e7aEvkMvc-YiZvVE4zP06sEXV29cd1-eHCwYKRgz3lNSDnHMVAuVUFBXJB9vQ/s1600/Screenshot_105.png" /></a>cara menganalisa pengunjung dengan widget ini kita bisa tau mereka datang berasal dari mana baik itu asal negaranya, kotanya serta yang paling penting kita perhatikan adalah mereka datang datang melalui apa? apakah melalui mesin pencari, Lewat jalinan tukeran link atau melalui buku tamu.<br />
lihat contoh gmbar disamping:<br />
arrived = tiba, itu menunjukan dari sumber apakah mereka datang, apakah mereka datang dari pencarian google dengan kode google.com, google.co.id atau kalau dari luar negara akan ditampilkan kode setelah .com contoh gambar google.com.hk dan lihat pada bagian Viewed itu menadakan pengunjung itu melihat judul artikel apa yang ada di blog kita. apabila pengunjung yang datang melalui link kita yang disimpan di link sahabat maka akan ditampilkan pada arrivednya link atau nama bloh sahabat tersebut begitupun kalau datang dari buku tamu akan ditampilkan situsnya.<br />
<br />
Kesimpulan <b>Analisa Pengunjung Blog</b> bisa kita ketahui seberapa banyak atau sering pengunjung yang datang dari sumber yang dijelaskan diatas. kalau saja pada widget tersebut sangat sedikit atau kurang menampilkan pengunjung dari pencarial khususnya google maka kita perlu melakukan beberapa langkah untuk mengoptimalkannya yang diantaranya dengan <a href="http://azzam10.blogspot.com/2012/06/cara-membuat-blogwebsite-seo-friendly.html" title="Cara Membuat Blog/Website Seo Friendly">Cara Membuat Blog/Website Seo Friendly</a> atau mungkin harus mengecekduplikat konetn, baca <a href="http://azzam10.blogspot.com/2012/07/cara-menghilangkan-tag-judul-duplikat.html" title="Cara menghilangkan tag judul duplikat akibat archive">Cara menghilangkan tag judul duplikat akibat archive.</a> dan banyak lagi hal yang perlu dilakukan.<br />
mengapa kita harus mengoptimalkan pengunjung yang datang dari mesin pencari? karena pengunjung yang asli dan unik itu lah yang kita cari. berdasarkan pengalaman selama ini pengunjung yang datang dari buku tamu atau dari komentar buat blog ini kurang membantu karena keterbatasan waktu yang kita punya. tapi kalau buat yang sudah terbiasa blogwalking pasti itu sangat membantu sekali. apalagi buat yang menggunakan jaringan internetnya lemot wah sangat repot kalau harus mengandalkan blogwalking.<br />
<br />
Bagaimana sobat apakah sobat sudah mengetahui darimana pengunjung blog sobat berasal?<br />
Selamat mengoptimasi dan blogwalking salam sukses selalu..//<br />
</div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com12tag:blogger.com,1999:blog-679796549016769771.post-76508449887186583392012-08-24T10:56:00.001+07:002012-09-11T19:29:36.905+07:00Membuat Widget Kategori dengan 1 Thumbnail<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-74DFxr45OpcNr_X_Lrs-Bhy550aUf5ygbLsCOCyvYjnCRpOiSJp0lvmybb96mUMU0-OMUOt7Na51_I2r2X3rs6eZSCeRJyc8knLyPRrv-WW3F3L4Ihp0MRAk3pHkrL4vCj7bIwv9UWa/s1600/Screenshot_103.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Widget Kategori dengan 1 Thumbnail" border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-74DFxr45OpcNr_X_Lrs-Bhy550aUf5ygbLsCOCyvYjnCRpOiSJp0lvmybb96mUMU0-OMUOt7Na51_I2r2X3rs6eZSCeRJyc8knLyPRrv-WW3F3L4Ihp0MRAk3pHkrL4vCj7bIwv9UWa/s320/Screenshot_103.png" title="Membuat Widget Kategori dengan 1 Thumbnail" width="320" /></a></div>
<div style="text-align: justify;">
<b style="background-color: #fce5cd; color: blue;">Membuat Widget Kategori dengan 1 Thumbnail</b>, setelah artikel terdahulu saya share <b><a href="http://azzam10.blogspot.com/2012/07/membuat-widget-kategori-ala-website.html">Membuat widget Kategori Ala website portal</a></b> nah tutorial ini pada intinya sama seperti tutorial tersebut namun yang membedakan yaitu pada pemasangannya, pada tutorial ini pemasangannya sangat mudah karena kita bisa menempatkan <b>widget kategorinya</b> pada Gadget bawaan secara langsung, jadi kita bisa memasang dimana saja sesuai selera kita baik itu disidebar maupun dibawah postingan. kalau pada tutorial terdahulu kita memasang <b>widget</b> khusus dibawah postingan saja, namun pada widget sekarang apabila mau menambahkan dibawah postingan template sobat harus sudah ada gadget dibawah postingan terlebih dahulu, mungkin kalau yang templatenya masih bawaan blogger sobat tinggal menambahkan pada atur tata letak sehingga bisa menambahkan 2 atau 3 gadget dibawah postingan. Namun apabila template sobat sudah dirubah dan pengaturan tata letak sudah tidak berfungsi maka harus menambahkan gadget terlebih dahulu. nah buat sobat yang mau menambahkan gadget dibawah postingan atau diatas postingan baca di <b><a href="http://azzam10.blogspot.com/2012/08/membuat-2-kolom-dibawah-postingan-ii.html">Membuat 2 kolom dibawah Postingan II</a></b></div>
<div style="text-align: justify;">
Selanjutnya kita langsung aja ke poko bahasan <a href="http://azzam10.blogspot.com/2012/08/widget-kategori-dengan-satu-gambar.html"><b>Membuat Widget Kategori dengan 1 Thumbnail.</b></a><br />
<br />
<div class="button" style="text-align: center;">
<b><a href="http://azzam10-demo.blogspot.com/2012/08/kategory-dengan-satu-thumbnail.html" target="_blank">Lihat Demo</a></b></div>
</div>
<h3>
Langkah-lankahnya:</h3>
<b>Langkah 1: </b><br />
<ul style="text-align: justify;">
<li>Seperti biasa saja login ke blogger</li>
<li>klik rancangan/template jangan lupa setiap mau ngedit HTML download
lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal
ngembaliin, alasannya.</li>
<li>Klik edit HTML klik lanjutkan kemudian cari kode <span style="color: blue;">]]></b:skin></span><span style="color: black;"> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.</span></li>
</ul>
<blockquote class="tr_bq">
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#C0C0C0;margin-right:10px;height:60px;width:60px;padding:2px}<br />img.label_thumb:hover{background:#f7f6f6}<br />.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}<br />ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}</blockquote>
<ul>
<li>Klik edit HTML klik lanjutkan kemudian cari kode <span style="color: blue;"></head></span><span style="color: black;"> setelah ketemu letakan kode brikut ini tepat diatas kode tersebut.</span></li>
</ul>
<blockquote class="tr_bq">
<span style="color: black;"> </span><script src='http://my-project-favicon.googlecode.com/files/Kategorywiththumb.js' type='text/javascript'/></blockquote>
<ul>
<li>Simpan template sobat </li>
</ul>
<b>Langkah 2: </b><br />
<br />
Langkahnya sebagai berikut : <br />
<ul>
<li> Masih pada halaman blogger</li>
<li> Pilih Rancangan > Elemen laman > Tambah Gadget> HTML/Javascript</li>
<li> Copy kode dibawah ini pada kota HTML/Javascript</li>
</ul>
<blockquote class="tr_bq">
<script type='text/javascript'>var numposts = 1;var
showpostthumbnails = true;var displaymore = false;var displayseparator =
false;var showcommentnum = false;var showpostdate = false;var
showpostsummary = true;var numchars = 60;</script><br />
<script type="text/javascript" src="<b style="color: red;">http://azzam10.blogspot.com</b>/feeds/posts/summary/-/<b style="color: blue;">news</b>?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><br />
<script type="text/javascript"><br />
function recentpostslist(json) {<br />
document.write('<ul>');<br />
for (var i = 1; i < json.feed.entry.length; i++)<br />
{<br />
for (var j = 1; j < json.feed.entry[i].link.length; j++) {<br />
if (json.feed.entry[i].link[j].rel == 'alternate') {<br />
break;<br />
}<br />
}<br />
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs<br />
var entryTitle = json.feed.entry[i].title.$t;<br />
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";<br />
document.write(item);<br />
}<br />
document.write('</ul>');<br />
}<br />
</script><br />
<script src="<b style="color: red;">http://azzam10.blogspot.com</b>/feeds/posts/summary/-/<b style="color: blue;">news</b>?max-results=6&alt=json-in-script&callback=recentpostslist"></script><br />
<a href="<b style="color: red;">http://azzam10.blogspot.com</b>/search/label/<b style="color: blue;">news</b>" style="float:right;font:normal 11px Arial;padding:5px 0;">Artikel lain Kategori ini &#187;</a></blockquote>
<div style="text-align: justify;">
Silahkan tulisan berwarna <span style="color: red;">merah </span>ganti dengan URL Sobat </div>
<div style="text-align: justify;">
Yang berwarna <span style="color: blue;">biru</span> ganti dengan label blog yang sobat inginkan, ingat apabila label yang mau dipasang lebih dari satu kata maka harus dipisah dengan %20 serta pada penulisannya harus memperhatikan apakah awal kata tersebut besar atau kecil, Contoh untuk label Optimasi SEO diblog ini penulisannya "<span style="color: blue;">Optimasi%20Seo<span style="color: black;">" tanpa tanda kutip</span> </span>jadi harus sama dengan yang ada pada label blog sobat.</div>
<div style="text-align: justify;">
untuk memudahkan mengetahui label blog sobat apabila blog sobat sudah dipasang breadcrumb maka lihatlah pada halaman postingan bagian atas biasanya dibawah atau diatas judul dan label blog biasanya setelah Home atau beranda. atau bila sobat belum memasang breadcrumb sobat bisa membuka pada halaman edit post.<br />
Catatan:<br />
<span style="background-color: #fce5cd;">Widget ini bisa menggunakan URL atau link dari web/blog lain, silahkan masukan alamat URL lain pada warna merah dan labelnya pada warna biru. </span></div>
<div style="text-align: justify;">
<span itemprop="itemreviewed"><span itemprop="description"></span></span><span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com16tag:blogger.com,1999:blog-679796549016769771.post-33718367572734256422012-08-22T12:55:00.000+07:002012-08-22T13:03:47.648+07:00Manfaat Tukeran Link Menurut Anda<div style="text-align: justify;">
<b>Manfaat Tukeran Link Menurut Anda</b>, mungkin sobat sudah pada tau apa itu tukeran link oleh karena itu pada kesempatan ini kita saling tukeran pendapat mengenai hal ini. sobat blogger semua mungkin mempunyai pendapat <b>manfaat Tukeran Link </b>kan, itu sudah pasti.</div>
<div style="text-align: justify;">
Mungkin sobat sebelum berpendapat lebih jauh dapat membaca catatan dibawah ini yang saya ambil dari <b><a href="http://support.google.com/webmasters/bin/answer.py?hl=id&hlrm=en&answer=66356" rel="nofollow" target="_blank">support.google.com </a> </b>mengenai Link scheme atau skema tautan:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjYfjXwK4rm2pKpgQsG3RGpBD5Avp-nvEgYJ-AFAScMCfUfXa1W9HUVmt5-mFEkYdEvjU7LD7G0tLN41l5JhpdglZbH3fn2Lm-p959HviNgCic2yeeKCTpoUZtSCVKivNOQr4S5nn_WAS/s1600/indexwww.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjYfjXwK4rm2pKpgQsG3RGpBD5Avp-nvEgYJ-AFAScMCfUfXa1W9HUVmt5-mFEkYdEvjU7LD7G0tLN41l5JhpdglZbH3fn2Lm-p959HviNgCic2yeeKCTpoUZtSCVKivNOQr4S5nn_WAS/s1600/indexwww.jpg" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="background-color: #fff2cc; text-align: justify;">
Peringkat situs Anda dalam hasil telusur Google sebagian berdasarkan
pada analisis sits tersebut yang bertautan ke Anda. Kuantitas, kualitas
dan keterkaitan tautan berpengaruh pada peringkat Anda. Situs yang
bertaut ke Anda dapat memberikan konteks tentang pokok situs Anda, dan
dapat menyatakan kualitas dan popularitasnya. Namun, beberaa webmaster
terlibat dalam skema pertukaran tautan dan laman yang dibangun bersama
secara eksklusif sebagai usaha penautan silang yang tidak mengindahkan
kualitas tautan, sumber, dan akibat jangka panjang yang akan terjadi
pada situs mereka. Hal ini melanggar Google <a href="http://support.google.com/webmasters/bin/answer.py?answer=35769" rel="nofollow" target="_blank">pedoman webmaster</a> dan dapat memberikan pengaruh negatif terhadap peringkat situs Anda dalam hasil telusur. Contoh skema tautan meliputi:</div>
<ul style="background-color: #fff2cc; text-align: justify;">
<li>Tautan yang dimaksudkan untuk memanipulasi PeringkatLaman</li>
<li>Tautan ke spammer web atau lingkungan yang buruk di web</li>
<li style="color: blue;">Tautan timbal balik berlebihan atau pertukaran tautan berlebihan ("Tautkan ke saya dan saya akan menautkannya ke Anda.") "(<span style="color: red;">ini yang dimaksud Tukeran link</span>)"</li>
<li><a href="http://support.google.com/webmasters/bin/answer.py?answer=66736" rel="nofollow" target="_blank">Tautan pembelian dan penjualan yang melewati PeringkatLaman</a></li>
</ul>
<div style="background-color: #fff2cc; text-align: justify;">
Cara terbaik agar situs lain membuat tautan yang relevan pada Anda
adalam membuat isi yang unik dan relevan yang dapat memperoleh
popularitas dalam komunitas Internet dengan cepat. Semakin berguna isi
Anda, semakin besar kemungkinan orang lain menyadari bahwa isi terebut
berharga untuk pembacanya dan menaut ke isi tersebut. Sebelum mengambil
keputusan, tanyakan pertanyaan ini pada diri Anda: Apa hal ini akan
menguntungkan bagi para pengunjung laman Anda?</div>
<div style="background-color: #fff2cc; text-align: justify;">
Yang penting bukan hanya jumlah tautan yang menunjuk pada situs Anda,
tetapi juga kualitas dan keterkaitan tautan tersebut. Membuat pelunasan
isi yang baik: Tautan biasanya adalah usulan edtorial yang diberikan
dengan pilihan, dan komunitas buzzing blogger dapat menjadi empat yang
tepat untuk mendapatkan perhatian. </div>
<br />
<div style="text-align: justify;">
Nah mungkin setelah membaca catatan diatas mungkin kita dapat sedikit memahami apa manfaat tukeran link. sekarang apa <b>Manfaat Tukeran Link Menurut Anda</b> ??????</div>
<div style="text-align: justify;">
Kalau menurut saya manfaat tukeran link memang banyak sekali selain dapat meningkatkan popularitas dan peringkat blog kita sebagaimana dijelaskan diatas tukeran link juga akan mempererat tali persahabat diantara blogger dengan cara saling mengunjungi satu sama lain dengan tukeran link kita bisa saling berbagi informasi satu sama lain secara spontanitas.</div>
<div style="text-align: justify;">
Tapi perlu kita ingat bahwa pertukaran link yang akan menimbulkan efek baik itu yang bagaimana? </div>
<div style="text-align: justify;">
Saya contohkan saja, apabila kita bertukeran link dengan blog yang asal-asalan apakah akan berefek baik, maksud asal-asalan disini yaitu blog yang pemiliknya tidak serius mengurus blognya asal jadi terus karena orang lain rame-rame tukeran link terus ikut-ikutan setelah itu blognya dibiarkan Update artikelnya sudah tidak karu-karuan dalam sebulan 1 artikel bahkan tidak update sekalipun apdate hanya hasil copi paste nah apakah bertukeran link dengan blog seperti itu berefek baik??? sobat semua jawab sendiri aja ya... Oh iya, lalu bagaimana cara mengatasi apabila kita sudah terlanjur bertukar link dengan blog seperti itu? Itu saya juga belum ada solusinya, mau dihapus bagaimana? dibiarin juga bagaimana karena akan berefek buruk pada blog kita apabila membaca catatan dari mbah google diatas. kalau dihapus terkadang kita merasa ngga enak lagi kalau ternyata link kita masih nempel pada blog asal tersebut, padahal meskipun link kita terpasang itu hanya jadi hiasan saja.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Seakarang buat tukeran link dengan blog yang pemiliknya memang aktif update secara teratur, inipun belum tentu akan menimbulkan efek baik buat blog kita karena mungkin saja link kita yang terpasang itu yak pernah sekalipun di klik diblog tersebut jangankan orang lain pemiliknya sendiripun tak pernah mengkliknya melalui link tersebut.. hehehe itu sebagian. kalau sobat yang baca artikel ini pastinya tidak demikian. </div>
<div style="text-align: justify;">
Sobat mungkin suka memeriksa blog sobat di webmaster tool, Google analytic atau di statistik blogger bahkan di backlink acording alexa atau bing. sobat suka buka yang menyangkut situs perujuk pastinya sobat bisa melihat disana kan rujukan dari mana saja yang membuka blog kita, dan apakah blog yang telah kita pasang linknya ada pada situs perujuk tersebut? tentu ada tapi hanya sebagian kan. itu pengalaman saya. nah yang ada sebagai situs perujuk itu yang berarti dan memberikan efek baik buat kita kalau yang ga pernah nongol disana itu sudah pasti kebalikannya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Suatu hal yang memang jadi kebiasaan bagi blogger manakala bertukeran link mereka anggap hanya cukup memasang saja. pada kelanjutannya kalau menurut saya disaat sudah memasang link kita pantau tiap hari link sahabat tersebut apakah mereka ada yang update akalau ada kita kunjungi pada tiap update-an mereka, nah biar tau update-an mereka maka pergunakanlah cara pasang link sahabat seperti blog ini dimana saya selalu tau update-an sahabat dan langsung mengunjunginya ( lihat link sahabat sidebar bagian atas) untuk membuat link sahabat seperti itu baca <a href="http://azzam10.blogspot.com/2012/07/membuat-widget-link-sahabat-unik.html" title="Membuat widget Link Sahabat Unik">Membuat widget Link Sahabat Unik.</a></div>
<div style="text-align: justify;">
Semoga saja semua blogger menggunakan cara pasang link sahabat seperti itu semua, biar fungsi dan manfaat tukeran link semakin maksimal.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oh iya kebanyakan ni nulisnya, bikin bosan aja pembaca hehehe... Oh iya sobat sobat lihat tukeran link blog ini yang paling bawah dia update sudah berapa lama. itu yang masih saya simpan bahkan ada beberapa yang updatenya sudah 4 bulan yang lalu sampai sekarang tidak update lagi.. hehehe. jangankan buat nglik link kita buka blog sendiri aja jarang bahkan blognyapun ga pernah dibuka, nah yang dirugikan siapa? ya sudah pasti kita yang selalu update secara rutin kenapa dirugikan ya sudah tentu sobat baca lagi aja catatan si mbah google diatas. mending kalau tidak menjadi beban buat blog kita coba kalau hanya sekedar kita memasang link seperti itu terus berefek pada blog kita di SERP. sungguh terlalu.... </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Selanjutnya Bagaimana menurut sobat? apabila ada ide dan pengalamannya dibagi-bagi ya.... <span itemprop="itemreviewed"><span itemprop="description"></span></span></div>
<div style="text-align: justify;">
<br /></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com20tag:blogger.com,1999:blog-679796549016769771.post-17454119576781571862012-08-21T10:43:00.000+07:002012-08-21T10:43:08.228+07:00Cara Menambah dan Mengganti jenis Font pada blog<div style="text-align: justify;">
<b>Cara Menambah dan Mengganti jenis Font pada blog</b>, ini saya share buat sobat yang ingin merubah tampilan font/huruf pada blognya menjadi lebih menarik karena secara default <b>font</b> yang disediakan sangat terbatas. cara ini mungkin berguna buat merubah penampilan blog kita sehingga tidak monoton dalam penggunaan <b>jenis font</b>, sobat bisa menggunakan<b> font</b> sesuai dengan keinginan sehingga akan membuat blog semakin menarik dan bervariasi. secara default font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings, <b>jenis fon</b>t tersebut terkadang tidak sesuai dengan keinginan, Nah untuk memenuhi keinginan kita dalam <b>jenis font</b> maka cara ini perlu dilakukan agar blog kita lebih stylis dan elegan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ok.. kiat langsung saja pada <b>Cara Menambah dan Mengganti jenis Font pada blog</b>, ikuti langkahnya-langkahnya;</div>
<h3 style="text-align: justify;">
Langkah Pertama Mengambil script font: </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXtU7ZFGBg2tqcqWsYcjJ8xaCYUdO2ycQ1EnUNvxzaCYoKhzjvzjiB6-R9ML6dJqc6YfLGQpPXYCESG8dWyaV2sK9NKIQFOBzIjw2yQhO-1KJgc__S2XuwQarHZdJm98o3ZWW9wGU8sPt/s1600/lightshot11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menambah dan Mengganti jenis Font pada blog" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXtU7ZFGBg2tqcqWsYcjJ8xaCYUdO2ycQ1EnUNvxzaCYoKhzjvzjiB6-R9ML6dJqc6YfLGQpPXYCESG8dWyaV2sK9NKIQFOBzIjw2yQhO-1KJgc__S2XuwQarHZdJm98o3ZWW9wGU8sPt/s400/lightshot11.png" title="Cara Menambah dan Mengganti jenis Font pada blog" width="400" /></a></div>
<ul style="text-align: justify;">
<li>Buka Situs <b><a href="http://www.google.com/webfonts/" rel="nofollow" target="_blank">Google Web Font</a></b> </li>
<li>Silahkan sobat cari jenis font yang diinginkan dengan cara menggulir scroll kebawah (lihat no. 1 pada gambar ), tambahkan font dengan mengklik <span style="font-weight: bold;">Add to Collection. </span>sobat bisa menambahkan jenis font lebih dari satu. ( lihat no. 2 pada gambar ) sehingga akan nampak hasil penambahannya pada bagian bawah seperti ini;</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtG0WhvA8IUj2EpO_9GTrlWdMzW7c1hGB5aBk4A8YB_Vgm5a8-v8rgBcIUzlcS-Ux2amSLGhMTVOsZUQ_Ngx1MFIAftpH4AlkL6_AwlE0P-1a4R0PK5Mp7GZDOPAbP8iEsuOvhfD-g43U7/s1600/Screenshot_98.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jenis Font pada blog" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtG0WhvA8IUj2EpO_9GTrlWdMzW7c1hGB5aBk4A8YB_Vgm5a8-v8rgBcIUzlcS-Ux2amSLGhMTVOsZUQ_Ngx1MFIAftpH4AlkL6_AwlE0P-1a4R0PK5Mp7GZDOPAbP8iEsuOvhfD-g43U7/s200/Screenshot_98.png" title="jenis Font pada blog" width="200" /></a></div>
<ul style="text-align: justify;">
<li>Setelah sobat menambahkan beberapa font sobat klik <b>USE </b>yang ada disebelah kanan bawah ( lihat no. 3 pada gambar paling atas )</li>
<li>Setelah itu perhatikan gambar Page load di sebelah kanan berapakah nilai meter tersebut dan itu menunjukan kecepatan load huruf tersebut, usahakan kita menggunakan font dengan nilai yang rendah atau agar nilainya rendah kita menambahkannya cukup satu font saja yang sangat diperlukan.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2Q4TrOIJg75HYUaM_6PnmNGJlSeRP_FVh1LBiL0O_s9aV-JlhL84t9y7KzCcsjJtXPo0YlqIqf06TI9UX_ZnBzUkxrvu564rpjjo1qeG3AobFz-MJEVt-xnyqg5iP4Qit0QZcWcbta_l/s1600/Screenshot_99.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menambah dan Mengganti Font" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2Q4TrOIJg75HYUaM_6PnmNGJlSeRP_FVh1LBiL0O_s9aV-JlhL84t9y7KzCcsjJtXPo0YlqIqf06TI9UX_ZnBzUkxrvu564rpjjo1qeG3AobFz-MJEVt-xnyqg5iP4Qit0QZcWcbta_l/s200/Screenshot_99.png" title="Menambah dan Mengganti Font" width="195" /></a></div>
<ul>
<li>Selanjutnya scroll kebawah dan akan ada kode script pada kotak seperti ini.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfynEQGY5iS33gHto6NAgBVX3lTTO3Z9hYAnQvlf-5KXKT_F-1JpoGyiQpHCfHEFy5MgxTD4BavQYQswNklPkrf2hr3xpGjYwGkIg7lzVG1pi3W_9ojN6m-X1B8v7iRgnIr2Cp_9NXHQQ/s1600/Screenshot_100.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Jenis font" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfynEQGY5iS33gHto6NAgBVX3lTTO3Z9hYAnQvlf-5KXKT_F-1JpoGyiQpHCfHEFy5MgxTD4BavQYQswNklPkrf2hr3xpGjYwGkIg7lzVG1pi3W_9ojN6m-X1B8v7iRgnIr2Cp_9NXHQQ/s320/Screenshot_100.png" title="Jenis font" width="320" /></a></div>
<ul>
<li>Copy script yang ada pada kotak, sebagai contoh;</li>
</ul>
<blockquote class="tr_bq">
<link href='http://fonts.googleapis.com/css?family=<span>McLaren|Oregano</span>' rel='stylesheet' type='text/css'></blockquote>
<h3 style="text-align: justify;">
Langkah Kedua <b>Menambah dan Mengganti jenis Font pada blog</b>: </h3>
<ul style="text-align: justify;">
<li>login ke blogger</li>
<li>buka halaman edit HTML</li>
<li>Cari kode <b><b:skin><![CDATA[</b> selanjutnya paste kode script tadi tepat diatas kode <b:skin><![CDATA[ tersebut. atau sobat bisa juga mempastenya tepat dibawah kode <b><head>.</b></li>
<li>Tambahkan kode slash "<span style="color: red; font-weight: bold;">/</span>" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:</li>
</ul>
<blockquote class="tr_bq">
<link href='http://fonts.googleapis.com/css?family=<span>McLaren|Oregano</span>' rel='stylesheet' type='text/css'<b style="color: red;">/</b>></blockquote>
<ul>
<li>Sekarang sobat tinggal mengganti font pada template, sobat tinggal cari saja kalimat <b><span style="color: blue;">font-family </span></b><span style="color: black;">atau agar lebih gampang tekan control+F di keyboard</span>. perhatikan kalimat sebelumya tepatnya sebelum tanda "<b><span style="color: blue;"><span style="color: red;">{</span>"</span></b>. contoh;</li>
</ul>
<blockquote class="tr_bq">
1. <span style="color: magenta;">body</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"Lucida Grande",Tahoma,Verdana</span>;font-size:11px;margin:0;}<br />
2. <span style="color: magenta;">header</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"Lucida Grande",Tahoma,Verdana</span>;font-size:11px;margin:0;}<br />
3. <span style="color: magenta;">post h3</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"Lucida Grande",Tahoma,Verdana</span>;font-size:11px;margin:0;}</blockquote>
<ul>
<li>perhatikan contoh diatas yang diberi warna pink, nah itu adalah alamat yang mau diganti fontnya. <span style="color: magenta;">body</span>=untuk seluruh halaman blog secara default, <span style="color: magenta;">header<span style="color: black;">=untuk judul blog dan <span style="color: magenta;">post h3</span>= untuk judul postingan. ganti kode yang berwarna merah dengan kode font baru sobat, akhirnya seperti ini;</span></span></li>
</ul>
<blockquote class="tr_bq">
1. <span style="color: magenta;">body</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"McLaren", cursive</span>;font-size:11px;margin:0;}<br />
2. <span style="color: magenta;">header</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"McLaren", cursive</span><span style="color: red;"></span>;font-size:11px;margin:0;}<br />
3. <span style="color: magenta;">post h3</span>{color:#444;<span style="color: blue;">font-family</span>:<span style="color: red;">"McLaren", cursive</span><span style="color: red;"></span>;font-size:11px;margin:0;}</blockquote>
<ul>
<li>yang menjadi pokok huruf adalah yang diantara "." sedang cursive adalah font defaultnya disaat kode diantara "." tidak tampil.</li>
<li>untuk menentukan kode diantara "." sobat tinggal lihat di situs google web font paling bawah atau sobat bisa melihat langsung dari scriptnya;</li>
</ul>
<blockquote class="tr_bq">
<link href='http://fonts.googleapis.com/css?family=<span style="color: red;">McLaren|Oregano</span>' rel='stylesheet' type='text/css'<b style="color: black;">/</b>></blockquote>
<ul>
<li>sobat perhatikan yang berwarna merah disana ada dua jenis huruf yang dipisahkan dengan "<b><span style="color: red;">|<span style="color: black;">". </span></span></b><span style="color: red;"><span style="color: black;">yaitu</span></span><b><span style="color: red;"><span style="color: black;"> </span></span></b><span style="color: red;">McLaren <span style="color: black;">dan</span> </span><span style="color: red;">Oregano<span style="color: black;"> itulah jenis hurufnya yang harus dimasukan.</span></span></li>
</ul>
<span style="color: red;"><span style="color: black;">Catatan; </span></span><br />
<span style="color: red;"><span style="color: black;">contoh alamat yang akan diganti diatas mungkin tidak sama antara satu template dengan yang lainnya, maka saya sarankan sobat untuk menggunakan kotak pencarian dengan </span></span><span style="color: black;"> menekan control+F di keyboard kemudian fokuskan perhatian pada kata sebelum tanda </span>"<b><span style="color: blue;"><span style="color: red;">{</span>"</span></b><span style="color: blue;"><span style="color: black;">nya, sebagai contoh untuk header terkadang dengan menggunakan <span style="color: magenta;">header</span> saja namun ada juga <span style="color: magenta;">header h1</span> atau <span style="color: magenta;">header a</span>. itu terjadi pada yang lainnya juga.</span></span>
<br />
<br />
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com19tag:blogger.com,1999:blog-679796549016769771.post-77142012525909636882012-08-18T22:29:00.004+07:002012-08-18T23:01:12.194+07:00Cara Membuat Artikel Terkait / Related Post <div style="text-align: justify;">
<b style="background-color: orange; color: blue;">Cara Membuat Artikel Terkait / Related Post</b>, pada kesempatan kali ini saya akan berbagi <b>cara membuat Artikel Terkait</b> yang hanya menampilkan judul postingannya saja, ini memenuhi permintaan sahabat yang berkomentar diblog ini. Sahabat tersebut sebenarnya meminta untuk dikirim langsung lewat Email namun ga ada salahnya saya punya inisiatif mempostingnya biar lebih jelas dan mungkin ada sahabat lain yang membutuhkannya. sahabat tersebut meminta script <b>artikel terkait</b> seperti pada blog ini;</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1klyslRLenfTiRRkDHyyKNzthKhg_ASyCqN-dqM_XsMJT7iZ9n60AUblCnnDclanrIQlVQUNXDTV0de3aAuxpiXGgL2oAwNLjWYA7DiG311vqvipS0OjyfliAglLTkxT-VjtY0lohy0Uz/s1600/Screenshot_97.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Artikel Terkait / Related Post " border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1klyslRLenfTiRRkDHyyKNzthKhg_ASyCqN-dqM_XsMJT7iZ9n60AUblCnnDclanrIQlVQUNXDTV0de3aAuxpiXGgL2oAwNLjWYA7DiG311vqvipS0OjyfliAglLTkxT-VjtY0lohy0Uz/s320/Screenshot_97.png" title="Cara Membuat Artikel Terkait / Related Post " width="320" /></a></div>
<div style="text-align: justify;">
sebelum saya pasang <b>artikel terkait</b> diblog ini yang ada gambar/thumbnailnya namun setelah dipikir-pikir artikel terkait seperti itu apalagi yang bergerak / pake marque ternyata kurang efektif karena kelihatannya hanya sekilas, kalau memakai seperti ini mungkin pengunjung yang ingin mencari artikel lainnya dimudahkan dalam pencariannya.</div>
<div style="text-align: justify;">
Artikel terkait ini sangat cocok kalau dipadukan dengan <a href="http://azzam10.blogspot.com/2012/08/cara-membuat-2-kolom-widget-dibawah-postingan.html"><b>Cara Membuat 2 kolom widget dibawah postingan</b> </a>karena ini sesuai permintaan sahabat saya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langkah-langkah<b> Membuat Artikel Terkait / Related Post</b> sebagai berikut;</div>
<h3 style="text-align: justify;">
Langkah Pertama :</h3>
<ul style="text-align: left;">
<li>Seperti biasa saja login ke blogger</li>
<li>klik rancangan/template jangan lupa setiap mau ngedit HTML download
lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal
ngembaliin.</li>
<li>Klik edit HTML klik lanjutkan centang Expand Template Widget kemudian cari kode <span style="color: blue;">]]></b:skin></span><span style="color: black;"> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.</span></li>
</ul>
<blockquote class="tr_bq">
#related{height:<span style="color: red;">160</span>px;overflow:auto}<br />
#related ul{margin:0;padding:5px 5px 5px 25px}<br />
#related li{font-size:10px;margin:0;padding:0;line-height:15px;text-align:left} </blockquote>
<ul>
<li>Selanjutnya cari kode <b style="color: blue;"></head></b> kemudian letakkan script di bawah ini tepat di atas kode <b style="color: blue;"></head></b></li>
</ul>
<blockquote class="tr_bq">
<script type="text/javascript"><br />
//<![CDATA[<br />
var relatedTitles = new Array();<br />
var relatedTitlesNum = 0;<br />
var relatedUrls = new Array();<br />
function related_results_labels(json) {<br />
for (var i = 0; i < json.feed.entry.length; i++) {<br />
var entry = json.feed.entry[i];<br />
relatedTitles[relatedTitlesNum] = entry.title.$t;<br />
for (var k = 0; k < entry.link.length; k++) {<br />
if (entry.link[k].rel == 'alternate') {<br />
relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />
relatedTitlesNum++;<br />
break;}}}}<br />
function removeRelatedDuplicates() {<br />
var tmp = new Array(0);<br />
var tmp2 = new Array(0);<br />
for(var i = 0; i < relatedUrls.length; i++) {<br />
if(!contains(tmp, relatedUrls[i])) {<br />
tmp.length += 1;<br />
tmp[tmp.length - 1] = relatedUrls[i];<br />
tmp2.length += 1;<br />
tmp2[tmp2.length - 1] = relatedTitles[i];}}<br />
relatedTitles = tmp2;<br />
relatedUrls = tmp;}<br />
function contains(a, e) {<br />
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br />
return false;}<br />
function printRelatedLabels() {<br />
var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />
var i = 0;<br />
document.write('<ul>');<br />
while (i < relatedTitles.length && i < 20) {<br />
document.write('<li><a href="' + relatedUrls[r] + '">' +<br />
relatedTitles[r] + '</a></li>');<br />
if (r < relatedTitles.length - 1) {<br />
r++;<br />
} else {<br />
r = 0;}<br />
i++;}<br />
document.write('</ul>');}<br />
//]]><br />
</script></blockquote>
<ul style="text-align: justify;">
<li>Atau kalau sobat mau yang simple boleh menggunakan script dibawah ini sebagai ganti kode diatas, kode dibawah ini sudah saya hosting namun kalau sobat mau menghosting sendiri script diatas silahkan sobat hosting terlebih dahulu.</li>
</ul>
<blockquote class="tr_bq">
<script src='http://my-project-favicon.googlecode.com/files/Related-post.js' type='text/javascript'/></blockquote>
<h3>
Langkah Kedua</h3>
<div style="text-align: justify;">
Pada langkah kedua ini kalau sobat mau memasangnya pada kolom yang telah disediakan atau sudah memasang <a href="http://azzam10.blogspot.com/2012/08/cara-membuat-2-kolom-widget-dibawah-postingan.html"><b>Cara Membuat 2 kolom widget dibawah postingan</b></a> maka sobat tinggal memasukan kode dibawah ini pada kolom yang telah disediakan pada tutorialtersebut atau pada <span style="color: blue;">( </span><span style="color: blue;">Letakan Widget disini.)<span style="color: black;">, namun jika sobat mau memasang secara langsung maka sobat cari kode </span></span><b><data:post.body/></b> kemudian letakkan script berikut ini di bawah kode <b><data:post.body/> </b>apabila menemukan kode tersebut lebih dari satu maka simpan kode dibawah ini setelah kode <b><span style="color: black;"><data:post.body/></span></b><span style="color: black;"> </span> yang kedua.</div>
<blockquote class="tr_bq">
<div style='font-size:12px;text-align:center;padding-top:0px;background:#000;'><font color='#ffffff'><b>BACA JUGA ARTIKEL TERKAIT LAINNYA</b></font></div><br />
<div id='related'><br />
<b:if cond='data:post.labels'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;' type='text/javascript'/><br />
</b:if><br />
</b:loop><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'><br />
removeRelatedDuplicates();<br />
printRelatedLabels();<br />
</script><br />
</b:if> </div></blockquote>
Keterangan;<br />
- height:<span style="color: red;">160</span>px itu adalah tingginya sobat bisa sesuaikan.<br />
<br />
<div style="text-align: justify;">
Itulah <b>Cara Membuat Artikel Terkait / Related Post </b>seperti pada blog ini, semoga berhasil. Oh iya mungkin sobat mau artikel terkait lainnya <b><a href="http://azzam10.blogspot.com/2012/06/membuat-artikel-terkait.html" target="_blank">Membuat Atikel Terkait dengan Gambar thumbnail bergerak</a></b></div>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com13tag:blogger.com,1999:blog-679796549016769771.post-70683197006158793672012-08-17T14:42:00.000+07:002012-08-18T13:28:48.470+07:00Fungsi Terbilang Pada Excel<div class="w580 ml_5" style="text-align: justify;">
<div style="text-align: justify;">
<b>Fungsi Terbilang Pada Excel </b>ini saya sampaikan buat sobat yang suka menggunakan microsoft excel dalam bekerja sehari-harinya terutama yang berhubungan dengan angka uang yang terkadang angka tersebut perlu dirubah dalam bentuk huruf, nah dengan <b>Fungsi Terbilang Pada Excel</b> ini maka pekerjaan akan sedikit ringan karena pada saat kita menuliskan jumlah uang dalam angka kemudian harus dirubah dalam bentuk huruf kalau secara manual terkadang merepotkan apalagi dalam jumlah banyak <b>Fungsi Terbilang </b>ini maka kita hanya perlu menuliskan rumusnya saja dan secara otomatis huruf terbilang tersebut akan muncul. <b>Fungsi Terbilang </b>ini sangat membantu dalam pembuatan terutama pembuatan kuetansi dan lainnya yang berhubungan dengan penulisan uang. Ok berikut saya sampaikan cara lengkapnya pemasangan <b>Fungsi Terbilang pada Excel;</b></div>
<br />
<div style="text-align: justify;">
Terlebih dahulu sobat harus mendowload file terbilang.xla terlebih dahulu <a href="http://www.ziddu.com/download/20139086/terbilang.rar.html" rel="nofollow" target="_blank"><b style="color: blue;">DISINI</b></a><br />
dan selanjutnya sobat harus memasang file tersebut dalam microsoft excel sobat jangan lupa untuk meng exstractnya terlebih dahulu selanjutnya pasang dengan cara:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyIkR-DJFAJg9J5CzGcnfrtgheNcYIxFhT5m4bIM5MUrWnSEwddvw-JWTnP9OEiMkMeEQqiCuQqLv6SKvn4b-D4hzWiV9Poxs2NmUfkZkdpjADSJgnfcHHmHX8DeCI35xbvUNelsduQGT/s1600/Screenshot_93.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyIkR-DJFAJg9J5CzGcnfrtgheNcYIxFhT5m4bIM5MUrWnSEwddvw-JWTnP9OEiMkMeEQqiCuQqLv6SKvn4b-D4hzWiV9Poxs2NmUfkZkdpjADSJgnfcHHmHX8DeCI35xbvUNelsduQGT/s1600/Screenshot_93.png" /></a></div>
<div style="text-align: justify;">
</div>
</div>
Untuk Microsoft Office Excel 2000/2003 :<br />
<ol>
<li>Buka Excel anda.</li>
<li>Masuk ke Tools >> Macro >> Security</li>
<li>Pilih <b>Low</b> kemudian OK</li>
<li>Masuk ke Tools >> Add-ins >> Browse</li>
<li>Arahkan ke file terbilang.xla yang sudah anda download sebelumnya</li>
<li>Jangan lupa aktifkan (centang) terbilang pada daftar add-in</li>
<li>Klik OK dan siap digunakan</li>
</ol>
<br />
Untuk Microsoft Office Excel 2007/2010 :<br />
<ol>
<li>Buka Excel Anda</li>
<li>Klik Office Button (tombol yang bulat di pojok kiri atas ) pilih Excel Options</li>
<li>Pilih Trust Centre >> Trust Centre Settings >> Macro Settings</li>
<li>Pada Macro settings pilih <b>Enable All Macro </b>kemudian klik OK</li>
<li>Masuk ke Menu Add-Ins (Di atas Trust Center)</li>
<li>Klik Go dibagian paling bawah</li>
<li>Browse dan arahkan ke file terbilang.xla yang sudah anda download sebelumnya.</li>
<li>Jangan lupa aktifkan (centang) terbilang padadaftar add-in</li>
<li>Klik OK dan siap digunakan.</li>
</ol>
Nah sekarang berlanjut pada contoh contoh penggunaan saya kasih contoh yang sederhana saja<br />
<br />
<div dir="ltr">
Pada cell A1 ketikkan <b>1250</b></div>
<div dir="ltr">
Untuk menghasilkan terbilang di cell A2, ketik rumus <b><br /></b></div>
<ul>
<li><b>=terbilang(A1) </b>akan menghasilkan kata <b>seribu dua ratus lima puluh </b></li>
<li><b>=terbilang(A1)&" rupiah"</b> akan menghasikan kata <b>seribu dua ratus lima puluh </b><b> rupiah</b></li>
<li><b>=proper(terbilang(A1)&" rupiah") </b>akan menghasilkan kata <b>Seribu Dua Ratus Lima Puluh </b><b> Rupiah</b></li>
<li><b>=upper(terbilang(A1)&" rupiah") </b>akan menghasilkan kata <b>SERIBU DUA RATUS LIMA PULUH RUPIAH. </b></li>
</ul>
- Proper untuk Huruf besar di awal kalimat<br />
- Upper untuk huruf besar semua<br />
- Sebelum kalimat rupiah beri sepasi.<br />
<br />
<br />
<ul>
</ul>
Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com6tag:blogger.com,1999:blog-679796549016769771.post-30072172092873984442012-08-15T12:40:00.002+07:002012-08-19T18:57:17.281+07:00Situs Tool Generator Kode CSS3<div style="text-align: center;">
</div>
<table border="1" cellpadding="0" cellspacing="0" style="width: 582px;"><colgroup><col style="mso-width-alt: 21284; mso-width-source: userset;"></col></colgroup></table>
<b>Situs Tool Generator Kode CSS3</b>, Buat sobat yang suka ngedit template mungkin sobat memerlukan <b>Tool generator kode CSS</b> untuk membuat beberapa efek atau fitur lain yang diperlukan menggunakan CSS. sebagai informasi saja dengan generator <b>kode CSS</b> maka kita bisa menata tampilan blog kita sedikit lebih menarik tampa harus menggunakan gambar yang terkadang memberatkan loading, dengan CSS maka hal itu dapat diatasi. dengan alat ini maka kita dimudahkan dalam penulisan kodenya karena cukup memasukan nilai kemidian tinggal copy paste kedalam template kita. ada banyak <b>tool generaor CSS</b> namun pada kesempatan ini saya akan menyampaikan beberapa situs saja yang mungkin dapat sobat coba penggunaannya.<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIYn8HpRlULiIx4KBhkIdaNu-m4THvmOv8h2c9zJV0rwuouKkpx8aPrcD4totyzxl3zySPcA_qFEEDv4nsRtM2zcRlxMgn6MSD0OaM9TPJaac8jsPjvvtWxBra8y3PjgEcZz-1yQR0uE/s1600/index333.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Situs Tool Generator Kode CSS3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIYn8HpRlULiIx4KBhkIdaNu-m4THvmOv8h2c9zJV0rwuouKkpx8aPrcD4totyzxl3zySPcA_qFEEDv4nsRtM2zcRlxMgn6MSD0OaM9TPJaac8jsPjvvtWxBra8y3PjgEcZz-1yQR0uE/s1600/index333.jpg" title="Situs Tool Generator Kode CSS3" /></a></div>
Berikut Daftar <b>Situs Tool Generator CSS3</b>:</div>
<ol>
<li>http://www.wordpressthemeshock.com/css-drop-shadow/ </li>
<li>http://www.webtutorialplus.com/css3-generator.aspx </li>
<li>http://www.typetester.org/ </li>
<li>http://www.text-image.com/ </li>
<li>http://www.joelambert.co.uk/morf/ </li>
<li>http://www.imgtocss.com/ </li>
<li>http://www.csstextwrap.com/ </li>
<li>http://www.cssportal.com/online-css-editor/ </li>
<li>http://www.css3shapes.com/ </li>
<li>http://www.css3generator.com/ </li>
<li>http://www.css3d.net/ribbon-generator/ </li>
<li>http://www.css3.me/ </li>
<li>http://www.colorzilla.com/gradient-editor/ </li>
<li>http://www.cleancss.com/ </li>
<li>http://www.3dcsstext.com/ </li>
<li>http://westciv.com/tools/gradients/ </li>
<li>http://westciv.com/tools/boxshadows/index.html </li>
<li>http://stylebuilder.telerik.com/ </li>
<li>http://patternizer.com/imd3 </li>
<li>http://matthewlein.com/ceaser/ </li>
<li>http://leaverou.github.com/animatable/ </li>
<li>http://layerstyles.org/builder.html </li>
<li>http://layerstyles.org/ </li>
<li>http://lab.xms.pl/css-generator/ </li>
<li>http://grid.mindplay.dk/ </li>
<li>http://gradients.glrzad.com/ </li>
<li>http://csswarp.eleqtriq.com/ </li>
<li>http://csstypeset.com/ </li>
<li>http://css-tricks.com/examples/ButtonMaker/ </li>
<li>http://cssround.com/ </li>
<li>http://cssmate.com/csseditor.html </li>
<li>http://cssload.net/ </li>
<li>http://csslayoutgenerator.com/ </li>
<li>http://csscreator.com/version2/pagelayout.php </li>
<li>http://csscorners.com/ </li>
<li>http://cssarrowplease.com/ </li>
<li>http://css3please.com/ </li>
<li>http://css3maker.com/ </li>
<li>http://css3generator.com/ </li>
<li>http://css3gen.com/box-shadow/ </li>
<li>http://css3designer.com/tools </li>
<li>http://css3clickchart.com/ </li>
<li>http://css3button.net/ </li>
<li>http://css3.mikeplate.com/ </li>
<li>http://codefuture.co.uk/css/css3-Transform.php </li>
<li>http://border-radius.com/</li>
</ol>
Silahkan sobat coba saja sendiri kelebihan dan kekurangan dari situs diatas. Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com8tag:blogger.com,1999:blog-679796549016769771.post-91694781945343107942012-08-15T11:09:00.001+07:002012-08-15T11:09:19.504+07:00Membuat 2 kolom dibawah Postingan II<div style="text-align: justify;">
<span class="fullpost"><b>Membuat 2 kolom dibawah Postingan II</b>, setelah beberapa hari yang lalu saya membuat tutorial </span><a href="http://azzam10.blogspot.com/2012/08/cara-membuat-2-kolom-widget-dibawah-postingan.html">Cara Membuat 2 kolom widget dibawah postingan </a>sekarang saya akan berbagi <span class="fullpost"><b>Membuat 2 kolom dibawah Postingan</b> dengan cara yang kedua, pada cara yang kedua ini ada kelebihan dimana pemasangan widgetnya tidak secara langsung di halaman edit HTML melainkan berada di halaman Tata letak sehingga kalau sudah memasang cara ini kita akan secara mudah memasang widgetnya ditambah lagi dengan cara ini kita bisa memasang beberapa widget langsung pada tiap elemennya.biar tidak panjang lebar kita langsung saja ke pokok bahasan saja. berikut langkah-langkahnya ;</span></div>
<ul style="text-align: justify;">
<li>Seperti biasa saja login ke blogger</li>
<li>klik rancangan/template jangan lupa setiap mau ngedit HTML download
lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal
ngembaliin, alasannya.</li>
<li>Klik edit HTML klik lanjutkan kemudian cari kode <span style="color: blue;">]]></b:skin></span><span style="color: black;"> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.</span></li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<span class="fullpost">#bawahpost h2{</span><br />
<span class="fullpost">font-size:13px;</span><br />
<span class="fullpost">font-weight:bold;</span><br />
<span class="fullpost">color:#000;</span><br />
<span class="fullpost">border-bottom:2px solid #000000;</span><br />
<span class="fullpost">padding-left:5px;</span><br />
<span class="fullpost">}</span><br />
<span class="fullpost">#bawahpost{</span><br />
<span class="fullpost"><span style="color: #cc0000;">width:600px;</span></span><br />
<span class="fullpost">}</span><br />
<span class="fullpost">#bawahleft{</span><br />
<span class="fullpost"><span style="color: #3333ff;">width:290px; /*lebar kolom kiri*/</span></span><br />
<span class="fullpost">float:left;</span><br />
<span class="fullpost">margin:4px;</span><br />
<span class="fullpost">}</span><br />
<span class="fullpost">#bawahright{</span><br />
<span class="fullpost"><span style="color: #3333ff;">width:290px; /*lebar kolom kanan*/</span></span><br />
<span class="fullpost">float:right;</span><br />
<span class="fullpost">margin:4px;</span><br />
<span class="fullpost">}</span></blockquote>
</div>
<ul style="text-align: justify;">
<li>kode berwarna merah itu sesuaikan dengan lebar halaman postingan sobat yang biasanya lebar postingan berada pada kode CSS "main-wrapper" kemudian lihat kode yang berwarna biru itu lebar kolom yang akan dibuat dimana ukurannya yaitu kode yang berwarna merah dibagi 2 setelah dikurangi margin/padding.</li>
<li>Selanjutnya sobat cari kode dibawah ini, biar kodenya akan tampil seperti dibawah ini maka sobat jangan mencentang Expand Template Widget yang ada di atas.</li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<div id='main-wrapper'><br />
<span style="color: red;"><b:section class='main' id='main' showaddelement='no'></span><br />
<span style="color: red;"><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></span><br />
<span style="color: red;"></b:section></span><br />
</div></blockquote>
</div>
<ul style="text-align: justify;">
<li>Setelah ketemu kode seperti diatas sobat tambahkan kode dibawah ini tepat dibawah kode yang berwarna merah. </li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<span style="color: blue;"><div id='bawahpost'></span><br />
<span style="color: blue;"><b:section class='bawahleft' id='bawahleft' showaddelement='yes'/></span><br />
<span style="color: blue;"> <b:section class='bawahright' id='bawahright' showaddelement='yes'/></span><br />
<span style="color: blue;"> </div></span></blockquote>
Dan tampilannya akan seperti dibawah ini. <br /><blockquote class="tr_bq">
<div id='main-wrapper'><br />
<span style="color: red;"><b:section class='main' id='main' showaddelement='no'></span><br />
<span style="color: red;"><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></span><br />
<span style="color: red;"></b:section></span><br />
<span style="color: blue;"><div id='bawahpost'></span><br />
<span style="color: blue;"><b:section class='bawahleft' id='bawahleft' showaddelement='yes'/></span><br />
<span style="color: blue;"> <b:section class='bawahright' id='bawahright' showaddelement='yes'/></span><br />
<span style="color: blue;"> </div></span><br />
</div></blockquote>
</div>
<ul style="text-align: justify;">
<li>Setelah selesai simpan template sobat.</li>
<li>kemudian sobat buka halaman tata letak maka pada halaman tersebut sudah ada 2 kotak elemen tambah gadget, selanjutnya sobat tinggal memasukan kode widget yang mau dipasang dengan cara seperti biasa waktu menambah widget.</li>
</ul>
<div style="text-align: justify;">
Cara ini bisa sobat gunakan untuk menambah 2 kolom diatas postingan caranya hanya dengan merubah penempatan posisi kode yang berwarna biru tepat menjadi diatas kode yang berwarna merah.</div>
<div style="text-align: justify;">
sehingga seperti ini;</div>
<blockquote class="tr_bq">
<div id='main-wrapper'><br /><span style="color: blue;"><div id='bawahpost'></span><br style="color: blue;" /><span style="color: blue;"><b:section class='bawahleft' id='bawahleft' showaddelement='yes'/></span><br style="color: blue;" /><span style="color: blue;"> <b:section class='bawahright' id='bawahright' showaddelement='yes'/></span><br style="color: blue;" /><span style="color: blue;"> </div></span><br /><span style="color: red;"><b:section class='main' id='main' showaddelement='no'></span><br style="color: red;" /><span style="color: red;"><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></span><br style="color: red;" /><span style="color: red;"></b:section></span><br /></div></blockquote>
Demikian tutorial kali ini, semoga berhasil. Desa Cilayunghttp://www.blogger.com/profile/17685156543242371529noreply@blogger.com5