KEHEBATAN TEMA CONTEMPO SETELAH DI RE-DESAIN

KEHEBATAN TEMA CONTEMPO SETELAH DI RE-DESAIN

Tema contempo bisa menjadi altenatif sebagai pengganti tema premium, saya belum berhenti mengagumi struktur CSS didalamnya.

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.  Tetap terbuka lebar cara mengeditnya asalkan anda tekun dan percaya pada kemampuan diri anda sendiri.
Kali ini saya pilih contoh hasil pengeditan contempo, anggaplah sebagai update dari tema bawaan, lalu apa yang baru?
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.
Menambahkan Related post di tengah postingan dengan efek font awsome.
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)
Mengatur ulang pewarnaan melalui blogger desainer.
Terakhir mengganti/mengedit credit footer bawaan dengan credit footer sendiri.
Bersih, cepat dan SEO friendly.

TEMPLATE BLOG BAWAAN ADALAH  YANG TERBAIK BUAT BLOG
Alasannya:
  1. Karena dia gratis
  2. Karena dia bisa di edit atau diredesain
  3. Karena dia dibuat mengikuti standard kemanan Blogger
  4. Sederhana dan memiliki opsi DESAINER TEMA BLOGGER
Tinggal bagaimana anda saja dalam menyikapinya.


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 :

CONTOH CONTEMPO 1



CONTOH CONTEMPO 2


Atau silahkan lihat Artikel tinjauan kami:

MENGENAI TEMPLATE INI

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

Note: Tema ini kami pindahkan dari artikel yang di tulis di adedansasa.com
Yang ingin mencoba kehebatan tema ini silahkan donlot DISINI

Beri Komentar ya..

7 Comments

  1. seneng ngotak ngatik standar theme ya

    ReplyDelete
  2. Itu bukan Utah atik tapi mengedit struktur kode tema blogger karena dirasa masih kurang rsponsive atau tampilannya terlalu standard...

    ReplyDelete
  3. Buatin tutor agar sidebar tetap tampil saat di buka dengan layar kecil mas,

    ReplyDelete
    Replies
    1. itu hanya butuh tema responsive saja

      Delete
    2. Mas Nasrul, sidebar pada layar yang lebih kecil tidak bisa ditampilkan disamping layar hape, tapi dibawah homepage atau dibawah setelah artikel. Karena jika di tampilkan disamping layar sekecil atau seukuran begitu bakalan gak responsive deh mending pakai tema klasik saja.

      Tema tema bawaan blogger klasik ini tidak responsive karena pada zaman tahun 2008-2013-an ngeblog pakai ponsel belum ada maka desain template blogger dibuat untuk layar layar besar spt desktop dan laptop, dan pada saat template tersebut dipakai pada hape maka sidebar akan tetap muncul dilayar hape yang lebih kecil. Namun sebagai akibatnya membuat website jadi tidak responsive.

      Tulisan jadi mengecil, kecepatan menurun drastis (load berat). Jadi kalau di hape side bar itu tida akan bisa ditampilkan mirip ada desktop. Itulah yang dimaksud dengan responsive. Kalau tutorial membuat side bar responsive untuk tema tema terbaru seperti contempo sudah banyak terdapat di internet mas. contohnya:

      melalui link ini: (https://www.google.co.id/search?q=Membuat+sidebar+responsive+untuk+tema+contempo&oq=Membuat+sidebar+responsive+untuk+tema+contempo&aqs=chrome..69i57.29143j0j7&sourceid=chrome&ie=UTF-8)

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik