Follow:

KEHEBATAN TEMPLATE CONTEMPO BLOGGER SETELAH DIBERI SENTUHAN MODIFIKASI

Adalah empat template terbaru blogger yang sangat mudah dimodifikasi dengan cara kombinasi melalui opsi blog desainer maupun edit HTML melalui dasbor blogger. ke empat tema tersebut adalah: CONTEMPO, SOHO, EMPORIO dan NOTABLE (atau Terkemuka).
Ke empatnya tidak memerlukan opsi setting mobile sudah cocok buat tampilan PC desktop dan hape/seluler sekaligus. Artinya ya responsive dan mobile friendly.
Kali ini saya pilih contoh hasil pengeditan contempo, anggaplah sebagai update dari tema bawaan, lalu apa yang baru?

  1. Menambahkan tombol "back to top" yang terlihat dengan tulisan "Keatas" sebagai scroll otomatis halaman pada saat di scroll ke bawah pada saat mau mengembalikannya ke atas.
  2. Menambahkan Related post di tengah postingan dengan efek font awsome.
  3. Menambahkan elemen font awsome, agar fa fa awsome dapat bekerja pada blog ( walaupun tidak semua browser dapat menampilkan font awsome, namun pada umumnya browser-browser besar dan kuat memiliki kemampuan ini)
  4. Mengatur ulang pewarnaan melalui blogger desainer.
  5. Terakhir mengganti/mengedit credit footer bawaan dengan credit footer sendiri.
  6. Bersih, cepat dan SEO friendly.
TEMPLATE BLOG BAWAAN ADALAH ADALAH YANG TERBAIK BUAT BLOG

Apalagi setelah di edit template template bawaan akan memiliki semua kebutuhan blog anda, dengan masuk ke blogger-Setting-Tema>sesuaikan. Atau setting -Tema>edit HTML. Anda bisa saja membuat tema yang benar benar baru dalam bentuk tampilan, cantik dan segar!

Jadi mengapa tidak, yang anda butuhkan adalah elemen elemen, tool, widget dan sedikit citarasa seni. Contoh tampilan contempo setelah diberi sedikit sentuhan (sengaja tanpa menghilangkan ciri ciri khasnya) di bawah ini:
Atau kunjungi link :
DEMO CONTEMPO 1
CONTEMPO1
DEMO CONTEMPO 2 
CONTEMPO 2
Atau silahkan lihat demo video:
Cara pengeditan ini tidak membutuhkan pengetahuan koding, hanya butuh sedikit kreatifitas dan memanfaatkan ribuan tool yang telah ada. Saya anjurkan anda mencari tool, elemen dan widget-widget gratis yang tersebar di internet, dan menyimpannya dalam bentuk librari note di komputer, tablet atau laptop anda. Karena sewaktu waktu jika anda membutuhkannya, mereka akan sangat berguna untuk bahan "bangunan" membuat template.

LANGKAH SELANJUTNYA JIKA INGIN MENGEDIT TEMA CONTEMPO
Setiap template memiliki struktur kode yang berbeda dan saling berkait, dan tidak heran jika kita sering tidak menemukan kode yang kita cari padahal terdapat pada template milik teman misalnya. Tema contempo hanya memiliki satu satunya <data:post.body/> Jadi mempunyai perlakuan berbeda pada saat melakukan pengeditan atau penempatan widget yang harus ditanamkan langsung kedalam HTML sedikit berbeda, tapi dasarnya sama saja.

Caranya masuk kedalam setting dasbor blogger yakni: Theme>Edit HTML
Seperti saya singgung diatas tulisan ini banyak tool tersedia berikut cara penempatannya di net. Untuk mengedit tema sejenis contempo agar lebih cepat dan lebih SEO FRIENDLY anda dapat mengikuti langkah berikut ini:

  • HEADER
Terkadang css memblokir render kecepatan paruh atas blog, sebelum mengedit lebih jauh ada baiknya merobah kode <head> dengan  &lt;head&gt; dan kode </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt; maksud saya hapus dan gantikan saja.

Coba anda cari widget ini dalam struktur header, gunakan saja CTR+F dan kopi-pastekan saja sebagian kode dibawah ini misalnya kopi <b:includable id='title'>, kemudian kenali:

<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>


Jika sudah ketemu hapus semua kode diatas dan ganti dengan kode dibawah ini:

<b:includable id='title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include name='super.title'/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

</b:includable>


Selanjutnya cari kode dibawah ini untuk merobah heading pada postingan:

<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != &quot;&quot;'>
<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'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>


Hapus dan ganti dengan kode dibawah ini:

<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:includable>


Sekarang heading blog sudah tampak dinamis, tapi belum cukup untuk membuatnya stabil kita membutuhkan kode css yang harus diletakan di atas ]]></b:skin> berikut kodenya:

.header-widget a, .widget.Header h1 { color: #ffffff; font: bold 45px Roboto, sans-serif; line-height: normal; margin: 0 0 13px; text-align: center; width: 100%; } .item-view .Header a, .sticky .Header h1, .sticky .Header a { font-size: 24px; line-height: 24px; margin: 0; text-align: left; } .item-view .header-widget { text-align: left; margin: 0; } .header-widget { text-align: center; margin: 0; } .centered-top-container.sticky .widget.Header h1 a, .centered-top-container.sticky .header-widget a:visited, .centered-top-container.sticky .header-widget a:hover { color: #757575; } .sticky .Header h1 { color: #757575; } @media screen and (max-width: 800px){ body.collapsed-header .centered-top-container .widget.Header h1, .header-widget, .item-view .header-widget { text-align: center;} body.item-view .widget.Header, body.item-view #header { margin: auto; }}

Anda masih bisa melanjutkan merombak template blogger contempo dengan memasang Breadcrump, cari kode dibawah ini:

<b:includable id='main'> 
Letaknya biasanya pada widget ID blog 1, bersambung diantara tag atau >....<, untuk mengenalinya tekan titik titik tersebut, hapus saja kode tersebut dan ganti dengan kode dibawah ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Lalu gunakan kode berikut untuk merapikan breadcrumb, dan letakan atau di pastekan  diatas  ]]></b:skin> 

