Dhecun Blog: Cara

Showing posts with label Cara. Show all posts

Cara Membuat Image Preview Menggunakan Tombol

Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar , dan cara kerjanya menggunakan tombol perbesar dan tombol normal , yaitu bila di klik tombol perbesar maka gambar menjadi ukuran besar dan di klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.
Jika di web atau blog anda banyak menampilkan gambar , cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.

Berikut contoh bentuk Image Preview menggunakan tombol.














 

Widget
















 

Sticky Bar

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </head>
6. Massukan script dibawah ini tepat diatas kode </head>

<script type='text/javascript'>function gambarbesar1(){document.getElementById("gambar1").height="200"; document.getElementById("gambar1").width="200";}function gambarnormal1(){document.getElementById("gambar1").height="100"; document.getElementById("gambar1").width="120";}</script><style type='text/css'>div.galleryagambar{position:relative; margin: 2px; padding:8px; border: 2px solid #ccc; background-color:#E3E3E3; float:left;}div.gallerya{position:relative; margin: 2px; border: 2px solid #D8D8D8; background-color:#ECECEC; float:left; text-align: center;}div.gallerya img{ border: 2px solid #ccc; margin-top: 5px;}div.gallerya a:hover img{ border: 2px solid #000000;/* for IE */ filter:alpha(opacity=40);/* CSS3 standard */ opacity:0.4;}div.labela{ border: 0px solid #D2D2D2; background-color:#ccc; text-align: center; font-weight: bold; height: 12px;width:120px; padding:3px;}</style>

Catatan :
Untuk menambah gambar , anda tinggal menambah kode yang berwarna merah dan simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

7. Klik simpan template

Langkah selanjutnya anda tinggal menambahkan kode HTML pada saat menulis artikel.
Jangan lupa tambahkan kode HTML pada bagian HTML bukan Compose.
Cara ini bila gambar akan ditampilkan pada halaman posting.

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda , berarti anda tinggal menambah gadget.
Silahkan ikuti langkah berikut ini :

1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini

<div class="galleryagambar">
<div class="gallerya"><table border="0" width=""><tbody><tr><td bgcolor="#ECECEC"><a href="http://AlamatLinkAnda" target="_blank"><img height="100" id="gambar1" src="URL Gambar" width="120" /></a><br /><div align="center"><input onclick="gambarbesar1()" type="button" value="Perbesar" /><input onclick="gambarnormal1()" type="button" value="Normal" /></div></td></tr><tr><td bgcolor="#ccc"><div class="labela">Label Gambar</div></td></tr></tbody></table></div>
</div>

Komentari artikel ini...!!!

Cara Memasang Komentar Intense Debate di Blog

Selain membuat blog semenarik mungkin dengan efek-efek yang sudah banyak di sediakan di dunia blogger , kita juga dapat membuat kotak komentar blog menjadi menarik yaitu dengan menggunakan layanan Intense Debate Comment.
Intense Debate membantu untuk mengganti kotak komentar default Blogspot menjadi versi Intense Debate.
Coba anda perhatikan perbedaan dua gambar contoh kotak komentar default Blogspot dengan kotak komentar versi Intense Debate dibawah ini.

Dapat kita simpulkan bahwa perbedaannnya adalah tampilan form pengisian data nama , url blog / web , serta email.

Bagaimana , sudah merasakan kemenarikan kotak komentar ala Intense Debate ini...?

Cara Membuat dan Cara Pemasangan.

Untuk cara pemasangannya , silahkan anda ikuti langkah-langkah berikut ini :
1. Masuk ke alamat web Intense Debate , klik disini
2. Jika anda belum terdaftar , silahkan klik Sign Up pada halaman utama Intense Debate.
3. Cek email anda untuk verifikasi akun anda di Intense Debate.
4. Pada halaman Dasbor , anda akan melihat seperti dibawah ini.
Manage Blog

5. Klik Install IntenseDebate untuk menambahkan blog / web.
6. Selesaikan langkah 1-2 untuk menyeselaikannya.

7. Anda akan dialihkan langsung ke langkah 3.

Catatan :

1. Pilih All new posts (Recommended).

2. Pada Point No.5 , silahkan anda upload file *.xml template yang sudah anda backup.

3. Kemudian klik Upload file and continue.

4. Silahkan anda ganti semua kode HTML template blog anda dengan kode baru.

5. Klik simpan template dan lihat hasil pekerjaan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Memasang Widget Facebook PopUp Like Box Timer

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </body>
6. Masukkan script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='Dhecun Blog'
//]]> </script>
<style>#fblikepop{background-color:#fff; display:none; position:fixed; top:200px;_position:absolute; /* hack for IE 6*/width:470px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;border-radius: 9px}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder{height:28px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:45px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://anvity-host.googlecode.com/files/anvity-likebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/dhecun.blog',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

7. Klik simpan template

Catatan :
1. Ganti kata Dhecun Blog dengan kata yang akan tampil di bagian atas widget , misalnya "Join Dhecun Blog on Facebook".
2. Ganti angka 30 dengan angka yang akan mengatur berapa lama widget itu akan tampil (dalam detik).
3. Ganti angka 0 dengan angka yang akan mengatur lamanya widget ini akan tampil ketika blog baru di load (dalam menit).
4. Ganti dhecun.blog dengan username FansPage atau jika belum mempuyai username pada FansPage , gunakan ID FansPage (ihat pada address bar browser anda).
5. Terakhir , ganti juga true dengan false jika tanda X (close) ingin dihilangkan.

Mengganti Gambar Background Widget FB LikeBox
Anda dapat mengganti gambar background widget.
Silahkan ganti tulisan warna merah pada kode widget diatas dengan kode-kode gambar dibawah ini.
Facebook Like Box Timer ANVITY

http://anvity-host.googlecode.com/files/anvity-likebox2.js

http://anvity-host.googlecode.com/files/anvity-likebox4.js

http://anvity-host.googlecode.com/files/anvity-likebox3.js

http://anvity-host.googlecode.com/files/anvity-likebox.js

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Mengetahui Ukuran Lebar Header , Posting , Sidebar , Footer atau Lebar Template

Secara keseluruhan penting untuk diketahui sehingga saat anda ingin mengedit template , mengubah atau menambah lebar bagian-bagian template tadi , anda sudah mengetahui dibagian mana yang harus anda rubah / edit.
Sebagai pengenalan awal , anda harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper.

Dari gambar diatas saya jelaskan dulu satu-satu maksudnya :
1. Outer-wrapper : pada template ditandai dengan kode CSS #outer-wrapper , #outer-wrap atau #outer , maksudnya adalah lebar / ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header , posting , sidebar dan footer.
2. Header-wrapper : pada template ditandai dengan kode CSS #header-wrapper , #header-wrap atau #header , pada beberapa template bagian header ini ada juga yang terbagi dari 2 maka kode CSSnya juga ada 2 seperti ini #header dan #header2 , yang membedakan posisinya adalah float right dan float left , ukuran lebar menu navigasi yang ada dibawah atau diatas header juga biasanya sama.
3. Content-wrapper : pada template ditandai dengan kode CSS #content-wrapper , #content-wrap atau #content , jika pada template anda tidak terdapat kode ini berarti untuk area posting dan sidebar pengaturan CSS nya ada pada bagian /* ----- MAIN ----- */.
4. Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper , #main-wrap atau #main , pada bagian main-wrapper inilah area posting anda berada.
5. Sidebar-wrapper : pada template ditandai dengan kode CSS #sidebar-wrapper , #sidebar-wrap atau #sidebar , pada template tertentu sidebar terkadang juga ada lebih dari 1 , jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper , #sidebar1-wrapper atau #sidebar1 dan #sidebar2.
6. Footer-wrapper : pada template ditandai dengan kode CSS #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */.

Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer.
Setelah mengenal elemen wrapper seperti saya jelaskan diatas , berikutnya kita dapat mengubah atau mengedit lebar dari masing-masing elemen wrapper tersebut. Caranya mudah saja , anda tinggal memperhatikan pengaturan stylish CSS atau declaration yang ada didalam elemen wrapper yaitu pada bagian width atau height.
Misalnya saya contohkan untuk bagian header , posting dan sidebar.

/* Header
----------------------------------------------- */
.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}
#idhead {
  background:#fff;filter:alpha(opacity=90);opacity:0.9;
  width:990px;padding:5px 0 5px 0;
  margin:0 auto;
  border:0px solid $bordercolor;
  }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
