Belajar NgeBLOG

Membuat Klik Kanan Tidak Berfungsi di Blog

noreply@blogger.com (Anonymous) — Sun, 20 Oct 2013 03:14:00 -0700

Copas atau copy paste adalah kegiatan yang paling sering dilakukan oleh kebanyakan blogger.Entah karna faktor kesengajaan atau ketidaktahuan yang membuat blogger lebih menyukai kegiatan ini.Sebenarnya kegiatan copas ( copy paste ) adalah kegiatan yang sangat merugikan bagi seorang blogger.Anda tahu kenapa? Ya,selain tidak terbaca oleh Google search engine,blog yang sering meng-copas artikel orang lain akan menyebabkan blognya tidak menjadi SEO friendly,dan bisa saja blognya akan dihapus jika si pembuat artikel original melapor ke DMCA,dan yang lebih parah jika blog tersebut mendapat amukan dari google panda.
Untuk itu saya akan berbagi postingan tentang cara membuat klik kanan tidak berfungsi di blog.Dimana kita ketahui bahwa cara meng-copas adalah dengan mengklik kanan pada mouse kemudian pilh copy kemudian paste.
Bagi anda yang ingin menerapkannya di blog anda agar tidak ada plagiat blogger yang berusaha mencuri hasil karya anda sendiri.silahkan ikuti petujuknya dibawah ini :

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<SCRIPT language=JavaScript>

    var message = "function disabled";
    function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){     alert(message); return false; }
    if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {     alert(message);     return false; } }
    document.onmousedown = rtclickcheck;
</SCRIPT>

5. Simpan jika sudah selesai.

Kumpulan Kursor Keren Untuk Blog

noreply@blogger.com (Anonymous) — Sun, 20 Oct 2013 02:12:00 -0700

*( Chrome Pointer Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/11/chrome-pointer.html" target="_blank" title="Chrome Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Chrome Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Blue Fire Pointer Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html" target="_blank" title="Blue Fire Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue Fire Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Wavy Cursor Tail 10 Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur62.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur62.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2006/04/23/cur62.html" target="_blank" title="Wavy Cursor Tail 10"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Wavy Cursor Tail 10" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( The Alien Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur815.ani), url(http://cur.cursors-4u.net/cursors/cur-9/cur815.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/29/the-alien-15.html" target="_blank" title="The Alien"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="The Alien" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Cool Blue Outer Glow Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Animated Cool Shiny Blue Pointer Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1090.ani), url(http://cur.cursors-4u.net/games/gam-11/gam1090.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/02/24/animated-cool-shiny-blue-pointer.html" target="_blank" title="Animated Cool Shiny Blue Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Cool Shiny Blue Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Perfect World Online Spear Thingy Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1229.ani), url(http://cur.cursors-4u.net/games/gam-13/gam1229.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/03/perfect-world-online-spear-thingy.html" target="_blank" title="Perfect World Online Spear Thingy"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Perfect World Online Spear Thingy" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Rave Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur320.ani), url(http://cur.cursors-4u.net/cursors/cur-4/cur320.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/11/25/rave-2.html" target="_blank" title="Rave"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Rave" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Psychedelic Pointer Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur197.ani), url(http://cur.cursors-4u.net/cursors/cur-2/cur197.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/22/psychedelic-pointer.html" target="_blank" title="Psychedelic Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Psychedelic Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Animated Fire Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-1/spe19.ani), url(http://cur.cursors-4u.net/special/spe-1/spe19.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2005/10/18/spe19.html" target="_blank" title="Animated Fire"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Fire" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Flame Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur15.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur15.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2005/07/26/cur15.html" target="_blank" title="Flame"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Flame" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Heartless Background Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-6/sym549.ani), url(http://cur.cursors-4u.net/symbols/sym-6/sym549.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/12/20/heartless-background.html" target="_blank" title="Heartless Background"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Heartless Background" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( X-Steel Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1028.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1027.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/22/x-steel-wait.html" target="_blank" title="X-Steel - Wait"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="X-Steel - Wait" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Defender Blue Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur395.ani), url(http://cur.cursors-4u.net/cursors/cur-4/cur395.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/09/08/defender-black-blue.html" target="_blank" title="Defender Black Blue"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Defender Black Blue" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

*( Shiny Flashy Green Matrix Cursor )*

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur201.ani), url(http://cur.cursors-4u.net/cursors/cur-3/cur201.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/22/shiny-flashy-green-matrix.html" target="_blank" title="Shiny Flashy Green Matrix"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Shiny Flashy Green Matrix" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

( Batman Begins - Help Select Cursor )

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur949.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur949.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/26/batman-begins-help-select.html" target="_blank" title="Batman Begins - Help Select"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins - Help Select" style="position:absolute; top: 0px; right: 0px;" /></a>

Screenshoots

Sumber : DizkyBlog

Cara Membuat Tombol Share Keren Di Blog

noreply@blogger.com (Anonymous) — Sun, 20 Oct 2013 01:45:00 -0700

Login Blogger
Klik Template
Edit HTML
Centang "Expand Template Widget"
Cari Kode : </head>
Copy Kode Di Bawah ini, Lalu Paste Diatas Kode </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Lalu cari kode </body> kemudian copy kode dibawah ini dan pastekan tepat diatas kode </body>

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

5.Simpan jika sudah selesai.

Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"

noreply@blogger.com (Anonymous) — Sat, 19 Oct 2013 02:50:00 -0700

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini

6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai.

Cara Membuat Kotak Search ( Pencarian ) Di Blog

noreply@blogger.com (Anonymous) — Sat, 19 Oct 2013 02:13:00 -0700

Menampilkan kotak search bawaan BLOG :

1. Login ke akun Blogger.
2. Klik Tata Letak
3. Kemudian Pilih Add a Gadget.
4. Lalu Pilih "Kotak Penelusuran"
5. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
6. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Menambahkan kotak search dengan JavaScript :

1. Login ke akun Blogger.
2. Klik Tata Letak
4. Kemudian Pilih Add a Gadget.
5. Lalu Klik HTML/Javascript.
6. Dan Pastekan Kode dibawah ini :

Kode.1

Keterangan :
Ganti http://blogklopedia.blogspot.com/ dengan nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.

Lalu Save dan lihat hasilnya.

Kode.2

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtNXw3viDiqPIB8BuAumDeYYty4LPGtas8v_jv-y-76YmaK3zFS-4DLfRgbU9Lmtz5yLyeCibMiyXkIUEhUG1c1ewdR79nUP9bUVqXSWHlzlETkpDkSOoJ38ZZ3wtCt8w9H57W-slucUe/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Keteranagan : Tulisan yang berwarna Merah,bisa kamu ganti dengan kalimat yang kamu sukai.Contohnya :
"Cari artikel menarik lainnya disini".

Maka hasilnya akan seperti ini :

Kode.3

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIVSv-k60wCNi0Y-uLw2vuaYmmey3cjzF-n9ZUh8-0y_kIFlTJbEMQDdSs0IPvvBkrPhJHQoS0kfoqjvIGQ-eWyoNBycHNtP1nPPoAmwZvVGoE3tm0dEzFBV6xOdBfPlGg3s6fuQp_Hw/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna merah sesuai dengan selera tulisan anda. Dan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Maka hasilnya akan seperti ini :

Kode.4

Maka hasilnya akan seperti ini :

Keterangan :
Untuk tulisan yang berwarna Merah adalah URL gambar kotak search.Anda juga bisa mengubah warna kotak pencarian dengan warna kesukaan anda.Dan beikut saya tampilkan beberapa warna yang bisa anda sesuaikan dengan blog anda.

Warna Hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvne0VY4TEXBgE2e92fLtUUkfBbupemRLjDFhpbFWqnx5CjvSunxrRtU-9LzRE560deMBHshjt0F6tbo9r2mAAN6vb0zYoEwWVoGAZVl-MCEy1BOU0HR3zOLU1VhM2Rst7UkO12ZC61MBO/s1600/impoint.blogspot.com-green.png

*******************************************************************************
Warna Merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwnELFtONZReuBleieRhyifEyNmkPtJLsVmyOcmB7ctUONKWECFGkkeKvhyphenhyphenbB4KBJoihDTPlwkX7MPke-bAhGBbNxAzmwNyqVlzc9q226yneo4smF36ZoP4WdY3435qZxLvcSgBala_HE/s1600/impoint.blogspot.com-red.png

*******************************************************************************

Warna Biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2QduqOTEPG4wt5nYLzqWfrUOpzYmMfpItUiPzmQOl8abEUeyQf7r1m6F-_Ek-36AH747uLe8NtNSiIg9ATGalBjIkidmQ95UPS-hUl8PWErkJlmS77E5xi9CStSliYRnKobWxUTBvtfF/s1600/impoint.blogspot.com-blue.png

*******************************************************************************
Warna Orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjus2AxIEslreD9xqIc_TNHQFwr_EfvvYmPM3Z2QnnGLwYLzsA3vcP_HOq3FeAq4pU22jhx2YjCdhCMN-L4Ht3-kKHFXwqawg0XOuekq9mHsb6CIPUqwVysw-FklfkLu-k2KsDhWEZVPPR6/s1600/impoint.blogspot.com-orange.png

Kode.5

Maka hasilnya akan seperti ini :

Keterangan :

Tulisan yang berwarna Merah,adalah URL gambar kotak search.Anda juga dapat merubah URL tampilan kotak pencarian dengan url gambar di bawah ini :

Url.1

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

Url.2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsIYVrPmf1gvjslqQIDKkPsKnIIqWeNloAVIHpAplHuBTzIsh5mUhnCFiaAxQaTfX_d-_CRaZYEVuPR9Fbfu37MLYojKH21oiC3dhYjJUvujcSX6FvfV7VbKKKXraj61iaW7ExeXTP-oEt/s1600/lostsector-search-box-gray.png

Url.3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXRdW-6knutJBksBgdJFSpRKLsZHzkk7P4ORl_n4nNAZ88mGVPxjwihpfdKWrRyE_HOHtlN8_AOQLiQ1tpr1tEpokw9Wn_EDUHgvPK15fM5D29sLhcnNOKBWpVp_N5T7RIaCQWPa_xOC_/s1600/lostsector-search-box-black.png

Url.4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7CLx0vP2WkdiP_iCv4R7lIdxoOyQODJBSyN66XQbYD9yS_npqTlLLM3fVfWk4db2isuz5bLoDYZ1bSPJsYb207hjwNOU-HKRwIuUDSvJctPE0MZeRAtPar9FBmXot-E-FH9wRZCTnVfW/s1600/lostsector-search-box-red.png

Url.5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKy_Ld2GrBdgoWd1k2i9JZa_CnCqjmyqIe4UwAB1lv9sNv-_Jr6jgZXRCJ06dhkdh8LD4KelHi-EprFUoMDpL1i-MEdnV_OYbPuVAbz0687Q_epjQudSBx6BPj4RrwqYXHOMwLpHZM0irh/s1600/lostsector-search-box-yellow.png

Berikut adalah contoh kotak pencarian keren di blog.
Untuk lebih jelasnya,sobat dapat mengunjungi Mazinubersahabat. Di :
http://mazinubersahabat.blogspot.com/2013/05/6-cara-membuat-kotak-pencarian-paling.html

Memasang 3 Widget Keren Di Blog

noreply@blogger.com (Anonymous) — Sat, 19 Oct 2013 00:21:00 -0700

Keterangan :

Kode yang berwarna Pink,adalah kode widget jam garuda.
kode yang berwarna Biru,adalah kode widget Al-Quran.
Dan yang berwarna Merah,adalah kode widget share sosial media.
Ganti tulisan yang berwarna Hijau dengan ID anda sendiri.

Cara Menambahkan JavaScript Anti Iframe

noreply@blogger.com (Anonymous) — Fri, 18 Oct 2013 02:24:00 -0700

Sebelum saya berbagi tentang artikel ini,saya akan menjelaskan sedikit tentang 'Iframe'.Ap itu Iframe? mungkin sebagian blogger sudah tau mengenai iframe.Ya,iframe adalah kode yang di gunakan untuk menampilkan suatu web secara utuh.Dengan mengijinkan iframe,maka halaman blog atau web yang menggunakan iframe akan tampil pada halaman blog kita.Sehingga ketika kita menulis nama blog kita di google,akan muncul beberapa blog yang menyediakan javascript yang kita ambil dari blognya.Dan itu akan mempengaruhi jumlah trafik blog.Maka dari itu jika kita harus menon-aktifkan iframe dengan menambahkan javascript anti iframe maka ketika blog kita ditampilkan dalam cara iframe akan secara otomatis ter-redirect ke blog kita,sehingga dengan begitu kita akan dapat meningkatkan jumlah trafik blog.Baiklah jika anda igin memasang anti iframe di blog anda,silahkan ikuti petunjuk pemasangannya di bawah ini :

1. Login ke blogger.
2. Di Dashboard blog Pilih Template
3. Kemudian pilih Edit HTML,
4.Cari kode </head>
5. Taruh kode di bawah tepat di atas kode </head>

<!-- JavaScript Anti Iframe

if (top.location != self.location) {

top.location = self.location

}

//End JavaScript Anti Iframe-->

</script>

5.Simpan template jika sudah selesai.

Cara Membuat Kotak Admin Atau Permalink Di BLOG

noreply@blogger.com (Anonymous) — Fri, 18 Oct 2013 00:13:00 -0700

1. Login ke akun blog sobat.
2. Klik Template,kemudian pilih Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4.Kemudian Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b><br/>Admin BLOGKLOPEDIA</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/73599_1398275110402262_1787498181_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>. Oleh Admin, Anda Diperbolehkan Mengcopy Paste Atau Menyebar-luaskan Artikel ini, Namun Jangan Lupa Untuk Meletakkan Link Dibawah Ini Sebagai Sumbernya,Jika tidak Ingin Di Cap Sebagai "Plagiat".Terima Kasih.
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://blogklopedia.blogspot.com/2013/10/cara-membuat-kotak-admin-atau-permalink.html#.UmDfqtKnqDs' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

5. Klik save dan lihat hasilnya.

Catatan :

Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat.
Ganti Juga tulisan yang berwarna merah dengan tulisan anda sendiri.
Sesuaikan angka yang berwarna hijau dengan ukuran template blog sobat ( ukuran textarea ).

Refrensi : ChristianTatelu

Kode Warna HTML Blogklopedia

noreply@blogger.com (Anonymous) — Thu, 17 Oct 2013 01:10:00 -0700

Berikut Adalah Kode-kode Html warna untuk anda pasang pada gadget atau HTML :

#FOF8FF
Aliceblue

#FAEBD7
Antiquewhite

#00FFFF
Aqua

#7FFFD4
Aquamarine

#F0FFFF
Azure

#F5F5DC
Beige

#FFE4C4
Bisque

#000000
Black

#FFEBCD
Blanchedalmond

#0000FF
Blue

#8A2BE2
Blueviolet

#A52A2A
Brown

#DEB887
Burlywood

#5F9EAD
Cadetblue

#7FFF00
Chartreuse

#D2691E
Chocolate

#FF7F50
Coral

#64950
Cornflowerblue

#FFF8DC
Cornsilk

#DC143C
Crimson

#00FFFF
Cyan

#00008B
Darkblue

#008B8B
Darkcyan

#B8860B
Darkgoldenrod

#A9A9A9
Darkgray

#006400
Darkgreen

#8B008B
Darkmagenta

#BDB76B
Darkkhaki

#556B2F
Darkolivegreen

#FF8C00
Darkorange

#9932CC
Darkorchid

#8B0000
Darkred

#E9967A
Darksalmon

#8FBC8B
Darkseagreen

#483D8B
Darkslateblue

#2F4F4F
Darkslategray

#00CED1
Darkturquoise

#9400D3
Darkviolet

#FF1493
Deeppink

#00BFFF
Deepskyblue

#696969
Dimgray

#1E90FF
Dodgerblue

#B22222
Firebrick

#FFFAF0
Floralwhite

#228B22
Forestgreen

#FF00FF
Fuchsia

#DCDCDC
Gainsboro

#F8F8FF
Ghostwhite

#FFD700
Gold

#DAA520
Goldenrod

#808080
Gray

#008000
Green

#ADFF2F
Greenyellow

#F0FFF0
Honeydew

#FF69B4
Hotpink

#CD5C5C
Indianred

#4B0082
Indigo

#FFFFF0
Ivory

#F0E68C
Khaki

#E6E6FA
Lavender

#FFF0F5
Lavenderblush

#7CFC00
Lawngreen

#FFFACD
Lemonchiffon

#ADE8E6
Lightblue

#F08080
Lightcoral

#E0FFFF
Lightcyan

#FAFAD2
Lightgoldenrodyellow

#90EE90
Lightgreen

#D3D3D3
Lightgray

#FFB6C1
Lightpink

#FFA072
Lightsalmon

#20B2AA
Lightseagreen

#87CEFA
Lightskyblue

#778899
Lightslategray

#B0C4DE
Lightsteelblue

#FFFFE0
Lightyellow

#00FF00
Lime

#32CD32
Limegreen

#FAF0E6
Linen

#FF00FF
Magenta

#800000
Maroon

#66CDAA
Mediumaquamarine

#0000CD
Mediumblue

#BA55D3
Mediumorchid

#9370DB
Mediumpurple

#3CB371
Mediumseagreen

#7B68EE
Mediumslateblue

#00FA9A
Mediumspringgreen

#48D1CC
Mediumturquoise

#C71585
Mediumvioletred

#191970
Midnightblue

#F5FFFA
Mintcream

#FFE4E1
Mistyrose

#FFE4E1
Moccasin

#FFDEAD
Navajowhite

#000080
Navy

#FDF5E6
Oldlace

#808000
Olive

#6B8E23
Olivedrab

#FFA500
Orange

#FF100%0
Orangered

#DA70D6
Orchid

#EEE8AA
Palegoldenrod

#98FB98
Palgreen

#AFEEEE
Paleturquoise

#DB7093
Palevioletred

#FFEFD5
Papayawhip

#FFDAB9
Peachpuff

#CD853F
Peru

#FFC0CB
Pink

#DDA0DD
Plum

#B0E0E6
Powderblue

#800080
Purple

#FF0000
Red

#BC8F8F
Rosybrown

#4169E1
Royalblue

#8B4513
Saddlebrown

#FA8072
Salmon

#F4A460
Sandybrown

#2E8B57
Seagreen

#FFF5EE
Seashell

#A0522D
Sienna

#C0C0C0
Silver

#87CEEB
Skyblue

#708090
Slategray

#FFFAFA
Snow

#00FF7F
Springgreen

#4682B4
Steelblue

#D2B48C
Tan

#008080
Teal

#D8BFD8
Thistle

#FF6347
Tomato

#40E0D0
Turquoise

#EE82EE
Violet

#F5DEB3
Wheat

#FFFFFF
White

#F5F5F5
Whitesmoke

#FFFF00
Yellow

#9ACD32
Yellowgreen

Membuat Gambar Berputar Dan Membesar Saat Disentuh Mouse

noreply@blogger.com (Anonymous) — Wed, 16 Oct 2013 23:28:00 -0700

1. Pertama, pastinya Login dulu ke akun BLOG kamu

2. Kemudian dari Dasbor, pilih Template
3. Kemudian pilih Kode HTML

4. Cari Code ]]></b:skin> (Untuk memudahkan pencarian maka tekan Tombol CTRL + F atau F3 pada Keyboard )

5. Kemudian Copas code di bawah tepat diatas code ]]></b:skin>

Gambar berputar di postingan blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar dan membesar di postingan blog

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

Gambar berputar post dan komentar

.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar hanya di komentar

.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar di header

.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

6. Terakhir tinggal di SIMPAN dan lihat hasilnya.

Menambahkan Efek-Efek Keren Di BLOG

noreply@blogger.com (Anonymous) — Wed, 16 Oct 2013 23:00:00 -0700

Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking. Dan kini saya akan

Cara pemasangan :

1.Klik Tata Letak,kemudian pilih Tambah Gadget
2.Kemudian Pilih HTML/JavaScript
3.Kemudian pilih kode efek mana yang ingin anda pasang di blog anda.
4.Klik Simpan

Dan berikut kode-kode efek blog :

1. Efek salju berjatuhan

2. Efek hati bertaburan

3. Efek bintang bertaburan

4. Efek kembang api

5. Efek Gelembung

5. Efek Kupu - Kupu Terbang

Cara Membuat Spoiler di Blog

noreply@blogger.com (Anonymous) — Wed, 16 Oct 2013 22:10:00 -0700

1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) Anda di sini!!

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
Dan letakkan Teks Atau Script Code Anda.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.
Dan Lihat Hasilnya

Cara Memebuat Efek Tulisan Seperti Di Ketik

noreply@blogger.com (Anonymous) — Wed, 16 Oct 2013 00:07:00 -0700

Halo sobat blogger? apa kabar? kali ini saya akan memposting tentang cara membuat tulisan seperti diketik.Wow keren bukan?!! ya tentu saja,seperti halnya mengetik di laptop atau di komputer,saat kita menekan huruf satu per satu.Efek ini memberikan kesan seakan kita sedang mengetik pada keyboard. Dijamin trik ini selain bisa memperindah tampilan tulisan blog kamu,efek ini juga bisa memikat mata pengunjung blog.Ok tak perlu panjang lebar,buat kamu yang berminat mencoba efek ini,silahkan copy kode di bawah ini. Dan pastekan kode tersebut melalui HTML/JavaScript.

Script di atas bisa dipasang di post dan juga di sidebar. Untuk di postingan, masukan dengan opsi HTML saat menulis. Sedangkan jika kamu ingin menampilkan efek ini di widget,silahkan login ke blog kamu,kemudian Tata Letak pilih tambakan gadget dan pilih HTML/Java Script. Ganti tulisan yang berwarna merah dengan teks yang kamu inginkan, contohnya akan tampil seperti ini:

Cara Membuat Efek Gelembung ( Bubble ) Pada Cursor

noreply@blogger.com (Anonymous) — Tue, 15 Oct 2013 23:02:00 -0700

Cara Membuat Efek Bubble (Gelembung) Pada Cursor
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

5. Kode warna Pink adalah kode warna dari bubble (gelembung) itu sendiri, kamu bisa mengubah dengan kode warna yang lain.
6. Simpan jika sudah selesai.

Update Status Via Apa Saja

noreply@blogger.com (Anonymous) — Tue, 15 Oct 2013 22:52:00 -0700

Mungkin bagi sebagian orang,kata Facebook sudah tidak asing lagi di telinga mereka. Ya,sebagai salah satu situs media sosial yang paling banyak dikunjungi,menjadikan facebook sebagai situs jejaring sosial terlaris sepanjang massa.Tercatat sudah lebih dari setengah miliar orang telah mendaftarkan namanya di Facebook.Wowww luar biasa bukan??
Tapi kali ini saya bukan ingin menceritakan sejarah Facebook,atau ingin mengajarkan tentang cara memebuat Facebook. Tapi saya ingin Share tentang cara mengupdate status di Facebook via apa saja.
Hah via apa saja?? Iya,Kalau biasanya kalian update status di facebook melalui seluler atau smartphone,kali ini saya akan Berbagi tentang cara update status melalui apa saja. Untuk lebih jelasnya,coba lihat gambar di bawah ini :

Jangan Lupa Add My Facebook Ardhyan ID Atau Kunjungi FanspageArdhyanID

Atau Follow Twitter @Ardhyan_ID

Cara Menambahkan Translate Google Di Blog

noreply@blogger.com (Anonymous) — Tue, 15 Oct 2013 22:26:00 -0700

1.Pertama, login akun blogger sobat
2.Pilih Tata Letak
3.Klik Tambahkan Gadget
4.Pilih HTML/JavaScript
5.Copas kode dibawah ini,dan letakkan ke dalam HTML/JavaScript :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

6.Simpan jika sudah selesai. Dan lihat hasilnya.

Membuat Translate Dengan Icon Bendera

noreply@blogger.com (Anonymous) — Tue, 15 Oct 2013 22:04:00 -0700

Sebelumnya saya sudah menulis tentang cara membuat translate dengan Google Translate .
Kali ini saya akan Share tentang cara membuat Translate Google dengan Gambar bendera di Blog.
Tidak perlu berbicara panjang lebar. Ikuti saja petunjuknya di bawah ini :

1. Masuk ke akun Blogger Sobat.
2. Pilih Tata Letak > Tambah Gadget > HTML/JavaScript.
3. Copas kode berikut, di dalam box HTML/JavaSript, judul bisa diisi dengan Translate/Terjemahan.

