Deny Listianto

11 Juli 2023

Cara Mengecek Kecepatan Website atau Blog

  

Hallo semuanya, apakah kalian tahu bahwa kecepatan website atau blog sangat berpengaruh pada performa dan trafiknya? Kecepatan website atau blog adalah waktu yang dibutuhkan untuk menampilkan seluruh konten pada halaman web. Semakin cepat website atau blog muat, semakin baik pengalaman pengguna dan semakin tinggi kemungkinan mereka untuk tetap berada di website atau blog tersebut. Selain itu, kecepatan website atau blog juga mempengaruhi peringkat SEO (Search Engine Optimization) di mesin pencari seperti Google. Website atau blog yang cepat akan mendapatkan posisi yang lebih baik di halaman hasil pencarian daripada yang lambat.

Ilustrasi Cara Cek Kecepatan Website
Ilustrasi Cara Cek Kecepatan Website

Lalu, bagaimana cara cek kecepatan website atau blog? Ada banyak alat online yang bisa kita gunakan untuk mengukur dan menganalisis kecepatan website atau blog kita. Dalam tutorial ini, kita akan membahas beberapa alat populer dan mudah digunakan, yaitu Google PageSpeed Insights, GTmetrix, dan Pingdom. Kita juga akan melihat cara meningkatkan kecepatan website atau blog dengan beberapa tips dan trik sederhana. Yuk, simak langkah-langkahnya berikut ini!

Google PageSpeed Insights

Google PageSpeed Insights adalah alat gratis dari Google yang bisa kita gunakan untuk mengukur dan menganalisis kecepatan website atau blog kita. Alat ini akan memberikan skor kecepatan dari 0 hingga 100 untuk versi desktop dan mobile dari website atau blog kita. Skor di atas 90 dianggap cepat, skor antara 50 hingga 90 dianggap rata-rata, dan skor di bawah 50 dianggap lambat.

Hasil Score PageSpeed
Hasil Score PageSpeed

Selain skor kecepatan, Google PageSpeed Insights juga akan memberikan informasi tentang waktu muat halaman, ukuran halaman, jumlah permintaan HTTP, dan faktor-faktor yang mempengaruhi kecepatan website atau blog kita. Alat ini juga akan memberikan saran perbaikan yang bisa kita lakukan untuk meningkatkan kecepatan website atau blog kita.

Cara menggunakan Google PageSpeed Insights adalah sebagai berikut:

  1. Buka situs https://developers.google.com/speed/pagespeed/insights/
  2. Masukkan URL website atau blog yang ingin diperiksa ke dalam kotak yang tersedia.
  3. Klik tombol Analyze.
  4. Tunggu beberapa detik hingga proses analisis selesai.
  5. Lihat hasil analisis yang ditampilkan di bawah kotak URL. Anda bisa melihat skor kecepatan, metrik utama seperti Largest Contentful Paint (LCP), First Input Delay (FID), dan Cumulative Layout Shift (CLS), serta saran untuk meningkatkan kecepatan website atau blog Anda.

GTmetrix

GTmetrix adalah alat online lain yang bisa kita gunakan untuk cek kecepatan website atau blog kita. Alat ini akan memberikan dua skor berbeda untuk website atau blog kita, yaitu PageSpeed Score dan YSlow Score. Kedua skor ini didasarkan pada aturan-aturan yang dibuat oleh Google dan Yahoo untuk mengoptimalkan kecepatan website atau blog. Skor A adalah yang terbaik, sedangkan skor F adalah yang terburuk.

Hasil Score GTmetrik
Hasil Score GTmetrik

Selain dua skor tersebut, GTmetrix juga akan memberikan informasi tentang waktu muat halaman, ukuran halaman, jumlah permintaan HTTP, dan faktor-faktor lain yang mempengaruhi kecepatan website atau blog kita. Alat ini juga akan memberikan saran perbaikan yang bisa kita lakukan untuk meningkatkan kecepatan website atau blog kita.

Cara menggunakan GTmetrix adalah sebagai berikut:

  1. Buka situs https://gtmetrix.com/
  2. Masukkan URL website atau blog yang ingin diperiksa ke dalam kotak yang tersedia.
  3. Klik tombol Test your site.
  4. Tunggu beberapa detik hingga proses analisis selesai.
  5. Lihat hasil analisis yang ditampilkan di bawah kotak URL. Anda bisa melihat dua skor kinerja, waktu muat halaman, ukuran halaman, jumlah permintaan, serta saran untuk meningkatkan kecepatan website atau blog Anda.

Pingdom

Pingdom adalah alat online yang juga bisa kita gunakan untuk cek kecepatan website atau blog kita. Alat ini akan memberikan skor performa dari 0 hingga 100 untuk website atau blog kita. Skor di atas 90 dianggap cepat, skor antara 70 hingga 90 dianggap rata-rata, dan skor di bawah 70 dianggap lambat.

Hasil Score Pingdom
Hasil Score Pingdom

Selain skor performa, Pingdom juga akan memberikan informasi tentang waktu muat halaman, ukuran halaman, jumlah permintaan HTTP, dan faktor-faktor lain yang mempengaruhi kecepatan website atau blog kita. Alat ini juga akan memberikan saran perbaikan yang bisa kita lakukan untuk meningkatkan kecepatan website atau blog kita.

Cara menggunakan Pingdom adalah sebagai berikut:

  1. Buka situs https://tools.pingdom.com/
  2. Masukkan URL website atau blog yang ingin diperiksa ke dalam kotak yang tersedia.
  3. Pilih lokasi tes yang diinginkan dari daftar yang tersedia.
  4. Klik tombol Start Test.
  5. Tunggu beberapa detik hingga proses analisis selesai.
  6. Lihat hasil analisis yang ditampilkan di bawah kotak URL. Anda bisa melihat skor kinerja, waktu muat halaman, ukuran halaman, jumlah permintaan, serta saran untuk meningkatkan kecepatan website atau blog Anda.

Kesimpulan

Itulah tiga alat online yang bisa kita gunakan untuk cek kecepatan website atau blog kita. Dengan menggunakan alat-alat ini, kita bisa mengetahui seberapa cepat website atau blog kita muat dan apa saja faktor-faktor yang mempengaruhinya. Kita juga bisa mendapatkan saran perbaikan yang bisa kita lakukan untuk meningkatkan kecepatan website atau blog kita.

Kecepatan website atau blog adalah salah satu faktor penting yang harus kita perhatikan jika kita ingin memiliki website atau blog yang sukses. Website atau blog yang cepat akan memberikan pengalaman pengguna yang baik dan meningkatkan peringkat SEO di mesin pencari. Oleh karena itu, jangan lupa untuk selalu cek kecepatan website atau blog kita secara berkala dan lakukan optimasi yang diperlukan.

Semoga tutorial ini bermanfaat untuk kalian semua. Sampai jumpa kembali di artikel menarik lainnya!

21 Agustus 2019

Cara Memasang Tombol Share Whatsapp di Blogger

  
Berikut adalah cara memasang tombol share Whatsapp dan cara mengatasi jika tombol share Whatsapp tidak berfungsi di blogger. Salah satu cara memudahkan pengunjung membagikan artikel di blog adalah dengan cara memasang tombol share.

Cara Memasang Tombol Share Whatsapp di Blogger

Dari beberapa tombol share mungkin tombol share Whatsapp yang cukup efektif untuk meningkatkan jumlah pengunjung blog, Karena dengan adanya pintasan ini, seorang pengunjung akan lebih mudah membagikan apa yang mereka baca ke teman chat ataupun group.

Dengan jumlah pengguna yang demikian besar, maka Whatsapp merupakan salah satu media sosial yang bisa dimanfaatkan untuk kita para blogger agar konten yang kita buat lebih mudah menyebar atau populer di media sosial.

Cara Memasang Tombol Share Whatsapp di Blogger


Berikut ada dua cara memasang tombol share whatsapp di blogger, ikuti langkah-langkah dibawah ini.

1. Cara Pertama, menggunakan javascript

Buka Blogger, lalu buka menu TEMA > Edit HTML. Setelah itu cari kode <data:post.body/> dan letakkan kode berikut ini di bawah kode tersebut.

<!-- Whatsapp Share Buttons Start -->
 
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}</script>

<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>

<!-- Whatsapp Share Buttons End -->

Jika sudah, klik Simpan Tema dan lihat hasilanya.

2. Cara Kedua, tidak menggunakan javascript

Buka Blogger, lalu buka menu TEMA > Edit HTML. Setelah itu cari kode <data:post.body/> dan letakkan kode berikut ini di bawah kode tersebut, atau juga bisa gabungkan dengan kode tombol share lainya.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Jika sobat ingin tampilan nya lebih keren bisa tambahkan kode CSS berikut ini diatas kode
</style>

.wa-btn{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-btn a{color:#fff;margin:0 auto;padding:10px 8px;background:#2baf2b;border-radius:3px;}
.wa-btn i{font-weight:300;margin:0 5px 0 0}

Setelah itu, klik Simpan Tema dan lihat hasilanya.

Cara Mengatasi Jika Tombol Share Whatsapp Tidak Berfungsi


Tombol share whatsapp seringkali tidak berfungsi, maka berikut ini adalah cara mengatasinya :

Buka Blogger, lalu buka menu TEMA > Edit HTML, setelah itu cari kode seperti di bawah ini.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Ganti kode yang saya tandai dengan kode berikut ini.

expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url'

Sehingga hasilnya seperti berikut ini.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Dan jika sudah, klik Simpan Tema dan lihat hasilanya.

Demikian tutorial kali ini. Semoga bermanfaat dan terimakasih telah berkunjung.

14 Oktober 2018

Pengertian Google Sitelinks beserta Fungsinya

  
Pengertian Google Sitelinks beserta Fungsinya

Pernahkah sobat melihat sebuah link dibawah link utama saat sedang mencari situs web dengan mengetik kan nama situs web tersebut di mesin pencari Google. Seperti contoh jika sobat mengetik Deny Listianto di mesin pencari Google akan muncul seperti pada gambar dibawah ini.

Pengertian Google Sitelinks beserta Fungsinya

Nah, dari gambar di atas itulah yang dinamakan Google sitelinks, hal tersebut dapat membuat kunjungan organik sebuah situs bisa meningkat drastis. Tetapi jangan salah paham dulu, karena pengertian sitelinks tidak seperti itu.

Mungkin bagi seorang yang sudah laman atau profesional di dunia blogging nama sitelinks tidak asing lagi, namun bagi seorang yang baru bergabung di dunia blogging kata-kata sitelinks pasti terdengar aneh.

Oleh karena itu, saya ingin membahas pengertian sitelinks, agar dapat menambah wawasan teman-teman semua.

Pengertian Google Sitelinks


Di kutip dari situs Wikipedia, sitelinks adalah hyperlink ke sub halaman situs web yang muncul di bawah daftar Google tertentu untuk membantu pengguna menavigasi situs.

Google sitelinks bertujuan untuk membantu pengguna dengan cara menampilkan beberapa halaman yang di cari yang dimaksudkan untuk memudahkan pencarian informasi hingga ke bagian sub-halaman sebuah situs.

Sitelinks murupakan sebuah kumpulan link yang terbagi atas dua kolom yang terdapat di bawah main page di hasil sebuah pencarian di mesin pencari Google.

Main page yang dimaksud adalah judul sebuah situs beserta deskripsi dan link utamanya. Sementara sitelinks adalah halaman-halaman dengan deskripsi tertentu yang terbagi menjadi dua kolom yang terdapat dibawah main page itu sendiri.

Fungsi Google Sitelinks


Fungsi sitelink dapat di bagi menjadi dua, yaitu fungsi untuk para admin blog dan untuk para pengguna blog.

Sebagai admin blog sitelink dapat berfungsi untuk menaikkan visitor dan juga menandakan bahwa blog itu mempunyai kredibilitas atau kualitas yang baik di mesin pencari terutama Google.

Sedangkan bagi pengguna atau pengunjung blog sitelink dapat berfungsi untuk mempermudah pengunjung untuk mencari informasi secara tepat atau sebagai jalan pintas pengunjung dan dapat menghemat waktu pengunjung.

Cara Mendapatkan Google Sitelinks


Google Sitelinks adalah sesuatu yang tidak bisa dibuat secara manual. Google yang akan memberikannya secara otomatis terhadap blog di hasil pencarian. Google juga tidak memberitahukan kita bagaimana sitelinks dapat dibuat.

Namun tidak menutup kemungkinan jika sitelinks akan muncul setelah sobat melakukan beberapa riset berikut ini :

  • Menggunakan brand unik
  • Buatlah struktur blog yang baik dan jelas
  • Buatlah sitemap.xml dan masukkan di webmaster
  • Buatlah konten yang berkualitas dan penting untuk pengguna
  • Hubungkan artikel yang saling berkaitan di dalam blog Anda, selain related posts, Anda bisa menggunakan internal links hal ini yang juga penting untuk menurunkan bounce rate blog yang tinggi.
  • Sitelinks adalah salah satu hasil dari teknik SEO, dan pahami terlebih dahulu dasar-dasar SEO sebelum berjuang keras mendapatkannya.

Dari pengalaman saya, mendapatkan sitelink adalah sesuatu yang susah. Butuh waktu dan riset yang lama, namun secara tidak di sengaja awalnya saya mencari situs ini dengan kata kunci deny listianto.com sitelink sudah muncul, namu saya coba lagi dengan kata kunci deny listianto sitelink tidak muncul.

Tetapi selang waktu satu minggu sitelink di kata kunci deny listianto muncul, nah itulah mengapa sitelink tidak dapat di buat secara manual dan tidak bisa ditentukan dengan waktu serta perlu riset yang membosankan untuk mendapatkannya.

Itulah pengertian Google Sitelinks beserta fungsinya dan cara mendapatkannya, semoga bermanfaat dan semoga berhasil.

27 September 2018

Membuat Widget Recent Post Berwarna di Blogger

  
Membuat Widget Recent Post Berwarna di Blogger

Widget recent post atau уаng kita kenal dеngаn widget artikel terbaru berfungsi untuk memberikan informasi kepada visitor atau pengunjung untuk membaca postingan terbaru уаng ada pada blog tersebut.

Sebelumnya ѕауа ѕudаh pernah membuat tutorial modifikasi widget popular post menjadi warna-warni seperti pelangi. Widget popular post іnі merupakan fitur уаng ѕudаh tersedia dі blogger оlеh karena іtu penggunaan widget іnі jauh lebih banyak dі bandingkan dеngаn widget recent post.

Berbeda dаrі widget popular post, widget recent post іnі tіdаk tersedia pada fitur blogger, maksudnya аdаlаh ketika sobat іngіn menambahkan widget baru bіаѕаnуа dі bagian tata letak blog ketika sobat klik tambahkan gadget maka аkаn muncul widget-widget уаng cukup banyak untuk bіѕа sobat gunakan pada blog.

Karena widget artikel terbaru atau recent post іnі tіdаk tersedia dі blogger, maka kita perlu membuatnya dеngаn cara manual уаіtu menggunakan sedikit bantuan kode JavaScript.

Jіkа sobat іngіn mengedit tampilan widget recent post іnі bіѕа sobat gunakan kode css, dі sini ѕауа аkаn memberikan kode css уаng bіѕа membuat widget recent post tеrlіhаt lebih keren dаrі bіаѕаnуа dеngаn warna warni seperti pelangi.

Jіkа sobat tertarik membuat widget recent post atau іngіn memodifikasinya supaya tеrlіhаt bagus dan keren ѕіlаhkаn ikuti langkah-langkahnya dі bаwаh ini.

Cara Membuat Widget Recent Post Berwarna di Blogger


Langkah pertama, buka Blogger, lalu buka menu TEMA, setelah itu klik Edit HTML. Selanjutnya letakkan kode CSS dibawah ini tepat di atas kode </style>

/* Recent Wrapper */
#recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul{margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after{content:"01";}
#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after{content:"02";}
#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after{content:"03";}
#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after{content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recent-wrapper ul li a{color:white;text-decoration:none}

Setelah itu Simpan Tema, selanjutnya buka menu Tata Letak, lalu Tambahkan Gadget dan pilih yang HTML/JavaScript. Silahkan sobat isi dengan kode dibawah ini.

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>

Klik Simpan dan lihat hasilnya.

Sekian tutorial kali ini semoga dapat bermanfaat bagi semua dan terima kasih telah berkunjung.

26 September 2018

Cara Membatasi Jumlah Postingan di Halaman Label

  
Cara Membatasi Jumlah Postingan di Halaman Label

Cara Membatasi Jumlah Tampilan Posting Pada Label dі Blogger аdаlаh cara untuk membuat jumlah posting уаng tampil pada halaman blog dараt kita batasi sesuai jumlah уаng kita inginkan.

Postingan pada blogger dараt diberikan label-label mеnurut tema nya masing-masing agar postingan tеrѕеbut dараt terorganisir dеngаn baik dan dараt diakses dеngаn mudah оlеh pengunjung blog.

Nаmun terkаdаng kita agak terganggu dеngаn jumlah postingan уаng tampil pada saat kita mengeklik pada link label tertentu dі halaman blog.

Biasanya link label terdapat dі bagian widget label, breadcrumb, dan menu blog (jika sobat memasang secara manual dі bagian menu).

Apabila jumlah postingan kita tеrlаlu banyak pada label tertentu, maka sebanyak іtu рulа postingan label іtu аkаn tampil pada halaman blog apabila kita mengklik link label tertentu.

Untuk mengatasi hal ini, sobat hаnуа perlu menambahkan atribut max-results kе dalam link widget label agar postingan уаng muncul dalam pencarian label bіѕа sobat tentukan sendiri jumlahnya.

Cara Membatasi Jumlah Postingan di Halaman Label


Ada dua tutorial yang saya bagikan kali ini yaitu membatasi jumlah postingan pada widget label dan membatasi jumlah postingan link label di menu blog.

Membatasi jumlah postingan pada widget label

Untuk membatasi jumlah postingan pada widget label Pastikan sobat sudah memasang widget label di blog.

Pertama, Buka Blogger > TEMA > Klik Edit HTML > Cari semua kode di bawah ini.

expr:href='data:label.url'

Selanjutnya Ganti semua kode tersebut di atas dengan kode dibawah ini :

expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;'

Ganti angka di kode "max-results=8" dengan jumlah maksimal dari postingan yang akan muncul.

Setelah itu klik Simpan Tema dan lihat hasilnya.

Membatasi jumlah postingan link label di menu blog

Pertama, Buka Blogger > TEMA > Klik Edit HTML > Cari link label yang berada di menu. Misalnya, link label pada menu seperti dibawah ini.

<a href='https://www.urlblogsobat.com/search/label/Blogging'>Blogging</a>

Kemudian tambahkan atribut max-results seperti langkah sebelumnya :

<a href='https://www.urlblogsobat.com/search/label/Blogging?&amp;amp;max-results=8'>Blogging</a>

Terakhir klik Simpan Tema dan lihat hasilnya.

Mudah kan? sekian tutorial Cara Membatasi Jumlah Postingan di Halaman Label, supaya tіdаk muncul ѕеmuа dan terbatas. Semoga bermanfaat...

25 September 2018

Cara Membuat Widget Popular Posts Warna Warni di Blog

  
Cara Membuat Widget Popular Posts Warna Warni di Blog

Popular posts adalah salah satu widget blogger yang paling sering atau banyak dipasang di blog, widget ini berfungsi untuk menampilkan beberapa artikel terbaik atau popular di dalam sebuah blog.

Dengan widget ini sobat dapat menunjukkan kepada pengunjung beberapa rekomendasi artikel terbaik atau paling sering di kunjungi dalam blog, dan juga hal ini tentu akan menambah page view blog.

Biasanya widget popular posts di pasang pada sidebar blog, cara memasangnya pun cukup mudah, karena widget ini adalah salah satu widget default dari Blogger.

Namun, untuk widget popular posts yang di sediakan secara default ini masih memiliki tampilan yang sangat sederhana. Nah, kali ini saya akan berbagi cara untuk membuat widget popular posts menjadi warna warni.

Bagi yang penasaran dan ingin mencobanya, silahkan lakukan langkah-langkah yang saya berikan berikut ini.

Cara Membuat Widget Popular Posts Warna Warni di Blog


Buka Blogger sobat, selanjutnya buka menu TEMA , setelah itu klik Edit HTML, silahkan letakkan kode ini sebelum kode ]]></b:skin> atau </style>

Sebelum melakukan langkah di bawah sobat hapus terlebih dahulu semua kode CSS popular posts yang sudah ada.

/* Popular Post Warna Warni */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0;}
.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0!important;width:100%!important;font-weight:bold;}
.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2);}
.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}
.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px!important;color:inherit;text-decoration:none;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px!important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0!important;padding:10px 5px 10px 40px;}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2;}
.PopularPosts ul li:nth-child(2){background-color:#67b8b3;}
.PopularPosts ul li:nth-child(3){background-color:#67c27a;}
.PopularPosts ul li:nth-child(4){background-color:#ee9f7e;}
.PopularPosts ul li:nth-child(5){background-color:#ea6868;}
.PopularPosts ul li:nth-child(6){background-color:#b65757;}
.PopularPosts ul li:nth-child(7){background-color:#e9c462;}
.PopularPosts ul li:nth-child(8){background-color:#84d558;}
.PopularPosts ul li:nth-child(9){background-color:#4dd38c;}
.PopularPosts ul li:nth-child(10){background-color:#b44d7a;}

Selanjutnya klik Simpan Tema dan lihat hasilnya.

Untuk sobat yang belum memasang widget popular post, berikut cara pasangnya. Pertama, buka menu Tata Letak, lalu klik Tambahkan Gadget, setelah itu cari widget popular posts lalu klik tombol + atau tambahkan widget.

Cara Membuat Widget Popular Posts Warna Warni di Blog

Sekian tutorial Cara Membuat Widget Popular Posts Warna Warni di Blog, semoga bermanfaat dan semoga berhasil. Terima Kasih...

24 September 2018

Cara Memasang Random Background di Blogger

  
Cara Memasang Random Background di Blogger

Kali ini saya akan berbagi tutorial cara membuat background blog bisa berubah secara otomatis. Untuk membuatnya tidak terlalu sulit, sobat hanya menambahkan script atau kode di template blogger. Namun, script atau kode ini dapat memperlambat kecepatan loading blog.

Cara kerja script atau kode ini adalah merubah gambar background halaman blog setiap kali halaman blog di refresh. Sehingga blog sobat memiliki tampilan yang dinamis karena background nya dapat berubah-ubah dengan sendirinya saat pengunjung membuka halaman baru atau merefresh halaman.

Yosh, jika sobat penasaran dan ingin mencobanya, silahkan ikuti langkah-langkah berikut ini.

Cara Memasang Random Background di Blogger


Pertama, buka Blogger, selanjutnya buka menu Tema lalu klik Edit HTML. Silahkan sobat letakkan kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[1]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[2]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[3]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[4]="#f5f5f5 url('ImageURL') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>

Silahkan sobat ganti kode ImageURL dengan url gambar yang telah sobat siapkan, pastikan gambar kualitas Hd agar tidak blur atau paecah-pecah saat dipasang.

Jika sobat ingin yang lebih praktis dan tidak mau ribet harus memasang gambar atau sobat tidak memiliki gambar Hd yang cocok, silahkan gunakan kode di bawah ini.

<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('https://2.bp.blogspot.com/-pgCR_lX3GZM/W6jcyUstOeI/AAAAAAAAAn8/eVimAZl-UlwTP0WtBhhK0yecFUUEuaAuwCLcBGAs/s1600/garrett-parker-247225-unsplash.jpg') no-repeat top center fixed",
Background[1]="#f5f5f5 url('https://1.bp.blogspot.com/-fCdjRqP6NTs/W6jbnO_KAuI/AAAAAAAAAns/ICnlDOmXcH4OBX-HCQ5xIkbONcWjElklACLcBGAs/s1600/brandon-lam-29892-unsplash.jpg') no-repeat top center fixed",
Background[2]="#f5f5f5 url('https://2.bp.blogspot.com/-OymSzNTbCqA/W6jc2fEDWsI/AAAAAAAAAoE/lA1YcOmRFf4VXPbRnfwfW-UrK7gi4nmcwCLcBGAs/s1600/john-towner-154060-unsplash.jpg') no-repeat top center fixed",
Background[3]="#f5f5f5 url('https://3.bp.blogspot.com/-diwm9CQ6B28/W6jcx6bnrnI/AAAAAAAAAn4/4kFyJzmhhpkI3oT53eIw80pZZw1cd-FvACLcBGAs/s1600/kalen-emsley-98264-unsplash.jpg') no-repeat top center fixed",
Background[4]="#f5f5f5 url('https://4.bp.blogspot.com/-erAEgmCybgY/W6jc1JZmQeI/AAAAAAAAAoA/0dfNJIZ37twWRDBHCFr-bjt6Fl9oCxcmgCLcBGAs/s1600/samsommer-76472-unsplash.jpg') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>

Jika sudah si lahkan klik Simpan Tema dan lihat hasilnya.


Sekian Cara Memasang Random Background di Blogger, semoga dapat bermanfaat dan terima kasih telah berkunjung.