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:

Karena dia gratis
Karena dia bisa di edit atau diredesain
Karena dia dibuat mengikuti standard kemanan Blogger
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 <head> dan kode </head> dengan </head> 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 == "REPLACE"' 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 != ""'>
<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 != "item"'>
<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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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 == "item"'>

<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' 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 == "item"'>
<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

9 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

fajar herlambangNovember 22, 2018
seneng ngotak ngatik standar theme ya
BalasHapus
Balasan
Anissa AuliasariNovember 24, 2018
Itu bukan Utah atik tapi mengedit struktur kode tema blogger karena dirasa masih kurang rsponsive atau tampilannya terlalu standard...
BalasHapus
Balasan
Nasrul UmamDesember 04, 2018
Buatin tutor agar sidebar tetap tampil saat di buka dengan layar kecil mas,
BalasHapus
Balasan
jeffriedotcom@gmail.comJuni 29, 2023
saya pakai contempo cepat terlacak oleh google
BalasHapus
Balasan