#header {background:transparant;
  float:left;
  width: 179px;
  margin-left: 10px; text-align: left;
  color:#f2f2f2;
}
#header2 {float:right;
  margin-right:9px;margin-top:4px;padding-bottom:4;
  width:730px;text-align: right;
  background:transparant; height:90px;
}

Pada kode header diatas memperlihatkan bahwa header terbagi menjadi 2.
Lebar total bagian header ini adalah 990px , dimana terdiri dari header-left (perhatikan kode penempatan/posisi heder: float-left) dengan lebar 179px dan header-right dengan lebar 730px.
Jika kita jumlahkan lebar header1 + header2 + margin + padding = lebar total header , kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam.
Misalkan padding: 6px 8px 6px 6px; maka yang dimaksud adalah padding-top 6px , padding-right 8px , padding-bottom 6px dan padding-left 6px.
Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper.
Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin.

/* Main containers */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 630px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;    
}
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
.post{
width: 600px;
padding: 15px;
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}

Perhatikan susunan CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper.
Pada outer-wrapper disebutkan lebarnya 950px , sedangkan pada main-wrapper dan sidebar-wrapper lebarnya masing-masing adalah 630px dan 300px.
Kalau dijumlahkan jumlah keduanya adalah 930px.
Sisa 20px dapat disimpulkan adalah margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper , sehingga jumlahnya 20px dan total menjadi 950px.
Pada susunan CSS diatas disetting auto sehingga kita tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan. Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya biar ngga bingung.
Kemudian perhatikan lagi bagian posting (post).
Pada kode CSS nilai lebarnya 600px , ini sudah merupakan lebar teks atau artikel yang kita tulis.
Padding 15px berlaku untuk top , right , bottom dan left sehingga jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px.