4. Setelah itu, klik Simpan.
5.Dan lihat hasilnya.

Selamat,sekarang blog kamu sudah bisa diterjemahkan kedalam 12 bahasa.

Cara Menambahkan Button Like, Tweet dan G+1 di Bawah Postingan

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 23:16:00 -0700

1. Login ke Blogger.com
2. Di halaman Dasbor, kita pilih Template.
3. Kemudian pilih Edit HTML
4. Cari kode berikut ini <data:post.body/>
Jika anda menemukan 3 kode yang sama,pilih kode yang pertama.
5. Setelah itu taruh kode berikut ini di bawahnya

<br />
<div class="addthis_toolbox addthis_default_style" expr:addthis:title="data:post.title" expr:addthis:url="data:post.url" style="float: left; padding: 0px;">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" href="http://www.blogger.com/null">
</a><a class="addthis_button_tweet" href="http://www.blogger.com/null" tw:related="kurniasepta" tw:via="Ardhyan_ID">
</a><a class="addthis_button_google_plusone" g:plusone:size="medium" href="http://www.blogger.com/null">
</a></div>
<script src="//s7.addthis.com/js/300/addthis_widget.js" type="text/javascript">

6. Simpan Template jika sudah selesai, sebelumnya jangan lupa ganti Ardhyan ID dengan username twittermu sendiri.
7.Dan Lihat Hasilnya.

Cara Membuat Tulisan Berjalan di Blog

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 20:50:00 -0700

Cara Membuat Tulisan Berjalan di Blog

1. Tulisan bergerak dari kanan ke kiri

<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

hasilnya

Contoh Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan

<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri

<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

5. Teks bergerak dari atas ke bawah

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

6. Teks bergerak dari bawah ke atas

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

7. Teks bergerak mondar- mandir dari atas ke bawah

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

8. Teks bergerak zig - zag ( diagonal ) memantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

9. Teks bergerak zig - zag ( diagonal ) tembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.

tambahan :

Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan kode marquee antara kode berikut

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

hasilnya :

Contoh Tulisan Berjalan

Untuk menyisipkan link pada marquee, gunakan kode berikut :

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://blogklopedia.blogspot.com/2013/10/cara-membuat-tulisan-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>
</div>

catatan :
ganti tulisan yang berwana biru dengan Url yang di inginkan.

hasilnya :

Cara Membuat Teks Berjalan di Blog

Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=http://blogklopedia.blogspot.com/2013/10/cara-membuat-zoom-effect-gambar-di-blog.html">cara membuat efek zoom pada gambar di blog</a><br/>
<a href="http://blogklopedia.blogspot.com/2013/10/membuat-auto-readmore-dengan-gambar.html">cara membuat readmore dan gambar</a><br/>
<a href="http://blogklopedia.blogspot.com/2013/10/cara-memasang-widget-jam-garuda-di-blog.html">memasang widget jam garuda di blog</a><br/>
</marquee>

catatan :
kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer

Hasilnya :

cara membuat efek zoom pada gambar di blog
cara membuat readmore dan gambar
memasang widget jam garuda di blog

Sekian postingan saya mengenai tulisan berjalan diblog.
semoga membantu.

Refrensi : Christian Tatelu

Cara Membuat Effect Zoom Pada Gambar di Blog

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 20:46:00 -0700

1. Login ke akun blogger.com
2. Pilih Template
3. Kemudian Pilih Edit HTML
4. Cari kode Tekan ( Ctrl + F ) ]]></b:skin>lalu taruh kode berikut ini diatasnya :

.ow img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan Template jika sudah selesai.

6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada kode HTML gambar.
Seperti ini contohnya :

Membuat Auto Readmore Dengan Gambar

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 20:18:00 -0700

1. Login ke blogger.com
2. Pilih Template lalu Edit HTML,kemudian Tempatkan kursos mouse anda di dalam kotak pengeditan template.
3. Tekan CTRL+F, Muncul sebuah kotak lalu Cari kode </head> dan letakkan kode di bawah ini diatasnya.

