darmasite

Tampilan baru Blogger

Halo sobat blogger semua, rasanya sudah lama saya tidak sempat posting mengenai dunia blogger. nah! pada kesempatan kali ini saya ingin membagikan sesuatu yang baru.. yaitu tampilan blogger yang baru atau bisa dibilang menyambung Blogger ke google + 
 
Nah, sobat blogger penasaran kan seperti apa tampilannya? kalo begitu mari kita lihat beberapa SS yang  sempat saya ambil ini. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAT_z5vtvAxpzY0ou_Pw_1Qyr-4snsH2i0kiplpJ-HAfIKfH8iKFnvlt2txwznPATRkAIy6f0JgK1ScFKTuWROOyrC4KlDlo6gzzyAQkjyJqvoO8NPmgu2ImQzvYb9mTRKJNOSDQdV3cE/s1600/1.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAT_z5vtvAxpzY0ou_Pw_1Qyr-4snsH2i0kiplpJ-HAfIKfH8iKFnvlt2txwznPATRkAIy6f0JgK1ScFKTuWROOyrC4KlDlo6gzzyAQkjyJqvoO8NPmgu2ImQzvYb9mTRKJNOSDQdV3cE/s320/1.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Blogger pada saat mengedit Posting</td></tr>
</tbody></table>
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXPWNl1pMAW7ZBt6KlKbFtLW9Zgo05Qxx7-SoQ0HSu6A_WwC4T4WpjY9fkaSQOKk-vqewhutL0aiLbFhiIg_dVzuKMhgiOdQ7yWj_Q4ZjAR7kC8a6whOoaNTft9hbYAfOgjoayWzapsY/s1600/2.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXPWNl1pMAW7ZBt6KlKbFtLW9Zgo05Qxx7-SoQ0HSu6A_WwC4T4WpjY9fkaSQOKk-vqewhutL0aiLbFhiIg_dVzuKMhgiOdQ7yWj_Q4ZjAR7kC8a6whOoaNTft9hbYAfOgjoayWzapsY/s320/2.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Saat melihat news di blog yag kita Follow</td></tr>
</tbody></table>
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNKJfzzn5j85-5kqWvYmZUxI5gvlFpK0AHBewidtjeNydM_w5teTCHbpXQ8uO6LiaAaXNMa4Vd-D3GTikl7B1rHm_t8JwakL3sv1D9IpKuJ0HzTINDXsCrW7ypoFiDsE0ymzYxpE2uNk/s1600/3.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNKJfzzn5j85-5kqWvYmZUxI5gvlFpK0AHBewidtjeNydM_w5teTCHbpXQ8uO6LiaAaXNMa4Vd-D3GTikl7B1rHm_t8JwakL3sv1D9IpKuJ0HzTINDXsCrW7ypoFiDsE0ymzYxpE2uNk/s320/3.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Manajemen Posting</td></tr>
</tbody></table>
 
 
Dari beberapa screenshot di atas bagaimana menurut sobat tampilan blogger yag baru ini? lebih kerens buka? dan rencananya ini resmi diluncurkan pada bulan april.. wah, udah deket dong! tapi lebih bagus kita sudah bisa mencoba fitur beta ini. Jika sobat tertarik mari akan saya ajak cara menyambungkan Blogger ke Google + 
 
Ikuti Langkah - Langkah Sbg. : 
 
1. Login ke blogger sobat, dan klik tulisan Upgrade Now  
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIH5tKxdTEXmm1qaPMd0Eo7gL2N18NPq0A5CNi5gfFNAQ670W5pYCY7Hgiok_YbcWBZFLGF_zgUhn99VWh4Jvb6VNbs9vUo0eLiuH2fXKk9jv5L5cCVwZO8F4qmZJRk1MCBIsmAiR_fcA/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIH5tKxdTEXmm1qaPMd0Eo7gL2N18NPq0A5CNi5gfFNAQ670W5pYCY7Hgiok_YbcWBZFLGF_zgUhn99VWh4Jvb6VNbs9vUo0eLiuH2fXKk9jv5L5cCVwZO8F4qmZJRk1MCBIsmAiR_fcA/s320/5.PNG" width="320" /></a></div>
 
2. Tahap selanjutnya pilih menu Mulai 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqONS7s7etIbx4lEVWOWq2zIY3-ZPgMM245iQTJMD1IGWcW6QU_1w6KUhAAWbhFLq6xhNJCSEsdYEsGFE1AB-8wBSDGG1r4jNB64ZG50AiucfucZy8alS4z_mWyGqJYHj1L5vEhZ9iRg/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqONS7s7etIbx4lEVWOWq2zIY3-ZPgMM245iQTJMD1IGWcW6QU_1w6KUhAAWbhFLq6xhNJCSEsdYEsGFE1AB-8wBSDGG1r4jNB64ZG50AiucfucZy8alS4z_mWyGqJYHj1L5vEhZ9iRg/s320/6.PNG" width="320" /></a></div>
 
