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 :
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
Login Blogger > Tema > Edit HTML > Kemudian tambahkan kode dibawah sebelum kode ]]></body> > Simpan TemaVersi 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>© "+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 tandaiDemikian Tips kali ini. Semoga Bermanfaat...
Source : http://www.arlinadzgn.com/2017/09/cara-otomatis-menambahkan-link-sumber.html
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 uploadTampilan Lazy Load-nya seperti gambar di bawah :
Ok, silahkan di coba semoga berhasil...
Jumat, 02 Februari 2018
Pengenalan Docker
Hai Semua,,, Kali ini kita akan belajar Docker. Docker?apa itu.. sebenarnya saya baru saja mengenal Docker.
Saat belajar bereng Kulgram Docker-Aliansi Pengajar Administrasi Server (https://t.me/aliansipengajarcerdas) oleh pak Samsul Ma'arif. Baiklah mari kita mulai...
Manfaat utamanya adalah mengemas aplikasi di "Container," yang memungkinkannya portabel di antara sistem yang menjalankan sistem operasi Linux (OS). Mirip seperti Virtual Machine (VM) namu lebih ringan karena Docker tidak membawa keseluruhan sistem operasi, melainkan berbagi sistem dengan host induknya.
Walaupun keduanya sama-sama berjalan pada virtualisasi, namun VM dan Container ini memiliki beberapa perbedaan. Diantaranya yaitu :
Saat belajar bereng Kulgram Docker-Aliansi Pengajar Administrasi Server (https://t.me/aliansipengajarcerdas) oleh pak Samsul Ma'arif. Baiklah mari kita mulai...
Docker?
Docker adalah Aplikasi open source yang menyediakan platform terbuka dalam bentuk teknologi virtualisasi berbasis wadah/container.Manfaat utamanya adalah mengemas aplikasi di "Container," yang memungkinkannya portabel di antara sistem yang menjalankan sistem operasi Linux (OS). Mirip seperti Virtual Machine (VM) namu lebih ringan karena Docker tidak membawa keseluruhan sistem operasi, melainkan berbagi sistem dengan host induknya.
Komponen Docker
Docker memiliki banyak komponen, setiap komponen itu saling membutuhkan satu sama lain, berikut adalah komponen pembentukan docker:- Docker Image, sebuah paket ringan yang berdiri sendiri dan dapat dieksekusi, yang mencakup semua yang dibutuhkan untuk menjalankannya perangkat lunak, termasuk kode, runtime, pustaka, variabel lingkungan, dan berkas konfigurasi.
- Docker Container, adalah sebuah runtime dari sebuah image. Image akan berada di memori ketika benar-benar dieksekusi.
- Docker Registry, merupakan sebuah server yang menyimpan image di publik/private repository agar dapat diakses oleh pengguna lain.
- Docker File, merupakan sebuah skrip otomasi (builder) yang membangun sebuah image. Sebuah Docker file merupakan text atau skrip yang berisi semua perintah yang biasanya kita lakukan manual untuk membangun sebuah image.
- Repository,Docker menggunakan kata ini mirip dengan yang digunakan pada Github dan source control system lainnya, namun jenis yang berbeda. Repository berupa ID untuk setiap image yang disimpan dalam registry. Ketika kita menjalankan perintah docker commit makan image itu akan kita beri nama dengan format namafile/nama_image.
- Docker index terkait dengan Docker Hub Registry, meski keduanya memiliki fungsi yang berlainan. Index mengatur user account, permission, search, tagging dan hal lain yang tersimpan oada web interface public. Ketika kita melakukan eksekusi perintah docker run untuk menjalankan suatu docker image, hail itu digunakan untuk mencari data pada index bukan registry.
Selanjutnya, kita akan pelajari perbedaan antara VM (Virtual Machine) dengan Container.
VM (Virtual Machine) adalah perangkat lunak yang dapat mengisolasi sebuah mesin komputer serta dapat menjalankan semua program yang sama seperti pada komputer aslinya atau biasa disebut duplikat dari sebuah mesin komputer asli. Container dalam bahasa komputer adalah suatu teknologi yang dapat mengisolasi sebuah proses dari proses yang lainnya yang akan mengisolasi library dan aplikasi yang digunakan saja tanpa mengisolasi seluruh komponen seperti perangkat keras, kernel, sistem operasi, dan lain – lain.Walaupun keduanya sama-sama berjalan pada virtualisasi, namun VM dan Container ini memiliki beberapa perbedaan. Diantaranya yaitu :
- Salah satu perbedaan terbesar antara container dengan VM adalah container berbagi kernel sistem milik host dengan container lainnya. Sedangkan, VM yang memiliki sistem operasi masing-masing, tentu saja memiliki sistem kernel masing-masing pula.
- Container lebih efektif dan ringan dibandingkan dengan VM (Virtual Machine). Karena container hanya mengisolasi library dan aplikasi yang akan dijalankan saja. Berbeda dengan Virtual Machine yang mengharuskan untuk mengisolasi seluruh komponen seperti, perangkat keras, kernel, sistem operasi, dan lain – lain.
- Container dapat melakukan efisiensi resource dengan sebaik – baiknya pada system. Berbeda dengan VM, Container ini dapat melakukan efisiensi penggunaan resource dengan sangat baik. Sehingga, ketika salah satu container sedang siap, maka container yang satunya bisa menggunakan resource milik container yang sedang iddle, begitupun sebaliknya.
Mesin Virtual (VM) | Container |
---|---|
Representasi virtualisasi level perangkat keras | Representasi virtualisasi level sistem operasi |
Berat | Ringan |
Penyediaan lambat | Penyediaan waktu-nyata dan skalabilitas |
Performa terbatas | Performa asli |
Terisolasi penuh dan karenanya lebih aman | Isolasi level proses dan karenanya kurang aman |
Minggu, 21 Januari 2018
Download Template Blogger Mirip PanduanIM
Hallo Sobat, kali ini saya akan berbagi template free atau gratis buatan Bung Franki (bungfrangki.com) yang sangat mirip dengan template PanduanIM (panduanim.com), penasaran apa nama templatnya dan bagamana tampilanya.
Template diberi nama Gridisme dengan loading yang super cepat dan tampilan yang cukup keren. Yang penasaran dengan tampilanya bisa melihatnya dengan link di bawah ini :
Sebenarnya blog PanduanIM menggunakan platform Wordpress Self Host yang artinya struktur templatenya jelas beda dengan Blogger. Dan kami menemukan Template yang mirip dengan PanduanIM yang bisa digunakan untuk template Blogger sobat.
Template ini sekilas memang mirip dengan template blog panduanim seperti pada header, Single post page, Sidebar, dll. Tetapi template ini tidak sama persis.
Ada juga perbedaanya:
Bagi yang ingin membeli atau mendownloadnya bisa kunjungi http://www.themeindie.com/ .
Template diberi nama Gridisme dengan loading yang super cepat dan tampilan yang cukup keren. Yang penasaran dengan tampilanya bisa melihatnya dengan link di bawah ini :
Sebenarnya blog PanduanIM menggunakan platform Wordpress Self Host yang artinya struktur templatenya jelas beda dengan Blogger. Dan kami menemukan Template yang mirip dengan PanduanIM yang bisa digunakan untuk template Blogger sobat.
Template ini sekilas memang mirip dengan template blog panduanim seperti pada header, Single post page, Sidebar, dll. Tetapi template ini tidak sama persis.
Ada juga perbedaanya:
- Warna
- Fungsi Elemen
- Font
- Tampilan home page : Gridisme: tampilan grid sedangkan milik blog panduanim list.
Features | For Free | Premium |
---|---|---|
Full Responsive Design Cek | Yes | Yes |
Fully SEO Optimized - Cek | Yes | Yes |
Mobile Friendly Design - Cek | Yes | Yes |
Google Testing Tool Validator - Cek | Yes | Yes |
Valid HTML5 - Cek | Yes | Yes |
Valid CSS3 - Cek | Yes | Yes |
Mobile Menu Customize (can see with mobile access) | Yes | Yes |
Dynamic Heading | Yes | Yes |
Fastest Loading | Yes | Yes |
Dynamic Heading | Yes | Yes |
Grid Style | Yes | Yes |
Advance Search Engine Optimization | Yes | Yes |
Auto resize thumbnail image | Yes | Yes |
Breadcrumbs SEO | Yes | Yes |
Well Documentation | Yes | Yes |
Social Share Button Responsive | Yes | Yes |
Threaded Comment Responsive | Yes | Yes |
Ads Ready | Yes | Yes |
Auto Author Image | Yes | Yes |
Custom Error 404 Page | Yes | Yes |
Light Base Theme Color | Yes | Yes |
Related Posts with Thumb Responsive | Yes | Yes |
Custom Contact Form Widget (static page) | Yes | Yes |
Recent Posts Widget | Yes | Yes |
Custom Post Table | Yes | Yes |
Sticky Widget Sidebar | Yes | Yes |
Share Button Responsive | Yes | Yes |
Navigation with Number (home page) | Yes | Yes |
Remove Footer Credit | No | Yes |
No Encrypted Scripts | No | Yes |
Lifetime Template Updates | No | Yes |
Sell (resell) template | No | No |
Bagi yang ingin membeli atau mendownloadnya bisa kunjungi http://www.themeindie.com/ .
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.
Sebelumnya Anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum </head>
2. Selanjutnya silahkan buka Template > Edit Template > terapkan kode di bawah ini sebelum </style> atau ]]></b:skin>
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.
5. Publikasikan dan lihat hasilnya.
Untuk font yang digunakan dan lainnya silahkan sesuaikan kembali dengan template Anda.
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
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
Selasa, 16 Januari 2018
Membuat Daftar isi Otomatis Berdasarkan Label
Untuk memudahkan para pengunjung kita, yang kebingungan mencari artikel yang mereka butuhkan inilah suatu cara membantu para pengunjung blog yang kebingungan itu dengan cara membuat halaman Daftar Isi atau Sitemap artikel blog kita.
Daftar isi atau sering di sebut sitemap ini, bisa membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan
Sitemap juga bisa di fungsikan untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs kita yang bisa di crawl.
Bentuk paling sederhana Sitemap adalah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update.
Biasanya file sitemap.xml ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:
http://namablogmu.blogspot.com/sitemap.xml
Penampakan file sitemap.xml tersebut kurang lebih seperti ini:
Sitemap bisa kita buat di halaman statis blog kita dengan cara berikut ini.
Widget yang saya bagikan ini merupakan hasil modifikasi dari widget yang dibuat oleh Arlina Design di blognya www.arlinadzgn.com.
Ok, Langsung saja berikut caranya :
2. Buka Menu Halaman lalu buat Halaman Baru.
3. Pindah ke HTML Lalu masukkan kode berikut:
Terakhir Publikasikan dan lihat hasilnya.
Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, semoga bermanfaat, semoga bermanfaat.
Daftar isi atau sering di sebut sitemap ini, bisa membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan
Sitemap juga bisa di fungsikan untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs kita yang bisa di crawl.
Bentuk paling sederhana Sitemap adalah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update.
Biasanya file sitemap.xml ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:
http://namablogmu.blogspot.com/sitemap.xml
Penampakan file sitemap.xml tersebut kurang lebih seperti ini:
Sitemap bisa kita buat di halaman statis blog kita dengan cara berikut ini.
Widget yang saya bagikan ini merupakan hasil modifikasi dari widget yang dibuat oleh Arlina Design di blognya www.arlinadzgn.com.
Ok, Langsung saja berikut caranya :
Membuat Daftar isi Otomatis Berdasarkan Label
1. Buka Dasbor Blogger.2. Buka Menu Halaman lalu buat Halaman Baru.
3. Pindah ke HTML Lalu masukkan kode berikut:
<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#4e6cef}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#4e6cef;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'https://www.denylistianto.com/',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://rawgit.com/Deny-Listianto/tips/master/Sitemap1.js"></script>
</div>
Ganti Kode url: 'https://www.denylistianto.com/' dengan url blog sobat, dan showNew: 15 adalah jumlah artikel yang akan di tampilkan dengan tulisan Baru/New
Terakhir Publikasikan dan lihat hasilnya.
Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, semoga bermanfaat, semoga bermanfaat.
Langganan:
Postingan (Atom)