Cara Memasang Menu Responsive Dropdown untuk Blogger

Cara Memasang Menu Responsive Dropdown untuk Blogger

Menu responsive dropdown untuk Blogger ini murni CSS HTML tanpa Javascript. Tampilannya keren dan ramah pengguna (user friendly). Ini penampakan versi mobile.

Mobile Nav Menu Blogger.*

Navigasi menu merupakan elemen penting sebagai internal linking. Menu memudahkan  pengunjung mengeksplorasi konten blog dan memandu mereka dalam mencari informasi yang dibutuhkan.

Menu juga menjadi gambaran konten atau isi blog. Menu biasanya berisi link ke halaman label (label pages), selain link ke halaman statis about, kontak, disclaimer, dan sitemap.

Cara Memasang Menu Responsive Dropdown untuk Blogger

1. Tema > Edit HTML
2. Copas kode berikut ini bawah kode <div id='header'> ... </div> atau yang mirip dengannya.

<nav id='menu1'>
<input type='checkbox'/><label><span>CB</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Kontak</a></li>
  <li><a href='#'>Sitemap</a></li>
<li><a href='#'>Select Category</a>
<ul class='menus'>
<li><a href='#'>Label 1</a></li>
<li><a href='#'>Label 2</a></li>
<li><a href='#'>Label 3</a></li>
<li><a href='#'>Label 4</a></li>
</ul></li>
<li><a href='#'>Dropdown</a>
<ul class='menus'>
<li><a href='#'>Submenu 1</a></li>
<li><a href='#'>Submenu 2</a></li>
<li><a href='#'>Submenu 3</a></li>
</ul></li>
<li><a href='#'>Social Media</a></li>
<li><a href='https://www.contohblog.com' target='_blank'>Link</a></li>
</ul><a href="#" id="pull" style="font-family: fjalla one;font-size: 18px;">MENU</a>
</nav>