Jika anda masih bingung , silahkan copy atau bookmark saja tulisan ini biar bisa anda baca lagi karena saya sudah berusaha menuliskan sejelas mungkin.
Dari apa yang saya jelaskan tentang Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer di Blogspot ini mudah-mudahan bisa memberikan pemahaman untuk anda bagaimana cara mengatur atau mengetahui lebar area header, posting, sidebar dan footer.
Baca juga tips lengkap Cara Mempercantik Tampilan Blog untuk menambahkan widget-widget keren ehingga blog anda tambah siiiiipppppppppp tampilannya.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Mengganti Background Kotak Komentar Blog

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode <div class='comment-form'>
7. Jika sudah ketemu , ganti kode tersebut dengan kode dibawah ini

<div id='ib-form'>

Catatan :
Template biasanya berbeda-beda jadi bisa saja ada 2 buah kode atau lebih , jika anda menemukan ada kode yang sama , cari saja kode yang pertama atau paling atas.

8. Kemudian cari kode ]]></b:skin>
9. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

#ib-form iframe{background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png) no-repeat bottom right;border:5px solid #3b5998;padding:5px;font:normal 12pt "ms sans serif", Arial;color:#3b5998;width:95%;height:250px;}#ib-form iframe:hover{background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png) no-repeat bottom right;border:5px solid #3b5998;}#ib-form a{color:#3b5998;}

Catatan :
1. Tulisan warna merah adalah URL gambar , ganti dengan URL gambar anda.
2. Tulisan warna biru adalah warna border , bisa anda ganti sesuai keinginan anda.
3. Tulisan warna pink adalah tingginya , bisa anda atur sesuai keinginan anda.

10. Klik simpan template

Jika anda bingung mencari warna apa yang cocok , klik saja disini

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Membuat Gambar Bergetar Otomatis Di Blog

Pada kali ini saya akan share tentang bagaimana Cara Membuat Gambar Bergetar Otomatis Di Blog , kalau anda belum tau bagaimana itu gambar bergetar silahkan lihat contohnya klik disini.
Nah sesuai dengan judulnya , trik gambar bergetar ini berfungsi terhadap setiap gambar pada setiap artikel anda sehingga anda tidak perlu lagi memasukkan kode satu persatu disetiap postingan anda , menarik bukan...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

