-->
DITA WIJAYA BLOG

Senin, 07 Januari 2013

Tutorial and tips meringankan blog



Hello hello !

masih tentang tutorial blog..  Mungkin bagi sebagian para blogger ada yang blognya kalau di akses loadingnya lammmaaaaaa bangett! Mungkin tips and tutorial berikut bisa kalian gunakan untuk mempercepat loading blog.
 Langsung aja caranya adalah sebagai berikut :

  •  Buang Javascript yang tidak Perlu
  •  Buang Widget atau plugin yang tidak Perlu juga.
  • Pilih template yang tidak terlalu berat 
  • Lakukan Optimasi Gambar
  • Dan selanjutnya, tambahkan script pencepat blog.
And than ini tutornya !
gak bakal nyesel deee ..

Dasboard > Design > Add gadget > HTML java script > copas code di bawah ini 




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtEAihKYRRVkAfB7HBHaZ3HVX40s4BYDHrRqcbTMmgnM_4LMNPCnMVfWBX_mYxZE1tR3rxTgJc5wUfYxWLXf2b8tay3wikLZjI68w12X7b5ppS5pTvVAPBs_to2FRYp2qkFzqPZZC6qvA/s1600/grey.gif"
});
});</script>

 

 Atau bisa pake tutor ini juga yaa!



1. Login ke Blogger
2. Klik Template
3. Klik Edit HTML
4. Klik Lanjutkan
5. Cari kode </head> dengan cara tekan ctrl+F atau F3 di keyboard
6. Copy kode di bawah ini dan letakkan di atas kode </head>
 

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder :
&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2OHXp630jFFSaYY9ILRCCfR-k6uEMn158Mgt2LuqJ-uaLK89zjI0p2hH-sW2PUjP9PDRuITUOjxOLcQDjCuAWzwgJzpvHzM0ilBSb_JdNoEySz1fG0IINNy7xDH-n4L4lOjDq0QMTZk/&quot;,threshold
: 200});
});
</script>

Tutorial : HIDE Navbar !



Okehh , tutor yang kedua  ini aku pengen buat tutorial hide navbar! kadang-kadang tu, ada blogger yang gak suka dengan navbar yang udah di sediakan itu kan ?? So, ini ada tutor untuk kalian hide navbar kalian. Dan ikuti langkah langkah ini yaaaa ??


  • Sign ini Blogger > Design > Add Gadget > HTML/JavaScript 
  • lalu kalian copy code di bawah ini
 

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->


  • Sudah di copy , lalu kalian save! and than, jadi deee.. so simple kan ??

Tutorial : Meletakan cctv dalam // BLOG //

Yuhhu everybody! malam - malam gini aku masih sempet sempetnya aja nge blogging .. haha
malam ini, aku cuma pengen tujukin cara untuk meletakan CCTV di dalam blog !
Wahh .. pasti gak akan ada yang berani masuk blog kalian nii para reader. Soalnya ada CCTV nya hahaha ..  LOL 
Tapi gak mungkin laaah. Act, CCTV ini cuma sekadar hiasan dalam blog. So, kalau kalian pengen letakan ikuti tutor ini.
yuuuukk ??





1. Dashboard > Design > Page Element > Add Gadget > HTML Javascript 
2. Copy code di bawah ini


<div style="position: fixed; top: 0px; right: 0px;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-q7QTBTdEH3u7F1xgCOpFYVYx_bsFtHZ5lL0Xowc1Nc5wD0OgbfNmYLXhLMsFSNFi9WEnVRLRjje2iPFvoyaTiKU1EA5v9Scvu9H5jTofCaml-4d73yLF-xY7QoDL_3DC9Lumwc9vyVk/s1600/cctv.gif"/></center></div>


3. Paste di dekat HTML Javascript
4. Dan, tekan SAVE


  Orange : kalo pengen di sebelah kiri bisa di tuker dengan "left"

Tutorial : Letakan header pada // BLOG //



Hola !
Today, aku pengen kasih tau nii, gmana caranya meletakan header pada blog .. untuk pemula blogging semuanya pada tahukan ?? hahaha ..  jadi pelengkap blog ialah header. Ok, deee gak usah banyak basa - basi mari kita Cekidoottt .

1. Dasboard > Layout



2. Header > edit  


3. Nah, setelah itu akan muncul kotak " configure header ". Dan masukan header yang kalian suka upload gambar itu ataupun kalian gunakan Url

Okey, paham ga ni ??  Kalo gak paham ask Dita di facebook yeee ..

Tutorial : Floating button webs


Haaaaaiii .. ! 
Hari ini aku pengen ajarin kalian gimana sii caranya  memasang button di dekat sidebar blog ..
untuk buatnya simple aja!  dan tutor ini untuk template designer sajooo haha .. 
apa itu floating button coba lihat di bawah ini !




1. log in > Dasboard > Design > Add gadged > HTML / Java Script
2. Copy code dibawah ni dan paste di ruang HTML/Javascript


 <style type='text/css'>
a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='Your Facebook URL' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />
<a class='linkopacity' href='Your Twitter URL' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />
<a class='linkopacity' href='Your Blog URL' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />



</div>


3. Ooops .. Belum selesai sampai disitu aja lho ! 
* yang tulisan berwarna merah hati : itu kalian ganti dengan URL kalian 
* yang warna kuning : boleh di tukar mengikuti kesesuaian blog kalian dan left dapat di ganti menjadi right  
* Dan yang Hijau : Kalo kalian pengen ganti tinggal  tukarkan aja linknya.


Copyright© All Rights Reserved Ditawijaya'S'S's