Mempercepat Loading Halaman Page


Mempercepat Loading Halaman Page

Dipagi yang cerah ini setelah saya mengganti template lama dengan yang sekarang, rasanya ingin berbagi ilmu dengan sobat AjatShare. Sewaktu bereksperimen dengan berbagai macam template saya menemukan salah satu cara untuk Mempercepat Loading Halaman Page yang simple namun cukup efektif yaitu dengan cara memasang script lazy load pada blog kita. Memang banyak cara untuk mempercepat loading blog kita, seperti dalam posting saya sebelumnya yaitu dengan mengkompress kode css atau dengan cara membuat blog menjadi valid html5 ataupun valid css3. Nah pada kesempatan ini saya akan membahas Lazy Load Script.

Lazy Load Script ini merupakan script yang membuat kinerja pemuatan blog berjalan secara efektif, dengan adanya Lazy load ini blog kita akan memuat element element penting dahulu , yang membuat elemet gambar akan dimuat terakhir, memang terlihat blog kita lebih cepat dengan memakai ini tetapi menurut saya sama saja namun jika kita memakai ini blog kita akan langsung terlihat (tidak lama blanknya).


Mempercepat Loading Halaman Page :

1. Masuk Ke Dasboard , Rancangan di pilih edit HTML
2. Centang Expand Template Widget, dan tunggu
3. setelah menunggu copy paste kode berikut diatas 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/AVvXsEif2e7xUbG6rW3JFS_mqLjzIS1SbH6O2R4rM3CoJ25_5nxzYUG8xBLaV2aBRjLMnm2puT9UVLgzh3r-d9jyQDbUqIwpTDcqmnlYpBdCGFaZqIAJGh3al5SgOOANI2mghM75NmV8wtqIrXc/&quot;,threshold : 200}); }); </script>

   atau bisa juga dengan menggunakan kode script di bawah ini :

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiueLsHsdoRKa3fpPu7pA8bfn-1u7TEJlbw6f3HmojzoGyHNRmu-mDuOx22RRPHC9yfCjN1FXVgrWGuloHt2mP6ASJ2JHYwMHof8EWgPPjQQXQxGbrvVv_AHP_eNjAXLUGLXnBbaQdmsRE/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

4. Simpan Template

Cara Membuat Box Comment, Facebook, Twitter, G+ dan Tanggal

 
Cara Membuat Box Comment, Facebook, Twitter, G+ dan Tanggal

Selamat sahabat untuk semua sobat AjatShare, di kesempatan lain saya pernah membahas tentang pemasangan elemen widget yang berada dibawah posting seperti Cara Membuat Permalink Sederhana dan Cara Membuat Related Posts, nah dalam kesempatan kali ini saya mencoba memberikan tutorial bagaimana Cara Membuat Box Comment, Facebook, Twitter, Google Plus dan Tanggal pada blog khususnya blogger. Box ini diambil dari template baru nya mas sugeng yaitu Simple Faster yang sudah responsive. Box ini jika di sentuh akan mengembang (pada :hover) dan otomatis melacak tanpa ada yang harus diganti lagi.
Berikut tutorialnya :

Seperti biasanya buka dulu blog kamu dan masuk ke edit html
Lalu cari kode ]]></b:skin>
dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>

