Nub Tutorial

Membuat Efek Loading Di Blog

noreply@blogger.com (Unknown) — Sat, 13 Feb 2016 14:55:00 +0700

Selamat datang kembali di Joe Erick Blog. Pada postingan kali ini saya akan membahas tutorial tentang Membuat Efek Loading Di Blog. Efek loading pada blog digunakan untuk mempercantik dan membuat tampilan blog semakin bagus dan keren, agar visitor juga tertarik melihat tampilan blognya sobat.
Mungkin pada tutorial kali ini saya belum bisa untuk menampilkan demonya, silahkan sobat cek sendiri jika nantinya sudah siap diblog shobat.

1. Masuk ke Blogger kalian, Kemudian Pilih Edit HTML
2. Copy CSS berikut diatas kode ]]></bskin>

#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999999; background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJZcKEp7pXDxVbfDjpSFb5nhKz7C17Zonnm833dSKPrYoRM92-OpcHLwgVGpBazye_Utf9NV_iVk2Cf2q5dgVZbbKnujsdJ_3L6IucRMIcs970T1ChtOC3ftO6CpCpiwhSfkV2BKbfjz0/s320/load+labeltutorial.gif") no-repeat 50% 50%; padding:1em 1.2em; display:none }

Info :
1. Kode Background: #303030 = bisa anda ganti dengan warna yang anda sukai jika anda tidak paham akan kode warna HTML bisa cek menggunakan tools kode warna disini
2. Kode yang berwarna merah bisa anda isikan dengan URL gambar gif/animasi milik anda sendiri atau anda bisa gunakan gambar yang diatas nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan tools di website dibawah ini:

www.loadinfo.net
www.preloaders.net
www.ajaxload.info

nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga

3. Copy kode dibawah ini di atas kode </body>

<script type='text/javascript'> //<![CDATA[ // Menyisipkan markup tabir animasi $(document.body).append('<div id="page-loader"></div>'); // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain... $(window).on("beforeunload", function() { // ... tampilkan tabir animasi dengan efek `.fadeIn()` $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

4. Selanjutnya Save Template. Semoga sukses terpasang diblognya shobt...

Terima kasih sudah bersedia berkunjung dan menyimak tutorial singkat saya tentang Membuat Efek Loading Di Blog, semoga bermanfaat...

Membuat Sitemap Simple Keren Untuk Blogger

noreply@blogger.com (Unknown) — Sat, 13 Feb 2016 14:30:00 +0700

Salam Joe-ngeblog.blogspot.com, pada postingan kali ini saya akan berbagi tutorial Membuat Sitemap Simple Keren Untuk Blogger yang mana cukup simple dan tampilan menjadi cukup menarik. Untuk Saat ini mungkin saya tidak menggunakan sitemap yang seperti ini. Sitemap berfungsi untuk memudahkan para pengunjung blog atau visitor dalam mencari artikel yang ada diblog dengan mudah, apalagi sitemap ini cukup simple dan juga fast loading.

Untuk Demonya, Silahkan Cek Langsung Disini :

=> Demo <=

Langkah-Langkahnya :
1. Login ke Akun Blogger dan Buat Laman Baru
2. Kemudian ganti dari Compose menjadi HTML
3. Selanjutnya Copy semua Kode dibawah ini :

<style type='text/css'> #show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px} #show-cat ul{margin:0;border-top:1px solid #ccc;padding:0} #show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0} #show-cat ul li a{display:block;padding:10px} #show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none} #show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px} #show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff} #show-post{float:left;width:60%} #show-post ul li{list-style-type:none} #navi-cat{padding:20px 0} #navi-cat a{margin-right:10px;border:1px solid #ccc} #navi-cat a,#navi-cat span{padding:5px 10px} #navi-cat span{float:right} </style> <div id='show-cat'></div> <div id='show-post'> <script type='text/javaScript'> var cat_home='';cat_numb=10;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start+' – '+(cat_start+i-1)+' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div> <div style='clear:both'></div>

4. Kemudian Publikasikan, atau Preview dulu untuk melihat hasilnya.
5. Dan Selesai dah tutorial singkatnya..

Gimana gan ? mudah dan simple kan... silahkan terapkan diblog anda. terima kasih terlah mengunjungi Joe Erick Blog, blog kecil yang sederhana ini.
Terima kasih.

Membuat Widget Email Subscribe Dengan Style Flat

noreply@blogger.com (Unknown) — Sat, 6 Feb 2016 15:22:00 +0700

Membuat Widget Email Subscribe Dengan Style Flat - Widget ini merupakan widget yang sangat penting dan ga mau dilewatkan oleh para blogger untuk membuat tampilan blog terlihat SEO. Widget ini berfungsi untuk mendapatkan berbagai artikel gratis yang diposting oleh blog-blog yang dimana anda juga mensubmit email anda. contoh hasilnya seperti dibawah ini :

Langkah-langkahnya sebagai berikut :

1. Pada Dasbor > Tataletak > Add Gadget/Widget > Pilih Text/Javascript
2. Lalu copy semua script berikut dan pastekan :

<style scoped="scoped" type="text/css">

