Namicode

    Social Items

Artikel

1. Berikan menarik judul dan deskripsi
Apakah Anda tahu, judul yang baik adalah judul yang berisi jelas subjek, objek dan predikat?
Tapi ini sering diabaikan, karena dianggap tidak SEO Friendly (terlalu lama).

Contoh judul dengan prinsip ini dapat dilihat melalui artikel yang diterbitkan oleh Hipwee.
"3 karya cock dan diminati di seluruh dunia"

Maka untuk deskripsi, mengisi hal yang sama, sesuatu yang menarik.
Karena biasanya, selain membaca judul, warganet akan juga membaca deskripsi.
Jika Deskripsi menarik dan pasti meyakinkan, membuka situs tersebut, sebaliknya menarik tidak akan dibuka.
 
Penting untuk diingat:
Jika tujuan Anda adalah untuk menciptakan sebuah artikel menarik, kemudian SEO tidak harus didahulukan. Karena banyak hal tentang SEO yang bahkan membuat artikel kurang menarik untuk dibaca.
Memprioritaskan, apakah atau tidak membaca kalimat dari artikel.

2. Berikan gambar Thumbnail menggoda
 
Saya pikir Anda mengerti hal ini.
Memberikan gambaran yang adalah salah satu cara untuk menghias artikel. Jadi, Anda hanya perlu untuk menemukan gambar yang cocok dengan artikel Anda bahas.

Pesan dari saya:
Memberikan gambar resolusi tinggi
Memberikan gambar yang tidak murah atau telah digunakan oleh banyak orang
Harap memberikan gambar yang cocok dengan artikel
Tidak menipu pembaca
Mencoba untuk menggunakan gambar yang tidak berlisensi
Mengenai ukuran,
Saya memilih media ukuran sebagai thumbnail (gambar pertama artikel) sehingga pembaca dapat langsung membaca artikel saya. Pembaca perlu Gulir Halaman sebelum membaca kalimat pertama artikel saya.
​
Untuk setiap gambar yang jelas, saya memilih ekstra besar sehingga pembaca dapat dengan mudah mengerti apa yang ada di gambar. Jika Anda blog tentang fotografi mencoba untuk menggunakan ukuran ini juga.
 
3. Terbuka dengan sebuah kalimat yang baik
Pembukaan yang baik adalah untuk membuka yang memungkinkan pembaca untuk terus bergulir ke inti dari artikel.

Sejak saya tahu dunia internet, hanya beberapa situs yang mampu membuat pembukaan artikel besar dan membuat saya Gulir Halaman. sisanya hanya menulis kalimat penting alias Diary.
Karena itu tidak masuk akal, saya jarang membaca pembukaan blog artikel di internet.
Bosan.


Jadi bagaimana untuk membuka artikel yang baik?

Ada beberapa prinsip-prinsip yang Anda dapat mencoba untuk membuka artikel, tetapi Anda perlu belajar untuk membuat bahasa yang sesuai.
Apa yang mereka?
Pertanyaan yang membuat penasaran
Pernyataan yang mengejutkan
Penjelasan singkat tentang inti dari artikel

Ingat: Pembukaan tidak boleh terlalu lama. Pembuka artikel harus menarik. Buka dengan memperhatikan prinsip viral konten, thumbnail tidak boleh terlalu besar sehingga pembaca membaca kalimat pembuka artikel segera. Dalam rangka untuk bounch tingkat bawah.

4. Ini adalah tentang inti artikel
Menyediakan konten yang menarik untuk membaca
Anda perlu tahu, ada banyak orang yang membutuhkan sesuatu selalu bertanya kepada Google.
Dan karena aku sudah tahu bahwa yang membuat artikel jawaban mereka blogger.
Itu sebabnya saya menjadi kurang bersimpati kepada Tanyakan Google.

Karena banyak artikel sudah pada halaman pertama yang kecewa.
Ini adalah cerita yang panjang. 2000 kata. Tapi isi artikel hanya mbulet-mbulet mengejar kata kunci. Apakah kualitas konten atau artikel? Tidak.
(Salah satu alasan saya terjun ke dunia blogging adalah untuk mengubah gaya penyampaian artikel semacam ini.)
​
Saran dari saya meliputi:
Menyediakan data dan fakta
Jangan membuat artikel bertema sama dengan cara menulis yang sama.
Artikel tidak harus lama (pendek tidak peduli) yang penting sampai-sampai segala sesuatu juga disampaikan dan terstruktur
Jika membuat artikel tutorial menggunakan kata-kata "Aku" dan "Anda" atau sejenisnya menjadi lebih akrab.
 Picture
5. Tutup dengan sesuatu yang mengesankan
Penutupan kalimat baik dan benar
Hanya seperti titik pembukaan artikel di atas, banyak artikel di luar sana tidak ditutup dengan kesan WAH.
Itu adalah lubang.

Ketika itu tidak dapat mencapai puncak di ujung, Anda membuang-buang artikel.
(Ini tidak berlaku untuk situs berita karena situs berita harus netral)

Sebenarnya, Anda sudah tahu prinsip ini dalam 3 titik. Hanya tinggal di belakang.
Jika pada awal memberikan pertanyaan di akhir jawabannya, jika pada awal memberikan pernyataan di belakang pertanyaan, jika pada awal ada penjelasan kemudian berakhir dengan pertanyaan seperti "Itu jelas?"

Cara Menulis Artikel SEO Friendly

Link


Di Internet sangat mudah untuk menyalin teks dari satu situs dan menempelkannya ke situs lain. Secara teknis, jika pengunjung blog menyalin teks dari situs tertentu seharusnya dia harus memberikan link ke sumber dari situs yang ia salin teksnya. Namun ada juga orang yang mengabaikan hal penting ini.


Untuk menghindari hal itu, di sini saya akan memberikan sebuah kode yang secara otomatis jika seseorang menyalin bagian teks dari artikel kita maka akan otomatis memunculkan link sumber dari teks yang ia salin.

Walaupun cara ini menurut saya masih kurang efektif karena link sumber dapat dihapus dengan mudah dan tips ini merupakan cara lama yang masih bisa dimanfaatkan 😊, namun setidaknya akan memberikan sedikit peringatan bagi yang menyalin teks artikel blog kita. Berikut Cara Otomatis Menambahkan Link Sumber.

Cara Otomatis Menambahkan Link Sumber

Kode ini bekerja di beberapa browser favorit (termasuk Microsoft Edge). Buka halaman Blogger > Klik Tema > Klik tombol Edit HTML dan tambahkan kode di bawah ini > Setelah itu klik Simpan tema.

Versi 1

<script type='text/javascript'>
//<![CDATA[
// Copy Text
function nocopas(){var e=window.getSelection();pagelink=" Read more : "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
//]]>
</script>

Sobat dapat mengedit bagian dari kode yang saya tandai.

Versi 2

<script type='text/javascript'>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>

Untuk tips kali ini saya cukupkan sekian, terima kasih sudah berkunjung.

Cara Otomatis Menambahkan Link Sumber

Auto refresh


Cara Memasang Fungsi Auto Refresh di Blog - Pada tutorial kali ini Happimod akan berbagi Cara Memasang Fungsi Auto Refresh di Blog, dimana nantinya sobat bisa mengatur berapa lama waktu yang dibutuhkan untuk refresh halaman blog.


Fungsi auto refresh atau memuat ulang halaman secara otomatis sering kita temui bukan hanya pada sistem operasi seperti Windows namun juga pada browser internet yang kita gunakan saat ini. Contoh refresh halaman pada browser internet pernah Saya temui di forum Kaskus ketika membuka salah satu forum dan jika di forum tersebut terdapat update dari thread baru, biasanya forum akan me-refresh halaman secara otomatis.

Dengan menerapkan trik ini sobat tidak perlu menekan tombol refresh pada browser karena akan dilakukan secara otomatis. Bagi yang ingin mencobanya silakan ikuti langkah berikut ini :

Cara Memasang Fungsi Auto Refresh di Blog

1. Login ke Blogger > Buka Template > Klik Edit HTML > Kemudian cari dan tambahkan kode berikut ini tepat di bawah atau setelah kode <head>

<meta content='800' http-equiv='refresh'/>

2. Jika ingin menambahkan fungsi ini bekerja pada halaman tertentu, silakan tambahkan tag kondisional pada kode meta di atas. Contoh :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='800' http-equiv='refresh'/>
</b:if>

3. Setelah ditambahkan, simpan template dan lihat hasilnya.

Keterangan

Kode di atas, content="800" yang artinya angka 800 menunjukkan bahwa proses refresh akan dilakukan dalam rentang waktu 800 detik. Angka ini jangan diatur terlalu cepat karena bisa membuat pengunjung terganggu apabila halaman terlalu cepat di refresh.

Cara Memasang Fungsi Auto Refresh di Blog

Komentar

Cara Menyortir Komentar Blogger dari yang Terbaru -Seperti yang kita tahu, komentar blogger pada umumnya menyortir komentar dari komentar lama yang posisinya di atas dan komentar baru yang posisinya paling bawah. Nah bagaimana jika posisi komentar terbaru itu dibalik Hehe Canda Posisi komentar diurutkan dari yang terbaru, jadi posisi komentar terbaru akan berada di atas komentar lama.


Bagaimana caranya? Caranya sangat mudah, silakan lakukan langkah mudah di bawah ini.

Cara Menyortir Komentar Blogger dari yang Terbaru

Di sini saya memanfaatkan tag HTML reversed yang memungkinkan untuk menyortir komentar dari yang terbaru, seperti fitur pada sistem komentar Disqus. Walaupun memang sistem komentar Disqus lebih kaya akan fiturnya, namun jika sobat lebih nyaman menggunakan sistem komentar Custom Blogger tidak ada salahnya mencoba trik ini.

Seperti biasa, buka Blogger > Klik menu Tema > Klik tombol Edit HTML, kemudian cari semua kode di bawah ini

<b:loop values='data:post.comments' var='comment'>

Ganti semua kode di atas dengan kode ini

<b:loop reverse='1' values='data:post.comments' var='comment'>

Selanjutnya klik tombol Simpan Tema dan selesai.

Kuncinya ada pada kode yang saya tandai, silakan tambahkan kode tersebut pada markup lain yang memiliki tag list OL atau UL.

Trik ini sudah saya coba dan berhasil untuk sistem komentar Blogger Custom, tapi setelah saya coba di sistem komentar bawaan Blogger bukan Custom tidak berjalan dengan baik.

Itulah tips sederhana Cara Menyortir Komentar Blogger dari yang Terbaru, terima kasih sudah berkunjung dan wassalam.

Cara Menyortir Komentar Blogger dari yang Terbaru

Lazyload image


Banyak cara untuk meningkatkan loading sebuah blog, salah satunya dengan menambahkan script LazySizes pada tema blog. Lazysizes adalah self-initializing lazyloader yang bisa dibilang cepat, junk-free dan juga SEO Friendly untuk gambar yang ada di dalam blog dan bisa juga dipakai untuk lazyload pada iFrame video seperti embed video Youtube dan video dari platform lainnya.


Bagi sobat yang memiliki blog dengan banyak konten gambar dan video tentu ini merupakan salah satu solusi yang tepat untuk meningkatkan loading blog dengan memasang LazySizes karena konten gambar atau video tidak akan dimuat (off-screen) sebelum sobat scroll halaman ke bawah.

Cara Meningkatkan Loading Blog dengan LazySizes pun cukup mudah, sobat hanya perlu menambahkan script ini pada tema dan mengaplikasikannya pada konten gambar ataupun video yang ada di blog. Di blog Arlina Code juga saya sudah mengaplikasikannya dan hasilnya pun memang cukup baik.

Baca juga : Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger

Baiklah, bagi sobat yang ingin menambahkannya, silakan ikuti langkah-langkah berikut ini :

Cara Meningkatkan Loading Blog dengan LazySizes

Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian tambahkan kode di bawah ini sebelum </body>

<script>
//<![CDATA[
// LazySizes https://github.com/aFarkas/lazysizes
!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,a=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,l=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],i={},G=Array.prototype.forEach,J=function(e,t){if(!i[t]){i[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return i[t].test(e[$]("class")||"")&&i[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var i;if(i=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(i," "))}},V=function(t,i,e){var a=e?P:"removeEventListener";if(e){V(t,i)}r.forEach(function(e){t[a](e,i)})},X=function(e,t,i,a,r){var n=D.createEvent("Event");if(!i){i={}}i.instance=k;n.initEvent(t,!a,!r);n.detail=i;e.dispatchEvent(n);return n},Y=function(e,t){var i;if(!a&&(i=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}i({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,i){i=i||e.offsetWidth;while(i<H.minSize&&t&&!e._lazysizesWidth){i=t.offsetWidth;t=t.parentNode}return i},ee=function(){var i,a;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;i=true;a=false;while(e.length){e.shift()()}i=false};var e=function(e,t){if(i&&!t){e.apply(this,arguments)}else{n.push(e);if(!a){a=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(i,e){return e?function(){ee(i)}:function(){var e=this;var t=arguments;ee(function(){i.apply(e,t)})}},ie=function(e){var i;var a=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){i=false;a=f.now();e()};var s=l&&n>49?function(){l(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(i){return}i=true;t=r-(f.now()-a);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ae=function(e){var t,i;var a=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-i;if(e<a){I(n,a-e)}else{(l||r)(r)}};return function(){i=f.now();if(!t){t=I(n,a)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var N=0;var M=-1;var x=function(e){N--;if(!e||N<0||!e.target){N=0}};var W=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var S=function(e,t){var i;var a=e;var r=W(e);g-=t;b+=t;p-=t;C+=t;while(r&&(a=a.offsetParent)&&a!=D.body&&a!=O){r=(Z(a,"opacity")||1)>0;if(r&&Z(a,"overflow")!="visible"){i=a.getBoundingClientRect();r=C>i.left&&p<i.right&&b>i.top-1&&g<i.bottom+1}}return r};var t=function(){var e,t,i,a,r,n,s,l,o,u,f,c;var d=k.elements;if((h=H.loadMode)&&N<8&&(e=d.length)){t=0;M++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(l=d[t][$]("data-expand"))||!(n=l*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&N<1&&M>2&&h>2&&!D.hidden){w=f;M=0}else if(h>1&&M>1&&N<6){w=u}else{w=_}}if(o!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;o=n}i=d[t].getBoundingClientRect();if((b=i.bottom)>=s&&(g=i.top)<=z&&(C=i.right)>=s*c&&(p=i.left)<=y&&(b||C||p||g)&&(H.loadHidden||W(d[t]))&&(m&&N<3&&!l&&(h<3||M<4)||S(d[t],n))){R(d[t]);r=true;if(N>9){break}}else if(!r&&m&&!a&&N<4&&M<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!l&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){a=v[0]||d[t]}}if(a&&!r){R(a)}}};var i=ie(t);var B=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}x(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,L);X(t,"lazyloaded")};var a=te(B);var L=function(e){a({target:e.target})};var T=function(t,i){try{t.contentWindow.location.replace(i)}catch(e){t.src=i}};var F=function(e){var t;var i=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(i){e.setAttribute("srcset",i)}};var s=te(function(t,e,i,a,r){var n,s,l,o,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(a){if(i){K(t,H.autosizesClass)}else{t.setAttribute("sizes",a)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){l=t.parentNode;o=l&&j.test(l.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||o);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(x,2500);V(t,L,true)}if(o){G.call(l.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!o){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||o)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,"ls-is-cached")}B(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){N--}},true)});var R=function(e){if(e._lazyRace){return}var t;var i=n.test(e.nodeName);var a=i&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=a=="auto";if((r||!m)&&i&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;N++;s(e,t,r,a,i)};var r=ae(function(){H.loadMode=3;i()});var l=function(){if(H.loadMode==3){H.loadMode=2}r()};var o=function(){if(m){return}if(f.now()-e<999){I(o,999);return}m=true;H.loadMode=3;i();q("scroll",l,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",i,true);q("resize",i,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(i).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",i,true);O[P]("DOMAttrModified",i,true);setInterval(i,999)}q("hashchange",i,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,i,true)});if(/d$|^c/.test(D.readyState)){o()}else{q("load",o);D[P]("DOMContentLoaded",i);I(o,2e4)}if(k.elements.length){t();ee._lsFlush()}else{i()}},checkElems:i,unveil:R,_aLSL:l}}(),re=function(){var i;var n=te(function(e,t,i,a){var r,n,s;e._lazysizesWidth=a;a+="px";e.setAttribute("sizes",a);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",a)}}if(!i.detail.dataAttr){Y(e,i.detail)}});var a=function(e,t,i){var a;var r=e.parentNode;if(r){i=s(e,r,i);a=X(e,"lazybeforesizes",{width:i,dataAttr:!!t});if(!a.defaultPrevented){i=a.detail.width;if(i&&i!==e._lazysizesWidth){n(e,r,a,i)}}}};var e=function(){var e;var t=i.length;if(t){e=0;for(;e<t;e++){a(i[e])}}};var t=ae(e);return{_:function(){i=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:a}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
//]]>
</script>

Kemudian klik tombol Simpan tema untuk checkpoint.

LazySizes pada Gambar

Selanjutnya untuk mengaplikasikannya silakan cari semua img di dalam tema.

<img...

Contohnya seperti ini

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Tambahkan class='lazyload' pada markup tersebut seperti ini

<img class='lazyload' src='//www.blogger.com/img/icon_delete13.gif'/>

Lakukan cara di atas untuk semua markup img pada tema. Bagaimana jika di dalam markup img tersebut sudah terdapat class? Maka sobat hanya perlu menambahkan lazyload setelah class pertama, contohnya

<img class='blogger lazyload' src='//www.blogger.com/img/icon_delete13.gif'/>

Jika sudah selesai, klik tombol Simpan tema. Untuk mengaplikasikannya pada gambar yang ada di dalam postingan, sobat perlu menambahkannya secara manual. Contohnya link gambar ini

<img alt="Kezel Responsive Blogger Template" style="border: none;" data-original-height="853" data-original-width="1494" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHAR6qQw9BycNQuSwxTPrsHjtt4Ejuo6fdKx1kqP4iYJsZD06Xy0cW6dFPBliefz8WviLrRQNqVJ-w4cw9L4Zy1BKyzDLziB_Wbg9yaPKjqZtH5LSBxkSBaIO1e_oGE7womWfV3mJSxda6/s640/Kezel+Responsive+Blogger+Template.png" title="Kezel Responsive Blogger Template" width="640" />

Tambahkan class="lazyload" setelah img pada markup tersebut

<img class="lazyload" alt="Kezel Responsive Blogger Template" style="border: none;" data-original-height="853" data-original-width="1494" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHAR6qQw9BycNQuSwxTPrsHjtt4Ejuo6fdKx1kqP4iYJsZD06Xy0cW6dFPBliefz8WviLrRQNqVJ-w4cw9L4Zy1BKyzDLziB_Wbg9yaPKjqZtH5LSBxkSBaIO1e_oGE7womWfV3mJSxda6/s640/Kezel+Responsive+Blogger+Template.png" title="Kezel Responsive Blogger Template" width="640" />

Sebenarnya untuk penerapan yang lebih baik ada baiknya sobat mengganti src pada gambar dengan data-src namun untuk Blogger versi baru ternyata ini belum bekerja dengan baik

Cara Meningkatkan Loading Blog dengan LazySizes

Ceklis

Beberapa waktu yang lalu ketika saya mencari sebuah artikel, saya melihat ada sesuatu yang baru yaitu tanda centang di belakang judul link suatu situs. Kemudian saya cari kenapa ada tanda centang tersebut dan menemukan bahwa tanda centang tersebut ditambahkan bertujuan agar judul postingan terlihat lebih menarik dan tentunya ada manfaat untuk optimasi SEO serta memiliki potensi klik yang besar dari penelusuran.


Tanda centang (√) atau check mark sendiri adalah tanda universal yang biasanya digunakan untuk menggambarkan suatu konsep setuju, selesai, menandai, atau bisa juga terverifikasi.

Maka dari itu di postingan kali ini Arlina Code ingin berbagi untuk sobat bagaimana Cara Menambahkan Tanda Centang di Judul Postingan Blog. Caranya pun sangat mudah, sobat hanya perlu menambahkan kode HTML tanda centang sebelum markup judul postingan.

Cara Menambahkan Tanda Centang di Judul Postingan Blog

Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini tepat sebelum <data:blog.pageName/>

&#8730;

Maka hasil akhirnya jadi seperti ini

&#8730; <data:blog.pageName/>

Cara Menambahkan Tanda Centang di Judul Postingan Blog

Jika tidak ingin memunculkannya pada halaman tertentu, sobat tinggal tambahkan dengan Tag Kondisional Blogger Terbaru

Contohnya seperti ini

<b:if cond='data:view.isMultipleItems'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='!data:view.isError'>
<title>&#8730; <data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

Untuk melihat hasilnya bisa sobat coba cek sendiri di browser tab halaman ini dan tanda centang ini juga akan muncul di mesin penelusuran.

Itulah Cara Menambahkan Tanda Centang di Judul Postingan yang happimodi bagikan. Terima kasih sudah berkunjung

Cara Menambahkan Tanda Centang di Judul Postingan Blog

Efek blogger


Kumpulan Efek Animasi dan Cara Memasangnya di Blog - Tidak jarang para blogger didunia khususnya indonesia membuat tampilan yang bagus dan wah di blog pribadi maupun sifatnya umum. ada banyak jenis efek yang disediakan oleh para efeker-efeker didunia yang menciptakan efek-efek bagus dan berkualitas yang membuat para blogger berambisi untuk meletakkannya diblog yang hal tujuan utamanya adalah agar membuat pengunjung lebih nyaman dan semakin berlaama-lama diblog kita.

memasang efek-efek animasi di blog itu tergolong cukup perlu juga untuk para pecinta kreatifitas yang hal itu berdampak positif untuk blog. Pelu diperhatikan, bahwasanya dalam memasang efek-efek animasi diblog dapat membuat beban loading website anda akan bertambah. Jadi, buat anda para pecinta efek animasi dimohon untuk meperhitungkan terlebih dahulu sebelum mesangnya. Tapi jangan khawatir, Karena saya disini akan sediakan efek animasi yang ringan (loading ringan) dan cocok sekali untuk blog anda.

Berikut ini beberapa efek-efek animasi dan cara memasangnya di blog:

Efek hati bertaburan

<script src=’http://tateluproject.googlecode.com/files/lovingheart.js’ type=’text/javascript’></script>

Efek bintang bertaburan

<script src=’http://tateluproject.googlecode.com/files/bintang.js’ type=’text/javascript’></script>

Efek salju berjatuhan

<script src=’http://tateluproject.googlecode.com/files/snow.js’ type=’text/javascript’></script>

Efek kupu–kupu terbang
<script language=”JavaScript1.2″ src=”http://imtikhan.googlecode.com/files/Kupu-kupu1.js”></script>
/div>

Efek gelembung

<script src=’http://tateluproject.googlecode.com/files/efek-gelembung.js’ type=’text/javascript’></script>

Efek kembang api

<script src=’http://tateluproject.googlecode.com/files/kembangapi.js’ type=’text/javascript’></script>

Berikut cara memasang kode efek diatas di blog:
1. Login ke akun blogger anda
2. Pilih Tamplate >> Klik Edit HTML
3. Silahkan Copy, dan Paste script efek tepat diatas kode </body> (silahkan ctrl+f cara cepatnya)
4. Klik Save

Demikian kumpulan efek-efek animasi dan cara memasangnya di blog. Semoga efek animasi ini bisa membuat blog anda menjadi lebih keren dan menjadikan pengunjung menjadi betah, amin.

Kumpulan Efek dan Cara Memasangnya di Blog

Langganan: Postingan (Atom)

Subscribe Our Newsletter