Langsung ke konten utama

Highlight Post

Sejarah Kenapa 'K' Jadi Singkatan Ribu?

Saya pertama kali tau singkatan "K" ini sekitar 5 tahun lalu dan saya kira datang dari bahasa gaul dan ternyata ada sejarahnya yaitu berasal dari bahasa Yunani 'chilioi' yang berarti ribuan. 10K, 200K, 50K itu adalah angka-angka yang kerap kali ditemui ketika berbelanja. Tahukah Anda apa arti satuan 'K' di belakang angka tersebut? Huruf 'K' menjadi penting karena huruf itu merupakan pengganti ribu saat menyebutkan harga atau jumlah. Lalu, kenapa 'K' bisa mempunyai arti tersebut? Usut punya usut, Dikutip dari laman Merriam-Webster, satuan 'K' memiliki kepanjangan kilo. Kilo digunakan sebagai unit pengukuran dalam Sistem Satuan Internasional atau SI (Système international d'unités). Misalnya dalam mengukur jarak, 1 kilometer sama dengan 1.000 meter. Sedangkan untuk mengukur berat, 1 kilogram sama dengan 1.000 gram. Kata kilo berasal dari bahasa Yunani 'chilioi' yang berarti ribuan, digunakan untuk menyatakan banyak atau jamak.
💬

Cara Memasang Widget Follow By Blog dan Follow By Email dengan Style Modal Di Blogspot

Cara Memasang Widget Follow By Blog dan  Follow By Email dengan Style Modal Di Blogspot


Widget Follow By Blog adalah tombol ikuti yang terpasang di blog. Pengunjung sesama blogger dapat mengikuti blog kita dengan meklik tombol tersebut.

Widget Follow By Email adalah tombol ikuti melalui email. Tap tombol/button maka modal akan terbuka dengan kotak form tempat mengisi alamat email. Pengunjung siapapun dapat berlangganan posting terbaru di blog kita melalui email mereka dan akan terkirim secara otomatis ke email mereka serta dapat berhenti berlangganan kapanpun.

Sedangkan style modal adalah halaman tersembunyi dan bila tombol di klik maka modal berisi widget pengikut atau widget ikuti melalui email akan muncul mengapung di layar, tap tanda silang (×) atau tap di area transparan maka widget akan kembali tersembunyi. Style model sembunyi2ian ini atau disebut Modal marak digunakan di era smartphone ini bertujuan meminimalisir tampilan agar tidak terlalu tampak penuh dengan aneka widget. Contohnya ada dibagian footer paling bawah blog ini.

Di w3.scholl style modal ini ada dua jenis yaitu Modal Header yang bisa dipasang di atas atau sedikit ketengah dan Modal Bottom yang dipasang pada paling bawah blog. Untuk Template Contempo dan Notable saya memilih menggunakan Modal Bottom karena pada bawaan template tersebut sudah memiliki Modal Header.

Cara Memasang Widget Pengikut dengan Style Modal Di Blogspot ini cukup sederhana hanya perlu menambahkan css, widget dan kode js berikut.

1. Pasang css kebagian css.

2. Pasang kedua buah widget ke bagian footer dalam Template. 

2a. Pasang Widget Follow By Email kedalam section lain, jangan masukkan ke section milik Widget Follow By Email.

2b. Widget Follow By Blog ini dibalut oleh tag section jadi pastikan memasangnya dengan benar agar tidak error. Letakkan sebelum tag <section> atau setelah </section> dari section lain.

Dalam footer biasanya terdapat beberapa section dan widget. Sebagai contoh misalnya kondisi format footer seperti berikut maka tempatkan widget follow blog di area yang saya beri angka, jangan dalam section karena tidak boleh memasukkan tag section kedalam section lain. Begitu juga widget tidak boleh memasukkan widget kedalam widget.

<footer>
1
<section>
<widget></widget>
<widget>Pasang widget follow email disini</widget>
</section>
2
<section>
<widget></widget>
<widget>Atau Pasang widget follow email disini</widget>
</section>
3
Pasang section dan widget follow blog disini.
</footer>

Mungkin ada pertanyaan mengapa widget follow by email tidak dimasukkan saja ke section tempat widget follow by blog ditempatkan?

Jawabannya karena widget follow by blog memerlukan section khusus untuk dirinya sendiri dan juga kode js dan css-nya memiliki susunan yang mirip-mirip sehingga jika disatukan tidak akan berfungsi.

Atau pertanyaan lain mengapa widget follow by email tidak diberi section tersendiri juga?

Jawabannya: Iya memang sebaiknya begitu hanya saja saya terlanjur membuatnya menjadi seperti ini.

3. Pasang kode JS ke paling bawah diatas </body> dalam Template.

4. Pasang button berikut ini dimanapun yang diinginkan. Button inilah yang jika di tap akan membuka Modal menampilkan Widget Pengikut atau Widget Ikuti Melalui Email.
<button id='follower' class='follower'>Follow</button>
<button id='subscriber' class='subscriber'>Subscribe</button>

Catatan: 
1. Follow By Email harus sudah diaktifkan atau terkoneksi dengan Feedburner, jika belum maka modal tidak akan berfungsi dan jika tetap tidak berfungsi maka pergi ke Tata Letak lalu tap icon pensil selanjutnya klik simpan. Kondisi semacam ini biasa terjadi jika baru pertama kali mengaktifkan widget ini di Blog. 
2. Sesuaikan warna css berikut ini dengan warna yang ada di Template, jika tidak maka css akan error.
3. Kode dalam posting ini bisa saja berubah dengan sendirinya tanpa sepengetahuan saya jadi boleh juga di download disini. https://drive.google.com/file/d/14Z72jIoC2AJdtGaos8bzxvLDKNR4Jon9/view?usp=drivesdk
4. Demikian dan kalau tak keberatan ikuti juga blog ini ya, Selamat mencoba!

<!-- CSS -->

button.follower, .button.subscriber{
margin:0;
padding:0;
background-color:inherit;
border:none;
outline:none;
font-style:normal
}
.subscribers, .followblog{
visibility:hidden;
display:block;
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
-webkit-animation-name:fadeIn;
-webkit-animation-duration:0.4s;
animation-name:fadeIn;
animation-duration:0.4s;
}
.modal-content, .followerss{
position:fixed;
bottom:0;
width:100%;
max-height:50%;
-webkit-animation-name:slideIn;
-webkit-animation-duration:0.4s;
animation-name:slideIn;
animation-duration:0.4s
}
.modal-header, .modal-footer, .Followers h2.title{
margin:0;
padding:10px 0;
text-align:center;
color:$(footers.text.color);
background:$(footers.background.color)
}
.modal-title, .Followers h2.title{
font-size:24px;
text-align:center
}
.modal-body, .Followers .widget-content{
color:$(footers.background.color);
background:$(footers.text.color);
margin:0
}
.modal-body{
text-align:center;
padding:10px 0
}
.Followers .widget-content{
padding:15px 28px 8em 30px
}
.modal-text{
padding:7px 5px;
color:$(footers.background.color);
border:solid 2px $(footers.background.color)
}
.modal-submit{
padding:7px 5px;
color:$(footers.link.color);
background:$(footers.background.color)
}
.modalclose{
margin:5px;
padding:5px;
color:$(footers.text.color);
text-align:center;
font-size:28px;
font-weight:bold;
}
.modalclose:hover, .modalclose:focus{
color:$(footers.link.color);
text-decoration:none;
cursor:pointer;
}
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}
@keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}

<!-- Widget Follow By Email -->

        <b:widget id='FollowByEmail2' locked='true' title='Follow by Email' type='FollowByEmail' version='2' visible='true'>
          <b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
          <b:includable id='content'>
  <div class='widget-content'>
<div class='subscribers' id='subscribers'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
</div>
    <div class='modal-body'>
      <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
        <input autocomplete='off' class='modal-text' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
        <input class='modal-submit' expr:value='data:messages.getEmailNotifications' type='submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
<div class='modal-footer'>
<span class='modalclose'>&amp;times;</span>
</div>
</div>
</div>
  </div>
</b:includable>
        </b:widget>

<!-- Widget Follow By Blog -->

<div class='followblog' id='followblog'>
<b:section class='followerss' id='followerss' name='Follow Blog' showaddelement='false'>
        <b:widget id='Followers1' locked='true' title='Pengikut Blog' type='Followers' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='borderColorTransparent'>true</b:widget-setting>
            <b:widget-setting name='useTemplateDefaultStyles'>true</b:widget-setting>
            <b:widget-setting name='contentSecondaryTextColor'>#000000</b:widget-setting>
            <b:widget-setting name='contentHeadlineColor'>#000000</b:widget-setting>
            <b:widget-setting name='endcapTextColor'>#292929</b:widget-setting>
            <b:widget-setting name='contentTextColor'>#292929</b:widget-setting>
            <b:widget-setting name='contentSecondaryLinkColor'>#FFFFFF</b:widget-setting>
            <b:widget-setting name='endcapLinkColor'>#25a186</b:widget-setting>
            <b:widget-setting name='contentLinkColor'>#25a186</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot; and data:codeSnippet != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
      <b:if cond='data:codeSnippet != &quot;&quot;'>
        <div style='margin-right:2px;'>
          <data:codeSnippet/>
        </div>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>