.box {
text-align:center;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.box2 {
position:relative;
z-index:4;
border-radius:17px;
font-size:1.8em;
font-weight:bold;
background:#eee;
border:1px solid #ccc;
float:left;
line-height:34px;
height:34px;
width:34px;
padding:0px;
text-shadow:1px 1px #ccc;
}
.komentar {
width:auto;
min-width:34px;
max-width:80px;
}
.jam{
background:#eee url(http://2.bp.blogspot.com/-6f3YMV7Kv-U/UUxBe6vEd9I/AAAAAAAAAFI kCdm0LdV7Xo/s1600/jam.png) no-repeat 7px 7px;
}
.box a {
color:#333;
}
a.au:hover {
color:green;
}
a.fb:hover {
color:#3B5998;
}
a.tw:hover {
color:#1BB2E9;
}
a.gp:hover {
color:#CF4332;
}
span.plus {
position:relative;
top:-7px;
font-weight:normal;
font-size:13px;
}
span.google {
position:relative;
top:-3px;
font-family:serif;
}
.box3 {
position:relative;
left:-17px;
box-shadow:inset 0px 0px 13px #ddd;
-moz-box-shadow:inset 0px 0px 13px #ddd;
-webkit-box-shadow:inset 0px 0px 13px #ddd;
-webkit-transition:margin 0.6s linear,width 0.3s linear;
-moz-transition:margin 0.6s linear,width 0.3s linear;
-o-transition:margin 0.6s linear,width 0.3s linear;
transition:margin 0.6s linear,width 0.3s linear;
float:left;
background:#fff;
border-radius:0 17px 17px 0;
border:1px solid #ccc;
width:0px;
height:34px;
line-height:34px;
overflow:hidden;
margin:0 8px 0 0px;
}
.box3 span {
margin:0px;
}
.box2:hover {
border:1px solid #aaa;
}
.box:hover .box3 {
margin:0 -7px 0 0;
width:100px;
}
.box:hover .box3.panjang {
margin:0 -7px 0 0;
width:150px;
}

Berikutnya adalah menyisipan kode di bawah tepat di bawah <div class='post-footer'>

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='box'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><div class='box2 komentar'><b:if cond='data:post.numComments'><data:post.numComments/></b:if></div><div class='box3'><span>Komentar</span></div></a></b:if></div></b:if>

<div class='box'><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'>f</div><div class='box3'><span>Share</span></div></a></div>

<div class='box'><a class='tw' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=blogmassugeng&amp;lang=id&quot;' rel='nofollow' target='_blank'><div class='box2'>t</div><div class='box3'><span>Tweet</span></div></a></div>

<div class='box'><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'><span class='google'>g</span><span class='plus'>+</span></div><div class='box3'><span>Share</span></div></a></div>

<div class='box'><a class='au' expr:href='data:post.authorProfileUrl' target='_blank'><div class='box2'>?</div><div class='box3 panjang'><span class='vcard'><span class='fn'><data:post.author/></span></span></div></a></div>

<div class='box'><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><div class='box2 jam'/><div class='box3'><span><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span></div></a></div>

Setelah selesai jangan lupa simpan templatenya

Pengertian Affiliate Marketing

 
Affiliate Marketing adalah salah bagian dari cabang internet marketing, dimana tugasnya adalah memasarkan produk orang lain dan kita mendapatkan komisi jika produk yang kita promomosikan diminati oleh calon konsumen dan besarnya komisi sesuai dengan perjanjian yang telah ditentukan.

Pengertian Affiliate Marketing

Biasanya produk yang dijual adalah website yang dimana website tersebut akan menjadi website replika membernya sendiri. Untuk sekarang ini, udah banyak banget orang2 yang berkecimpung di bidang affiliate marketing ini. Seperti salah satu contoh bisnis affiliate marketing yang bisa saya berikan adalah LinkFromBlog dan Dana Uang Hibah. Itu adalah beberapa contoh dari bisnis affiliate marketing dan masih banyak bisnis yang bertebaran di dunia maya lainnya.

Sistem kerja dari Affiliate Marketing secara global (selanjutnya disingkat AM) sebenarnya cukuplah mudah anda hanya cukup memperkenalkan bisnis anda tersebut atau dengan kata lain Job Description nya hanya untuk promosi, berpromosi, dan dipromosikan. Karena memang hanya dengan promosi saja kita dapat meningkatkan penjualan suatu produk khususnya untuk hal yang kita bahas kali ini, Affiliate Marketing.

Pada dasarnya, klo kita sudah menguasai apa yang namanya Internet Marketing, kita sudah dapat dengan mudah menjual suatu even produk dan bukan produk kita sendiri. Nah, untuk anda yang mau/baru terjun kedunia bisnis online, mungkin Affiliate Marketing adalah langkah awal yang baik yang dapat di coba untuk membuat pondasi pada diri kita untuk menjadi seorang internet marketer atau mungkin bahkan jadi Pebisnis Ulung di dunia maya.


List Program atau daftar situs penyedia layanan Affiliate Marketing yang saya tahu dan dapatkan, silahkan anda baca Kumpulan Job Online Affiliate sebagai bahan referensi.

Cara Memasang Meta Tag SEO Friendly dan Valid HTML5


Cara Memasang Meta Tag SEO Friendly dan Valid HTML5

Sebelumnya saya selaku admin Ajatshare Blogger ingin mengucapkan Minal Aidin Wal Faidin Mohon Maaf Lahir dan Batin, mudah-mudahan di hari yang fitri ini kita semua kembali ke fitrahnya. Amien....
Okey kita langsung saja ke posting saya hari ini yaitu mengenai Cara Memasang Meta Tag SEO Friendly dan Valid HTML5. Kenapa di dalam blog yang kita buat harus terkandung meta tag yang seo, benar karena dengan terpasangnya meta tag apalagi yang seo dan valid html5 akan memudahkan artikel yang kita muat bisa langsung terindeks oleh search engine google.
Begitu penting meta tag yang kita pasangkan di dalam blog karena sangat berpengaruh besar terhadap kwalitas dari blog yang kita buat, tapi kadang kita kurang memperhatikan hal ini dan khusus untuk blogger pemula ini sangatlah dianjurkan agar blog anda trafik nya cepat meningkat dan mendapat kunjungan dari visitor.

Dan inilah Cara Memasang Meta Tag SEO Friendly dan Valid HTML5 :

1. Login ke akun blogger
2. Klik "template"
3. Klik "Edit Html"
4. Cari kode <head>
    Letakan kode dibawah ini tepat di bawah kode <head>

<meta charset='utf-8'/>
<link href='http://nama-blog.blogspot.com' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='Description Blog Anda' name='description'/>
<meta content='keyword1,keyword2,keyword3' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='Kode Verifikasi Google' name='google-site-verification'/>
<meta content='Kode Ferifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Ferifikasi Alexa' name='alexaVerifyID'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Nama Author' name='author'/>
<meta content='all' name='Slurp'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://nama-blog.blogspot.com' rel='openid.delegate'/>
5. Kemudian klik Template >> Edit HTML lalu paste kode tersebut diantara kode:

    <head>
    Disini letak kode diatas
    <b:skin><![CDATA[

6. Ganti semua kode yang berwarna BIRU sesuai data blog anda
7. Kemudian simpan Template

Mengatur Heading Tag h1 h2 h3 Agar SEO



Mengatur Heading Tag h1 h2 h3 Agar SEO

Tentu kita pengen blog yang dipakai mendukung SEO salah satunya adalah pengaturan heading tag agar seo friendly, untuk itulah posting hari tentang Mengatur Heading Tag h1 h2 h3 Agar SEO.
Pada saat kita memberi heading tag pada bagian tertentu pada teks di blog, itu sama saja dengan berkata kepada robot "Bagian ini yang terpenting, ini yang lebih penting, ini yang penting, dan ini yang agak penting".
Dengan cara ini, kita bisa memberi tahu robot bahwa bagian teks ini adalah yang terpenting atau tidak. Jadi, kita harus mengatur heading tag dengan benar.

Untuk memahaminya kita harus tahu dulu pengertian ataupun penjelasan tentang heading tag, di bawah akan saya uraikan sedit pengertian tentang heading tag tersebut beserta aturan yang harus dilakukan.

Aturan Heading tag :

-  h1 adalah yang paling penting dan h2-h6 adalah urutan selanjutnya.
-  h1 hanya boleh ada 1 untuk setiap halaman dan WAJIB ADA, sedangkan h2-h6 boleh lebih dari satu.
-  Semua heading sebaiknya mengandung kata kunci.
-  Jangan terlalu banyak pengulangan kata yang sama dalam satu heading tag.
-  Judul Postingan sebaiknya diberi tag h2.
-  Judul Widget sebaiknya diberi h3.
-  dan lain-lain 


Urutan heading tag :

Heading tag h1
Heading blog (nama blog)
Judul artikel di halaman artikel

Heading tag h2
Judul artikel pada halaman utama (homepage)
Heading (nama blog) pada halaman artikel
Disarankan untuk deskripsi blog

Heading tag h3
Disarankan untuk judul widget

Heading tag h4
Disarankan untuk judul widget
Jika ada, jumlah komentar pada blog (pada bagian komentar)

Heading tag h5
Nama pemberi komentar (pada bagian komentar)

Heading tag h6
Link credit, seperti powered by blogger.


Setelah anda mengetahui aturan dan urutan dalam heading tag, sekarang ikuti langkah langkah berikut ini yaitu mengatur judul artikel agar lebih seo.
Ikuti prosedur di bawah ini untuk mengubah judul artikel:
    Masuk ke akun blogger anda, klik menu TEMPLATE.
    Klik EDIT HTML, kemudian tekan Control + F pada keyboard
    komputer anda.
    Cari kode h3.post
    Kode seperti ini bisa lebih dari satu. Ubah semuanya menjadi
    h2.post
    Jika sudah, sekarang cari semua kode <h3 class='post
    Ubah semuanya menjadi <h2 class='post
    Ubah juga end tag pada kode tersebut, ubah </h3> menjadi
    </h2>
    Klik SIMPAN TEMPLATE

Mengatur judul Widget menjadi H3
    Masuk ke EDIT HTML
    Cari kode HTML semua widget blog anda.
    Contoh kode widget popular posts:
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
Ganti kode yang berwarna merah dengan kode
    <h3><data:title/></h3>
    Jika semua widget sudah anda atur, silahkan klik
    SIMPAN TEMPLATE
Mengatur deskripsi blog menjadi H2
    Cari kode <div class='descriptionwrapper'>
    Lihat kode setelah kode <div class='descriptionwrapper'>
    Kodenya seperti ini,                              
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
Kode diatas bisa saja berbeda dengan blog anda, tetapi tidak masalah, silahkan ikuti saja langkah-langkah nya. Gantilah kode yang ada dibawah kode <div class='descriptionwrapper'> yaitu yang berwarna merah    dengan kode di bawah ini :
    <h2 class='description'><span><data:description/></span></h2>

Klik SIMPAN TEMPLATE

Catatan :
Cara mengatur heading tag pada editor entri yaitu pada Icon Editor artikel sudah ada pilihan untuk menentukan Heading Tag. Anda cukup memilih HEADING untuk H2, SUB HEADING untuk H3, dan MINOR HEADING untuk H4. Anda hanya tinggal menandai kata kunci yang penting atau kata kunci yang diincar di heading tag, dan pilih headingnya....

Nah, itulah cara mengatur Heading Tag h1 h2 h3 agar blog menjadi lebih SEO friendly. Tapi tetap saja, agar blog berada di halaman satu google, jangan hanya mengandalkan cara ini saja. Ini hanyalah salah satu cara dari beratus-ratus cara lainnya. Anda juga harus mengoptimalkan 2 teknik SEO yaitu ON-PAGE dan OFF-PAGE SEO.

Cara Compress Kode CSS dengan Cepat



Cara Compress Kode CSS dengan Cepat


 Untuk mempercepat loading homepage blog kita adalah dengan Cara Compress Kode CSS dengan Cepat. Selain dapat meningkatkan kecepatan loading homepage, Compress CSS juga bisa menghemat bandwidth. Cara ini tentu sangat bagus untuk web atau blog kita yang mengalami masalah lamanya waktu loading, apalagi blog kita yang sudah padat berjejal kode CSS, javascript, jQuery atau muatan artikel, gambar, video ataupun yang lain. Silahkan anda bisa coba cara ini.

Caranya kita gunakan penyedia layanan tool gratis dari www.cssdrive.com. Hasil Compress CSS tergantung pada tiga tingkat kompresi yang bisa kita pilih.
Dan inilah langkah-langkah untuk compress kode css sbb:

  • Login ke blogger anda.
  • KLik tab Edit HTML.
  • Sebelumnya silahkan anda copy kode diantara kode <b:skin> dan kode </b:skin> dan paste pada Notepad, lalu simpan di computer anda, agar lebih aman bila terjadi kesalahan.
  • Setelah tersimpan, cut kode CSS diantara kode <b:skin> dan kode </b:skin> pada template tadi.
  • Lalu tinggalkan sejenak, dan jangan ditutup.
  • Silahkan buka www.cssdrive.com, atau KLIK DISINI.
  • Pilih :
Compression mode : Normal.
Comments handling : Select Don't strip any comments.

Catatan :
Disarankan menggunakan mode Normal, agar kode CSS tetap bekerja dengan baik.
Bila meng-inginkan hasil kompresi yang lebih kecil, anda bisa coba mode lain. Tapi seperti saya ingatkan diatas, terlebih dulu anda copy dan simpan dicomputer anda, agar bila hasil tidak sesuai yang kita inginkan, kita bisa mengulang dengan Mode yang lain.
  • Paste kode yang sudah di CUT tadi, pada area yang disediakan.
  • Klik tombol "Compress-it!".
  • Setelah proses compress selesai, dibagian bawah ada keterangan hasil compress.
  • Klik tombol Highlight, Copy kode.
  • Kembali ke Tenplate dan PASTE diantara kode <b:skin> dan kode </b:skin>
  • Simpan Template, dan lihat hasilnya.

Nah itulah tips kali ini, semoga bermanfaat.