3. Kemudian sobat akan masuk ke halaman persetujuan, Klik centang dan klik menu Beralih Sekarang Juga 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq1kewdEi3zH9uV-aLpmOpsWV2BhAWEoaTRY3CuhM5a4pviag7kl853YQ_bW5AT5bwW01DpaDKgZhuwlG8A3Y6nCX_2OQHfFVzyKYG6ON70gPU-Zylc7VqxzCzGLKEh6gfAsXJ1wh82FQ/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq1kewdEi3zH9uV-aLpmOpsWV2BhAWEoaTRY3CuhM5a4pviag7kl853YQ_bW5AT5bwW01DpaDKgZhuwlG8A3Y6nCX_2OQHfFVzyKYG6ON70gPU-Zylc7VqxzCzGLKEh6gfAsXJ1wh82FQ/s320/7.PNG" width="320" /></a></div>
4. Selanjutnya otomatis sobat akan logout kemudian loginlah kembali. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKsSzS5w4iHnw5rgS99juNwpyz2z3icNo3Dgabs5UkfAIzj5tcL9tBypsLbpD01eswgyL0Bn9bqoJY3JfFeNne4z7wpjeTj_2qzLAwp6gd6I9bq-9IBni9c9cRD93IiTylc-8iy80EFs/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKsSzS5w4iHnw5rgS99juNwpyz2z3icNo3Dgabs5UkfAIzj5tcL9tBypsLbpD01eswgyL0Bn9bqoJY3JfFeNne4z7wpjeTj_2qzLAwp6gd6I9bq-9IBni9c9cRD93IiTylc-8iy80EFs/s320/8.PNG" width="320" /></a></div>
5. Langkah terakhir sobat tinggal mencentang blog yang akan diterapkan fitur baru ini, kemudian pilih Tambahkan Blog 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmCF5lXjdMTPKMS_zNgxjIR9uCObvL5l5NiTw9C_W2jSMPOuzYCu5Z8EsJRpMqm9M0GnFVevodhjuTu3D-yZzI63jp2JLzpI-qyJ2VBipnN4xSm7tx5UJgIXKs6kDcfHsWHuzfsV8J4U/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmCF5lXjdMTPKMS_zNgxjIR9uCObvL5l5NiTw9C_W2jSMPOuzYCu5Z8EsJRpMqm9M0GnFVevodhjuTu3D-yZzI63jp2JLzpI-qyJ2VBipnN4xSm7tx5UJgIXKs6kDcfHsWHuzfsV8J4U/s320/9.PNG" width="320" /></a></div>
Selamat!, sekarang sobat bisa menikmati fitur baru dari blogger ini. semoga artikel yang sekedar coretan ini bisa bermanfaat bagi sobat blogger semua, dan jangan lupa berkomentar dibawah ini. Terimakasih

Tampilan baru Blogger

Halo sobat blogger semua, rasanya sudah lama saya tidak sempat posting mengenai dunia blogger. nah! pada kesempatan kali ini saya ingin membagikan sesuatu yang baru.. yaitu tampilan blogger yang baru …

Baca selengkapnya »

27 Mar 2012

Kumpulan Efek Transisi Pada Gambar

<a href="http://darmasite.blogspot.com/2012/03/kumpulan-efek-transisi-pada-gambar.html" target="_blank">Kumpulan Efek Transisi Pada Gambar</a> - Sesuai dengan judul diatas, kali ini darmasite akan mengulas beberapa CSS efek transisi pada gambar di blogger sobat, untuk itu silahkan lihat beberapa css dibawah ini : 
 
 
 
1. Efek Bumping 
 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:all .5s ease-out; 
-moz-transition:all .5s ease-out; 
-ms-transition:all .5s ease-out; 
-o-transition:all .5s ease-out; 
transition:all .5s ease-out; 
} 
 
.post img:hover{ 
-webkit-transform:translate(0px,10px); 
-moz-transform:translate(0px,-10px); 
-ms-transform:translate(0px,-10px); 
-o-transform:translate(0px,10px); 
transform:translate(0px,-10px); 
}</blockquote></td></tr>
</tbody></table>2. Efek Fade Out 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:opacity .5s ease-out; 
-moz-transition:opacity .5s ease-out; 
-ms-transition:opacity .5s ease-out; 
-o-transition:opacity .5s ease-out; 
transition:opacity .5s ease-out; 
} 
 
.post img:hover{ 
opacity:0.2; 
}</blockquote></td></tr>
</tbody></table>3. Efek Fade In 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:opacity .5s ease-out; 
-moz-transition:opacity .5s ease-out; 
-ms-transition:opacity .5s ease-out; 
-o-transition:opacity .5s ease-out; 
transition:opacity .5s ease-out; 
opacity:0.2; 
} 
 