.breadcrumbs {
padding-top: 40px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 40px;
padding-right: 40px;
color: #757575;
background: white;
}
.breadcrumbs a {
color: #757575;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color: #21b0f7;
}

Pengeditan selesai.

MEMASANG RELATED POST
Related post tampak penting dan tidak penting  bagi sebuah blog tergantung selera, namun jika anda ingin memasangnya pada tema contempo, anda dapat mengikuti langkah berikut, pastekan kode berikut tepat di bawah <data:post.body/>:


<br/><br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Lalu paste-kan kode dibawah ini tepat di atas </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

KEUNTUNGAN MENGGUNAKAN HASIL REDESAIN TEMA BAWAAN BLOGGER
  • Anda tidak perlu takut dengan kode kode script nakal yang menggunakan unicode, standar kode tetap terjaga, stabilitas terjamin, update selalu akan mengikuti prosedur keamanan yang standar. Aman dan nyaman di pergunakan
  • Tampilan contempo adalah sangat mobile, dan hasil modifikasi desain menjadikannya sangat dinamis, tampak bersih.
  • Anda juga mempunyai kesempatan belajar mendesain, re-desain dan mempertajam ketrampilan seni desain web.
  • Keuntungan lain memakai template bawaan blog yang telah di modifikasi adalah kita tetap dapat mengedit desain blog dasar melalui blogger desain bawaan di dasbor, tidak ada opsi yang terhapus atau di disable. Semuanya tetap dengan kemudahan, namun dengan hasil template premium, anda benar benar akan terkagum kagum dengan kecantikan dan kecepatannya....

Salam blogger!

Post a Comment

16 Comments

  1. ijin bookmark ut belajar pelan2 Gan

    ReplyDelete
    Replies
    1. It has meet all necessary blogging for Mobile but you still need considering how to manage desktop appearance

      Delete
  2. Yeah.. .Next project will bringing desktop/pc update : fix sidebar position in a desktop appearance.

    Will coming soon...

    ReplyDelete
  3. aku sangat suka theme asli blogger
    adsense ready soalnya
    tapi bingung jika dikasih autoreadmore kok laman mandiri jadi kepotong
    bisa bantukah kawanku?

    ReplyDelete
    Replies
    1. Belum pernah mengalami hal seperti itu.
      harus liat jenis templatnya dulu baru bisa kita treatment :😁tidak semua jenis templat dapat ditambahkan kode tertentu. Templat yang kami pergunakan juga adalah templat blogger yang di modifikasi. Kecuali tema adelinasasa ini yang lainnya 100% kami modifikasi dari templat bawaan dan meniru desain di internet .

      Delete
  4. ingin buat blog baru dengan template ini.

    ReplyDelete
    Replies
    1. Tunggu link masih berisi template lama yang belum di update

      Delete
  5. Peringatan! Link donlot masih berisi template bawaan yang belum di update, update terbaru telah membawa perubahan besar besaran terhadap struktur template dari segi Gaya, kecepatan loading hingga patch keamanan, yang ingin tema kontempo dengan update terbaru, silahkan menghubungi kami via footer: "contact" dibawah bagian footer blog ini. Jangan lupa subscribe ya...

    ReplyDelete
  6. Salam kenal mas, postingannya menarik, layak untuk dicernah secara detail.
    Sobat jika templete ini ditambahkan kode skrip dari tempat lain. Misalnya kode skrip tentang sitemap blog di atas Head apa dampaknya bagi blog itu? apakah loding blognya tambah berat? berpengaruh dengan SEO kah..Mohon penjelasanya sobat terkait kode skrip apapun itu (yang dari luar) kemudian ditambahkan ke templete yang aslinya..

    Semoga pertanyaan saya yang tidak jelas ini dipahami dan saya diberi pencerahan... salam

    ReplyDelete
    Replies
    1. untuk ke empat jenis template yang kami maksud diatas setelah diuji memang berpengaruh pada kecepatan, sebaiknya script di modifikasi terlebih dahulu sebelum di pasang, berpengaruh terutama kepada kecepatan render paruh atas, dan bahkan pada salah satu dari empat tema tampilannya jadi berantakan.

      Juga tidak bisa ditampilkan

      Delete
  7. Ini tema blogspot yang terhebat. Sungguh luar biasa, saya pun mengaguminya. Hanya disentuh sediki saja, tampilannya tambah luar biasa.

    ReplyDelete
    Replies
    1. Jadi malu, itu hanya tema sederhana namun di edit kami hanya mau berbagi sama teman teman jangan berkecil hati jika belum menguasai koding, kita dapat membuat template kita sendiri dan disesuaikan dengan selera kita. Tapi terimakasih atas tanggapannya.

      Delete
  8. ...< yang ini banyak banget yang mana yaw?

    ReplyDelete
  9. Dan satu lagi gan,... itu "Langganan" hilang gimana cara memunculkan kembali,.. maaf ngerepoti :)

    ReplyDelete
    Replies
    1. Kang Tri sebenarnya untuk "langganan" tidak hilang pada template default bawaan yang umumnya kami edit. Untuk mengembalikannya tinggal >Masuk ke pengaturan>pilih tataletak>Tambahkan widget>lalu pilih tautan berlangganan.

      Akan tetapi tentu saja beda kalau kita terlanjur menghapusnya melalui opsi "editHTML"

      Delete