AdelinaSasa

Privacy Perihal kami Coba Template kami
×
Skip to main content

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!

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
  10. Aku pake tema ini kok readmorenya kadang nggak bisa di klik ya mba? Kira2 penyebabnya apa ya? Saya baru edit desainnya belum berani edit html. Trus buat pasang adsense otomatis kan iklan anchornya jadi nutupin sticky naik turun, cara ngilangin yg naik turun itu gimana ya mba? Maaf banyak nanya soalnya masih newbie baru dua bulanan ngeblog jgi masih puyeng 🤭

    ReplyDelete
  11. Makasih infonya, kak! Jadi lebih tahu, nih! Hehe....

    ReplyDelete
  12. Sip gan, bagaimana caranya jika sidebar tidak tersembunyi, yang diedit bagian mananya? Trims

    ReplyDelete
  13. itu semua hasil editanya DEMO yang nomer brpa gan???

    ReplyDelete
  14. cuma saran
    diberikan gambar biar tahu bagaimana gambaran setelah edit untuk setiap bagian.
    untuk postingan ini sangat membantu, terima kasih.

    ReplyDelete
  15. Kalau membuat next dan prevnya gimana mas...kebetulan saya menggunakan template contempo

    ReplyDelete
  16. Gimana caranya buat menu kayak blog punya Mas. Mumpun blog yang saya pakai sama dengan blog yang Mas pakai, saya juga ingin modifikasi

    ReplyDelete
    Replies
    1. Pakai yang sudah jadi saja saya ada kok

      Delete
  17. mas yang di video bagaimana bisa seperti itu yah mas, aku ingin sekali pakai

    ReplyDelete

Post a Comment

Popular Minggu ini:

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

Pernah dengar Rumor iPhone rakitan Jepang dan Singapore?
Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM.

Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual.

Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore.
Secara fisik, fitur dan kemampuan tidak ada perbedaan yang essensial. Nam…

APA BEDA SONY XPERIA ZR DOCOMO DENGAN GLOBAL?

Di Indonesia terutama di Batam sedang diserbu oleh produk hape bekas besutan sony keluarga xperia, saya juga tidak mengerti mengapa seken hape ini bisa sampai banjir di negara kita yang seluas ini, kalau mau dibilang produk hape ini sudah terbilang lawas di rilis dikisaran waktu 2013 - 2015, namun speknya masih terbilang bagus, dengan kamera beresolusi 13 - 20,7 Megapixel RAM 2GB, ruang simpan yang cukup lega dikisaran 8 - 32GB, tentu sangat menarik apalagi (kalau di Batam) harganya sangat murah berkisar antara RP. 550.000,- hingga RP.800ribuan, sangat terjangkau. Dan penjualnya memberikan garansi toko, bisa juga dibeli secara online, (kamu bisa mencari nama nama toko di Facebook seperti: Putra siregar seken singapore, atau bang Juju karena nama nama ini sudah terjamin kredibilitas bisnis mereka di Batam, Putra siregar bahkan telah memiliki beberapa cabang, Pekanbaru, Jakarta, Bali dll)

Satu hal yang kamu harus tahu: baik docomo maupun global keduanya sama sama asli besutan Sony, sama…

5 SIGNS WHY YOU ARE GENIUS

IF YOU CAN USE YOUR SMARTPHONE BY RIGHT when you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now, then I guess you will buying a phone, Am I right?  But why? Because with a smarthphone you can call your mom by dial her number, or you can texting your friends and send them some messages, so many fun in just one hand. Further more a phone does have networking capacity as laptop does have, so you can also chat with your friends through the internet.
Oh yes! I can't count how many times you can use it for get pictures with your friends and send them into social media like Facebook, IG, and GPlus? That are the ordinary people way to use their phones.

Why we call you are genius one is when you can use your smartphone more than a phone. You can use it for some productivity work such as: Blogging, support working, support learning, and for some excercises. When you so curious, here we go:

Signs 1. BLOGGING
You can use your smartphone fo…