#SUBSCRIBE-LTB { width:280px; border:1px solid #aaa; border-radius:3px; padding: 0; } .SUBSCRIBE-LTB-wrapper { background: #98cdca; color:#fff; font-size:14px; line-height:20px; text-align:inherit; text-transform:uppercase; padding:1px 20px 10px; } .SUBSCRIBE-LTB-form { clear:both; display:block; margin:10px 0; } form.SUBSCRIBE-LTB-form { clear:both; display:block; width:auto; margin:10px 0 0; } .SUBSCRIBE-LTB-email-field { -moz-border-radius:4px; -webkit-border-radius:4px; background:#fff ; border:1px solid #ccc; border-radius:4px; color:#444; width:68%; margin:0 0 15px; padding:10px 40px; } .SUBSCRIBE-LTB-email-button { background:#3A4146; border:1px solid #444749; box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; color:#fff; cursor:pointer; font-family:verdana; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,.4); text-transform:uppercase; width:100%; padding:10px; } .SUBSCRIBE-LTB-email-button:hover,.SUBSCRIBE-LTB-email-button:focus { background:#444749; } .SUBSCRIBE-LTB-email-button:active { -moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; outline:0; } iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table { width:100%; } embed { border-radius:3px; -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2); background:#FFF; border:1px solid #ddd; box-shadow:0 2px 4px rgba(0,0,0,0.2); margin:0; padding:4px; } #footer-section { border-top:1px solid #98cdca; box-shadow:inset 0 4px 6px -3px #98cdca; font-family:cambria; font-size:14px; height:100px; text-align:center; width:100%; margin:10px -30px 5px; padding:0 30px; }

</style>

<div id="SUBSCRIBE-LTB"> <div class="SUBSCRIBE-LTB-wrapper"><font face="verdana"><p><b>Silahkan Isikan Email Anda Disini, Anda Akan Mendapatkan berbagai Artikel Menarik Gratis perharinya !!!!</b> </p></font> <div class="SUBSCRIBE-LTB-form"><form action="https://feedburner.google.com/fb/a/mailverify?uri=JoeErickBlog" class="SUBSCRIBE-LTB-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=JoeErickBlog', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="JoeErickBlog" /> <input name="loc" type="hidden" value="en_US" /><input class="SUBSCRIBE-LTB-email-field" name="email" autocomplete="off" placeholder=" Ketik Email Anda Disini ... "/> <input class="SUBSCRIBE-LTB-email-button" title="" type="submit" value="Submit" /></form> </div></div></div>

*Keterangan :
- Kode warna biru ganti dengan Kata-kata anda sendiri.
- Ganti kode berwarna merah dengan kode ID pada Feedburner sobat

3. Kemudian Save Template.

Selesai sudah tutorialnya.
Semoga sukses dan selamat mencoba gan :)

Cara Mudah Membuat Pesan Pembuka Di Blog

noreply@blogger.com (Unknown) — Sat, 6 Feb 2016 13:41:00 +0700

Selamat datang kembali untuk para sahabat blogger yang setia mampir diblog saya, pada postingan kali ini saya akan membahas tentang Cara Mudah Membuat Pesan Pembuka Di Blog.Tujuan dari pesan pembuka dan penutup ini yaitu untuk menyambut kedatangan tamu atau visitor diblog kita. Demonya seperti dibawah ini :

Berikut langkah-langkahnya :

1. Silahkan Masuk ke akun Blogger anda,
2. Kemudian Pilih Dasbor > Rancangan > Edit HTML
3. Selanjutnya cari kode <head> atau gunakan CTRL + F pada keyboard dan masukan kode script berikut dibawahnya :

<script type='text/javascript'>alert("Selamat datang di blog saya, dan selamat berselancar jangan lupa beri komentar")</script>

Keterangan : Ganti tulisan yang berwarna merah dengan pesan yang anda inginkan.

Gimana ? mudah bukan tutorial singkat tentang Cara Mudah Membuat Pesan Pembuka Di Blog , ga ribet dan ga sulit serta ga berbelit-belit gan.
Silahkan dicoba, semoga bermanfaat :)

Membuat Tukar Link Dan Auto Backlink Di Blog

noreply@blogger.com (Unknown) — Sun, 24 Jan 2016 15:39:00 +0700

Membuat Tukar Link Dan Auto Backlink Di Blog - Terkadang sangat sulit untuk mendapatkan backlink dari suatu blog yang kita kunjungi, terkadang banyak berbagai macam peraturan yang membuat kita juga kurang berkenan untuk memasang backlink diblog mereka. Tidak semua blog yang mau menerima blog lain untuk menerima backlink dari blognya, kebanyakan mereka hanya akan memberikan backlink melihat Google PageRank atau Alexa Rank blog yang rendah sehingga juga cepat untuk menaikan visitor atau pengunjung diblognya.

Sekarang sih cara itu masih berlaku, namun ada lagi cara baru dan simple serta juga mudah untuk diterapkan dalam setiap blog tanpa harus mengemis untuk mendapatakan backlink dari blog mereka. Caranya yaitu hanya dengan menggunakan Widget Simply Linked. Anda hanya cukup mengisi formulir yang terlah disediakan.

Berikut cara-caranya :
1. Silahkan Masuk Ke Websitenya Simple Linked Disini

2. Kemudian Pilih Sign Up For Free Account