/* Efek getar by dhecun.blogspot.com */
.post img {
animation-name: x-gengetar;
-moz-animation-name: x-gengetar ;
-webkit-animation-name: x-gengetar;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes x-gengetar {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes x-gengetar {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes x-gengetar {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

8. Kemudian cari kode </body>
9. Masukkan script dibawah ini tepat diatas kode </body>

<script src='http://x-gen.googlecode.com/files/x-gengetar.js' type='text/javascript'/>

10. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Mengganti Tombol Next , Previous , Home dengan Gambar

Pada posting kali ini Dhecun Blog akan berbagi tutorial untuk mengganti Home , Next , dan Previous dengan gambar.

Siapkan gambar yang akan anda gunakan dan upload ke image hosting anda dan copy link gambar anda tersebut.

Jika anda tertarik untuk mencobanya , silahkan ikuti langkah berikut ini :

1. Mengganti tulisan Beranda/Home

Login ke akun blogger anda
Pilih Template
Pilih Edit HTML
Centang Expand Template Widget
Tekan tombol Ctrl+F
Cari kode <data:homeMsg/> ganti dengan <img src='URL gambar anda/'>

2. Mengganti Tulisan Posting Lama

Cari kode <data:olderPageTitle/> ganti dengan <img src='URL gambar anda'/>

3. Mengganti Tulisan Posting Baru

Cari kode <data:newerPageTitle/> ganti dengan <img src='Url gambar anda'/>

Catatan :

Ganti tulisan yang berwarna merah dengan URL gambar sesuai keinginan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Membuat Postingan Menjadi 2 Kolom

Kali ini Dhecun Blog akan share artikel tentang Cara Membuat Postingan Menjadi 2 Kolom. Trik ini sangat cocok untuk Blog yang suka share tentang Cerita , News (Berita Terbaru) , Cerpen , Puisi dan postingan lainnya.

Trik ini efektif untuk membuat tampilan lebih simple dan tidak memakan banyak halaman sehingga pengunjung capek harus menaik turunkan halaman untuk membacanya.

Kali ini Dhecun Blog akan share artikel tentang Cara Membuat Postingan Menjadi 2 Kolom.
Trik ini sangat cocok untuk Blog yang suka share tentang Cerita , News (Berita Terbaru) , Cerpen , Puisi dan postingan lainnya.
Trik ini efektif untuk membuat tampilan lebih simple dan tidak memakan banyak halaman sehingga pengunjung capek harus menaik turunkan halaman untuk membacanya.

Cara memasangnya :

1. Buka laman yang biasa anda gunakan untuk membuat postingan baru.
2. Pilih mode HTML , lihat gambar dibawah ini :

3. Masukkan kode dibawah ini :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="240">isi artikel anda di bagian kiri</td><td align="justify" valign="top" width="240">isi artikel anda di bagian kanan</td> </tr>
</tbody></table>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/cara-membuat-postingan-menjadi-2-kolom.html" target="_blank"><span style="font-size: small;">[ Widget by Dhecun Blog ]</span></a></div>

Keterangan :
1. Cellpadding : atur jarak antara tepi kolom dengan tulisan.
2. Cellspacing : atur jarak antara dua kolom
3. Width : ada dua width , pada kode di atas sama sama menggunakan angka 240 , jika ingin berbeda silahkan anda ganti saja.
4. Align : perataan teks (justify untuk rata kanan kiri , left untuk rata kiri , right untuk rata kanan dan center untuk rata tengah).
5. Valign : perataan verikal (top untuk rata atas , bottom untuk rata bawah dan middle untuk rata tengah).

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Memasang Emoticon Smile.gif di Kotak Komentar

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58 :59 :60 :61
:62 :63

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </body>
6. Masukkan script dibawah ini tepat diatas kode </body>

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/emoticonplus-v2.js' type='text/javascript'/>

7. Selanjutnya cari kode berikut

<b:if cond='data:post.embedCommentForm'>

8. Masukkan script dibawah ini tepat diatas kode tersebut

8. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.

RSS feeds

Space Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

Follow this blog

RSS feeds

RSS
Post RSS
Comments RSS

Widget Populer

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Tukar Link

Traffic

Dhecun Blog Statistics summary for website

Semua Artikel

Tampilkan semua artikel

10 Artikel Terbaru

Gabungan

Ganti warna border

Ganti warna background

Ganti background dan border

Blogger templates

Pages

Sunday, December 30, 2012

Wednesday, December 26, 2012

Tuesday, December 25, 2012

Saturday, December 22, 2012

Friday, December 21, 2012

Monday, November 26, 2012

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut