Lumafusion vs Kinemaster editor video buat tablet Android dan iPad mana yang lebih baik

Jika kita menggunakan tablet dan ipad sebagai pengganti laptop dan tentunya kita juga tahu bahwa tablet ternyata dapat menjalankan aplikasi aplikasi perkantoran yang nota bene buat berproduktifitas, maka akan tiba masanya kita mempertanyakan kemampuannya buat editing video dan gambar.

Mari kita lupakan editing gambar karena aplikasi yang tersedia baik di store Android maupun di store iOS dan iPadOS telah tersedia bergudang gudang banyaknya, dan rata rata aplikasinya juga sudah teruji sangat powerful. Yang menjadi topik utama kita pada tulisan ini adalah editor videonya. Yakni editor yang powerful dan sanggup menggantikan editor editor video yang terdapat di laptop PC pada umumnya sebut saja adobe premier yang dapat berjalan baik di laptop Windows maupun di Macbook.

Nah ada! Di tablet Android kita dapat menggunakan editor video Kinemaster, sedangkan di iPad kita dapat menggunakan lumaFusion.  Kedua aplikasi inilah yang paling mendekati kinerjanya editor video sekelas adobe premier. akan tetapi manakah yang paling worthed?

Beruntungnya lagi, lumafusion kini telah hadir di perangkat perangkat hape dan tablet Android.

Antar muka 

LumaFusion

Lumafusion memiliki tampilan dan antar muka yang sedikit rumit, tool dan menu berserakan di atas, di bawah dan di sping, tampilannya mirip aplikasi editor video di PC. Tapi sekali Anda menguasainya, anda tidak bisa berpisah lagi dengannya. Beruntungnya ketika tulisan ini di tulis ulang, lumafusion telah hadir diperangkat perangkat Android dan dapat di download diperangkat hape atau tablet Android Anda.

Kita tidak sedang tutorial menggunakan lumafusin akan tetapi Lumafusion ini kini, fiturnya sudah meningkat tajam dan memiliki  hampir semua keunggulan editor video professional, contohnya:

Pertama, LumaFusion 2.0 kini mendukung penggunaan second display, sehingga mampu memaksimalkan penggunaan layar eksternal. Menariknya lagi, jika fitur ini digabung dengan SideCar iPadOS terbaru, mampu memudahkan pekerjaan seorang editor video yang kerap berpergian. Saya merasa ini adalah studio dan editor video mobile yang paling powerful pada saat ini sayangnya belum ada versi Androidnya.

Kedua, LumaFusion 2.0 kini melipatgandakan jumlah track media yang dapat ditampung, dari 6 menjadi 12. keduabelas Track media tersebut terbagi menjadi 6 layer video/audio dan 6 layer audio saja, artinya pengguna dapat memaksimalkan audio hingga 12 unit.

Ketiga, pengguna kini bisa menghubungkan LumaFusion pada SSD GNARBOX 2.0 sebagai media penyimpanan, sangat membantu untuk mengedit file dengan ukuran besar.

Keempat, LumaFusion 2.0 juga dapat mengambil file dari Photos Library dan menggabungkannya pada LumaFusion 2.0.

Dan masih banyak lagi keunggulan Lumafusion.

Catatan: Lumafusion lebih maksimal jika di gunakan melalui tablet android dan iPad ketimbang iPhone dan smartphone Android, karena pada iphone dan smartphone beberapa fitur terpangkas, misalnya efek greenscreen.

KineMaster

Sedangkan Kinemaster memiliki tampilan yang cukup simple dan bagus, dan ini mudah sekali di gunakan sebagai editing video. Tinggal buka aplikasi kinemaster.

Pertama kinemaster ini telah memiliki pilihan ratio layar video yang akan kita buat dari ukuran standar video yang telah di sediakan mulai dari 16:9, 9:16, 1:1, 4:3, 3:4, 4:5, dan 2.35:1. Kita juga dapat mengatur tampilan gambar menjadi fit, fill dan acak.

Kedua kita dapat menambahkan layar dan menambahkan media utama berupa photo dan video ke dalam layer, menambahkan elemen, lagu teks, animasi dll. Walaupun ini adalah standar editor video namun ini sangat baik managemennya jika dibanding dengan editor standar video editor lain di hape dan tablet Android.

Yang ketiga, tombol atau tool kinerja master itu minimalis sehingga antar muka aplikasi ini pada saat di buka juga tampak sekali minimalis jadi kesan pertamanya tidak membuat bingung pengguna. Misalnya jika ingin menambahkan media video dan gambar ke dalam timeline pada layer tinggal klik satu tombol maka akan muncul semua tool yang yang kita butuhkan, sebut saja gambar, efek, emoticon, teks dll.

Yang ke empat merekam suara dan langsung menyingkronkannya ke gambar atau video yang telah di edit. Fitur fitur dasar editing suara pada aplikasi ini memang tidak selengkap Adobe premiere akan tetapi ia sangatlah berguna buat edit video secara mobile terutama pada saat perjalanan dan tidak mungkin mengangkut studio kalian.

Catatan, kinemaster maksimal dipergunakan baik melalui tablet mauoun hape, seluruh fitur fiturnya dapat berjalan pada keduanya.

Lalu mana yang lebih unggul, di antara keduanya? Sebelum menilai lebih baik kita bahas perbedaannya meskipun sama sama berstatus sebagai editor video premium.

Pertama pada awalnya Lumafusion hanya berjalan di iOS dan iPadOS artinya ia hanya dapat berjalan diperangkat perangkat buatan apple tersebut. Sedangkan kinemaster dapat berjalan di perangkat buatan Apple dan Android sekaligus untuk poin ini kinemaster adalah pemenangnya. 

Akan tetapi kini nilainya berubah ketika Lumafusion telah hadir di perangkat perangkat Android, ketika ini terjadi Lumafusion adalah pemenang mutlak pada Poin ini, yakni poin harga yang dapat Anda miliki dalam sekali beli seharga 300 ribuan untuk dipakai seumur hidup. (Dengan catatan Kinemaster belum membuat peningkatan yang signifikan terhadap fitur fitur aplikasi editor videonya.)

kedua fitur dan performa Lumafusion lebih lengkap dan lebih stabil, ini adalah editor studio video paling lengkap untuk dengan dukungan tool pro yang lebih baik buat perangkat mobile, boleh dikatakan ia adalah versi mobile dari Adobe Premiere. Sebaliknya Kinemaster lebih sederhana namun telah memenuhi semua kebutuhan standar pengeditan video. Untuk performa dan kelengkapan fitur rasanya Lumafusion adalah pemenangnya.

ketiga harga. Lumafusion di beli dengan hanya satu kali membayar, sedangkan Kinemaster harus berlangganan. Bayangkan dan bandingkan harganya sebagai berikut:

Beli Lumafusion 300 ribuan sekali bayar untuk dipergunakan selamanya dan selama itu kita akan mendapatkan update produk editor video ini jika update tersedia.

Sedangkan jika menggunakan Kinemaster premium kita harus berlanggan, yakni 75 ribu perbulan atau 469 ribu pertahun. Kalian dapat menggunakan Lumafusion selama sepuluh tahun dengan duit 439 ribu namun jika menggunakan Kinemaster selama sepuluh tahun kalian harus mengeluarkan uang sebesar: RP. 4.390.000,-!!! Dan menurut saya jika kalian menggunakan iPad dan iPhone lebih baik hindari Kine master. Soalnya sangat tidak worth it! Sekali lagi ini adalah pertimbangan harga. Pada setiap perangkat Android kini Lumafusion di patok dengan harga 300 ribuan, jauh lebih murah dibanding pada perangkat Apple, yakni iOS pada iPhone dan iPadOS pada iPad.

Lumafusion maksimal pada perangkat besar dengan spek tinggi, sedangkan pada hape beberapa fitur terpangkas. Jika kalian memiliki iPad dan tablet Android, lumafusion sangat pas buat kalian. 

Sedangkan kinemaster sudah sedari dulu maksimal di kedua perangkat baik smartphone, maupun tablet dengan antarmuka sederhana.

SHARE YA:

PANDUAN PENGGUNAAN TEMPLATE CONTEMPO ORIGINAL STYLE TERBARU

Contempo adalah template re-desain terbaru berbasis contempo asli, namun kini stylenya (tampilannya) kami rombak habis. Dan jangan kuatir meskipun telah di rombak, bukan berarti tool 'customize' via Blogger Designer tidak berjalan lagi. Fitur ini tetap seperti aslinya. Tidak seperti sebelumnya jika kalian ingin menambahkan atau merobah judul dan link menu harus melalui halaman edit HTML, pada hasil kerja terbaru kami menyadari kesulitan kebanyakan pengguna:  Tidak ingin mengedit template melalui editor HTML.

• LIHAT CONTOH
• DOWNLOAD

1. MENGEDIT, MENAMBAHKAN JUDUL DAN LINK MENU NAVIGASI

Nah contempo original style memiliki opsi widget, jika kalian ingin menambahkan judul dan link pada menu navigasi di header blog cukup dengan cara mengedit widget page atau widget halaman. 

Caranya sama dengan cara mengedit widget halaman (page)  pada template default contempo asli:

1. Masuk ke pengaturan Blogger 
2. Pilih layout atau tataletak. 
3. Tambahkan atau edit widget halaman (page)  atas. 
4. Jangan isi judul (kosongkan saja)  klik tambahkan link eksternal. 
5. Akan muncul dua kolom,  kolom pertama isi dengan JUDUL atau NAMA menu. Sedangkan kolom di bawahnya isikan dengan link sesuai dengan judul berdasarkan pengelompokan label blog. 
6. Ulangi sampai dirasa menunya cukup. 

Perhatikan gambar yang tangkapan layar hape saya (mode landscape) saya mengedit blog melalui hape oppo A83 layar 5.5" :

Jadi mudah sekali,  bukan?  Tidak perlu lagi pusing melakukan edit link menu melalui opsi edit HTML Blogger. Silahkan download dan modifikasi templatenya... 

2. MENAMBAHKAN MENU PADA SIDEBAR.

Jika kalian ingin menambahkan navigasi pada bagian sidebar template contempo, maka tinggal masuk ke pengaturan blogger.

1. Setelah masuk kepengaturan blogger pilih layout atau tataletak.
2. Pilih/klik widget 'Tambahkan HTML/Javascript' pada bagian sidebar. 
3. Dan ketika blanko widget terbuka isikan bagian kolom judul dengan nama: MENU.
4. Lalu isikan blanko bagian bawah dengan kode berikut:

<style>

body {

  margin: 0;

  font-family: "Lato", sans-serif;

}

.sidebar {

  margin: 0;

  padding: 0;

  width: 300px;

  background-color: #f0f0f0;

  position: fixed;

  height: auto;

  overflow: auto;

}

.sidebar a {

  display: block;

  color: black;

  padding: 16px;

  text-decoration: none;

}

 

.sidebar a.active {

  background-color: #0404B4;

  color: white;

}

.sidebar a:hover:not(.active) {

  background-color: #555;

  color: white;

}

div.content {

  margin-left: 200px;

  padding: 1px 16px;

  height: 1000px;

}

@media screen and (max-width: 700px) {

  .sidebar {

    width: 100%;

    height: auto;

    position: relative;

  }

  .sidebar a {float: left;}

  div.content {margin-left: 0;}

}

@media screen and (max-width: 400px) {

  .sidebar a {

    text-align: center;

    float: none;

  }

}

</style>

<div class="sidebar">

  <a class="active" href="/">Home</a>

  <a href="#blog">Blog</a>

  <a href="#kontak">Kontak</a>

  <a href="#perihal">Perihal</a>

</div>

Kalian dapat menghapus semua tulisan warna merah dan menggantinya dengan link artikel yang kalian inginkan berdasarkan label blog, namun kalian perlu merobah judul menu yang berwarna biru menjadi judul kalian sendiri.

Gambar: widget blogger HTML/Javascript

Sebagai catatan: Jika kalian sudah menambahkan gagdet/widget di atas, sebaiknya tidak menambahkan banyak widget lain kecuali widget label dan pengikut karena ke dua widget mampu meningkatkan performa blog di mata mesin pencarian. Widget kami di atas bisa di tempatkan pada template soho dengan cara yang sama, namun tidak cocok untuk dua template lainnya: Notable dan Emporio.

Contoh DEMO dalam bentuk video:

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

PANDUAN MEROMBAK TEMPLATE BLOGGER SOHO

SOHO adalah template terbaru, template ini dapat di rombak dengan mudah karena memiliki pengaturan CSS yang melimpah.

Dalam kesempatan ini saya akan memberikan 6 trik merobah tampilan template Soho, yakni:

ilustrasi template blogger soho redesain

1. Menambahkan photo profile penulis di atas setiap postingan
2. Merobah tampilan ikon menu pencarian menjadi kaca pembesar pada semua ukuran layar. Secara default ikon kaca pembesar hanya tampil pada layar ponsel, sedangkan pada ukuran layar PC laptop apalagi desktop tampilannya akan menjadi kata: 'Search'
3. Mengatur margin konten, lebar konten, dan lebar sidebar
4. Merobah tombol 'Subscribe' atau 'Langganan' menjadi berbentuk ikon Amplop Surat.
5. Cara menghilangkan background gambar kucing pada bagian header template.
6. Cara menghilangkan Judul Recent Posts

Tiga hal diatas cukup signifikan dapat merobah tampilan template SOHO kita menjadi lebih berwibawa dan berkarakter! Mari kita mulai.

1. MENAMBAHKAN PHOTO PROFILE DI BAGIAN ATAS SETIAP HALAMAN POSTINGAN

Ini cocok untuk halaman blog pribadi (personal). Profile yang di sertai nama dan gambar penulis di atas setiap postingan akan meningkatkan kredibilitas sebuah halaman. Seperti yang kalian ketahui, diantara 4 template terbaru yang benar benar memiliki fitur image atau gambar profile penulis di atas setiap postingan hanyalah template notable seperti yang sedang dipakai oleh editblogtema sekarang, dan dengan sedikit pengaturan pada bagian CSS maka gambar profile penulisnya tampil di bagian atas dalam bingkai bulat!

Tiga template lainnya seperti contempo, soho dan emporio tidak memiliki fitur tersebut. Jadi kita harus menyiasatinya. Sekarang kita mencobanya pada template SOHO. 

Gunakan blog percobaan kalian dan masuk kepengaturan blogger:

• Pilih tema
• Klik titik tiga
• Pada menu yang muncul, pilih Edit HTML
  

Langkah pertama: Tambahkan CSS:

(jika kesulitan gunakan kuncipada keyboard dengan cara tekan CTRL+F secara bersamaan dan ketikan kode yang di cari pada kotak pencarian yang muncul):

Perhatikan gambar di atas. Pada halaman editor HTML blogger cari kode </head> dan tambahkan kode CSS berikut tepat di atasnya.

<style> .avatar {
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>

Kalian dapat merobah dimensi atau ukuran gambar dengan  merobah angka atau nilai pada bagian kode yang saya merahkan, misal: 

width: 35px;

height: 35px;

Maka ukuran gambar avatar kalian akan membesar seukuran itu. 

Langkah Kedua: Tambahkan HTML:

Masih pada halaman editor HTML blogger, dan dengan cara yang sama cari kode berikut:

<span class='fn'>

Pada template SOHO ada terdapat tiga kode yang sama kalian pilih kode yang kedua, karena kode kedua ini berada beberapa baris diatas kode  <data:post.body/> yang hanya satu satunya di dalam template SOHO, lihat posisinya pada gambar berikut:

posisi kode pada halaman editor HTML blogger

Tambahkan kode berikut tepat di bawah kode <span class='fn'> tadi:

 <img alt='#' style='width:30px'/>  

Untuk menampilkan gambar di atas postingan tersebut kalian harus mengunjungi profile blogger diri kalian sendiri seperti contoh :DISINI.

1. Klik 'Tampilkan Ukuran penuh'
2. Setelah di klik akan muncul jendela baru gambar ukuran penuh dengan dominasi latar hitam, copy URL pada bar di atas jendela halaman tersebut. Perhatikan gambar:

cara mengambil URL gambar profile blogger sendiri

Lalu kembali ke kode <img alt='#' style='width:30px'/>   di atas, hapus tanda pagar merah yang di kurung oleh '' (koma) dan pastekan kode yang kalian copy tadi untuk menggantikannya jadi bentuknya akan tampak sebagai berikut:

<img alt='https://1.bp.blogspot.com/-KGgKHvgCwEw/XFDj7Msu-3I/AAAAAAAAACE/-xUBRMqjWcg_xAC4Y61P3keke8QxYVqnACK4BGAYYCw/s113/steward.jpg' style='width:30px'/>

Save template KLIK dan Lihat DEMO-nya 

2. CARA MENETAPKAN IKON KACA PEMBESAR UNTUK PENCARIAN DI SEGALA UKURAN LAYAR PERANGKAT.

Soho dan Notable memiliki dua tampilan menu pencarian pada setiap ukuan layar yang berbeda. Untuk ukuran layar hape ia tampil dengan ikon kaca pembesar, sedangkan untuk ukuran layar PC-Dekstop dan Laptop dia tampil dengan kata 'Search' agar ia tampil hanya dengan ikon kaca pembesar maka kita harus merobah pengaturan atau deklarasi bagian CSS-nya. Nah caranya sama dengan cara diatas, kalian harus masuk ke bagian editor HTML, cari kode CSS berikut:

.search-expand-text{

Di bawah kodenya ada perintah berikut:

.search-expand-text{
display: block
}

Ganti tulisan block menjadi: none.

Ada dua kode serupa:

.search-expand-text{
display:block
}

Jika kode dibawahnya mendeklarasikan block rubah menjadi none 

Save template.

3. MENGATUR MARGIN KONTEN

Walaupun pengaturannya mudah kaerna dapat dilakukan tanpa melalui halaman editor HTML blogger, namun banyan juga yang tidak mengerti bahwa margin penting agar tampilan halaman blog SOHO tidak kocar kacir pada ukuran layar yang berbeda beda. 

• Masuk ke pengaturan/Dasbor blogger
• Pilih Tema
• Klik Sesuaikan (atau Customize)
• Setelah masuk ke halaman Desainer Tema Blogger, pilih 'Lanjutan'
• Pilih lebar

Di sana akan tampil 3 pilihan pengaturan lebar:

1. Lebar sidebar (saya atur 284px)
2. Lebar konten (saya atur 990px)
3. Margin konten (saya atur maksimal 1000px)

Perhatikan petunjuk gambar berikut di bawah ini:

pengaturan lebar margin konten template soho

Setelah itu SAVE template. Selesai.

4. MERUBAH TOMBOL SUBSCRIBE BAWAAN MENJADI AMPLOP SURAT

Langkah pertama:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Tekan tombol 'Sesuaikan'
4. Pilih 'Lanjutan'
5. Pada muncul yang dikanan scroll hingga ke bawah dan pilih 'Tambahkan CSS'

Kotak Blanko Tambahkan CSS

Setelah muncul kotak blanko kosong, lalu copy kode CSS berikut:

.subscribe-button{
background:none;
border:0;
margin:0;
outline:0;
padding:0;
color:white;
cursor:pointer;
display:inline-block;
font:$(body.action.font.small);
line-height:20px;
margin:0;
text-transform:uppercase;
word-break:normal
}

.subscribe-button{
border: 0;
margin:0;
outline:0;
padding:0;
color:white;
font:$(body.action.font.small);
line-height:20px;
margin: 1;
background: none;
}

Langkah kedua:

Masih di dalam halaman editor HTML cari kode berikut:

 <button class='subscribe-button'><b:eval expr='data:messages.subscribe'/></button>

Yang perlu kalian ketahui kode yang saya merahkan adalah adalah kode tombol yang akan muncul mempresentasikan 'Langganan' atau 'Subscribe' secara default. Kalian bisa menghapusnya dan menggantinya dengan kata kata, Misal: 'Kirim Email' dsb. Akan tetapi jika kalian ingin ia berbentuk ikon amplop,  maka kalian harus menghapusnya dan lalu menggantinya dengan kode ikon SVG berikut:

<svg style="width:34px;height:34px" viewBox="0 0 24 24">
<path fill="brown" d="M22 20H18V23L13 18.5L18 14V17H22V20M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H11.35A5.8 5.8 0 0 1 11 18A6 6 0 0 1 22 14.69V6A2 2 0 0 0 20 4M20 8L12 13L4 8V6L12 11L20 6Z" />
</svg>

Agar warna amplop sesuai dengan selera kalian, kalian dapat merobah deklarasi warna 'brown' menjadi yellow, red, black dst.

 5. TRIK MENYEMBUNYIKAN DAN ATAU MENGHAPUS BACKGROUND GAMBAR "KUCING" PADA HEADER TEMPLATE SOHO

1. Masuk kepengaturan blogger
2. Pilih tema/theme
3. Pilih "edit HTML"
4. cari kode berikut:

 body.homepage-view .hero-image.has-image{
background:$(body.background);
background-attachment:scroll;
background-color:$(body.background.color);
background-size:cover;
height:0vw;
max-height:65.5vh;
min-height:75px;
width:100%
}

Robah nilai yang saya merahkan menjadi 0 (nol) untuk menghilangkan space atau ruang tersisa yang meninggalkan jarak dari header ke konten. Namun jika ingin menghapus bukan menyembunyikannya maka setelah melalui langkah berikut anda harus masuk kembali kepengaturan blog:

1. Pilih tema/theme
2. Pilih "sesuaikan"
3. Pilih latar belakang atau background
4. Setelah muncul kotak gambar dibawahnya pilih "hapus background"
5. Save tema 

6. Menghilangkan Judul Recent Posts?

Judul ini tampil pada homepage dan menurut saya mengurangi kerapian tampilan blog pada pandangan pertama. Untuk menghilangkannya, masuk kepengaturan>pilih tema>pilih edit HTML, di dalam editor HTML blogger cari 2 buah  kode berikut :

Letaknya ada dibawah:

 <!-- Display title on homepage -->
<b:if cond='data:posts.any and data:view.isHomepage'>
<h3 class='title'><data:messages.latestPosts/></h3>

Hapus kode yang di merahkan ya...
Selanjutnya cari kode kedua yang sama, letaknya:

    <!-- Display title on homepage -->
          <b:if cond='data:posts.any and data:view.isHomepage'>
            <h3 class='title'><data:messages.latestPosts/></h3>

Hapus kode yang di warnai merah saja. Save tema.

Save template, sekali lagi lihat DEMO

Jika kalian masih ingin menambahkan related post, breadcrumbs dll kalian bisa mendapatkannya melalui blog ini...

SHARE YA:

Revisi cara menambahkan related posts sederhana ke dalam blogger

Revisi tutorial singkat ini kami lakukan karena kami telah mengecewakan seorang pengunjung yang sangat berharga, juga sebagai bentuk permohonan maaf kami atas kekacauan yang telah terjadi akibat 'kesalahan dan kelalaian instruksi' dalam menuliskan petunjuk yang bisa saja berakibat fatal bagi sebuah template (tergantung seberapa penting pengeditan dilakukan). Kepada Mbak Nila Minata dengan setulusnya kami menyampaikan permintaan maaf.

Related posts simpel sederhana - ilustrasi by editblogtema.

Kedepannya kami berjanji akan sangat berhati hati terhadap jenis konten yang akan kami suguhkan. Kami juga sangat ber-terimakasih karena kunjungan Mbak Minata telah secara langsung maupun tidak langsung telah  memberikan kritik positif dan perbaikan yang sangat berharga.

Related posts pada blogger mampu meningkatkan performa blog, membuat pengunjung berada lebih lama membaca konten blog dan mengurangi efek bounching (pentalan) akan tetapi tentu saja dengan related post yang bagus cepat dan ringan.

Related posts simpel by editblogtema.

Dan ini dapat di terapkan dengan baik pada template bawaan (default) terbaru blogger seperti Contempo, SOHO, Emporio dan Notable atau template template blogger yang lebih tua.

Artinya dengan sederhana setiap orang dapat membuat template premium mereka sendiri setahap demi setahap. 

Untuk menjadi cepat dan ringan segalanya harus sederhana. namun sederhana bukan berarti tanpa style. Mari kita langsung saja memulai pembuatannya:

1. Masuk kepengaturan blogger, pilih tema, pilih edit HTML

2. Pada halaman editor HTML (yang terdiri dari kode kode xml, HTML, CSS dan Javascript, cari kode </head> lalu letakan kode berikut di bawah tepat diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #FF69B4;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 15px;
color: #333;
text-transform: capitalize;
border-bottom:1px dotted #FF69B4;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #f0f0f0;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #F8F8FF;
border-left: 5px solid #FF69B4;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

3. Masih di dalam halaman editor HTML blogger cari kode berikut: <data:post.body/> jika ada terdapat beberapa buah pilih yang kedua atau yang ketiga (sampai ketemu yang tepat) dan letakan kode di bawah ini tepat di atasnya  maaf salah (editor redaksi), maksud Anissa tepat dibawah kode <data:post.body/> yang disebutkan tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href='https://www.editblogtema.net/2018/11/related-post-keren-generik-yang-sangat.html' rel='nofollow' style='font-size: 9px; color: #CECECE; float: right;'>Artikel terkait simpel</a></div></b:if>

Save template. Contoh pada editblogtema.

SHARE YA:

TAHUN 2020: CARA MENERAPKAN AMP KE HALAMAN BLOGGER

AMP (atau Accelaration Mobile Page) adalah segala hal tentang menyederhanakan halaman sebuah web sehingga menjadi lebih cepat, lebih mobile dan lebih daripada sekedar "responsif".

Dan halaman web AMP telah di posisikan sebagai "anak emas" oleh Google melalui penandaan halaman "kanonis" mereka. Namun walaupun demikian tidak serta merta membuat semua orang lantas beralih ke halaman AMP dan menjadikan halaman web atau blog mereka menjadi AMP.

Namun kali ini agak berbeda, karena bulan September ke depan Google secara resmi menerapkan 'Mobile page indexing first' kepada seluruh tautan halaman web di dunia. Akhirnya kejadian juga halaman blog AMP menjadi anak emas, paling tidak untuk beberapa tahun ke depan.

Sebenarnya tidaklah terlalu mengejutkan jika halaman blog AMP akan menjadi anak emas mesin telusur karena akan selalu di dahulukan. Namun sekali lagi dan membuat saya heran itu adalah website website besar seperti CNN, Forbes malah memutuskan untuk meninggalkan halaman AMP setelah mereka mencobanya.

EDITBLOGTEMA amp project

Baca : POLEMIK AMP

Meskipun demikian satu hal perlu diketahui, tidak perlu sampai menjadi ahli koding untuk membuat sebuah template AMP. Cukup memahami dasar atau mengerti saja kita akan dapat membuat template kita menjadi AMP.

Mari kita mulai:

1. Login ke Blogger.
2. Pilih blog untuk diperbarui.
3. Di menu sebelah kiri, klik Tema.
4. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.

1. Merobah HTML

Agar blog menjadi AMP, maka kita harus merobah setiap kode HTML menjadi seperti kode berikut:

<html amp='amp'>

2. Merobah charset dan viewport

Kalian telah berada di halaman editor HTML, periksa di bagian bawah tag <head> apakah telah ada terdapat meta tag dan viewport disana, jika tidak copy kode berikut dibawah dan templekan di bawah kode <head> tadi. Jika sudah ada ya abaikan saja dong.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

 3. Menambahkan link kanonik

Google memang sedang meng-'anak-emaskan' halaman web versi AMP sebagai sinyal bagi SEO. Di dalam template AMP harus ada link kanonik karena demikianlah cara mesin pencari memprioritaskan halaman Web AMP di banding halaman web klasik biasa.

Namun kita perlu memeriksa apakah telah terdapat link kanonik di dalam template HTML kita bentuk kodenya lebih kurang sebagai berikut:

<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />

Jika tidak terdapat di sana, maka kita harus menambahkannya dengan mengkopi kode berikut di bawah:

<link expr:href='data:blog.url' rel='canonical'/>

Dan mempastekannya  di atas kode viewport:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4. Rombak bagian HEAD

Cari kode </head> dan tambakan kode CSS berikut di bawah di atas kode </head> tadi agar halaman blog menjadi AMP:

<style
amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

5. Robah tag Gambar 

Pada template non-AMP kita biasa menggunakan tag <IMG> namun untuk template AMP kalian tidak bisa menerapkannya lagi dan harus di ganti dengan hnya img, jadi agar menjadi AMP kita harus merobahnya menjadi seperti contoh formatnya sebagai berikut:

<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

 6. Uji validitas halaman AMP

Cara pertama: 
Buka halamana AMP kalian melalui browser Chrome, Misalnya: https://contoh.blogspot.in/p/amp-page.html

Tempelkan kode “#development=1” tepat di ujung link, contoh:
https://contoh.blogspot.in/p/amp-page.html#development=1.

Klik kanan mouse pada halaman chrome dan pada pilihan menu menu yang muncul muncul, pilih: "inspeksi" untuk mengetahui bagian yang error.

inspeksi elemen di browser chrome

Cara kedua: 

Buka halaman web AMP di halaman validator proyek AMP  atau silahkan masukan URL halaman web AMP ke:

https://search.google.com/test/amp

AMP MASIH BUKAN YANG TERBAIK. 

Tapi ingat satu hal, walaupun AMP adalah halaman mobile yang sedang di kampanyekan. Namun dia samasekali bukanlah satu satunya cara agar halaman blog kalian menjadi mobile.

Bukan juga satu satunya cara agar halaman blog kita masuk kategori  'Mobile page indexing first', tidak!  Walaupun halaman blog kalian bukan AMP,  namun 'mobile' maka halaman blog kalian tetap akan di index sebagai "terdaftar" dalam list 'mobile page' caranya adalah menjadikan halaman blog kalian menjadi lebih mobile friendly.

Para pakar menyebutnya sebagai halaman web html 'mobile classic'. Mengapa disebut demikian karena ia hanyalah halaman web yang dibuat melalui inti daripada HTML biasa. Contohnya halaman blog saya ini telah dibuat menjadi lebih mobile dan sangat mudah diakses melalui perangkat-perangkat mobile seperti tablet dan hape.

Saran saya, gunakan template template yang mobile friendly buat blogging mulai sekarang walaupun itu bukan harus AMP.  Template template blogger terbaru menunjukan sisi yang sangat baik untuk tampilan blogging mobile.

Situs situs besar seperti CNN,  Forbes, Washington Post tadinya menggunakan halaman AMP untuk menjalankan halaman web mereka. Namun akhirnya memutuskan untuk meninggalkannya..

Bukan apa apa, AMP mungkin adalah cara kita blogging di masa depan. Namun untuk masa kini ia masih perlu berkembang untuk kesempurnaannya... 

SHARE YA:

CARA MENGEDIT HALAMAN EDITOR HTML BLOGGER MENGGUNAKAN HAPE

Umumnya ketika kita telah memiliki sedikit pengatahuan koding dan sedikit menguasai pengatahuan dasar CSS, HTML dan JS, di tambah dengan sedikit hobi atau 'bakat' desain kita dapat atau mampu membuat template. Template blogger di buat berbasis HTML. Tanpa  sebuah template, platform blogger akan kesulitan berjalan untuk menampilkan halaman web atau halaman blog kita.

Template mudah di dapat, platform blogger itu sendiri telah menyediakan template dasar yang dapat langsung kita pergunakan pada saat pertama memulai ngeblog. Namun suatu saat kita akan jenuh dengan tampilannya dan merasa tampilan halaman blog kita tidak tampak profesional karena terlalu biasa, terlalu mirip dengan tampilan blog blog para pemula, walaupun mesin penelusur (search engine) tidak terlalu mempersoalkannya, namun tampilan dapat dengan signifikan mempengaruhi manusia, sedangkan pengunjung halaman web atau blog adalah manusia.

Disamping itu tentu saja pertimbangan optimasi template, template bawaan yang sederhana secara default tidak di optimalkan sebagaimana layaknya template template yang di buat oleh para desainer web secara premium. Melalui pengatahuan dan penguasaan HTML kita akan mampu membuat suatu template yang premium.

Sampai disini kita tidak akan melanjutkan pembahasannya, karena postingan ini saya buat berbasis pertanyaan beberapa orang pengunjung:

BISA GAK SIH MENGEDIT BAGIAN HALAMAN EDITOR HTML TEMPLATE BLOGGER MELALUI HAPE, PONSEL ATAU SMARTPHONE?

Saya menjawabnya bisa karena saya sendiri sering melakukannya, dari memasang dan menghapus widget, hingga mengedit bagian HTML melalui  ponsel dengan layar 5,5 inch demi untuk merombak tampilan halaman blog secepatnya pada saat berada di coffee shop, jam istirihat bekerja, atau dalam perjalanan.

Padahal hape itu juga yang saya pergunakan untuk menelpon, menjawab WA, dan vieo call dengan keluarga juga. Saya bersyukur banyak hal mulai dapat di tangani oleh peralatan genggam ini, karena saya selalu berfikir futuristik, saya jadi yakin suatu hari peralatan genggam ini akan memiliki kemampuan seperti laptop zaman sekarang, entah dengan kombinasi teknologi, UI, dan UX apa. Yang jelas saya sudah dapat memanfaatkannya sekarang walau dengan teknologi masih menurut zaman now (entah bagaimana zaman next)

MANFAAT MENGERJAKAN PENGEDITAN HALAMAN HTML BLOGGER VIA PONSEL

Tentu saja 15 tahun yang lalu adalah hal yang tidak masuk akal mengerjakan pengeditan HTML melalui perangkat mobile. Namun hari ini segalanya telah berbeda, kemampuan perangkat mobile seperti ponsel telah meningkat secara signifikan.

Sebenarnya saya sering menggunakan cara manual yakni langsung melalui browser chrome melalui hape oppo A83, tapi cara ini tentu sulit bagi yang belum terbiasa mengenali kode kode CSS, HTML dan JS. Saya melakukannya dengan cara mengscroll halaman editor HTML tersebut untuk menemukan untaian kode yang dapat merobah bagian tertentu template blog. Ada keuntungan dan kepuasan sendiri ketika saya melakukannya, toh saya tidak sedang terburu buru.

Adapun manfaatnya (paling tidak bagi saya) adalah:

• Petama saya dapat terus 'menghapal' sumber kode template dan mengingatnya
• Kedua meningkatkan ketrampilan saya dalam mengatasi kesulitan teknis dan troubleshooting dalam kondisi yang paling minim fasilitas.
• Ketiga melatih kesabaran dan ketelitian
• Keempat mengurangi ketergantungan saya terhadap perangkat PC baik desktop maupun laptop.
• Membuka peluang mengembangkan aplikasi  (terutama aplikasi web) hanya bermodalkan gagdet mobile seperti ponsel.

Plus dengan mengerjakan template melalui hape tersebut membuat saya dengan mudah menyembunyikan pekerjaan saya terhadap orang orang di sekeliling saya, karena mereka menyangka saya sedang main game, atau chatting atau update medsos. Padahal saya sedang mengerjakan 'projek-projek' kecil. LOL.

CARA MENGEDIT TEMPLATE VIA EDITOR HTML MENGGUNAKAN PONSEL

Dengan asumsi hape Androidlah yang paling banyak di pergunakan oleh para blogger, maka cara paling mudah melakukan pengeditan HTML template blogger melalui ponsel Android adalah dengan cara memasang sebuah aplikasi editor kode dan diantara sekian banyak aplikasi aplikasi tersebut saya memilih aplikasi 'Code editor; kalian dapat langsung memasangnya dengan mengklik tautan Play Store berikut:

Android mobile code editor di PlayStore

Cara penggunaannya terbilang mudah, user interfacenya sederhana dan 'Hand Friendly' banget sehingga kalian dapat menggunakan aplikasi ini dengan mudah, sebenarnya ia memiliki dua versi yang gratis dan berbayar. Sampai saat ini saya masih menggunakan versi yang gratis.

Aplikasi editor kode ini memiliki tool yang lengkap dan bisa terhubung ke akun Github dengan cara login, memiliki tombol pencarian untuk memintas ke kode yang kita inginkan denganc ara mengetik tag atau kode kode HTML tertentu ke dalammya. Cara kerjanya persis dengan versi dekstop, namun dengan interface mobile.

tampilan code editor pada layar hape

Jika kalian sudah mulai terbiasa membuka dan mengedit bagian bagian tertentu melalui halaman editor blogger, kalian pasti akan mengenali tag tag HTML berikut:

<head>
</head>
<body>
</body>
<data:post.body/>

Atau style CSS berikut:

<style>
</style>
]]></b:skin>

DST....

Nah melalui aplikasi editor ini kita dengan mudah menuliskan tag tag tersebut ke dalam kotak pencarian, dan kotak pencarian akan menemukannya dengan cepat. Setelah menemukannya kita dengan mudah menemukan sumber kode yang mau kita edit dan kita simpan.

Kalian dapat mengikuti cara penggunaannya melalui videonya terlebih dahulu yang di sertakan pada paket pengunduhan sebelum menggunakannya. Yang perlu kita lakukan adalah berlatih dan memiliki keinginan kuat untuk belajar dengan cara memanfaatkan sumber daya yang kita miliki. Tidak perlu berkecil hati kalau belum memiliki laptop. Manfaatkan saja ponsel yang ada.

Kalian harus bersyukur karena zaman now sudah sedemikian maju dan mudahnya bagi kita untuk melakukan pekerjaan melalui perangkat yang sebelumnya tidak pernah terfikirkan oleh para pendahulu kita. Jadi kita harus memanfaatkannya dengan sebaik baiknya.

Sekali lagi Tidak perlu berkecil hati kalau belum memiliki laptop. Manfaatkan saja ponsel yang ada. Jika kalian rajin tidak menutup kemungkinan kalian akan mampu mengembangkan aplikasi kalian sendiri melalui gagdet mobile.

Kedepannya tentu semakin banyak perangkat mobil atau ponsel murah namun dengan teknologi dan fitur yang lebih maju lagi.

SHARE YA:

DOWNLOAD TEMPLATE SIMPLE KLASIK YANG KEREN UNTUK BLOGGING DI TAHUN 2020

Kali ini saya menawarkan sebuah template bergaya klasik sederhana (simple) namun dengan tampilan berkarakter kuat. Dan cocok untuk blogging di tahun 2020, Karena saya bukan seorang desainer namun suka dengan desainer saya jadinya suka nangkring di forum forum para desainer lokal dan Global, membanding bandingkan hasil buatan lokal dan luar, masing masing memiliki karakter dan keunikan serta fitur fitur yang juga unik.

ilustrasi template klasik simple 

Saya namakan simple klasik saja. Memiliki fitur sebagai berikut:

• Sederhana dan klasik.
• Breadcrumbs
• Related Posts
• Responsif dan mobile friendly
• Struktur Data.
• Tombol share ADDThis (Saya berencana merobahnya ke tombol berbagi buatan saya sendiri.

Template Simpe klasik
DEMO  DOWNLOAD

Template hanyalah sebuah fasilitas untuk sebuah halaman web atau blog, namun tampilannya kadang memberikan dampak yang cukup signifikan terhadap keberadaan halaman web atau blog kita.

Tampilan template ini akan membuat halaman blog menjadi terlihat fresh, bersih dan lebih berkarakter. Pas untuk blogging di tahun 2020 yang menuntut halaman blog mobile...

SHARE YA:

CARA MENGHILANGKAN PENELUSURAN SESUAI LABEL PADA BLOGGER

Pada saat kita melakukan pencarian dengan cara mengetikan kata kunci atau judul sebuah artikel pada kotak pencarian di halaman sebuah blog dan menekan enter, maka yang muncul adalah artikel artikel yang memiliki persamaan, namun diatas judul artikel atau dibawah header akan muncul notifikasi:
"Showing Posts With Label in Blogger"

Atau "Menampilkan semua posting berdasarkan label"

Begitu juga jika kita mengklik tombol navigasi, misalnya klik teknologi. Notifikasi serupa akan muncul di atas beberapa hasil pencarian yang serupa.
Cara yang saya share ini juga berlaku untuk templat bawaan blogspot yang lebih tua.

Sebenarnya ini berguna sebagai penjelasan bahwa kita sedang dalam opsi pencarian dan di tampilkan menurut label, sesuai dengan susunan elemen di dalam template.

Masuk kepengaturan blogspot>>pilih tema>>pilih Edit HTML setelah halaman editor HTML terbuka, cari kode berikut:

<div class='post-filter-message'>

Bersama kode diatas buang semua kode dibawahnya juga:

<div class='post-filter-message'>
<div class='post-filter-description'> <b:if cond='data:view.isArchive'> <data:view.archive.rangeMessage/> <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/> <data:view.search.resultsMessageHtml/> </b:if> </div> <div> <a expr:href='data:blog.homepageUrl'><data:messages.showAll/></a> </div> </div>

Ganti dengan:

<div class='post-filter-message'>
<div class='post-filter-description'> <b:if cond='data:view.isArchive'> <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/> </b:if> </div> </div>

Atau Hapus saja tidak usah diganti (untuk contempo dan template template blogspot yang lebih baru)
Cara ini ini cukup efektif membuat perbedaan style pada notifikasi, pada editblogtema misalnya kelompok konten yang ditampilkan ini tampil pada breadcrumbs, sehingga tidak lagi menjadi kentara. Tampilan notifikasi berubah menjadi:

"Search result for gradasi"

Demikianlan trik ringan kali ini. Selamat ngeblog semoga sukses selalu.

www.editblogtema.net

SHARE YA:

PERIHAL TEMPLATE EDITBLOGTEMA - THE NOTABLE

Seperti biasanya, Kami tidak yakin template ini akan menjadi template terakhir, akan tetapi kami ingin berkongsi informasi tentang seluk beluk template ini dengan pembaca:

1. Template di pilih dari varian terbaru template bawaan blogger yang paling terakhir: NOTABLE
2. Template telah di beri sentuhan re-desain sederhana.
3. Memiliki breadcrumbs (tersembunyi) dengan schema markup teruji
4. Memiliki related post.
5. Memiliki fitur gambar penulis (author) di atas setiap postingan (Ini pavorite kami)

tampilan template notable re-desain

Semenjak menggunakan template ini  perlahan lahan terjadi peningkatan performa blog terutama pada sisi mesin pencarian. Jauh lebih baik daripada beberapa (lebih selusin) template premium yang telah kami beli untuk di uji cobakan. Jadi jika masih ada keraguan bahwa template bawaan (default) lebih buruk performanya daripada template premium kami rasa itu adalah pendapat yang sangat keliru.

Tentu saja untuk mencapai semua itu setelah di edit, modifikasi atau di 're-desain' dan di dalam blog ini kami telah menyediakan banyak tuturial, panduan atau petunjuk mengedit template terbaru.

pengujian template notable blogger

Pada pengujian struktur dan performa template notable mendapatkan skor 91, itupun karena kami mendisable link twitter dan printability demi keamanan. Jika tidak tentu akan mendapatkan nilai 9.8.

Yang paling penting terkait template adalah:

1. Mobile, template ini mobile friendly mendapatkan nilai sempurna: 10
2. Server behaviour, tidak terdapat kesalahan pada sisi server, nilai: 10
3. Analytic ready, telah terpasang pada bawaan template, nilai: 10
4. Page title, mendapat nilai: 10
5. Heading juga sempurna, tidak ada kesalahan, nilai: 10
6. Images dapat di atur dan mendapatkan nilai: 10
7. Metatags terpasang sempurna mendapat nilai: 10
8. DST.

Sedangkan untuk: Twitter, Printability, URL format, Popularity dan internal link adalah tergantung usaha pemilik blog untuk mencapainya. Contohnya jika tidak ingin Twitter NOL, ya masukan atau kaitkan link halaman twitter ke blog. Dan, Printability adalah bagaimana agar halaman dapat di print melalui pengaturan kode CSS di dalam template blogger kita masing masing.

Mobile friendly

Adapun URL format kita dapat memastikan setiap URL kita tidak kepanjangan, kependekan, tidak mengandung karakter karakter yang tidak dapat di baca oleh mesin pencari. Editblogtema banyak melakukan kesalahan di masa lalu, namun demikian masih tidak terlalu buruk. Popularity dapat di tingkatkan dengan menaikan ranking Alexa, MOZ, berbagi ke media sosial dll.

Kalian dapat request tema ini secara gratis jika berminat...

SHARE YA:

PANDUAN DASAR MODIFIKASI 5 FITUR DAN ELEMEN KEREN TEMPLATE BLOGGER NOTABLE

Quality Templates. Notable adalah varian terakhir dari empat varian utama template bawaan (default) blogger. Dan sebagai template paling bontot ia memiliki banyak kelebihan baik dari segi tampilan, kecepatan, hingga dalam hal kemudahan kustomisasi melalui dasbor blogger. Ada 5 ke istemewaan template notable dan sebagiannya tidak di miliki oleh tiga jenis template terbaru yang lainnya.

template notable

Ke 5 ke istemewaan ini akan membuat tampilan template Notable nyaris berubah total dan kalau tidak teliti alias di pandang hanya sekilas bakalan tidak akan di kenali lagi sebagai template Notable.

1. MENAMPILKAN DAN MEMODIFIKASI GAMBAR PROFILE PENULIS DI ATAS POSTINGAN AGAR LEBIH KEREN 

Gambar profile penulis diatas postingan adalah keistemewaan milik template blogger terbaru Notable. Template template bawaan (default) blogger lainnya tidak ada yang memiliki ke istemewaan ini.

Tentu saja hampir semua template bawaan blogger telah memiliki opsi menampilkan gambar profile penulisnya, namun dalam bentuk widget bawaan yang dapat di pindah pindah pada sidebar atau bagian lain di halaman blog.

Tapi jangan salah, gambar profile 'biasa'  tersebut akan tampil, tidak hanya pada halaman konten atau postingan blog, ia juga tampil pada homepage atau halaman awal blogger. Dan itu membedakannya dengan profile penulis diatas konten atau postingan template notable. Gambar profile hanya akan tampil pada setiap postingan namun tidak akan tampil pada halaman awal (homepage blog) kita.

Lagipula jenis gambar atau poto profile dari template lain itu tidak ada yang cocok untuk di letakan pada posisi bagian atas postingan. Paling keren biasanya hanya di letakan di bawah postingan blog.

Dan fitur profile template notable ini sangat cocok bagi sebuah blog dengan multi pengguna seperti editblogtema ini, notable hanya akan menampilkan gambar atau poto profile penulis yang menulis artikel, postingan atau membuat konten.

Namun tentu saja tampilannya secara bawaan (default) sangatlah monoton. Persegi dan ukurannya standar bawaan template. Kita dapat mengeditnya melalui opsi HTML editor template blogger.

Kesimpulan:

• Gambar profile bawaan bentuk framenya persegi empat dan membosankan dengan ukuran standar bawaan template blogger notable. Hanya dapat di atur atau di robah melalui edit HTML.
• Letaknya di atas postingan dan tidak akan di tampilkan pada homepage.
• Hanya menampilkan gambar atau poto masing masing profile penulis postingan pada blog multi user.

Cara mengedit profile penulis template notable.

• Login ke Blogger.
• Pilih blog untuk diperbarui.
• Di menu sebelah kiri, klik Tema.
• Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
• Cari kode berikut di halaman editor HTML blogger notable:

 body.item-view .Blog .post-author-profile-pic{
max-height:100%
}

Tambahkan kode berikut dibawah 100%:

 border: solid;border-radius: 50px;

Kodenya akan terlihat menjadi:

 body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;}

Untuk memperbesar avatar atau photo profile tersebut kalian bisa memodifikasi kode tersebut menjadi:

 body.item-view .Blog .post-author-profile-pic{
max-height:100%
border: solid;border-radius: 50px;
height: 80px;
width: auto;
} 

Yakni dengan cara menambahkan perintah CSS

 height: 80px;width: auto; 

Seperti di atas. Trik ini yang sekarang kami terapkan pada template editblogtema yang sekarang.

Pengaturan selanjutnya adalah:

• Masuk ke pengaturan atau dasbor blogger
• Pilih tataletak atau layout
• Klik edit 'Blog Posts' dengan mengklik tanda pensil.

konfigurasi blogpost1

• Setelah itu akan muncul konfigurasi seperti gambar berikut dan pastikan memberikan centang pada dua poin yang telah saya beri tanda merah:

konfigurasi blogpost1

 2. MEMODIFIKASI HURUF PERTAMA (FIRST-LETTER) YANG STYLISH

Huruf pertama yang di dalam HTML CSS template di tulis sebagai 'first-letter' memiliki keistemewaan tersendiri. Huruf ini dapat di kustomisasi melalui edit HTML misalnya untuk membedakan warnanya. Contoh:

Cinta

Huruf pertama bentuknya besar dan menonjol dan dia dalam beberapa hal tertentu tidak bisa di munculkan apabila:

• Apabila gambar di letakan pada alinea atau baris pertama postingan. Gambar tidak bisa di letakan di atas postingan jika ingin menampilkan huruf pertama yang stylish ini.
• Postingan mengandung format tertentu dari copy-paste artikel dari blog atau halaman tertentu. Namun ini bisa di atasi dengan memformat ulang atau 'remove formatting' melalui tool halaman entri blogger sebelum postingan di terbitkan.

Cara memodifikasi first letter:

• Masuk kepengaturan blogger
• Pilih tema
• Pilih Edit HTML

Pada halaman editor HTML blogger cari kode berikut:

body.item-view .Blog .post-body::first-letter{
float:$startSide;
font-size:$(body.text.font.size * 2 * 2);font-weight:600;line-height:1;margin-$endSide:16px
}

Kode diatas adalah kode asli bawaan template notable. Kalian dapat merobah ukuran huruf  'first-letter' menjadi lebih besar dan menjadikannya berbeda warna dengan memodifikasi bagian yang saya sorot merah muda seperti contoh yang di pakai oleh editblogtema:

body.item-view .Blog .post-body::first-letter{
float:$startSide;
font-size:$(body.text.font.size * 3 * 2);color: #FF69B4;font-weight:800;line-height:0.5;margin-$endSide:1px}

#FF69B4 adalah kode warna. Kalian bebas melakukan percobaan sampai sesuai dengan selera kalian sendiri.

3. MENGHILANGKAN FITUR STICKY PADA HEADER NOTABLE SUPAYA TIDAK MERUSAK TAMPILAN IKLAN PADA HEADER.

Entah mengapa ke empat template terbaru blogger beserta masing masing 5 variannya memiliki fitur sticky, yakni jika halaman di scroll (di gulir) ke atas, header ikut naik dan bersembunyi, akan tetapi ketika halaman di scroll (atau di gulir) kebawah, header ikut turun namun 'lengket' di atas postingan.

Sebenarnya fitur ini cukup istemewa dan berperan sebagai navigasi dan memungkinkan kita berpindah ke konten lain dengan lebih cepat. Akan tetapi beberapa pengguna mengeluhkan fitur sticky ini mengganggu tampilan iklan adsense pada saat di tempatkan pada bagian header. Mungkin mereka berfikir, iklan harus mencolok dan menjadi hal pertama di lihat oleh pengunjung blog pada saat mereka mengunjungi sebuah halaman blog.

Contempo adalah salah satu template terbaru yang varian variannya paling banyak di pergunakan pada awal template terbaru di rilis oleh blogger. Saya membaca satu trik di salah satu blogger para senior, yakni perihal cara menghilangkan fitur sticky pada header template blog ini, yakni dengan cara:

• Masuk ke pengaturan atau dasbor blogger
• Pilih 'tema'
• Pilih 'sesuaikan'
• Begitu masuk ke desainer tema blogger, pilih 'lanjutan'.
• Lalu scroll menu atau item yang muncul ke atas dan pilih yang terakhir 'Tambahkan CSS'
• Pada kotak dialog atau blanko kosong CSS yang muncul tambahkan (copy-paste) kode css berikut dibawah ke dalamnya:

.centered-top-container.sticky {display: none !important;

Save template. Cara tersebut memang dapat menghilangkan atau me-non-aktifkan fitur sticky pada header blog, akan tetapi timbul masalah baru: yakni ketika halaman blog di scroll kebawah dan kembali ke atas, tombol pencarian dan menu hamburger jadi 'membeku' alias tidak bekerja lagi.

Jadi hapus kode di atas, gantikan dengan kode berikut:

.centered-top-container.sticky { position: inherit !important; }

Atau:
Cari kode berikut di dalam halaman editor HTML  blogger:

.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:0;
width:auto;

Robah fixed menjadi:

relative.

Save tema.

4. BREADCRUMBS TERSEMBUNYI YANG VALID HTML 5

Ini memang bukan fitur bawaan Notable, akan tetapi merupakan elemen tambahan yang tidak dapat di abaikan.

Breadcrumbs adalah elemen penting bagi sebuah halaman blog dan harus dipasang pada blog kalin karena ia berhubungan langsung dengan SEO dan struktur data blog. Dengan breadcrumbs sebuah blog akan memiliki navigasi yang jelas dan lebih mudah terbaca pada SERP Google.

Secara tampilannya ada dua jenis breadcrumbs:

1. Tampil
2. Tersembunyi

Nah saya menyarankan kalian memasang breadcrumbs tersembunyi namun valid HTML 5 berikut:

<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>

Breadcrumbs ini adalah jenis kedua (tersembunyi) cara memasangnya adalah cari kode <data:post.body/> ada dua buah di dalam template notable letakan di bawah kode yang kedua.

Save template.

5. MENGATUR UKURAN FONT PADA TAMPILAN MOBILE AGAR LEBIH COOL DAN ENAK DI BACA.

Notable seperti empat varian utama template terbaru blogger pada umumnya memiliki banyak opsi font pilihan yang beragam. Kami sekarang menggunakan jenis font 'IM Fell English'. Dan tidak seperti template bawaan blogger yang lebih tua, jika kita menginginkan pilihan jenis font seperti ini, kita harus memasang link font Google terlebih dahulu ke dalam XML di halaman HTML template blogger.

Jadi keempat template terbaru memang istemewa, menurut saya sih sudah memenuhi standar desain global dunia.

Namun template Notable memiliki masalah dengan ukuran font.

Kalian akan kebingungan bagaimana caranya menyeimbangkan ukuran font jika di lihat dari layar ponsel. Soalnya kalau di buka dari tablet ukuran 9.7 inci dan laptop font secara default tampak besar. Tapi pas di buka melalui hape? Ukuran font kecil banget. Kasihan kakek kita yang matanya sudah lamur pas mau baca blog kita bukan?

Bagaimanapun kita mencoba mengaturnya melalui dasbor pada opsi Desain tema Blogger, tetap tidak akan berhasil karena di dalam editor HTML template ternyata Google membuat pengaturan melalui CSS begini:

font-size:$(item.title.font.size * 24 / 48)

Itu adalah rumus: 24 untuk mobile dengan @media screen seukuran hape dan 48 untuk mempresentasikan font ukuran laptop dan desktop. Artinya jika kalian merasa ukuran font kegedean pada layar laptop dan kalian memperkecil ukuran font melalui pengaturan dasbor blogger, maka ukuran font pada layar ponsel akan semakin mengecil lagi persis kayak semut!

Mau tidak mau kita harus merobah logika di atas dan untuk mendapatkan ukuran yang font sebesar 17px pada layar hape dan 17px pada layar laptop dan desktop saya merobah bagian angka kode CSS diatas menjadi:

*14/20

Itu adalah skalanya. Cara mencari kode CSS di atas di dalam template adalah:

• Masuk ke pengaturan atau dasbor blogger
• Pilih 'tema'
• Pilih edit HTML
• Pada halaman editor HTML template blogger cari kode:

body.item-view .Blog .post-title{Kode di bawahnya terlihat sebagai berikut:

font-size:$(item.title.font.size * 24 / 48)

}body.item-view .Blog .post-body{font-size:$(body.text.font.size * 14 / 20)

Robah nilai atau angka *24/48 dan *14/20
Menjadi: 24/38 dan 18/24.

SISANYA

Tentu saja ke lima poin diatas hanya 5 fitur yang dapat kita lakukan dengan mudah, namun terdapat berton ton opsi jika kita mau mencarinya.

Sisanya adalah pengaturan melalui dasbor blogger yang dapat dengan mudah kalian lakukan sendiri. Melalui pengaturan pada dasbor blogger kalian dapat mengganti warna latar, mengganti jenis font, menambah widget. Silahkan eksplorasi saja.

Jangan lupa: Save tema. Jika kurang jelas dan butuh detailnya, silahkan ajukan pertanyaan.

SHARE YA:

MEMBUAT TEMPLATE BLOGGER DENGAN HTML, CSS DAN JAVASCRIPT (BAG:1)

Quality Templates. Membuat template sendiri adalah sangat mungkin bagi siapa saja terutama blogger. Banyak keuntungan yang kita dapatkan jika telah bisa membuat template sendiri di samping kepuasan hati tentu saja. Contohnya:

blogger layout

• Meningkatkan pengetahuan web
• Meningkatkan ketrampilan desain web
• Meningkatkan pengatahuan koding web seperti HTML, CSS dan JavaScript
• Memiliki template buatan sendiri yang dapat di sesuaikan dengan selera kita sendiri
• DLL

Poin terakhir itu keren. Semahal dan se premium apapun template yang kita beli dari website penjual template, bentuk dan ciri cirinya akan mirip jika di gunakan oleh orang banyak. Contohnya walaupun telah di robah warna warni template viomagz tetaplah viomagz buatan Mas Sugeng. Tidak ada totalitas yakni sebuah halaman web dengan ciri ciri khas dirinya sendiri.

Membuat template sendiri membutuhkan pengetahuan, dan pengatahuan itu berguna sekali bukan hanya untuk membuat template tapi juga untuk hal hal lain di luar itu. Pengatahuan yang sebenarnya telah di ajarkan di bangku sekolah: HTML, CSS dan JavaScript.

Dengan catatan apabila kita bloggingnya menggunakan platform blogger blogspot karena platform ini berbasis HTML. Jika kalian bloggingnya melalui CMS seperti Wordpress org atau igniester, maka kalian harus memiliki pengetahuan PHP yang lebih baik karena platform platform tersebut di buat berbasis PHP. Namun biar demikian pengatahuan HTML tetaplah penting disana, jika kalian ingin membuat template.

Kita sedang membahas peralatan membuat template blogger blogspot. Saya suka karena saya bisa mengutak atik 2 peralatan dasar template blog:

• HTML
• CSS
• JavaScript

Lho kemana XML? Walaupun elemen yang saya sebutkan penting untuk material desain, namun pada pembuatan template bagian XMLnya cukup mengutak atik yang sudah ada saja deh, cukup main standar dulu.

1. HTML

Contoh dasar penulisan HTML adalah sbb:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>ini bagian heading</h1>
<p>dan ini bagian pragraf.</p>
</body>
</html>

Kalau mau di ikuti ada berton ton contoh penggunaan HTML, namun faktanya untuk membuat atau mendesain ulang sebuah template blogger, HTML itu wajib di pelajari, karena:

• HTML itu adalah standar bahasa Mark Up untuk halaman WEB
• Dengan mempelajari dan menguasai HTML kita dapat membuat halaman website kita sendiri
• HTML amat mudah di pelajari.

2. CSS

CSS nyaris tidak terpisahkan dari HTML terutama jika terkait dengan desain WEB, contoh penulisannya adalah sebagai berikut:

body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

Jadi jika HTML dapat mendeskripsikan tampilan suatu halaman web CSS dapat membuat style untuk merubah antarmukanya sesuai dengan keinginan kita. Misalnya untuk mewarnai background, font dan juga untuk membentuk border pada halaman web.
Untuk membuat template CSS sangat penting di pelajari karena:

• Ia adalah bahasa yang dapat mendeskripsikan style suatu dokumen HTML
• CSS mendeskripsikan bagaimana HTML di tampilkan dan di lihat orang di halaman WEB.

3. Javascript

Belajar Javascript adalah wajib karena JavaScript adalah bahasa pemrograman HTML dan WEB yang tidak dapat kita tinggalkan pada saat membuat sebuah template menjadi hidup, contoh kode JavaScript:

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Kesimpulannya adalah:

1. HTML berguna untuk membuat dan menentukan konten pada halaman web
2. CSS untuk membuat dan menentukan tataletak halaman web
3. JavaScript untuk memprogram perilaku halaman web (meskipun dalam beberapa hal CSS dapat melakukan hal yang sama)

Kita akan mendiskusikan bagaimana ketiga peralatan tempur diatas dapat di pergunakan untuk mendesain dan membuat template HTML untuk diguanakan dalam membangun halaman web sesuai dengan keinginan kita pada kesempatan penulisan berikutnya.

SHARE YA: