Skip to main content

ini bedanya template blog versi lama dan versi baru

desainer blog
Sejak tahun 2017 lalu blogger telah menambahkan 4 varian tema yang benar benar baru paling tidak adalah karena:
(Dinamakan: Contempo, emporio, soho dan terkemuka atau notable)
  1. Full Responsive. Menimbang berbagai ukuran perangkat telah tersedia di pasar seperti: Desktop, laptop, tablet hingga ponsel. Didalam template telah ditanam aba aba @media screen dengan berbagai ukuran, sehingga halaman web/blog dapat ditampilkan sempurna pada setiap jenis ukuran layar.
  2. Mobile. Khusus untuk perangkat genggam, Google menyadari semakin meningkatnya penggunaan mobile untuk mengakses internet sehingga akses web via mobile mendapat perhatian khusus. Bahkan Google membuat project AMP untuk ini dengan tujuan meningkatkan pengalaman pengguna ketika mengakses halaman blog melalui moible (hape atau ponsel)
  3. Tampilan yang segar. Tampilan keempat varian template didesain beda degnan pendahulunya. Baik tema tema klasik maupun tema tema sesudahnya.
Tema tema sebelumnya dinamakan: Sederhana (simple), tampilan dinamis (dynamic view), Jendela gambar (window picture), PT. keren sekali (awsome inc), Tanda air (watermark), kelembutan (ethereal), dan Perjalanan (travel)
  1. Tidak full responsive. Waktu itu masih belum banyak blogger yang ngeblog via ponsel seperti sekarang. Kebanyakan blogger pasti menggunakan PC dekstop dan sebagian lagi menggunakan laptop. Jadi kebutuhan Full Responsive memang tidak mendesak seperti waktu sekarang.
  2. Hape masih jadul. Mungkin dimulai dengan zaman akhir platform mobile syimbian Nokia orang baru mulai sering membuka halaman web melalui hape. Keluhan sulitnya membaca melalui hape telah memaksa para desainer web merombak paradigma tampilan website secara global.
  3. Business online masih melalui layar monitor PC.
Tetapi tahukan sobat?
Hampir semua widget/gagdet template terbaru bisa di pergunakan atau dipasangkan ke template lama, kecuali widget Blog1. Lihat template yang sekarang saya pakai dibangun dari template lama dikombinasikan dengan widget widget template terbaru. Saya meyebutnya kombinasi, widget-widget apa saja yang sebaiknya sobat buang dari template lama?
  1. Widget Featured post. Pada template lama feature post amat mengganggu, ia tidak hanya tampil pada homepage blog tapi tetap nangkring pada halaman konten. Bayangkan sobat membuka konten feature post, ketika sudah berada dihalaman konten atau artikel, diatasnya masih saja featured post tersebut hadir. Jadi double dengan konten feature tersebut. Featured post memang umumnya diletakan diatas pada halaman depan blog (homepage). Ini buruk, itulah sebabnya pada tema tema terbaru hal tersebut diperbaiki oleh desainer blogger blogspot. Mungkin tidak terlalu buruk untuk layar ukuran besar, tapi benar benar memakan ruang pada tampilan layar kecil seperti ponsel.
  2. Label. Pada template versi lawas label tampil keseluruhan dan memenuhi ruang sidebar atau dimanapun ia ditempatkan. Sedangkan pada template versi terbaru label dapat di "gulung" atau di buka-tutup atau disembunyikan melalui tombol panah kecil sehingga tidak nampak "scatterred" memenuhi ruang.
  3. Halaman atau page. Jika widget pada template lama dihapus dan diganti dengan widget page atau widget halaman template baru akan menghasilkan Navigasi inline berbaris horisontal ketimbang berbentuk list daripada template lama, walaupun tidak responsive (namun dapat diberikan instruksi melalui CSS atau JavaScript).
Cara mengganti widget template lama dengan widget template baru.
1. Dapat dilakukan dengan cara: buat dua halaman blog latihan, dummy atau sejenisnya. Satu blog menggunakan template model lama (misal simple, awsome inc dst) dan blog yang lain menggunakan template blog baru (misal contempo, emporio dst)
2. Buka pengaturan blogger kedua template secara bersamaan, masuk ke pengaturan>pilih tema>pilih edit HTML. Pada bagian atas halaman editor HTML kedua template tekan "Lompat ke widget" pertama lakukan pada template terbaru terlebih dahulu, misal sobat mau mengkopi widget "featured post" cari maka pada lompat ke widget sobat akan menemukan kode HTMLnya sbb:
HTML blogger
gambar halaman editor HTML "lompat ke widget"
Sekali featuredpost dipilih kita akan langsung menemukan untaian kode widget template terbaru (disini saya ambil contoh feturedpost milik varian contempo) sebagai berikut, dimulai dengan <b:section> ditutup dengan </b:section>
 <b:section class='featured-post' id='featured_post' name='Featured Post' showaddelement='false'>
                  <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' version='2' visible='true'>
                    <b:widget-settings>
                      <b:widget-setting name='showSnippet'>false</b:widget-setting>
                      <b:widget-setting name='showPostTitle'>true</b:widget-setting>
                      <b:widget-setting name='postId'>4116300480801866305</b:widget-setting>
                      <b:widget-setting name='showFirstImage'>true</b:widget-setting>
                      <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main' var='this'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <b:include name='snippetedPosts'/>
  </div>