3. Jika sudah masuk, maka tampilannya akan seperti ini. Isi semua data anda pada kolom yang terdapat dibawah ini. Jika sudah selesai, Klik Submit.

4. Setelah disubmit, anda akan dibawa kehalaman berikut ini, bahwa anda sukses dalam pendaftarannya. kemudian Klik tulisan yang bergaris bawah tersebut untuk kembali ke beranda Simply Linked.

5. Sekarang masukan Username dan Password anda, setelah diisi klik Submit.

6. Setelah Login, kemudian pilih Create New List.

7. Masukan nama yang anda inginkan, dan silahkan pilih Type yang sesuai dengan keinginan anda pada kolom dibawah ini. klik Create List.

8. Jika sudah maka langkah selanjutnya yaitu anda tinggal copy semua script yang ada, seperti yang terdapat digambar dibawah ini.

* Keterangan : Anda bisa juga menempatkannya dihalaman statis atau sebagai Widget.

Selamat mencoba dan semoga sukses..

Membuat Bingkai Pada Halaman Postingan

noreply@blogger.com (Unknown) — Sat, 23 Jan 2016 14:52:00 +0700

Membuat Bingkai Pada Halaman Postingan - Banyak berbagai macam cara yang dilakukan oleh para blogger baik dari newbie maupun master untuk memperindah tampilannya blog yang mereka miliki. Baik meliputi merubah bagian header, halaman posting maupun sidebar. Namun pada postingan kali ini yaitu kita akan merubah tampilan serta memberi bingkai pada halam postingan. Bagi para sahabat blogger semuanya langsung saja simak langkah-langkahnya sebagai berikut :

Langkah-Langkahnya :

          1. Login ke Blogger, pilih menu TATA LETAK, lalu EDIT HTML.

          2. Cari kode ]]></b:skin>

          3. Lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>

.post {-moz-border-radius: 10px ; -webkit-border-radius: 10px ; border-radius: 10px ; padding:10px; border: 1px solid #ff0000; }

4. Selanjutnya, Klik Pratinjau untuk melihat previewnya.

Gimana? Mudah dan Gapang diterapkan bukan...
selamat mencoba gan..

Keterangan : Kode yang berwarna Biru bisa anda ganti dengan kode ketebalan border. 10px adalah sudut ketumpulan semakin besar akan semakin tumpul. Kode warna kuning adalah kode warna , silahkan ganti sesuai warna kesukaan anda.

Menyisipkan Emoticon Kedalam Postingan Blog

noreply@blogger.com (Unknown) — Wed, 20 Jan 2016 13:51:00 +0700

Emoticon

Menyisipkan Emoticon Kedalam Postingan Blog - Banyak cara lain yang dapat dilakukan untuk mempercantik suatu blog atau suatu postingan yang terdapat diblog. ada yang berupa penambahan kotak berupa tempat untuk meletakan Script, seperti yang saya jelaskan dipostingan sebelumnya yaitu tutorial Memasang Kotak Didalam Postingan Blog, serta juga Membuat Text Area Dengan Mudah. sekarang kita bukan untuk membahas itu lagi, langsung aja ke pembahasan tutorial kali ini.

Caranya yaitu :

1. Buat Satu Postingan Baru
2. Kemudian Ganti Compose Menjadi HTML
3. Selanjutnya Copy script emoticon yang anda inginkan dibawah ini :

4. Jika sudah dipilih emoticonnya, silahkan ganti HTML menjadi Compose kembali. maka langsung muncul tuh hasil emoticonnya.

Sekian dulu tutorial saya pada kali ini, semoga bermanfaat...

Cara Memasang Tombol Add This Diatas Postingan Blog

noreply@blogger.com (Unknown) — Tue, 19 Jan 2016 12:54:00 +0700

Selamat datang kembali di Joe Erick Blog. Pada postingan kali ini saya akan coba tulis bagaimana tutorial tentang Cara Memasang Tombol Add This Diatas Postingan Blog. Tombol Add This ini digunakan untuk mempermudah pengunjung atau visitor yang mampir diblog kita untuk membagikan artikel atau postingan yang kita tulis.

Langkah-langkahnya sebagai berikut :

a. Silahkan Login dulu ke Akun Blognya sobat.
b. Pilih Template, Edit HTML, jangan lupa centang Expand Template Widget
c. Kemudian cari kode berikut: <data:post.body/>, gunakan Ctrl + F atau F3 untuk mempermudah pencarian
d. Jika sudah ditemukan copy semua kode di bawah ini tepat di atas kode: <data:post.body/>

<table><tr><td><strong>Bagikan artikel ini:</strong></td>
<td><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='450'/></td>

<td>

<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://se-cara.blogspot.com/'/>


<script type='text/javascript'>
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

</td>

<td>

<div class='addthis_toolbox addthis_default_style '>

<a class='addthis_button_tweet'/>
<a class='addthis_button_pinterest_pinit'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50e6ae0a596c7ba0' type='text/javascript'/>


</td></tr></table>

Keterangan : Kalau di blog Sobat terdapat 2 atau 3 kode: <data:post.body/>, letakkan kode tersebut di atas kode yang ke-2.

e. Selanjutnya klik Save Template, dan lihat hasilnya diblog sobat.

Sekian dulu postingan saya pada kali ini tentang Cara Memasang Tombol Add This Diatas Postingan Blog. Semoga bermanfaat dan jangan lupa like dan share serta tinggalkan komentarnya ^_^

Membuat Text Area Dengan Mudah

noreply@blogger.com (Unknown) — Sun, 17 Jan 2016 17:23:00 +0700

Membuat Text Area Dengan Mudah - Text area merupakan salah satu kolom yang digunakan untuk menyisipkan berupa kode-kode ataupun berupa script HTML/Javascript ataupun juga CSS yang akan digunakan nantinya.
Text area ini bisa diletakan dimana yang anda suka, baik ditengah, kiri, kanan serta diberbagai termpat lainnya.

I. Text Area Dasar :

<textarea> Isi Script atau Kata-Kata Anda Disini <textarea>

Maka hasilnya seperti dibawah ini :

Ada juga kode standart lainnya seperti ini :

<p align="center"><textarea name="code" rows="2" cols="15"> Selamat datang di Joe Erick Blog </textarea></p>

Hasilnya seperti ini :

II. Text Area Hightlight

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </div><div align="center"></div><p align="center"><textarea style="width: 305px; height: 149px;" name="txt" rows="105" wrap="VIRTUAL" cols="60">Silahkan ganti dengan Kata-kata anda Sendiri</textarea></p></form></div>

Hasilnya sebagai berikut :

Keterangan :
1. <div align="center"> untuk posisi button dimana akan sobat letakan.

2. <input onclick="javascript:this.form.txt.focus ();this.form.txt.selec()">. Sebaiknya jangan mengganti tulisan ini.

3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, silahkan ganti dengan kata-kata anda sendiri.

Keterangan Lainnya :

1. <p align="center"> : merupakan posisi dimana textarea yang akan ditempatkan

2.style="width: 305px; height: 149px;" name="txt" rows="105" wrap="VIRTUAL" cols="60" : Ukuran kotak yang akan digunakan.

3. Silahkan ganti dengan Kata-kata anda Sendiri : Ganti dengan tulisan atau kata-kata yang anda inginkan.

Gimana mudah bukan ? sobat bisa langsung terapkan sendiri kok diblog sobat.
Jika terdapat kesalahan atau sulitnya untuk menerapkan, silahkan komentar dibawah ini langsung.

Semoga bermanfaat..

Cara Membuat Judul Sidebar Berkedip

noreply@blogger.com (Unknown) — Sun, 17 Jan 2016 15:41:00 +0700

Cara Membuat Judul Side Bar Berkedip - Pada postingan sebelumnya saya juga membahas tutorial yang berhubungan dengan sidebar yaitu tentang Membuat Judul Sidebar Ditengah Tanpa Merubah CSS, Silahkan baca artikelnya disini Membuat Judul Sidebar Ditengah Tanpa Merubah CSS.

Dan selanjutnya saya masih membahas tutorial tentang sidebar yang mana berjudul Cara Membuat Judul Side Bar Berkedip, cara ini dilakukan untuk membuat tampilan blog dan pada tampilan sidebar terlihat semakin lebih menarik dan berwarna.

Cara-caranya yaitu :
1. Buka Dashboard blog anda.
2. Klik Template, dan pilih Edit HTML
3. Selanjutnya Cari Kode dibawah ini :

.sidebar .widget{ background:#3D81EE; border:0px solid #6c6b6b; margin:0 0 1.0em; padding:0.5em; }

4. Kemudian tambahkan kode dibawah ini tepat dibawah kode yang diatas :

.sidebar .widget:hover { background:#66B5FF; }

5. Selanjutnya Save Template. dan lihat hasilnya diblog sobat.

Keterangan : Untuk kode yang berwarna merah merupakan kode Warna, silahkan ganti kode warnanya sesuai dengan keinginan anda. Silhkan cek langsung kodenya DISINI

Semoga sukses gan, selamat mencoba ..

Cara Menambahkan Kolom Add Gadget Dibawah Postingan

noreply@blogger.com (Unknown) — Sun, 17 Jan 2016 13:43:00 +0700

Cara Menambahkan Kolom Add Gadget Dibawah Postingan - Pada postingan kali ini saya akan membahas bagaimana cara menambahkan kolom add gadget dibawah postingan yang mana dengan cara yang simple dan tidak terlalu sulit bagi sobat blogger semuanya. Untuk membuatnya anda sedikit menambahkan kode CSS ke dalam Template blog anda.

Langkah-Langkahnya :

Buka Dashboard Blog Anda
Kemudian Pilih Template
Selanjutnya Edit HTML
Backup dulu Templatenya sobat agar saat terjadi kesalahan nantinya tidak merusak tampilannya blog sobat.
Kemudian cari Code dibawah ini :

#main-wrapper { width: 410px; float:$startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Tambahkan kode berikut ini tepat dibawah kode diatas :

#mainbottom { background:#ffffff; border:1px solid #0B610B; margin:0 0 0.5em; padding:0.5em; }

Selanjutnya yaitu untuk membuat ID mainbottom nya. Cari kode dibawah ini:

Kemudian tambahkan kode berikut di bawah :

<b:section class='main' id='mainbottom' showaddelement='yes'/>

Sehingga hasilnya seperti ini :

* Pastikan sobat mengikuti langkah demi langkah yang saya berikan seperti tutorial diatas.

Jika sudah yakin, silahkan klik Save Template. kemudian lihat deh hasilnya diblog sobat.

Demikian tutorialnya, semoga sukses.

Membuat Judul Sidebar Ditengah Tanpa Merubah Css

noreply@blogger.com (Unknown) — Sat, 16 Jan 2016 16:01:00 +0700

Membuat Judul Sidebar Ditengah Tanpa Css - Biasanya judul sidebar yang merupakan bawaan dari blogger biasanya terdapat dipinggir. untuk mempercantik tampilan sidebarnya sekarang bisa mengeditnya tanpa harus menggunakan script atau CSS/HTML.
Langkah-langkahnya :

1. Masuk Blogger
2. Pilih Tata Letak
3. Pilih Tambah GADGET. pilih HTML/Javascript

Berikut tampilannya :

Pada bagian Judul Gadget jangan diisi.
Kemudian tambahkan Code dibawah ini diatas Script yang sudah diletakan :

<center><h2>JUDUL SIDEBAR</h2></center></div>

Demikian tutorial singkat pada kali ini tentang Membuat Judul Sidebar Ditengah Tanpa Css, jika ada pembahasan yang kurang jelas atau kurang faham silahkan berkomentar dibawah ini. semoga sukses dan bermanfaat...

Membuat Link Di Blog Berganti Warna

noreply@blogger.com (Unknown) — Sat, 16 Jan 2016 14:29:00 +0700

Membuat Link Di Blog Berganti Warna - Pada postingan kali ini, saya akan berbagi tutorial sinkat yaitu tentang Membuat Link Di Blog Berganti Warna. Fungsinya merupakan untuk membuat tampilan suatu artikel menjadi menarik dan keren sehingga visitor menjadi tertarik untuk mengunjungi link tersebut. Link ini akan berganti warna apabila cursor anda diletakan didekat link yang dibuat sehingga akan berganti warna seperti merah, kuning, hijau, biru, dan lainnya.

Langkah-Langkah untuk membuatnya sebagai berikut :

Login ke Akun Blog Sobat.
Selanjutnya klik Rancangan/Tata Letak
Kemudian Tambah Gadget, Pilih HTML/Javascript
Selanjutnya Copy semua script yang ada dibawah ini :
<script src="http://colorfullink.googlecode.com/files/collorfull.js"> </script>

Jika sudah selesai, Silahkan Save.

Taraaa...... Sekarang lihat deh tampilannya diblog sobat, semoga sukses :)

Cara Memasang Translate Menggunakan Bendera

noreply@blogger.com (Unknown) — Wed, 13 Jan 2016 13:39:00 +0700

Cara Memasang Translate Menggunakan Bendera - Sekarang hampir seluruh blog sudah memiliki widget ini, karena membuat tampilan blog menjadi keren dan menarik dan berwarna. Widget ini dipasang agar visitor dari negara lain yang mengunjungi juga bisa mengerti dengan apa isi blog kita. Widget ini bukan hanya digunakan di Blogspot bahkan juga di Mywapblog serta Wordpress.

Langkah-langkahnya sebagai berikut :
1. Buka Dashboard Blog Anda.
2. Selanjutnya buka Tata Letak, kemudian Tambahkan Widget
3. Pilih HTML/Javascript, lalu Copy script yang ada dibawah ini :

Scriptnya :

4. Kemudian Save, dan liat hasilnya diblog sobat.

Sekian tutorial singkatnya tentang Cara Memasang Translate Menggunakan Bendera. Jika terjadi kesalahan atau sulit diterapkan diblognya anda, silahkan infokan ke blog ini di menu Contact

Cara Membuat Google Search Widget Dengan Mudah

noreply@blogger.com (Unknown) — Wed, 13 Jan 2016 12:28:00 +0700

Cara Membuat Google Search Widget Dengan Mudah - Dalam suatu blog atau website widget ini sangat dibutuhkan sekali karena bisa digunakan oleh para pengunjung atau visitor blog untuk mempermudah mencari apa yang akan dia inginkan. terkadang ada blog juga yang menyediakan kotak penelusurannya tetapi malah tidak berfungsi atau tdiak berjalan sama sekali. Disini saya akan berbagi tutorial singkat kembali tentang Cara Membuat Google Search Widget Dengan Mudah. Silahkan disimak.

Tutorial pada kali ini hasilnya akan seperti dibawah ini :

Web

http://joe-ngeblog.blogspot.com/

Langkah-langkahnya sebagai berikut :
1. Buka Dashboard blog anda.

2. Pilih Tata Letak, kemudian Tambahkan Gadget, pilih Kotak Penelusuran

3. Kemudian Copy code yang ada dibawah ini, letakkan pada tempat yang disediakan :

<form action="http://www.google.com/search" method="get">

<input onfocus="this.style.background='#fff';" maxlength="255" value=""

type="text"onblur="if(this.value=='')this.style.background='#fff

url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)

3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fff

url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)

3px center no-repeat; position:relative;" size="25" name="q"/>

<input id="btn_undefined" style="position:absolute;padding-left:5px;"

value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"

type="image"/><br/>

<div style="margin-top:5px;">

<li style="display:inline;padding-right:10px;margin-top:5px;">

<input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>

<li style="display:inline;padding-right:10px;margin-top:5px;">

<input checked="checked" value="http://joe-ngeblog.blogspot.com" name="sitesearch"

type="checkbox"/> http://joe-ngeblog.blogspot.com</li>

</div>

</form>

*Ganti http://joe-ngeblog.blogspot.com dengan URL blog sobat sendiri.

Sekian dulu tutorial singkatnya tentang Cara Membuat Google Search Widget Dengan Mudah, semoga bermanfaat :)

Cara Mudah Membuat Next Page Di Blog

noreply@blogger.com (Unknown) — Tue, 12 Jan 2016 16:18:00 +0700

Cara Mudah Membuat Next Page Di Blog - Pada kesempatan kali ini saya akan membahas tutorial singkat yang mana membahas tentang Cara Mudah Membuat Next Page Di Blog dengan widget dibawah postingan atau difooter atau dimanapun berada.

Langsung aja langkah-langkahnya sebagai berikut :

1. Buka Dashboard blog anda
2. Klik HTML/JavaScript. selanjutnya copy semua script yang ada dibawah ini :