Ubah kode tanda pagar (#) dengan URL link yang ditampilkan. Nama link atau nama menunya menyesuaikan dengan link.

3. Copas kode berikut ini atas kode </head>

<style>
#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative}
#menu1 {color:#fff;height:55px;margin-bottom: 20px;}
#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none}
#menu1 ul{height:50px;background:#4b3f57}
#menu1 li{float:left;display:inline;position:relative;font-family:'Fjalla One';font-size:16px;font-weight:400;text-transform:uppercase}
#menu1 li a{background:#4b3f57;color:#fff}
#menu1 a{display:block;line-height:50px;padding:0 14px;text-transform:uppercase;color:#fff;transition:all .2s ease-in-out;font-size:16px}
#menu1 li:hover > a{background:#48d;color:#fff}
#menu1 li a:hover{color:#fff}
#menu1 li:last-child a{border-right:none}
#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu1 label{font-family:'Oswald';font-size:30px;font-weight:400;text-transform:capitalize;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu1 label span{font-size:13px;position:absolute;left:35px}
#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all .3s ease-in-out}
#menu1 li > ul.menus{transition:all .3s linear}
#menu1 li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation:fadeInUp .3s ease-in-out;-webkit-animation:fadeInUp .3s ease-in-out;animation:fadeInUp .3s ease-in-out;transition:all .3s linear}
#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all .3s linear}
#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#48d;color:#fff}
#menu1 li > a.ai::after{content:"";margin:0 auto;background:url(https://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all .3s linear}
#menu1 li:hover > a.ai::after{content:"";margin:0 auto;background:url(http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all .3s linear}
#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear}
#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear}
#menu1 ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none}
#menu1 ul.menus li:hover{width:100%}
#menu1 ul.menus li:last-child{border-bottom:none}
#menu1 ul.menus li:first-child a{border-top:none}
#menu1 ul.menus li:last-child a{border-bottom:none}
#menu1 ul.menus li:hover a{background:#322a3b;color:#fff}
#menu1 .homers a{background:#f35d5c;color:#fff}
#menu1 .homers a:hover{background:#d95353;color:#fff}
#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff}
#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;color:#fff}
@media screen and (max-width:960px) {
#menu1{position:relative;background:#4b3f57;color:#fff}
#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none}
#menu1 ul.menus{width:100%;position:static}
#menu1 li{display:block;width:100%;text-align:left}
#menu1 a{border:none;background:#111;}
#menu1 li a{color:#fff;background:#3f354a;}
#menu1 li a:hover{background:#f35d5c;color:#fff}
#menu1 li:hover{background:#f35d5c;color:#fff}
#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff}
#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition:.3s linear}
#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none}
#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-left:none}
#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none}
#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none}
#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none}
#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none}
#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0}
#menu1 input:after,#menu1 label:after{content:"";background:url(http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png) no-repeat;width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px}
#menu1 input{z-index:4}
#menu1 input:checked + label{color:#fff;font-weight:700}
#menu1 input:checked ~ ul{display:block}
#menu1 .homers a{background:transparent;color:#fff}
#menu1 .homers a:hover{background:#f35d5c;color:#fff}
#footer-widgetfix{width:100%;overflow:hidden}
#menu1 li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear}
}
</style>

4. Pasang link ke Awesome Font berikut ini di atas kode </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

5. Simpan template! Save.

Demikian Cara Memasang Menu Responsive Dropdown untuk Blogger. Masih banyak jenis menu responsive lain yang sudah CB share di blog ini. Silakan cek menu responsive.

Good Luck & Happy Blogging! (www.contohblog.com).*

See the Pen
Menu Responsive Blogger by CB Blogger (@cbblogger)
on CodePen.

Pengertian Startup, Unicorn, dan Contohnya

Pengertian Startup, Unicorn, dan Contohnya

Memahami pengertian startup, unicorn, dan contoh start-up unicorn akan menginspirasi kita untuk membuatnya. Startup merupakan bagian dari peluang bisnis online.

Istilah startup merujuk pada usaha rintisan secara online di internet dengan menggunakan situs web (website) atau aplikasi (app). Blogger juga bisa melakukannya.

Pengertian Startup

Secara bahasa, startup berasal dari kata start (yang artinya mulai) dan up (yang artinya naik atau meningkat).

Startup secara bahasa artinya "mulai meningkat" atau "mulai naik". Lawannya startdown atau mulai turun.

Istilah startup merujuk pada usaha atau perusahaan dengan memanfaatkan teknologi internet.

Pengertian startup yang dimaksud selama ini adalah "memulai usaha secara online yang nantinya akan berkembang" atau "sebuah bisnis online yang baru dirintis".

Startup adalah perusahaan yang baru saja didirikan dan berada dalam fase pengembangan dan penelitian untuk menemukan pasar yang tepat.

Menurut data Wikipedia, startup adalah sebuah perusahaan rintisan yang merujuk pada semua perusahaan yang belum lama beroperasi, baru didirikan, baru mulai (start).

Istilah startup menjadi populer dengan banyaknya perusahaan dot com yang didirikan secara bersamaan.

Bisnis startup identik dengan teknolog internet atau website dan aplikasi.

Karakteristik Startup

Ciri-ciri startup yang utama adalah baru didirikan, beroperasi melalui website. dengan jumlah pegawai masih sedikit. Berikut ini karakteristik selengkapnya:

1. Usia perusahaan kurang dari 3 tahun
2. Jumlah pegawai kurang dari 20 orang
3. Pendapatan kurang dari $ 100.000/tahun
4. Masih dalam tahap berkembang
5. Umumnya beroperasi dalam bidang teknologi
6. Produk yang dibuat berupa aplikasi dalam bentuk digital
7. Biasanya beroperasi melalui website

Contoh startup adalah toko online atau jasa tiket online yang baru didirikan.

Startup bisnis dalam bidang komunikasi seperti aplikasi jejaring sosial atau forum-forum obrolan, jual kue secara online, jasa privat online, pengajar online (seperti ruangguru yg sudah berkembang)

Contoh startup yang sudah berkembang pesat dan tidak lagi dinamakan startup karena sudah lama a.l. Bukalapak, Gojek, Tiket.com.

Saat didirikan hingga tahun ketiga, Bukalapak adalah startup. Saat ini sudah berkembang pesat hingga mampu mensponsori kompetisi sepakbola Liga 1 2018. Bukalapak sudah masuk kategori Unicorn atau startp unicorn.

Saat CEO dan pendirinya menulis "presiden baru" di status Twitter, Bukalapak diserang #UnsitallBukalapak, namun kemudian gelombang serangan balik muncul bak tsunami berupa tagar #UninstallJokowi dan #InstallPrabowo.

Seru!

Pengertian Unicorn

Unicorn adalah startup yang sudah berkembang. Menurut Wikipedia, unicorn adalah sebuah perusahaan startup yang memiliki valuasi nilai hingga US$ 1 miliar atau sekitar Rp 14 triliun.

Valuasi startup adalah nilai ekonomi dari bisnis yang dilakukan sebuah startup. 

Mengutip CB Insight, riset Januari 2019, saat ini sudah ada 300 unicorn di seluruh dunia. Yang lebih tinggi kastanya adalah decacorn bervaluasi US$ 10 miliar. Ada pula hectocorn yang bernilai US$ 100 miliar.

• Unicorn = Startup yang memiliki valuasi nilai US$ 1 miliar
• Decacorn = Startup yang memiliki valuasi nilai US$ 10 miliar
• Hectocorn = Startup yang memiliki valuasi nilai US$ 100 miliar

Di Indonesia saat ini, startup yang sudah masuk kategori unicorn a.l. Gojek, Traveloka, Tokopedia, dan Bukalapak.

Unicorn adalah perusahaan startup swasta yang bernilai lebih dari $ 1 miliar. Istilah ini diciptakan tahun 2013 oleh kapitalis ventura Aileen Lee, memilih hewan mitos untuk mewakili kelangkaan statistik dari usaha yang sukses tersebut. 

Decacorn adalah kata yang digunakan untuk perusahaan-perusahaan di atas $ 10 miliar, sementara hektocorn adalah istilah yang tepat untuk perusahaan semacam itu yang bernilai lebih dari $ 100 miliar. 

Menurut TechCrunch, ada 279 unicorn pada Maret 2018. Unicorn terbesar termasuk Ant Financial, Didi Chuxing, Uber, Airbnb, Stripe, Palantir, dan Pinterest. Dropbox adalah decacorn terbaru yang berubah menjadi perusahaan publik pada 23 Maret 2018. (Wikipedia).

Pengertian Startup, Unicorn, dan Contohnya. Good Luck & Happy Business Blogging! (www.contohblog.com).*

Sumber
https://id.wikipedia.org/wiki/Perusahaan_rintisan
https://en.wikipedia.org/wiki/Unicorn
https://www.wartaekonomi.co.id/read156356/7-bisnis-startup-paling-potensial.html

https://www.cbinsights.com/research-unicorn-companies

Masih Ngeblog? Tantangan Blogging Sekarang Kian Berat

Masih Ngeblog? Tantangan Blogging Sekarang Kian Berat

Tantangan para blogger kian berat. Apalagi jika memilih niche tentang blogging --dikenal dengan istilah metablogging-- dan niche berita.

Metablogging sekarang disaingi oleh provider domain-hosting. Mereka kian gencar "business blogging" untuk marketing dengan memilih topik seputar blogging. Dulu mah tidak gencar menulis artikel marketing.

Niche berita bukan pilihan tepat. Selain blogger bukanlah wartawan, juga Google makin ke sini kian rajin promosikan berita terkini melalui fitur "Top Stories".

Mending jika link berita yang disajikan "Top Stories" itu bermutu. Ini mah dominasi grup Tribunnews yang menganut jurnalisme umpan klik.

CB sudah menulis tentang alasan berhenti ngeblog. Alasan utama berhenti blogging karena sepi pengunjung dan ditolak AdSense.

Bagaimana dengan vlogging?

Vlogging hakikatnya ngeblog juga. Vlogging itu "video logging" atau ngeblog dengan konten khusus atau niche video. Yang ngeblognya di Youtube disebut Youtuber. Hakiktnya blogger juga.

CB menduga banyak yang berhenti ngeblog karena yang berkomentar di contohblog.com tidak seramai setahun kebelakang. Kini sepi, paling 1-3 komentar saja yang masuk.

Trafik CB juga menurun. Dulu bisa sampai 20-30 ribuan pageviews per hari. Kini di bawah 10 ribuan.

Tapi CB masih ngeblog. Minimal update postingan lama untuk bertempur kembali dengan postingan sejenis yang sudah menggeser posisi CB di Google.

Bagaimana, Anda juga masih ngeblog?

7 Ciri Template Blog SEO Friendly dan Ramah Pengguna

7 Ciri Template Blog SEO Friendly dan Ramah Pengguna

TEMPLATE blog tidak saja harus SEO Friendly (bersahabat dengan mesin pencari) agar mudah diidensk Google, tapi juga harus User Friendly (bersahabat dengan pengunjung).

Blog yang User Friendly akan disukai pembaca dan otomatis akan disukai juga oleh Google --karena mesin pencari terpopuler di dunia ini selalu berpihak kepada pengguna.

Dalam memilih blog, jangan fokus ke keren, bagus, atau indahnya, meski itu juga penting, namun yang terpenting adalah Fast Loading --cepat loadingnya! Ringan. Itu salah satu ciri template blog User Friendly.

Ciri-Ciri Template Blog SEO & User Friendly

1. Fast Loading

Ringan. Disebut juga Loading Time. Tampilannya cepat! Anda bisa menguji atau mengetahui kecepatan loading blog di GT Metrix. Rekomendasi perbaikannya juga nanti muncul di sana.

Menurut Google, idealnya kecepatan loading blog itu di bawah 4 detik! Menurut sebuah penelitian, sebanyak 75 % pengunjung tidak akan kembali lagi ke blog yang loadingnya lebih dari empat detik.

The speed at which your blog loads is critical to attracting more readers to your blog. If your blog takes a long time to load, many readers may leave your blog before they have the chance to read it.(Make Your Blog Load Faster!).

2. Memiliki Menu Navigasi & Link yang Baik

Good navigation. Blog harus memiliki navigasi menu atau internal link yang memudahkan pengunjung untuk mengeksplorasi isi blog.

Navigasi Menu diletakkan di posisi yang mudah dilihat user, misalnya di atas atau di bawah Header.

Internal link juga harus ada di sidebar blog, seperti Posting Terbau, Posting Terpopuler, dan Random Posts (Optional).

Di bawah tiap postingan "wajib" ada Related Posts untuk memandu pengunjung ke posting sejenis atau setema.

3. Social Share

Tombol Share ke Facebook, Twitter, Google Plus, dll wajib ada di bawah postingan untuk memudahkan user membagikan posting berkualitas di blog Anda ke media sosial.

Minimal buat kepentingan admin blog sendiri untuk share ke sosmednya.

4. Scannable!

Pembaca blog itu hakikatnya memindai (scanning), bukan membaca (reading). Makanya, di dunia online ada istilah scannable text, yakni teks yang mudah dipindai alias mudah dibaca dan dipahami.

Ciri-ciri blog yang user friendly a.l. menyajikan tulisan yang scannable, yakni:

• Ukuran huruf tidak terlalu kecil, juga tidak terlalu besar, antara 13px s.d. 16px, tergantung jenis huruf yang digunakan.
• Jenis huruf yang baik yaitu kelompok Sans-Serif, seperti Arial, Verdana, Tahoma, Helvetica. Hindari jenis huruf yang "indah" namun sulit dibaca di layar monitor.
• Menggunakan alinea/paragraf pendek. Idealnya maksimal 5 baris per alinea.
• Ada jarak antar-alinea. Istilahnya: White Space! Jangan bertumpuk tanpa jarak!
• Align left. Rata kiri, bukan justify. Rata kiri lebih mudah dibaca, terkesan rileks, dan menyisakan banyak ruang untuk istirahat mata. Align Text "Justify" alias rata kiri-kanan kesannya "formal", "kaku", mirip surat resmi, dan gaya media cetak.

5. Dominasi Biru atau Hitam

Termasuk Ciri-Ciri Template Blog User Friendly adalah dominasi warna hitam atau biru yang sudah familiar dengan user (UX).

Warna gelap seperti hitam/biru tidak menyilaukan mata, berbeda dengan merah, orange, dsb yang bikin mata "sakit".

Warna link, terutama dalam posting, hendaknya biru, sebagaimana link di Google dan Yahoo. Warna biru link sudah familiar dengan pengunjung alias user friendly.

6. Tidak Kumuh

Banyak blogger yang terlalu banyak "memainkan" warna di blognya. Akibatnya, blognya terkesan "kumuh". Gunakan template blog yang simple, minimalis, bersih, sehingga bikin nyaman user juga menjadikan blog Fast Loading.

7. Responsive!

Kini era mobile device. Banyak pengguna internet menggunakan HP atau SmartPhone. Maka, gunakan template responsive (mobile friendly) agar tampilan blog mampu "menyesuikan diri" (adaptif) dengan perangkat yang digunakan user.

Demikian 7 Ciri Template Blog User Friendly. Ada tambahan? Tampilan blog yang bagaimana yang Anda sukai?

Cek: Koleksi Template SEO & User Friendly

Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

Media sosial Linkedin menjadi salah salah satu sumber sinyal sosial untuk SEO blog, selain Facebook, Twitter, dan Youtube. Karenanya, blogger dianjurkan memiliki akun LinkedIn untuk share posting blog.

Setelah membuat akun, pasang pula tombol berbagi LinkedIn (Share Button) di bawah postingan. CB kasih panduannya berikut ini bagi yang belum pasang.

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

1. Tema > Edit HTML

2. Copas kode share to LinkedIn berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

Pilih satu kode:

Style 1:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Style 2 :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Style 3 :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
Save! Simpan template! 

Tombol berbagi ke LinkedIn sudah terpasang.

ALTERNATIF

Kode share ke LinkedIn berikut ini sudah digabungkan dengan kode share Twittr dan Facebook dengan tampilan seperti gambar berikut ini:

Pasang kode berikut ini di bawah <data:post.body/> yang kedua:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;https://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;margin-right:5px'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<div style='float:left;margin-left:8px'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
</b:if>

Save!

Demikian Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog untuk memudahkan share ke LinkedIn dan mengundang pengunjung. 

Good Luck & Happy Blogging! (contohblog.com).*

Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

Tombol Kembali ke Atas merupakan faktor seo tak langsung. Keberadaan Back To Top Button menjadikan blog jadi ramah pengguna (user friendly). Dari ramah pengguna itulah blog jadi seo.

Berikut ini kode Tombol Kembali ke Atas Murni CSS (Scroll Back To Top Button) Tanpa JavaScript dan cara pasangnya. Tampilan begini:

Cara Pasang:

1. Tema > Edit HTML
2. Simpan di atas kode ]]></b:skin>

.scrolltop-wrap {
  box-sizing: border-box;
  position: absolute;
  top: 12rem;
  right: 2rem;
  bottom: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
  fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
  fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
  fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
  fill: white;
}
@supports (-moz-appearance: meterbar) {
  .scrolltop-wrap {
    clip: rect(0, 3rem, auto, 0);
  }
}
.scrolltop-wrap a {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: -5rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: inline-block;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  outline: none;
  overflow: hidden;
}
.scrolltop-wrap a svg {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.scrolltop-wrap a svg path {
  transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media print {
  .scrolltop-wrap {
    display: none !important;
  }
}

3. Simpan di atas kode </body>

<div class="scrolltop-wrap">
    <a href="#" role="button" aria-label="Scroll to top">
        <svg viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
          <path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
            <path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
        </svg>
    </a>
  </div>

Tombol Kembali ke Atas dengan JavaScript

Kalo yang ini BtT menggunakan Javascript, tapi ringan kok!

1. Simpan kode berikut ini di atas kode ]]></b:skin>

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

2. Simpan di atas </body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Sumber
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
https://codepen.io/rolandtoth/pen/eMamVK

See the Pen
Pure CSS Scroll To Top by rolandtoth (@rolandtoth)
on CodePen.