</b:section>
</div>

<!-- Kode JS -->

<script>//<![CDATA[ 
var followblog = document.getElementById("followblog");
var follow = document.getElementById("follower");
var subscribers = document.getElementById("subscribers");
var subscribe = document.getElementById("subscriber");
var span = document.getElementsByClassName("modalclose")[0];
follow.onclick = function() {
followblog.style.visibility = "visible";
}
subscribe.onclick = function() {
subscribers.style.visibility = "visible";
}
span.onclick = function() {
subscribers.style.visibility = "hidden";
}
window.onclick = function(event) {
if (event.target == followblog) {
followblog.style.visibility = "hidden";
}
if (event.target == subscribers) {
subscribers.style.visibility = "hidden";
}
}
//]]></script>

Komentar

Popular Posts

Cara Membuat Efek Video Orang Menghilang, Pindah Tempat, atau Terbang

Beberapa tips dan trik berikut ini saya ketahui dari menonton di TV yang kemudian saya tulis disini yaitu cara membuat efek video orang yang seolah terbang, pindah tempat, dan menghilang seperti magic atau efek di film. Lumayan sebagai ajang kreasi buat yang hobi share video di medsos. Siapa tau dengan membaca ini bisa membuka inspirasi untuk menemukan hal yang lebih baru lagi daripada ini. 1. Cara membuat video orang yang seolah terbang. Caranya silakan buat video anda sedang melompat-lompat kedepan beberapa kali seperti Kanguru. Hasil video rekaman dari melompat itu kemudian di edit dan dipotong menggunakan aplikasi pada bagian kaki yang menapak ketanah lalu gabungkan kembali hasil bagian-bagian potongan video yang "tanpa kaki" tersebut dan lihat hasilnya tampak seperti seolah terbang. Itu karena kaki yang menapak ketanah sudah di potong menggunakan aplikasi jadi tampak seperti sedang melompat/terbang. 2. Cara membuat video orang yang seolah pindah tempat atau mengh

Halaman Alternatif dengan Tag Kanonis yang tepat

Halaman alternatif dengan tag kanonis yang tepat dengan Status: Dikecualikan. Kurang lebih begitulah kalimatnya dari cakupan data blog kita jika dilihat di Search Console. Salah satu penyebabnya adalah komentar di blog. Dari misalnya url postingannya begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html Berubah menjadi begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html?showComment=1554698065783 Semakin banyak komentar dipostingan maka semakin banyak pula url semacam itu dengan ID berupa angka yang berbeda2 yang memicu semakin banyak "Halaman alternatif dengan tag kanonis yang tepat, Status: Dikecualikan" di Search Console. Pada dasarnya url beranak pinak dan berubah2 semacam itu kurang baik buat Seo blog jika tidak dicegah dengan "tag kanonis". Tapi tenang itu tidak membahayakan blog di mesin pencari karena hal ini sudah ditangani oleh Blogger yang artinya disetiap duplikat komentar semacam

Cara kembalikan Pengaturan "Aksi lengkap memakai" ke Default di Android

Terkadang saat akan membuka suatu file misal ketika membuka video atau lainnya akan muncul tulisan "Aksi lengkap memakai" dan kita diminta memilih "Selalu" atau "Sekali saja". Kalau memilih Selalu, info tulisan tersebut tidak akan muncul lagi dan video akan selalu diputar dengan aplikasi pemutar video yang telah kita pilih. Namun, mungkin kita memiliki aplikasi pemutar video lebih dari satu dan ingin menggunakan pemutar video yang lainnya tapi karena telah memilih "Selalu" maka tidak bisa lagi. Untuk itu maka kita harus menghapus "Hapus Default" atau mengembalikan pengaturan tersebut seperti semula agar saat ingin memutar video akan muncul "Aksi lengkap memakai" dan kita bisa memilih ingin memutar video dengan pemutar video yang mana dari beberapa pemutar video yang ada. Haha.. Jujur saja saya pernah kesal lho gara2 itu. Sebetulnya petunjuknya sudah ada saat akan memilih "Selalu" tapi karena terburu2 biasanya tidak s