Showing posts with label Blogger. Show all posts

Widget Comments Simple

Berikut Cara Menambahkan Widget Komentar Simple & Responsive Ke Blogger

Pertama masuk ke Dashboard Blogger > Tata Letak > Tambah Gadget kemudian Pastekan script di bawah ini dan tuliskan judul sesuai keinginan Lalu simpan.


<script type="text/javascript">
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;

function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}

</script><script src=https://fajardjoekerz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="https://fajardjoekerz.blogspot.com">sini</a></div>
<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;}
</style>

Customiz widget
> Var a_rc = 5; menampilkan jumlah komentar
> Ganti https://fajardjoekerz.blogspot.com dengan Alamat website kalian.

Result:

Fajar Djoekerz

Membuat Slide Demo Download Responsive

Blogger

Membuat tombol Slide Demo dan Download Responsive di Blogger - Tombol demo dan unduh CSS akan menggunakan efek hover css termasuk radius batas, bayangan kotak, gradien linier, indeks-z, dan transisi untuk mencapai efek unik dan sederhana saat mengarahkan kursor. Tombol Slide Demo dan Download dibuat dengan CSS dengan efek kursor mouse. Dua ikon diambil dari fontawesome. Jadi sebelum ke tutorial ini Anda harus menambahkan skrip fontawesome di blog Anda jika sudah ada tidak perlu menambahkan lagi.

Sebelum memulai tutorial ini, harap ambil cadangan template Anda untuk keamanan.

Pertama masuk ke Dashboard Blogger > Tema > Edit HTML dan letakkan script Fontawesome di bawah ini sebelum tag </head>. Jika sudah terinstal Fontawesome skip lanjut ke code selanjutnya.

<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg="nest">
</script>

Code CSS bisa ditempatkan sebelum tag </style>


#wrap { margin: 20px auto; text-align: center; } #wrap br { 

display: none; } .btn-slide, .btn-slide2 { position: relative; display:

inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; 

border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin:

10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; }

.btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color:

#efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left:

100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; }

.btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title,

.btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover

span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; }

.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; 

background-color: #0099cc; color: #fff; position: absolute; float: left; margin:

5px; line-height: 42px; height: 40px; width: 40px; top: 0; 

left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { 

 background-color: #efa666; } .btn-slide span.title, .btn-slide

span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position:

absolute; left: 90px; text-align: center; margin: 0 auto; font-size:

16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2

span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity:

0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color:

#fff; }

Pilih Simpan/Save Theme.

Untuk langkah selanjutnya pilih Postingan – Entri Baru – Html – Lalu masukan kode pemanggil di bawah ini.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>

<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

Catatan: Untuk Tagar ( tanda pagar ) dalam kode di atas bisa kamu ubah dengan link download atau link lainnya.

Result:

Demo Click here Download Click here

Fajar Djoekerz

Membuat Sitemap atau Daftar isi Simple

Blogger

Membuat Daftar Isi (Sitemap) Blog Simple & Fast Loading - Membuat Halaman Indeks Posting Blog Alfabetis (Berdasarkan Abjad per Kategori/Label).

Setiap blog rata-rata memiliki daftar isi/sitemap dan bisa dipastikan semua memiliki daftar isi, para blogger menyertakan sitemap tersebut bukan karena tanpa alasan atau hanya ikut-ikutan saja.

Keuntungan yang bisa kamu dapatkan jika blog kamu memiliki sitemap akan menambah kebetahan pengunjung blog untuk berlama-lama di blog kamu, karena jika blog kamu memiliki content yang menarik maka pengunjung akan penasaran dengan content-content kamu yang lain, maka dengan rasa penasaran itu mereka akan melihat-lihat isi dari blog kamu melalui sitemap/daftar isi blog.

Berikut cara membuat mudah dan simple

Buka Blogger
Klik Halaman / Halaman statis

Buat Halaman Baru dengan judul Sitemap atau Daftar isi kemudian buka html dan pastekan kode berikut



<script style="text/javascript" src="https://rawcdn.githack.com/Fajardjoekerz/djoekerz/716b9ef6777281b85ff53df013ab045862fc9ee1/sitemaps.js"></script>

<script src="https://fajardjoekerz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Demo Click here

Terakhir ganti https://fajardjoekerz.blogspot.com ganti dengan alamat blog kalian kemudian simpan dan cek hasilnya maka akan keluar daftar isi simple dan responsive.

Fajar Djoekerz

Mengenal Tentang Microsoft Clarity: Untuk Analisis Website

Blogger

Microsoft Clarity Untuk Analisis Website

Microsoft Clarity adalah sebuah tools analisa visitor dari Microsoft yang bisa membagikan gambaran bagaimana pengunjung atau visitor berinteraksi dalam satu web. Dengan Clarity, telah membuat tools yang membantu orang yang mengelola situs web membuat keputusan yang lebih tepat tentang modifikasi yang harus dilakukan pada situs anda. Kejelasan menunjukkan kepada Anda bagian mana dari situs web Anda yang paling banyak terlibat dan paling sedikit terlibat dan menyediakan antarmuka yang sangat berharga untuk debugging.

Clarity memberi tools untuk membuat keputusan yang tepat tentang perubahan pada situs web Anda menggunakan data yang valid, dan ini memungkinkan Anda melakukannya dengan cara yang membantu menghormati privasi dan keamanan data pengguna Anda. Selain itu, membangun jenis sistem yang dapat memberikan bukti ini sendiri dapat menjadi rumit dan memakan waktu.

Microsoft Clarity dibuat agar siapa saja yang mencoba meningkatkan pengalaman situs web untuk dapat menggunakannya. Microsoft Clarity mendesainnya agar mudah digunakan untuk pengembang dan non-pengembang. Jika Anda ingin memahami pengguna Anda tanpa harus menganalisis lautan data yang dapat diperoleh dari mengoperasikan situs web.

Dirancang untuk memiliki dampak yang sangat rendah pada waktu pemuatan halaman, sehingga dapat memastikan pengguna yang menavigasi ke situs Anda tidak perlu menunggu halaman dimuat. Selain itu, tidak membatasi lalu lintas di website, 10 pengunjung per hari atau 1.000.000, Clarity akan dapat menangani lalu lintas tanpa biaya tambahan.

Saat ini Microsoft Clarity ini gratis untuk digunakan, mudah untuk menambahkan Clarity Microsoft ke situs web yang ada. Ada overhead minimal, dan semua ukuran situs didukung, tanpa batasan lalu lintas. Penting untuk diperhatikan bahwa Clarity tidak disarankan untuk situs yang bekerja dengan data sensitif, karena rekaman sesi dapat menangkap informasi itu dan menyimpannya di server Clarity Microsoft.

Ingin Memulai menggunakan Microsoft Clarity?

Anda dapat memulai dengan mendaftar secara gratis, menggunakan akun Microsoft, Google, atau Facebook. Kalian akan membuat ruang kerja tempat Anda dapat menambahkan proyek, pilihan halaman atau situs atau domain. Menambahkan proyek baru akan dibuat menggunakan template dasar, dengan nama situs, URL, dan kategori yang disesuaikan dengan template. Anda juga dapat membuat dan mengenerate kode pelacakan unik untuk proyek, yang perlu Anda sertakan di konten halaman Anda. Ini adalah fungsi JavaScript yang ada di halaman Head block, dan setelah dipasang itu akan mulai mengirimkan data ke dasbor Clarity Anda.

Tim menjadi hal yang penting dalam membuat sebuah website, untuk sekarang Clarity juga menyediakan 2 role untuk anggota tim yaitu Administrator dan Member. Sebuah website dalam Clarity dapat memiliki beberapa role, misalnya satu website dapat memiliki beberapa administrator dan beberapa Team Member. Pemberian role tersebut juga tidak terbatas oleh email domain, siapapun dapat anda ajak menjadi admin dan member dalam tim anda. Jadi kamu dapat mengajak tim agency mu untuk bergabung dalam Microsoft Clarity Team.

Masihkah Kita Butuh Google Analytics?

Jika kita melihat dashboard dari Microsoft Clarity ini, maka dapat kita simpulkan bahwa sepertinya Microsoft tidak berniat untuk bersaing dengan Google Analytics karena secara fungsi lebih mirip dengan Hotjar.

Jadi, tentu saja kita masih butuh menggunakan Google Analytics karena Microsoft Clarity bukan untuk menggantikan Google Analytics, tapi sebagai pelengkap saja. Setidaknya untuk saat ini. Apalagi dengan adanya fitur integrasi dengan Google Analytics.

Saran saya, sebaiknya gunakan keduanya, baik Google Analytics & Microsoft Clarity sambil kita lihat perkembangan ke depannya.

Sekian artikel mengenai Microsoft Clarity yang bisa kalian gunakan untuk melihat informasi lebih detail mengenai website atau situs Anda. Semoga informasi ini bermanfaat dan sampai jumpa di artikel selanjutnya.

Fajar Djoekerz

Cara Membuat Navigasi Menjadi Sticky

Blogger

Sticky menu navigasi adalah sebuah menu blog atau website yang dibuat menjadi diam pada tempatnya. Fungsinya adalah ketika pembaca blog melakukan scrool mouse ke bawah dan ke atas, bagian yang di sticky akan tetap di tempat.

Bukan hanya pada menu navigasi, teknik sticky ini juga bisa diterapkan di widget yang lainnya seusai keinginan.

Berikut adalah langkah demi langkah membuat Sticky Menu Navigasi.

1. Perhatikan contoh CSS Menu Navigasi dan HTML Menu Navigasi berikut:

CSS Menu Navigasi

/* Menu */
.navi{clear:both;display:block;width:100%;font-family:'Roboto', sans-serif;padding:0;margin:0 auto 25px; z-index:9999!important;}.navi ul{background:#fff;margin:0 auto;padding:0;text-align:center;border-radius:5px}.navi li{display:inline-block;margin:15px 0}.navi li a{display:block;color:#000;font-weight:normal;padding:0 11px;font-size:18px;}.navi li a:hover{color:#86dfff !important}

Keterangan:

Advertiser

- Tulisan .navi yang berwarna biru diatas adalah bagian selector atau widget id yang akan dijadikan sticky.
- Tulisan z-index:9999!important; yang berwarna merah adalah kode css yang akan mengatur kerapian menu navigasi nantinya, supaya tetap rapi walaupun di zoom in-zoom out. maka tambahkan pada css navigasi di template blog anda.

HTML Menu Navigasi

<nav class='navi'>
<ul>
<li><a expr:title='data:blog.title' href='/' itemprop='url'>HOME></a></li>
<li><a href='#'>FACEBOOK</a></li>
<li><a href='#'>ADSENSE</a></li>
<li><a href='#'>BLOGGER</a></li>
<li><a href='#'>TWITTER</a></li>
</ul></nav>

Kode diatas hanya untuk memberikan pemahaman kepada anda bahwa yang akan dibuat sticky itu adalah menu navigasi di blog.

2. Copy dan pastekan script dibawah ini tepat diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
var sticky_nav_offset_top = $('.navi').offset().top;
var sticky_nav = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_nav_offset_top) {
$('.navi').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('.navi').css({ 'position': 'relative' });
}
};
sticky_nav();
$(window).scroll(function() {
sticky_nav();
});
});
</script>

3. Ganti semua kode .navi dengan bagian atau widget id yang ingin dijadikan sticky.

Fajar Djoekerz