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 Membuat Featured Post Dua Mode, Thumbnail Besar dan Kecil

Mode Thumbnail Besar

Mode Thumbnail Kecil


Cara Membuat Featured Post Dua Mode, Thumbnail Besar dan Kecil
Widget Featured Post salah satu fungsinya ialah untuk memberikan tampilan postingan berbeda dari postingan lainnya dan hanya tampil di halaman beranda saja, selain itu ini juga dapat disetting untuk menampilkan posting terbaru saja atau posting pilihan dari postingan lama atau disebut juga post unggulan yang akan ditampilkan di widget ini pada urutan paling atas halaman beranda. Pada Template Contempo widget ini memiliki thumbnail besar diantara posting lainnya dan pada Template Notable widget ini memiliki thumbnail yang sangat besar diantara thumbnail post lainnya yang juga besar.

Cara kerja Widget Featured Post Dua Mode ini sederhana, anda hanya perlu ke halaman Tata Letak, pilih Edit (icon pensil), dan jangan conteng gambar, jika gambar tidak di conteng tampilan thumbnailnya akan berubah jadi kecil, jika di conteng maka thumbnailnya akan berubah jadi besar.

Sesederhana itu, Barangkali ada yang suka dengan thumbnail besar dan ada juga yang menyukai yang kecil, ini yang mendorong saya membuat keduanya agar kita punya pilihan dari yang kita sukai dan ini saya beri julukan Widget Featured Post Dua Mode. Bagaimana cara membuatnya tidak usah bingung, cukup salin kode berikut dan pasang pada bagian <b:defaultmarkups> di Template Notable, selesai deh.

Namun sebelumnya anda harus mengubah sedikit yang ini, aslinya disana tertulis begini <b:includable id='heroPost'> maka ubah teks dari id "heroPost" menjadi "jaeyZona", itu saja. Tujuannya agar kode tidak bertabrakan karena kode includable yang akan saya bagikan ini juga bernama "heroPost".

Saya ulangi, Pada Template Notable dibagian <b:defaultmarkups> Cari <b:includable id='heroPost'> dan ubah nama id-nya menjadi "jaeyZona" lalu tempelkan kode berikut diatasnya, diatas yang anda ubah id-nya tadi yaitu yang ini, diatas ini <b:includable id='jaeyZona'>.

Selain kode juga saya sertakan css, css ini berfungsi untuk mengubah warna background, link, text, border, dll pada widget ini, jadi widget ini akan memiliki warna berbeda dari postingan lainnya namun secara default memiliki warna yang sama dengan posting lainnya, jika ingin mengubah warna bisa melalui pallet warna yang sudah disiapkan Blogger yaitu pada halaman Tema pilih "Sesuaikan".

Berikut ini kodenya, pasang css kebagian <b:skin> css dan pasang kode ke bagian <b:defaultmarkups>, namun mungkin banyak hal yang harus disesuaikan lagi terutama pada tampilan css .post-content bawaan/asli di Template Notable.

<!-- css -->
.FeaturedPost .post-outer-container{
box-shadow:0 1px 3px $(heropost.secondary.dropcap.color);
background:$(heropost.main.background.color)
}
.FeaturedPost .post-content{
padding-bottom:10px
}
.FeaturedPost .post-title-container, .FeaturedPost .post-title-container a{
color:$(heropost.main.title.color)
}
.FeaturedPost .post-header-container .byline.post-author, .FeaturedPost .post-header-container .byline.post-author a{
color:$(heropost.secondary.background.color)
}
.FeaturedPost .post-header-container .byline.post-timestamp, .FeaturedPost .post-header-container .byline.post-timestamp a{
color:$(heropost.secondary.text.color)
}
.FeaturedPost .post-body, .FeaturedPost .post-body a{
color:$(heropost.main.text.color)
}
.FeaturedPost .byline.post-comment-link, .FeaturedPost .byline.jump-link{
color:$(heropost.main.link.color);
background:$(heropost.main.button.color)
}
.FeaturedPost .snippet-thumbnail img, .FeaturedPost .snippet-thumbnails img{
border:1px solid $(heropost.secondary.button.color)
}
.FeaturedPost .post-content .comments-no-link{
color:$(heropost.main.background.color);
}
@media screen and (max-width:1168px){
body.feed-view .block-posts{
margin-left:calc((100% - 920px)/ 2);
margin-right:calc((100% - 920px)/ 2)
}
}
@media screen and (max-width:968px){
body.feed-view .block-posts{
margin-left:24px;
margin-right:24px
}
}
.post-content .snippet-thumbnails{
float:$(startSide);
border:1px solid $(item.separator.color);
background:$(feed.button.background.color);
margin:8px 1em 0 0;
max-height:128px;
max-width:128px
}
.snippet-thumbnails, .snippet-thumbnails img{
border-radius:8px
}

<!-- kode -->
        <b:includable id='heroPost'>
<div class='block-posts container'>
<b:with expr:value='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage' var='hasImage'>
<div class='post-outer-container'>
<div class='post-outer'>
<b:if cond='data:hasImage'>
<b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'>
              <a class='snippet-thumbnail' expr:href='data:post.url'>
                <b:if cond='data:post.featuredImage.isResizable'>
                  <span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                  <style>
                    @media (min-width: 1168px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 969px) and (max-width: 1167px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 601px) and (max-width: 968px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                    @media (max-width: 600px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).cssEscaped'/>);
                      }
                    }
                  </style>
                <b:else/>
                  <img expr:src='data:post.featuredImage'/>
                </b:if>
              </a>
              </b:if>
<div class='post-contents container'>
                  <b:if cond='(data:postDisplay.showTitle ?: true) and data:post.title != &quot;&quot;'>
            <div class='post-title-container'>
                    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
            </div>
                  </b:if>
<div class='post-header-container container'>
              <b:include name='headerByline'/>
</div>
<b:include cond='(data:postDisplay.showSnippet ?: true)' data='post' name='postBodySnippet'/>
<b:include data='post' name='postFooter'/>
</div><!-- end post-contents -->
</b:if><!-- hasimage -->
<b:if cond='!data:hasImage'>
<div class='post-content container'>
<div class='post-title-container'>
<b:include data='post' name='postTitle'/>
</div>
<div class='post-header-container container'>
<b:include name='headerByline'/>
</div>
<b:include data='post' name='snippetThumbnails'/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postFooter'/>
</div><!-- end post-content -->
</b:if><!-- nohasimage -->
</div>
</div>
</b:with>
</div>
        </b:includable>
                    <b:includable id='snippetThumbnails' var='post'>
              <div class='snippet-thumbnails shaker'>
                <b:include data='{
image: data:post.featuredImage,                                     imageSizes: [64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;128px&quot;
}' name='responsiveImage'/>
              </div>
</b:includable>

Atau download https://drive.google.com/file/d/14M8iF1Ypkg69ScArG5i-hSrfCqQmj2Ej/view?usp=drivesdk

Komentar

Popular Posts

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 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

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