<style>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;if(thisNum<(postNum-1)){html += downPageHtml;} if(postNum==1) postNum++;
html += '</div>';if(isPage || isFirstPage || is Lable Page {var page Area = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;

}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

3. Kemudian Save, dan lihat hasil tampilannya diblog anda.

Gimana mudah bukan, ga perlu pake CSS :v silahkan dicoba gan :)
semoga bermanfaat..

Cara Membuat Hiden Buku Tamu Di Blog

noreply@blogger.com (Unknown) — Mon, 11 Jan 2016 17:37:00 +0700

Cara Membuat Hiden Buku Tamu Di Blog - Buku Tamu merupakan salah satu tempat atau wadah yang hampir serupa dengan Shoutbox seperti sebelumnya yang pernah sudah saya posting juga. Baca artikelnya di Cara Membuat Shoutbox Keren Dan Mudah Di Blog.
Buku tamu juga bisa dijadikan sebagai tempat untuk perkenalan, sapaan, serta juga bisa difungsikan sebagai tempat untuk blogwalking. Berikut tampilannya :

Cara Pemasangannya :

pilih Rancangan (design)
pilih tambah Gadget(Add a Gadget)
pilih HTML/JavaScript, ada tampilan seperti ini:
Copy semua kode script yang ada dibawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i627.photobucket.com/albums/tt356/hanjoyo/BUKUTAMU.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #0000ff;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<br/>
Mau punya buku tamu seperti ini ?<br/>
Klik di >>
<a href="http://joe-ngeblog.blogspot.com">
Han's Tutorial Blogger Pemula
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

*Mau punya buku tamu seperti ini ? = Ganti sesuai dengan kata yang anda inginkan.
*http://joe-ngeblog.blogspot.com = Ganti dengan URL sobat sendiri

Kemudian save.. dan lihat hasilnya diblog sobat.

semoga sukses dan bermanfaat :).

Cara Memasang Kotak Dalam Postingan Blog

noreply@blogger.com (Unknown) — Mon, 11 Jan 2016 15:35:00 +0700

Cara Memasang Kotak Dalam Postingan - Cara ini banyak dilakukan oleh para blogger master untuk mempercantik tampilan blognya saat membuat artikel agar tampilan postingannya menjadi menarik. mungkin tidak semua cara ini bisa dilakukan oleh semua orang, dan bisa menjadi pedoman penting nih bagi para blogger pemula. Contoh hasilnya seperti di bawah ini:

Joe Erick Blog - Cara Memasang Kotak Dalam Postingan

Silahkan copy semua code yang ada dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Joe Erick Blog - Cara Memasang Kotak Dalam Postingan</font></p>

* Ganti "Joe Erick Blog - Cara Memasang Kotak Dalam Postingan" dengan kata-kata yang ingin anda masukan.

Keterangan:
- border-right = garis pinggir kotak sebelah kanan
- border-left = garis pinggir kotak sebelah kiri
- border-top = garis pinggir kotak sebelah atas
- border-bottom = garis pinggir kotak sebelah bawah
- #6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan
- 1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan
- padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan
- padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri
- margin-right = jarak kotak dengan pinggir posting sebelah kanan
- margin-left = jarak kotak dengan pinggir posting sebelah kiri
- 20px; 30px; 70px = satuan jarak, rubah sesuai keinginan
- font color = warna teks,

Atau bisa juga menggunakan Script dibawah ini gan untuk yang lebih simplenya :

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
.joe-ngeblog (Isi Scriptnya Disini)
</div>

*.joe-ngeblog (Isi Scriptnya Disini) ganti yang tulisan tebal dengan kata-kata yang anda inginkan.

Cara Pasangnya : 1. Buka Blognya Shobat
2. Kemudian Buat Artikel Baru
3. Awalnya kan Compose, Silahkan Ganti Dengan HTML gan ..
4. Kemudian Pubhlikasikan.. dan lihat hasilnya..