4. Kemudian ganti kode <data:post.body/> dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMPZgVHRSNdBkhIQNCrPIhRzVpCuVw1Ee1_5G_G6C22b5WruBPIXifiHQ_oPkf9iT7ko8PHculgw6aegC_ESRhPOtRjTAjwN1Zt1QaF2V6ihOGYiECvjNpOd5Zb5AJVB1OOqFENklyxIYj/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

5. Klik Pratinjau terlebih dahulu sebelum anda menyimpannya.
6.Apabila di halaman depan blog anda sudah terlihat tulisan "Readmore",berarti template yang anda pasang sukses.
7.Dan klik Simpan.

Keterangan :

• summary_noimg = 280; (Jumlah huruf artikel tanpa gambar)
• summary_img = 280;(Jumlah huruf artikel bergambar) • img_thumb_height = 120;(Tinggi gambar) • img_thumb_width = 120; (Lebar gambar)
• Dan tulisan yang berwarna biru adalah URL gambar. Anda dapat mengganti URL gambar di atas,dengan URL gambar kesukaan anda sendiri.

Cara Membuat Artikel Terkait Dengan Fungsi Scroll Di Bawah Postingan

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 19:33:00 -0700

1. Login ke akun BLOG. Pilih Template kemudian Edit HTML

3. Tekan Ctrl + F dan cari kode <data:post.body/>

jika blog kamu memakai auto read more, mungkin kamu akan menjumpai 3 tag kode seperti itu. Pilih yang sesuai di mana kamu biasanya menaruh widget di bawah post. Lalu taruh kode berikut di bawahnya;

<span style="color: blue;"><b><h3>Baca Juga Pelajaran NgeBLOG Lainnya</h3> </b></span><br /><h4>
<span style="font-family: "Trebuchet MS",sans-serif;"><span style="color: blue;"><b><br /></b></span></span></h4>
<div style="border: 1px solid #000000; height: 250px; overflow: auto; padding: 5px; width: auto;">
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
var acakarray = new Array();var l=0;var flag;
var numofpost=10; function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}
if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</b:if>
</div>

4.Anda dapat mengganti tulisan yang berwarna Biru dengan tulisan anda sendiri. Angka 10 adalah banyaknya judul postingan yang ditampilkan.
5.Simpan jika selesai.
6.Dan lihat hasilnya

Cara Memasang Widget Jam Garuda Di Blog

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 18:40:00 -0700

Jam Garuda - Blogklopedia

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4.Kemudian masukkan kode berikut :

Maka hasilnya seperti ini :

5. Simpan jika sudah selesai.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 17:49:00 -0700

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

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

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.
8. Simpan jika sudah selesai.

Cara Membuat Efek Gambar atau Foto Bergetar

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 17:37:00 -0700

1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

5. Ganti yang berwarna merah dengan URL gambar kamu sendiri.
6. Simpan jika sudah selesai.

Belajar NgeBLOG

Membuat Klik Kanan Tidak Berfungsi di Blog

Kumpulan Kursor Keren Untuk Blog

*( Batman Begins - Help Select Cursor )*

Cara Membuat Tombol Share Keren Di Blog

Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"

Cara Membuat Kotak Search ( Pencarian ) Di Blog

Memasang 3 Widget Keren Di Blog

Cara Menambahkan JavaScript Anti Iframe

Cara Membuat Kotak Admin Atau Permalink Di BLOG

Kode Warna HTML Blogklopedia

Membuat Gambar Berputar Dan Membesar Saat Disentuh Mouse

Menambahkan Efek-Efek Keren Di BLOG

Cara Membuat Spoiler di Blog

Cara Memebuat Efek Tulisan Seperti Di Ketik

Cara Membuat Efek Gelembung ( Bubble ) Pada Cursor

Update Status Via Apa Saja

Cara Menambahkan Translate Google Di Blog

Membuat Translate Dengan Icon Bendera

Cara Menambahkan Button Like, Tweet dan G+1 di Bawah Postingan

Cara Membuat Tulisan Berjalan di Blog

Cara Membuat Effect Zoom Pada Gambar di Blog

Membuat Auto Readmore Dengan Gambar

Cara Membuat Artikel Terkait Dengan Fungsi Scroll Di Bawah Postingan

Cara Memasang Widget Jam Garuda Di Blog

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

Cara Membuat Efek Gambar atau Foto Bergetar

( Batman Begins - Help Select Cursor )