.post img:hover{ 
opacity:1; 
}</blockquote></td></tr>
</tbody></table>4. Efek Rotasi 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:all 0.5s ease-out; 
-moz-transition:all 0.5s ease-out; 
-ms-transition:all 0.5s ease-out; 
-o-transition:all 0.5s ease-out; 
transition:all 0.5s ease-out; 
} 
 
.post img:hover{ 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-ms-transform:rotate(360deg); 
-o-transform:rotate(360deg); 
transform:rotate(360deg); 
}</blockquote></td></tr>
</tbody></table>5. Efek Membesar 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:all 0.5s ease-out; 
-moz-transition:all 0.5s ease-out; 
-ms-transition:all 0.5s ease-out; 
-o-transition:all 0.5s ease-out; 
transition:all 0.5s ease-out; 
} 
 
.post img:hover{ 
-webkit-transform:scale(2,2); 
-moz-transform:scale(2,2); 
-ms-transform:scale(2,2); 
-o-transform:scale(2,2); 
transform:scale(2,2); 
}</blockquote></td></tr>
</tbody></table>6. Efek Skew 
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="100"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rizky Wardiansyah" border="0" class="cunayz6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEtr1XpzFSAsWvVT9SSXFzKCDt3CC6cKNdqfdzZ3-E0nHBa02AVClT64v6eQou8ayIsrN2ho3Dwafe8nkiHxPzX6QKBHMzYyMyumxoxl6KyDzqfuD_3ge8FHXWCCT100wPqxBCG6F8GdO/s200/20071272249432877801.png" /></a></td> <td align="justify" valign="top" width="800"><blockquote class="tr_bq">.post img{ 
-webkit-transition:all .5s ease-out; 
-moz-transition:all .5s ease-out; 
-ms-transition:all .5s ease-out; 
-o-transition:all .5s ease-out; 
transition:all .5s ease-out; 
} 
 
.post img:hover{ 
-webkit-transform:skew(30deg,20deg); 
-moz-transform:skew(30deg,20deg); 
-ms-transform:skew(30deg,20deg); 
-o-transform:skew(30deg,20deg); 
transform:skew(30deg,20deg); 
}</blockquote></td></tr>
</tbody></table>Cara Pasang : 
1. Masuk Dasboard >> Template >> Edit HTML 
2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F 
3. Letakan salah satu kode CSS efek transisi di atas kode no 2 
4. save and done ^_^

Kumpulan Efek Transisi Pada Gambar

Kumpulan Efek Transisi Pada Gambar - Sesuai dengan judul diatas, kali ini darmasite akan mengulas beberapa CSS efek transisi pada gambar di blogger sobat, untuk itu silahkan lihat beberapa css dibawah…

Baca selengkapnya »

21 Mar 2012

Pasang Profil Penulis di Bawah Postingan Blogger

<div class="tr_bq">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifESZ27iwB42kDTdWS0THQ5p8ZbyDha93-z2FAsfvNThajgRyOJaat018JectZkF70Gzzal_YwkQKHxQZ8mf_Hz-uaAdGkBI7n9VFdadBWyjsQ-g8aPKg9YR0WIJjdoxgSt_IQoKGVis8/s1600/author.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifESZ27iwB42kDTdWS0THQ5p8ZbyDha93-z2FAsfvNThajgRyOJaat018JectZkF70Gzzal_YwkQKHxQZ8mf_Hz-uaAdGkBI7n9VFdadBWyjsQ-g8aPKg9YR0WIJjdoxgSt_IQoKGVis8/s200/author.gif" width="200" /></a></div>
<div style="text-align: justify;">
Rasanya sudah lama saya tidak update artikel di blog ini, mungkin karena kesibukan di dunia nyata. nah, pada kesempatan kali ini saya akan share <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">widget</a> <a href="http://darmasite.blogspot.com/2012/03/pasang-profil-penulis-di-bawah.html" target="_blank">Kotak Profil Penulis</a> di Bawah Postingan Blogger. mungkin <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">widget</a> ini sudah bnyak yang tahu, tapi tidak ada salahnya jika saya share lagi.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Untuk memasang <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">Widget</a> Kotak Profil Penulis di Bawah Postingan Blogger ini, silahkan ikuti langkah - langkah berikut ini :</div>
 
 
1. Login dahulu ke Blogger 
2. Kemudian Klik Tata Letak » Edit HTML 
3. Jangan lupa Centang Expand Template <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">Widget</a> 
4. Lalu cari kode berikut ]></b:skin> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. 
Kemudian taruh kode berikut diatasnya. 
 
<blockquote>
/* Author Box */ 
#author-box{float:left;padding:10px;width:560px;background:#fff;margin:0 0 0 -30px;position:relative;text-shadow: 1px 2px 1px red; color:#000;border: 3px solid #000;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F;-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out)} 
#author-box:hover{opacity:0.7; width:auto;background:red;color:#000;text-shadow: 1px 2px 1px white;border-radius:10px; border: 3px solid #ccc;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;} 
#author-box a{font-size:15px; text-shadow: 1px 2px 1px #000; color:#fff} 
#author-box a:hover {font-size:18px;color:hijau} 
#author-box h4 {font-size:18px; text-shadow: 1px 2px 1px #000; color:orange} 
 
.author-corner{background:url(URL) no-repeat left top #33F; bottom:-13px;height:12px;left:2px;position:absolute;width:120px;} 
.author-avatar{float:left;margin:0 20px 0 0} 
.author-avatar img {width:110px;height:120px; border: 2px solid #ccc} 
.author-text{float:left;width:480px} 
.author-text p{line-height:2em}</blockquote>
 
5. Lau cari code <div class='post-footer-line post-footer-line-1'>. jika sdh ketemu, lalu copas kode berikut tepat dibawahnya. 
 
<blockquote class="tr_bq">
 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='author-box'> 
<div class='author-avatar'> 
<img alt='Utta Melanikz' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/203270_100000771677312_2706391_n.jpg'/></div> 
<h4>Post Author : <a href='http://darmasite.blogspot.com/' title='Posts by admin'>Darma Jaya</a></h4> 
Saya hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis <a href='http://feedburner.google.com/fb/a/mailverify?uri=darmasite' target='_blank'><blink>Via Email</blink></a> atau <a href='http://feeds.feedburner.com/darmasite' target='_blank'><blink>Feed Rss</blink><center><a href='http://feeds.feedburner.com/darmasite'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/darmasite?bg=660033&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></center></a></div> 
</b:if> 
</blockquote>
 
6. Terakhir Save.dan lihat hasilnya... 
 
KET: 
-Teks yg berwana biru adalah URL foto sobat, 
-dan teks yang berwarna orange adalah Isi tulisan mengenai diri sobat. 
-dan yg <a href="http://www.uttawebsite.co.cc/2011/02/kode-warna.html">berwarna</a> merah adalah alamat Feed RSS anda. 
-dan yg berwarna kuning adlh nama sobat. 
-Width ukuran lebar halaman posting anda silahkan anda ganti dengan lebar halaman anda. 
<div>
 </div>
<div>
<div style="text-align: justify;">
Sekian dari saya mengenai cara pasang <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">widget</a>  <a href="http://darmasite.blogspot.com/2012/03/pasang-profil-penulis-di-bawah.html" target="_blank">Profil Penulis di Bawah Postingan Blogger</a>, semoga artikel ini bermanfaat bagi blogger semua.</div>
</div>

Pasang Profil Penulis di Bawah Postingan Blogger

Rasanya sudah lama saya tidak update artikel di blog ini, mungkin karena kesibukan di dunia nyata. nah, pada kesempatan kali ini saya akan share widget Kotak Profil Penulis di Bawah Postingan Blogger…

Baca selengkapnya »

21 Mar 2012

Hosting Gratis dari Idhostinger

<div style="color: black; font-family: "Trebuchet MS",sans-serif;"></div><div class="separator" style="clear: left; float: left; font-family: "Trebuchet MS",sans-serif; margin-bottom: 1em; margin-right: 1em; text-align: center;"><a href="http://api.idhostinger.com/redir/130288" target="_blank"><img border="0" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" /></a></div><a href="http://darmasite.blogspot.com/2012/03/hosting-gratis-dari-idhostinger.html">Hosting Gratis dari Idhostinger</a> - IdHostinger ini adalah layanan Hosting Gratis dengan kapasitas ruang penyimpanan data sebesar 2000Mb dan Bandwidt 100GB. Lumayan besar bukan? untuk sebuah <a href="http://darmasite.blogspot.com/2012/03/hosting-gratis-dari-idhostinger.html" target="_blank">hosting gratis</a>an di Indonesia. 
 
 
 
Untuk mendaftar, silahkan ikuti langkah-langkah berikut; 
 
1. Silahkan kunjungi <a href="http://api.idhostinger.com/redir/130288" rel="nofollow" target="_blank" title="halaman login pendaftaran id hostinger">Halaman Ini</a> 
 
2. Cari dan klik Order Sekarang atau Buat Akun 
<img alt="" src="http://img46.imageshack.us/img46/2896/idhostinger3.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" /> 
 
 
3. Anda akan disuguhi Formulir pendaftaran. 
<img alt="" src="http://img692.imageshack.us/img692/6538/pendaftaran2yq.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" /> 
4. Isi data sesuai dengan kolom yang disediakan kemudian klik “Buat Akun” 
 
5. Segera buka email 
Anda akan menerima email balasan dari idHostinger. seperti dibawah ini; 
<div style="font-family: "Trebuchet MS",sans-serif;"></div><blockquote class="tr_bq" style="font-family: "Trebuchet MS",sans-serif;"><div style="color: #444444;">Halo Darma Jaya ,</div> 
<div style="color: #444444;">Terimakasih telah bergabung dengan kami. Silahkan klik link di bawah  ini untuk melakukan aktivasi akun Anda:</div> 
<div style="color: #444444;">http://cpanel.idhostinger.com/auth/confirm/hash/xxxxxxxxx</div> 
<div style="color: #444444;">Terimakasih</div></blockquote><div style="color: black; font-family: "Trebuchet MS",sans-serif;"> 
</div><div style="font-family: "Trebuchet MS",sans-serif;"> 
</div> 6. Setelah klik link aktivasi, anda akan menuju halaman konfirmasi aktivasi dan pendaftaran situs pertama. Disana akan muncul komentar bahwa aktifasi Anda selesai. “Pendaftaran selesai! Sekarang Anda dapat membuat akun”. (lihat gambar di bawah). 
<img alt="" src="http://img171.imageshack.us/img171/6206/buatakundomain1.jpg" style="display: block; float: none; margin-left: auto; margin-right: auto;" /> 
7. Buatlah akun baru! (lihat gambar di atas)  Bila anda menginginkan sebuah domain gratis, pilihlah opsi kedua yang bertulis “Saya ingin memilih subdomain gratis Anda (disarankan)”. 
 
8. Isi semua kolom domain anda! Karena anda memilih domain gratis, maka tulislah nama domain kesukaan anda, bila belum digunakan, anda dapat memakai domain tersebut. Misalnya, katrok.16mb.com. (lihat gambar di atas) 
 
9. Tunggu beberapa saat. Lihat kanan bawah, sampai terlihat: situs berhasil dibuat, klik lihat hasil, selanjutnya akan dibawa ke halaman akun domain aktif. 
 
Sekian dulu dari saya mengenai cara mendapatkan <a href="http://darmasite.blogspot.com/2012/03/hosting-gratis-dari-idhostinger.html" target="_blank">Hosting gratis</a> dari Idhostinger semoga artikel ini bermanfaat bagi sobat blogger semua. 
<div style="font-family: "Trebuchet MS",sans-serif;"></div><div style="background-color: white; border: medium none; color: black; font-family: "Trebuchet MS",sans-serif; overflow: hidden; text-align: left; text-decoration: none;"><a href="http://kafeilmu.com/2012/01/cara-mendaftar-hosting-gratis-di-idhostinger.html#ixzz1oPhvVdLJ"></a></div><div style="background-color: white; border: medium none; color: black; font-family: "Trebuchet MS",sans-serif; overflow: hidden; text-align: left; text-decoration: none;"><a href="http://kafeilmu.com/2012/01/cara-mendaftar-hosting-gratis-di-idhostinger.html#ixzz1oPhvVdLJ"></a></div>

Hosting Gratis dari Idhostinger

Hosting Gratis dari Idhostinger - IdHostinger ini adalah layanan Hosting Gratis dengan kapasitas ruang penyimpanan data sebesar 2000Mb dan Bandwidt 100GB. Lumayan besar bukan? untuk sebuah hosting …

Baca selengkapnya »

07 Mar 2012

Cara Download Link Mediafire Melalui Adf.ly

<div class="separator" style="clear: both; color: black; font-family: "Trebuchet MS",sans-serif; text-align: center;"><a href="http://www.anda.web.id/wp-content/uploads/2012/02/adf.ly-shortlink.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://www.anda.web.id/wp-content/uploads/2012/02/adf.ly-shortlink.jpg" /></a></div><div style="color: black; font-family: "Trebuchet MS",sans-serif;">Beberapa hari ini saat kita mencoba download software full version dari mediafire yang menggunakan refferals adf.ly selalu dibawa ke halaman home mediafire. Dengan kata lain file software yang mau di download tidak ketemu. Kabarnya mediafire memblockir adf.ly ini. Pasti anda semua bertanya?Kenapa adf.ly nya nggak dihilangin aja di blog ini? Gini aja gan, masbro, sobat semua, kita menganut mutualisme ajah <img alt="icon biggrin Cara Download Link Mediafire Melalui Adf.ly" class="wp-smiley" src="http://www.anda.web.id/wp-includes/images/smilies/icon_biggrin.gif" title="Cara Download Link Mediafire Melalui Adf.ly" /> Saling menguntungkan..he..he.. Saya rasa anda juga nggak akan keberatan menunggu 5 detik di adf.ly. </div><div style="color: black; font-family: "Trebuchet MS",sans-serif;">Ok langsung saja saya share cara download Link Mediafire Melalui Adf.ly. Disini anda bisa menggunakan 2 cara. Tinggal pilih mana yang cepat dan paling simple :</div><div style="color: black; font-family: "Trebuchet MS",sans-serif;"> 
Cara Pertama :</div><ul style="color: black; font-family: "Trebuchet MS",sans-serif;"><li>Klik link yang mau anda download dan tunggu 5 detik seperti biasa</li>
<li>Setelah SKIP AD muncul, Drag SKIP AD tersebut ke browser anda</li>
</ul><div style="color: black; font-family: "Trebuchet MS",sans-serif;"><div class="separator" style="clear: both; text-align: center;"><a href="http://www.anda.web.id/wp-content/uploads/2012/02/adf.ly-3-300x225.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="adf.ly 3 300x225 Cara Download Link Mediafire Melalui Adf.ly" border="0" class="aligncenter size-medium wp-image-2006" height="225" src="http://www.anda.web.id/wp-content/uploads/2012/02/adf.ly-3-300x225.jpg" title="adf.ly-drag-skip-ad" width="300" /></a></div></div><ul style="color: black; font-family: "Trebuchet MS",sans-serif;"><li>Finish. Selamat mendownload <img alt="icon biggrin Cara Download Link Mediafire Melalui Adf.ly" class="wp-smiley" src="http://www.anda.web.id/wp-includes/images/smilies/icon_biggrin.gif" title="Cara Download Link Mediafire Melalui Adf.ly" /> </li>
</ul><div style="color: black; font-family: "Trebuchet MS",sans-serif;"><div class="separator" style="clear: both; text-align: center;"><img alt="Download enjoy 300x225 Cara Download Link Mediafire Melalui Adf.ly" class="aligncenter size-medium wp-image-2007" height="225" src="http://www.anda.web.id/wp-content/uploads/2012/02/Download-enjoy-300x225.jpg" title="Download-enjoy" width="300" /></div></div><div style="color: black; font-family: "Trebuchet MS",sans-serif;"> 
</div><div style="color: black; font-family: "Trebuchet MS",sans-serif;"> 
</div><div style="color: black; font-family: "Trebuchet MS",sans-serif;"> 
Cara Kedua :</div> 
<ul style="color: black; font-family: "Trebuchet MS",sans-serif;"><li>Klik link yang mau anda download dan tunggu 5 detik seperti biasa</li>
<li>Setelah SKIP AD muncul, klik kanan pada SKIP AD dan copy link location</li>
</ul><div style="color: black; font-family: "Trebuchet MS",sans-serif;"><div class="separator" style="clear: both; text-align: center;"><img alt="adf 300x225 Cara Download Link Mediafire Melalui Adf.ly" class="aligncenter size-medium wp-image-2008" height="225" src="http://www.anda.web.id/wp-content/uploads/2012/02/adf-300x225.jpg" title="adf.ly" width="300" /></div></div><ul style="color: black; font-family: "Trebuchet MS",sans-serif;"><li>Pastekan pada browser anda</li>
</ul><div style="color: black; font-family: "Trebuchet MS",sans-serif;"><div class="separator" style="clear: both; text-align: center;"><img alt="adf.ly 2 300x225 Cara Download Link Mediafire Melalui Adf.ly" class="aligncenter size-medium wp-image-2010" height="225" src="http://www.anda.web.id/wp-content/uploads/2012/02/adf.ly-2-300x225.jpg" title="adf.ly-2" width="300" /></div></div><ul style="color: black; font-family: "Trebuchet MS",sans-serif;"><li>Enjoy…</li>
</ul><div style="color: black; font-family: "Trebuchet MS",sans-serif;"><div class="separator" style="clear: both; text-align: center;"><img alt="Download enjoy 300x225 Cara Download Link Mediafire Melalui Adf.ly" class="aligncenter size-medium wp-image-2007" height="225" src="http://www.anda.web.id/wp-content/uploads/2012/02/Download-enjoy-300x225.jpg" title="Download-enjoy" width="300" /></div></div><div style="color: black; font-family: "Trebuchet MS",sans-serif;">Maaf untuk ketidaknyamanannya…</div>

Cara Download Link Mediafire Melalui Adf.ly

Beberapa hari ini saat kita mencoba download software full version dari mediafire yang menggunakan refferals adf.ly selalu dibawa ke halaman home mediafire. Dengan kata lain file software yang mau di…

Baca selengkapnya »

07 Mar 2012

Related Post Slide Out Boxs

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7gM7zbZ_e79YVwFRT7jBd9TuoBeoC6p23c00TN0vBNQQ6TGJmj5hWuzhcwnH_D6CfiSZhSpVWZSWPTWlPk4xD91YBEXb67sBxOULNzMbPzbUtqxqJT-zmwN7-QKpSvIYgUjZlLICVYs/s400/relatedpostsslideouts.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7gM7zbZ_e79YVwFRT7jBd9TuoBeoC6p23c00TN0vBNQQ6TGJmj5hWuzhcwnH_D6CfiSZhSpVWZSWPTWlPk4xD91YBEXb67sBxOULNzMbPzbUtqxqJT-zmwN7-QKpSvIYgUjZlLICVYs/s320/relatedpostsslideouts.jpg" width="320" /></a></div><a href="http://darmasite.blogspot.com/2012/03/related-post-slide-out-boxs.html" target="_blank">Cara pasang widget Related Post Slide Out Boxs di blogger</a> - Rasanya sudah lama saya nggak sempat update blog karena banyak kesibukan di dunia nyata, berhubugan akan menjelang hari raya pengrupuk dan nyepi jadi umat Hindu lagi sibuk mepersiapkan yg namanya Ogoh -ogoh! Nah, pada kesempatan kali ini, saya akan berbagi satu <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">widget</a> yang tidak kalah menariknya dengan widget related post with thumbnail. <a href="http://darmasite.blogspot.com/2012/03/related-post-slide-out-boxs.html" target="_blank">widget Related Post Slide Out Boxs</a> menurut saya belum banyak yang memakai mungkin karena fiturnya agak janggal sedikit karena kurang feednya. nah biar nggak kelamaan mari kita lihat demonya dibawah ini. 
 
 
<div style="text-align: center;"><a class="demo-blue" href="http://saletemplate.blogspot.com/" style="background-color: cyan; border-bottom-color: rgb(204, 204, 204); border-bottom-style: outset; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: outset; border-left-width: 2px; border-right-color: rgb(204, 204, 204); border-right-style: outset; border-right-width: 2px; border-top-color: rgb(204, 204, 204); border-top-style: outset; border-top-width: 2px; line-height: 22px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; padding-top: 2px; text-align: justify; text-decoration: none;" target="_blank">Demo</a> </div> 
 
Bagaimana, menarik bukan? jika sobat tertarik, mari kita pasang <a href="http://darmasite.blogspot.com/2012/02/kumpulan-widget-darmasite.html" target="_blank">widget</a> ini di blog sobat. ikuti langkah sebagai berikut : 
 
 
 
 
1. Pergi ke Template/Rancangan > Edit Html 
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>  
<blockquote class="tr_bq"><link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/></blockquote>3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body> 
 
<blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  <script>//<![CDATA[   $(function() {    /**    * the list of posts    */    var $list   = $('#rp_list ul');    /**    * number of related posts    */    var elems_cnt   = $list.children().length;        /**    * show the first set of posts.    * 200 is the initial left margin for the list elements    */    load(200);        function load(initial){     $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');     var loaded = 0;     //show 5 random posts from all the ones in the list.      //Make sure not to repeat     while(loaded < 5){      var r   = Math.floor(Math.random()*elems_cnt);      var $elem = $list.find('li:nth-child('+ (r+1) +')');      if($elem.is(':visible'))       continue;      else       $elem.show();      ++loaded;     }     //animate them     var d = 200;     $list.find('li:visible div').each(function(){      $(this).stop().animate({       'marginLeft':'-50px'      },d += 100);     });    }         /**    * hovering over the list elements makes them slide out    */     $list.find('li:visible').live('mouseenter',function () {     $(this).find('div').stop().animate({      'marginLeft':'-220px'     },200);    }).live('mouseleave',function () {     $(this).find('div').stop().animate({      'marginLeft':'-50px'     },200);    });        /**    * when clicking the shuffle button,    * show 5 random posts    */    $('#rp_shuffle').unbind('click')        .bind('click',shuffle)        .stop()        .animate({'margin-left':'-18px'},700);            function shuffle(){     $list.find('li:visible div').stop().animate({      'marginLeft':'60px'     },200,function(){      load(-60);     });    }            });  //]]></script></blockquote><div style="font-weight: bold; line-height: 22px;">4. Sekarang letakan struktur HTML ini juga diatas kode </body> </div><div><blockquote><div class='rp_list' id='rp_list'><ul><li><div><img height='72' width='72' alt='Download Template Zoom Gallery' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh381ba0N91BtuHilGVXve7A0LPJ4qrhrBPe7N7nmPqiI_gZPAjrSGKyzrXWRwuUWIcTmDcbzKpNunwuxKtE-lBNSxkhPmCDZLi2B1sOC02wud0FLQ3-BuY8Y2v81dOKJBAa7UIPmo6CTk/s72-c/zoom-gallery.jpg'/>Download Template Zoom Gallery<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template Blogger Tune-Up' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUJHKhnwk-ZF-epYV4ASd-2TWCY3quRppLgDbmJQMbrAK1l07LYIPkBGyoEQF4vNSuP3zdCSKH_KmZbrK1ny8XWdhazSaX4wrz-9RWFenc1LWDEizBbmcINIlpOQREfhUC9_ChvS_0NI/s72-c/download-template-blogger-tune-up.jpg'/>Download Template Blogger Tune-Up<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template Today' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHY9ZF2vT0MEfYkKRRJBZqA3V0QB_pEXqQOd1fYP4zqIwHNuQq_Z7kHATwVLcml3BBkEeyfYWZsEMr0MWnhu_j9kFQtWwG2gvV_BkFyVbXCnePhV1neTCaD8GyBJVuVkzKYhLMOUYqa0Y/s72-c/download-template-today.jpg'/>Download Template Today<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template Kolom Tutorial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgovn8FLN9BoH_AUvtjXPZCx-pMoQkr0deLOqtQLJSBB1AJbnA5cm_l59tzGqkwCmNQCAEpXgb8NUuEqs-SEk_Z9qzLrAgjh6zppfOuuaT6RLFz56RoBV4PmcAhG-PU7VyjoJ0WZab7Uw/s72-c/kolom-tutorial.blogspot.com_medium.jpg'/>Download Template Kolom Tutorial<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template Sporty Magazine 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DeG3sLan0GQoiyOBnoVu0_BvbaydS2wYHGLvqou-HuWxxNleNrQ_J6OXgYJplNG6ea-fKSqqZ8jl6YAyrRUinud654Eh3BNf_v_0RLByde5WvB7Bvk3Wxe0v3DJi4lz9Jnpnz2Rtme0/s72-c/Sporty+Magazine+2.png'/>Download Template Sporty Magazine 2<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template Blog Juragan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd747Q7vIVwz0-fdoWUGctsyuRxnHWrS8ut6CXurnsxm10tApuhQ8QTJMkRotBV93iL6YKN-xmkzedJRLnocGBMG2kUoZRPWsIkcYAe7Kzqc2X8SlSOYtVf2T0uS1XjfVplEaTW9otgh4/s72-c/blog_juragan.jpg'/>Download Template Blog Juragan<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
<li><div><img height='72' width='72' alt='Download Template O-om' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GwUQ3mLM-1K0xWqR1lMAlPUFuPSPyFL6FukHu44ERkG19Z8HZRcqeNjdRRCm_zF3x-qFgwmu91Ke-noohe8fa2sQEfpuPhC5VgolZ628xtzqg96rI_GoGDahBkFwxE6Yh0CC3MJfyzc/s72-c/download_template_o-om.jpg'/>Download Template O-om<a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></div></li> 
</ul></div></blockquote><div style="font-weight: bold;">Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut </div></div><blockquote class="tr_bq"><li><div><img height='72' width='72' alt='<span style="background-color: #cfe2f3; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #888888; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; word-wrap: break-word;">JUDUL-IMG' src='<span style="background-color: #cfe2f3; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #888888; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; word-wrap: break-word;">URL-IMAGE'/><span style="background-color: #cfe2f3; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #888888; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; word-wrap: break-word;">JUDUL-POST</span><a href='<span style="background-color: #cfe2f3; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #888888; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; word-wrap: break-word;">LINK-ARTIKEL' target='_blank'>Article</a><a href=<span style="background-color: #cfe2f3; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #888888; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; word-wrap: break-word;">'LINK-DEMO' target='_blank'>Demo</a></div></li></blockquote><div style="font-weight: bold; line-height: 22px;">Sobat bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, sobat harus mengganti teks berwana dengan link dan judul sobat. 
 
</div><div style="line-height: 22px;">5. Terakhir Klik <a class="demo-red" href="http://www.blogger.com/post-edit.g?blogID=86414069437160964&postID=7186066551035636416" style="background-color: #ff7700; border-bottom-color: rgb(204, 204, 204); border-bottom-style: outset; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: outset; border-left-width: 2px; border-right-color: rgb(204, 204, 204); border-right-style: outset; border-right-width: 2px; border-top-color: rgb(204, 204, 204); border-top-style: outset; border-top-width: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; padding-top: 2px;">Save Template</a></div> 
<div style="text-align: left;"> 
</div><div style="text-align: left;">Sekian postingan saya kali ini mengenai cara pasang <a href="http://darmasite.blogspot.com/2012/03/related-post-slide-out-boxs.html" target="_blank">Related Post Slide Out Boxs di blogger</a>, semoga artikel ini bermanfaat bagi sobat blogger semua! Terimakasih</div><div style="text-align: left;"> 
</div>