Sekian dulu tutorial singkatnya gan, jika terdapat kesalahan atau gagalnya dalam menerapkannya silah hubungi saya langsung di menu Contact diatas gan :) smeoga bermanfaat ..

JoeCreation Template By Erick De Gusra

noreply@blogger.com (Unknown) — Fri, 8 Jan 2016 18:45:00 +0700

JoeCreation Template - Template ini merupakan hasil olahan dari template Woodmag yang dibuat oleh ipietoon, dan disini saya mengubah sedikit tampilan dari template blog yang pernah ada yaitu dari Background, Navigasi dan berbagai lainnya.

Template ini fast load loh gan. responsive apa enggaknya coba aja gan terapin diblognya, ga percaya silahkan ceck aja DISINI.

atau berikut hasilnya gan :

Demo || Download

Featured

Three column
Tested in majoring browser
Ads ready
Automatic readmore
Three column lower section
Search
etc

Install

Download dulu filenya, klik disini
Simpan ke desktop atau dimanapun.
Buka Dashboard, kemudian klik Template, Selanjutnya pilih edit HTML, click upload buttom and choose your downloaded xml file
Save. silahkan diceck langsung hasilnya gan.

Header
Pada sebelah kanan Header juga terdapat tempat atau space banner untuk anda mempromosikan iklannya. ukuran bannernya 480x60 banner ads.

Sekian dulu gan informasinya tentang JoeCreation Template By Erick De Gusra, sedot aja sepuasnya gan, jangan lupa dishare juga... terima kasih semoga bermanfaat :)

Cara Mengganti Background Di Kotak Komentar Blog

noreply@blogger.com (Unknown) — Sun, 3 Jan 2016 14:49:00 +0700

Tutorial pada kali ini yaitu membahas tentang Cara Mengganti Background Di Kotak Komentar Blog. Mungkin agak terlihat bosan dengan tampilan kotak komentar blog yang anda punya, disini saya akan membagikan tutorial singkatnya gan yang akan membuat tampilan blog anda semakin keren dan menarik
.
Jika anda tertarik untuk membuatnya , silahkan ikuti caranya 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(URL-Gambar Disini) 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(URL-Gambar Disini) no-repeat bottom right;border:5px solid #3b5998;}#ib-form a{color:#3b5998;}

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

10. Klik simpan template

Demikian tutorial singkatnya tentang Cara Mengganti Background Di Kotak Komentar Blog, Semoga Bermanfaat :)

Cara Membuat Loading Blog Keren

noreply@blogger.com (Unknown) — Sun, 3 Jan 2016 13:39:00 +0700

Cara Membuat Loading Blog Keren - Banyak berbagai tips and trick serta tutorial-tutorial yang terdapat diblog. baik berupa widget maupun HTML atau Java Script yang akan digunakan.

Pada Tutorial kali ini saya akan membagikan Cara Membuat Loading Blog Keren, mungkin efek ini bisa bermanfaat untuk blog anda dan untuk mempercantik tampilan blog anda. caranya cukup mudah kok, silahkan simak cara-caranya dibawah ini.

Langkah-langkahnya sebagai berikut :

A. Loading Berwarna Merah

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

5. Dan langkah yang terakhir, pasang kode berikut diatas tag </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

B. Loading Blog Berwarna Biru

Caranya masih sama seperti yang diatas, anda cuma ganti aja dengan script yang ada dibawah ini.

- HTML

<div class="ball"></div>
<div class="ball1"></div>

- CSS

.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}

Demo 1 Dengan Animasi Berwarna Merah :

Demo 2 Dengan Animasi Berwarna Biru :

Demikian tutorial singkat yang dapat saya sajikan pada kali ini. jangan lupa dishare dengan mengklik tombol dibawah ini, semoga bermanfaat :)

Cara Membuat Shoutbox Keren Dan Mudah Di Blog

noreply@blogger.com (Unknown) — Sat, 2 Jan 2016 13:38:00 +0700

Shoutbox merupakan sebuah widget yang mana fungsinya untuk mengirim pesan singkat seperti perkenalan, ucapan, serta kritik dan saran untuk pemilik dan pengunjung blog. Shoutbox juga menjadi suatu alternative yang digunakan untuk menjalin silaturahmi antar sesama blogger.

Biasanya Shoutbox diletakan dihalaman depan suatu blog atau website. Karena dengan adanya Shoutbox ini, pengunjung menjadi mudah untuk memberikan komentar diblog kita.

Jika ingin punya shoutbox seperti diblog saya silahkan ikuti langkah-langkahnya berikut ini :

1. Silahkan Kunjungi Situs Yourshoutbox.com, Selanjutnya klik Register. Jika sudah pernah register silahkan pilih Sign In.

2. Kemudian akan muncul tampilan seperti gambar dibawah ini. Silahkan isi email dan passwordnya. Klik Register jika yakin sudah selesai.

3. Selanjutnya anda akan dibawa ke halaman seperti beikut ini. Isi dengan Alamat/URL Website anda. Anda bisa juga memilih Mode yang akan digunakan tampilannya diblog anda yaitu berupa Manually, Ready Classic Templates, serta Ready Transparent Templates. Jika sudah selesai klik Create.

4. Pada halaman selanjutnya maka anda akan dibawa menuju halaman untuk memilih template yang akan anda gunakan. Banyak terdapat template yang disediakan disini yang sesuai dengan selera yang anda inginkan. Samplenya sebagai berikut :

5. Pilih Choose that template for your shoutbox, dan disini anda diminta untuk menyesuaikan ukuran dan font serta color yang sesuai dengan keinginan anda. jika sudah selesai klik Save anda Continue. ata anda bisa langsung klik Skip This Step untukmempercepat menyelesaikan shoutboxnya.

6. Selanjutnya, anda akan dibawa menuju halaman untuk mengambil kode scriptnya. Sekarang anda cuma copy script code dibawah ini untuk dipasang diwidget blog anda.

Sekian dulu tutorial pada kali ini. jika terdapat keraguan atau keluhan silahkan hubungi saya langsung pada menu contact.

Semoga Bermanfaat dan Selamat Mencoba...

Cara Menghapus Semua Penelusuran di Google

noreply@blogger.com (Unknown) — Wed, 30 Dec 2015 17:29:00 +0700

Cara Menghapus Semua Penelusuran di Google - History penelusuran google merupakan sebuah arsip yang berisi segala hal yang di telusuri di Google atau dimanapun. Memang untuk menyimpan history dipenelusuran memang berguna bisa untuk memudahkan anda untuk mencari artikel yang lama yang mau dibuka kembali, sekarang mungkin waktunya untuk anda harus mempertimbangkan agar orang lain tidak mengetahui privasi atau situs-situs yang tidak bermanfaat yang pernah anda kunjungi.

Langsung aja langkah-langkahnya sebagai berikut pada tutorial singkat pada kali ini :

> Cara Pertama :

Anda bisa menekan tombol pada keyboard langsung yaitu CTRL+SHIFT+DEL. Maka tampilannya akan keluar seperti ini :

Centang pada semua kotak yang disediakan, agar terhapus semua data yang pernah anda kunjungi. dan selanjutnya Klik Clear Now.

> Cara Kedua

Anda bisa cari di Menu History selanjutnya, pilih Clear Recent History. Kemudian akan muncul tampilan seperti cara yang pertama, anda cukup centang semua pada kotak yang disediakan dan klik Clear Now. dan tunggu beberapa saat sampai prosesnya selesai.

Sekian dulu tutorial singkat tentang Cara Menghapus Semua Penelusuran di Google. Jika terdapat kesalahan atau tutorialnya tidak berjalan, silahkan hubungi saya pada menu Contact.
semoga bermanfaat.

Tutorial Membuat Tulisan Diatas Kotak Komentar

noreply@blogger.com (Unknown) — Tue, 29 Dec 2015 17:24:00 +0700

Tutorial Membuat Tulisan Diatas Kotak Komentar - Pada postingan saya yang kali ini, saya akan membagikan tips serta tutorial singkat yang mana membahas Tutorial Membuat Tulisan Diatas Kotak Komentar. Turorial ini mungkin sudah sering atau sudah sangat diketahui oleh blogger-blogger master yang sudah berpengalaman, mungkin bagi newbie sangat dibutuh kan, wkwkw :v

Langsung aja ke TKP, berikut Tutorialnya :

1. Masuk dulu ke Akun Blogger Sobat
2. Kemudian Pilih Dashboard, maka akan muncul tampilannya seperti ini.

3. Selanjutnya pilih Setelan,

4. Selanjutnya klik Pos dan Komentar, dan Isikan Pesan-pesan anda didalam kotak Pesan Formulir Komentar dibagian Paling Bawah.

5. Jika yakin sudah selesai, jangan lupa disave atau disimpan.

Sobat bisa liat dah langsung hasilnya diblog sobat.
Sekian dulu postingan saya kali ini " Tutorial Membuat Tulisan Diatas Kotak Komentar " Gimana ? Mudah bukan. Semoga bermanfaat :)

Cara Simple Memasang Widget Komentar Di Blog

noreply@blogger.com (Unknown) — Thu, 24 Dec 2015 16:18:00 +0700

Cara Simple Memasang Widget Komentar Di Blog - Tujuan dari Memasang Widget Komentar Di Blog adalah untuk mengetahui komentar-komentar terbaru dari pengunjung dan letak posting yang mereka komentari.

Kalau Anda ingin memasangnya pada blog, kali ini kami akan membahas cara memasang widget komentar terbaru di blog, ikuti dan simak langkah-langkah berikut ini :

1. Login akun Blogger Anda.
2. Pilih Tata Letak ==> Tambah Gadget ==> HTML/JavaScript.
3. Copy kode berikut ini pada 'HTML/JavaScript'.

<script style="text/javascript" src="http://www.geocities.com/leo_host/komentar-terbaru.js"></script><script style="text/javascript">var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=50;</script><script src="http://joe-ngeblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan :
rc=5 adalah jumlah komentar yang akan ditampilkan.
rc=50 adalah jumlah karakter yang akan ditampilkan.
http://joe-ngeblog.blogspot.com ganti dengan URL blog Anda.
4. Kemudian klik ' Save / Simpan'.

Jika terdapat Script yang rusak atau tidak bisa diterapkan diblog kalian, silahkan hubungi kami langsung menu Kontak