</b:includable>
                    <b:includable id='commentsLink'>
          <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>
            <b:include name='commentIcon'/>
            <span class='num_comments'>
              <data:post.numberOfComments/>
            </span>
          </a>
        </b:includable>
                    <b:includable id='footerBylines'>
          <!-- Set the calling parent element to be a container. -->
          <b:class name='container'/>
          <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
            <b:include name='super.footerBylines'/>
          <b:else/>
            <b:include data='{ items: [[&quot;comments&quot;]] }' name='footerBylinesOverride'/>
          </b:if>
          <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
        </b:includable>
                    <b:includable id='headerByline'>
          <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
            <b:include name='super.headerByline'/>
          <b:else/>
            <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;, &quot;labels&quot;] }' name='headerBylineOverride'/>
          </b:if>
          <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
        </b:includable>
                    <b:includable id='postLabels'>
          <b:if cond='data:view.isMultipleItems'>
           <div class='labels-outer-container'>
              <div class='labels-container overflowable-container overflowable-no-popup'>
                <div class='labels-items overflowable-contents byline post-labels'>
                  <b:loop index='i' values='data:post.labels' var='label'>
                    <span class='overflowable-item'>
                      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                    </span>
                  </b:loop>
                </div>
                <span class='labels-more overflow-button hidden'>
                  <a expr:href='data:post.link ?: data:post.url'>+<span class='overflow-count'/></a>
                </span>
              </div>
            </div>
          <b:else/>
            <b:include name='super.postLabels'/>
          </b:if>
        </b:includable>
                    <b:includable id='postShareButtons' var='post'>
          <!-- We call super.postShareButtons from the migrated positions. -->
        </b:includable>
                    <b:includable id='postTitle' var='post'>
          <!-- Snippetize the post title -->
          <div class='post-title-container'>
            <a expr:name='data:post.id'/>
            <h3 class='post-title entry-title'>
              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                <a expr:href='data:post.link ?: data:post.url'>
                  <div class='snippet-container r-snippet-container'>
                    <div class='r-snippetized'>
                      <data:post.title/>
                    </div>
                    <b:if cond='data:post.title != &quot;&quot;'>
                      <div class='snippet-fade r-snippet-fade hidden'/>
                    </b:if>
                  </div>
                </a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h3>
          </div>
        </b:includable>
                    <b:includable id='postWrapperClasses'>
          <b:class cond='data:post.featuredImage' name='image'/>
          <b:class cond='not data:post.featuredImage' name='no-image'/>
          <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
        </b:includable>
                    <b:includable id='snippetedPostContent'>
          <b:if cond='data:widget.sectionId != &quot;featured_post&quot;'>
            <b:include name='super.snippetedPostContent'/>
          <b:else/>
            <b:with value='&quot;post-thumb-&quot; + data:post.id' var='thumbClassName'>
              <b:if cond='data:post.featuredImage'>
                <style>
                  @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, &quot;800:272&quot;).cssEscaped'/>);} }
                  @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, &quot;1185:272&quot;).cssEscaped'/>);} }
                  @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, &quot;1:1&quot;).cssEscaped'/>); } }
                  @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, &quot;745:400&quot;).cssEscaped'/>); } }
                </style>
              </b:if>
              <div expr:class='&quot;post-wrapper hero post-&quot; + data:post.id'>
                <b:include name='postWrapperClasses'/>
                <b:include name='feedPostImage'/>
                <div class='slide'>
                  <div class='post hentry'>
                    <b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>
                    <b:include name='headerByline'/>
                    <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>
                    <div class='post-footer'>
                      <b:include name='footerBylines'/>
                    </div>
                  </div>
                </div>
              </div>
            </b:with>
          </b:if>
        </b:includable>
                    <b:includable id='snippetedPostThumbnail'>
          <div class='item-thumbnail'>
            <a expr:href='data:post.url'>
              <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [280,560,840,1120,1400]                                }' name='responsiveImage'/>
            </a>
          </div>
        </b:includable>
                  </b:widget>
                </b:section>

Kode diatas bisa saja terlihat seperti dibawah ini ketika tampil di dalam halaman editor HTML blogspot, singkat dan ada tiga titik memisahkan hingga ke </b:section> tiga titik itu menyembunyikan seluruh kode HTML yang tidak terlihat seperti ditampilkan diatas. Tujuannya tentu saja untuk memudahkan kita mengkopi.
<b:section class='featured-post' id='featured_post' name='Featured Post' showaddelement='false'>...</b:section>
3. Setelah kode dari template varian terbaru blog kita buka dan kita kopi, sekarang buka halaman HTML pada template blog kedua yang menggunakan template model lama dengan cara yang sama dengan cara diatas tadi. Kali ini setelah menemukan kode HTML featuredpost (dari <b:section> hingga ke </b:section> hapus semua kode tersebut dan pastekan kode dari HTML featuredpost template baru sebagai penggantinya. Save template.

Sekali lagi, hampir semua widget dapat sobat ganti, kecuali widget blog1 karena ia adalah inti dari struktur sebuah blog yang menampilkan halaman web ke internet.

Perhatian! Teknik ini hanya dapat sobat lakukan dengan baik jika sobat telah berlatih mengedit kode kode HTML sebelumnya di dalam halaman editor template blogger.

www.editblogtema.net

Comments

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © Editblogtema. All rights reserved.