About: Tips Blogger

Senin, 12 Februari 2018

Cara Memasang Link Sumber Otomatis

Cara Otomatis Menambahkan Link Sumber - Kali ini saya akan berbagi sedikit tips yang saya pelajari dari blog mbak Arlina Design di blognya www.arlinadzgn.com.

Tips ini berfungsi agar pengunjung sebuah blog yang menyalin sebuah teks pada blog tersebut lalu mempublikasikan di blognya, seharusnya ia menambahkan link sumber dari situs yang ia salin teksnya. Namun, banyak juga yang mengabaikan hal seperti ini.

Nah, sobat jangan khawatir untuk menghindari hal itu, disini saya akan memberikan kode yang akan secara otomatis memunculkan link sumber dari teks yang ia salin.

Dengan cara ini maka artikel kita yang di copy paste oleh orang lain akan muncul link sumbernya secara otomatis. Sebetunya cara ini sangat sederhana sekali kok hanya dengan menambahkan beberapa kode script ke dalam blog kita.

Link ini dapat di hapus dengan mudah. Namun, setidaknya ini akan memberi sedikit peringatan bagi yang menyalin teks dalam blog sobat.

Bagi yang ingin mencoba Tips ini, silahkan ikuti tutorial berikut :

Cara Otomatis Menambahkan Link Sumber

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>

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>

Sobat Bisa mengganti tulisan yang saya tandai

Demikian Tips kali ini. Semoga Bermanfaat...

Source : http://www.arlinadzgn.com/2017/09/cara-otomatis-menambahkan-link-sumber.html

Deny Listianto | Februari 12, 2018

Senin, 05 Februari 2018

Cara Buat Lazy Load Seperti Arlina Design 2018

Hallo para blogger, kali ini saya akan berbagi plugin untuk mempercepat loading blog. Dengan cara menambahkan atau memasang Plugin Lazy Load di blog kita.

Lazy Load untuk kita para pemula sering di sebuat Effek Loading Gambar di blog, yang bisa di artikan sebagai sebuah plugin atau script yang dibangun dan dikembangkan khusus untuk platform Blogger.

Fungsinya untuk menunda pemanggilan objek ketika objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen lain yang ada dalam blog tidak akan dimuat sebelum anda menyentuh atau mengarahkan kepada konten tersebut.

Sehingga dengan ini, loading blog akan sedikit berkurang karena hanya memuat halaman yang terbuka saja, ketika anda scroll cursor anda ke bawah, baru disini semua halaman akan dimuat secara keseluruhan.

Tentunya jika blog anda semakin cepat untuk diakses semakin berpotensi untuk menarik perhatian visitor karena blog tidak membutuhkan waktu yang lama untuk memuat seluruh halaman, sehingga para pengunjung pun akan semakin betah berselancar di blog anda.

Yosh, sudah menegertikan apa itu Lazy Load. Baiklah mari kita mulai cara pasangnya di blogger kita.

Cara Pasang Lazy Load Seperti Arlina Design 2018

1. Buka Dasbor Blogger sobat.

2. Pilih menu Tema lalu Edit HTML

3. Cari Kode </body> dan pastekan kode di bawah ini di atasnya.

<script type="text/javascript">
//<![CDATA[
// Lazy Load
(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(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavTh8UbzxNoi2TshT3hr2KJVTI6gbbVDo3ZPuASqleaxOPX9fj1UYE7KGyTJREnuphFK5dGrNCNOnp1QirvldLPctEd4ERA89cbmXlUeqjcHyyK2LZ97WayGp6u5e3hAAFUoVZw7Z81I/s320/LazyLoading.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

Anda juga dapat mengganti effek loadingnya dengan cara mengganti url yang saya tandai di atas dengan url gambar (.jpg,.gif,.png,dll) yang telah di upload

Tampilan Lazy Load-nya seperti gambar di bawah :

Ok, silahkan di coba semoga berhasil...

Deny Listianto | Februari 05, 2018

Sabtu, 20 Januari 2018

Cara Memasang Contact Form Pada Halaman Statis

Untuk memudahkan pengunjung blog kita menghubungi kita. Mulai dari mengirimkan saran dan kritikan terhadap blog, bertanya kepada admin blog.

Bahkan sebagai sarana pembuka obrolan sampai curhat-curhatan masalah pacar, rumah tangga, keuangan dan kejombloan.

Cara ini bisa di terapkan untuk blog sobat semua terutama blog jual beli, marketing, dll.

Contact form pada dasarnya sudah di sediakan di blogger yang berbentuk widget. Jadi, kita bisa menempatkanya pada sidebar blog kita namun kali ini kita mencoba menempatkanya di halaman statis blog, ini kedengaranya sedikit sulit jika belum mempraktekanya.

Ok langsung saja disini saya tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak mempunyai peran yang penting pada sebuah blog tapi disini saya akan berbagi tips tentang cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Cara Memasang Formulir Kontak Pada Halaman Statis

1. Login ke blogger dan pilih blog > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak. Perhatikan gambar berikut ini.

Sebelumnya Anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Selanjutnya silahkan buka Template > Edit Template > terapkan kode di bawah ini sebelum </style> atau ]]></b:skin>

#ContactForm1 {
display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 300px;
height: auto;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
width: 450px;
height: 175px;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
font-family: 'Roboto',sans-serif;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background: #fff;
outline: none;
border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
font-family: 'Roboto';
font-size: 15px;
width: 101px;
height: 35px;
float: left;
color: #fff;
padding: 0;
margin: 10px 0 3px 0;
cursor: pointer;
background: #aaa;
border: none;
border-radius: 2px;
transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;
margin-top: 35px;
}

3. Simpan template.

4. Perhatikan kembali menu di dasbor blog, klik Laman > Laman Baru > HTML. Kemudian hapus kode yang ada, lalu ganti dengan kode berikut ini.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

5. Publikasikan dan lihat hasilnya.

Untuk font yang digunakan dan lainnya silahkan sesuaikan kembali dengan template Anda.

Referensi :
http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html
http://www.arlinadzgn.com/2014/11/memasang-formulir-kontak-pada-halaman-statis.html

Deny Listianto | Januari 20, 2018

Minggu, 14 Januari 2018

Cara Memasang Breadcrumbs SEO Friendly

Mungkin Anda sudah sering melihat wujud Breadcrumb ini sendiri, namun mungkin belum tahu apa sebutannya. Breadcrumb biasanya berada di atas judul postingan dari suatu blog atau website.

Tampilanya mirip gambar dibawah ini

Breadcrumb adalah alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi artikel yang mereka baca. Dengan kata lain, breadcrumb merupakan sebuah petunjuk sederhana terhadap sebuah artikel yang berkaitan dengan label dan halaman situs dari sebuah blog atau website.

Breadcrumb ini cukup penting sebagai faktor pendukung SEO di blog atau website, karena dengan breadcrumbs kita bisa menginformasikan kepada pengunjung mengenai label dan lokasi mereka pada saat mereka membaca postingan yang ada didalam blog atau website kita.

Sudah tidak sabar ya, bagaimana cara membuatnya atau mengaditnya. Baiklah silahkan di coba tutorial di bawah ini

Cara Memasang Breadcrumbs SEO Friendly

1. Buka Blogger > Tema > Edit HTML > Kemudian tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>.

/* Breadcrumbs */
.breadcrumbs {background:#fafafa;font-size:100%;height:45px;overflow:hidden;padding:0;border-bottom:0;position:relative;}
.breadcrumbs:after{display:inline-block;content:"\f135";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#768187;top:0;right:0;padding:12px 20px;position:absolute}
.breadcrumbs > span {padding:0;}
.breadcrumbs a{color:#768187;font-size:13px;font-weight:normal;line-height:45px;}
.breadcrumbs span a {color:#768187;padding:10px 0;}
.breadcrumbs span:first-child  a{color:#768187;margin-left:20px;}
.breadcrumbs > span:last-child {visibility:hidden;width:0;height:0;color:#768187;border-right:none;font-size:13px;font-weight:300;line-height:30px;}
.breadcrumbs span a:hover {color:#151515;}
.breadcrumbs a:hover {color:#151515;}

2. Cari kode di bawah ini, bisa di cari dengan cara CTRL + F

<b:includable id='main' var='top'>

Atau

<b:includable id='main' var='top'>...</b:includable>

3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/>  <data:title/></span></a></span>  <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=7&quot;' itemprop='url'><span itemprop='title'><i class='fa fa-caret-right fa-fw'/> <data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'>  </b:if> </b:loop>  <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span>Uncategories</span>  <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><i class='fa fa-caret-right fa-fw'/> Archive for <data:blog.pageName/></span> 
</div> 
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><i class='fa fa-caret-right fa-fw'/> <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><data:blog.pageName/></span> 
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan Template, dan lihat Hasilnya

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly, Semoga Bermafaat...

Deny Listianto | Januari 14, 2018

Senin, 12 Februari 2018

Cara Memasang Link Sumber Otomatis

Cara Otomatis Menambahkan Link Sumber

Versi 1

Versi 2

Senin, 05 Februari 2018

Cara Buat Lazy Load Seperti Arlina Design 2018

Cara Pasang Lazy Load Seperti Arlina Design 2018

Sabtu, 20 Januari 2018

Cara Memasang Contact Form Pada Halaman Statis

Cara Memasang Formulir Kontak Pada Halaman Statis

Minggu, 14 Januari 2018

Cara Memasang Breadcrumbs SEO Friendly

Cara Memasang Breadcrumbs SEO Friendly

Baca Juga

Arsip

Label