AdelinaSasa

KEHEBATAN TEMPLATE CONTEMPO BLOGGER SETELAH DIBERI SENTUHAN MODIFIKASI

Keuntungan menggunakan template blog hasil re-desain tema bawaan blogger

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

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 MENURUT PARA KAKAK BLOGGER SENIOR:
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. Akan tetapi trik ini bisa merusak fungsi REPLY pada fitur KOMENTAR blog.

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>
Dan itu untuk membuat heading menjadi 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.

Tapi disini saya peringatkan, data vocalubary diatas sudah di stop oleh Google sebagai standar Mark Up Data, jadi breadcrumb diatas BATAL.

Goolge lebih menyarankan kita memasang breadcrum Jason-LD, leetakan kode berikut di bawah kode <data:post.body/> jika terdapat lebih dari satu pilih yang kedua atau yang terakhir.
Cara pemasangannya juga sederhana pada salah satu template terbaru (contempo, soho, emporio dan Notable) cari kode <data:post.body/> kalau terdapat lebih dari satu jumlahnya pilih kode yang kedua atau yang terakhir, lalu letakan kode Jason-LD berikut tepat di bawah kode tadi:
<script type='application/ld+json'>{
&quot;@context&quot;: &quot;https://schema.org&quot;,
&quot;@type&quot;: &quot;BreadcrumbList&quot;,
&quot;itemListElement&quot;: [
{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: 1,
&quot;name&quot;: &quot;Home&quot;,
&quot;item&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;
<b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
{
&quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
&quot;name&quot;: &quot;<data:label.name/>&quot;,
&quot;item&quot;: &quot;<data:label.url.canonical/>&quot;
<b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
]
}</script>
Save tema.
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>
LANGKAH LAIN MENURUT EDITBLOGTEMA (VERSI KAMI)

Trik kali ini kami kemukan di alaman web khusus web kami: editblogtema.net. Sekali lagi kami ulangi: Empat varian terbaru template blogger (2017-sampai sekarang)  adalah:
cara merombak template terbaru blogger

  1. Contempo
  2. Soho
  3. Emporio
  4. Notable
Sedangkan 7 varian template blogger lama  (2008-2017) adalah:
  1. Simple
  2.  Dinamic
  3. Picture window
  4. Awesome inc. 
  5. Watermark
  6. Ethereal
  7. Travel
Perbedaan:
  1. Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang. 
  2. Template terbaru sudah mengusung gaya desain aliran tertentu misal: contempo beraliran indie, soho beraliran fancy,  emporio menganut aliran vegea,  dan notable mengikuti aliran desain bergaya rockpool. 
  3. 4 varian Template terbaru sudah dilengkapi dengan ikon svg bawaan yang walau terbatas namun cepat tidak menghambat kecepatan loading halaman web. Misalnya menuIcon, shareIcon, closeIcon dll. Sedangkan template lama tidak. 

Trik mudah merobah tampilan template contempo
a. Header. 
Template Contempo memiliki tinggi header yang dapat di ejas melalui pengaturan pada dasbor blogger. Akan tetapi pengaturan tersebut hanya sampai batas paling kecil: 100px. Tampilan header tetap melewati batas latar headernya. Bagaimana tidak? Karena pengaturan CSS groupnya adalah sebagai berikut:
<Group description="Backgrounds">
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="480px" value="480px"/>

<Variable name="body.background" description="Background"
color="$(body.background.color)"
type="background"
default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>
<Variable name="body.background.color" description="Body background color"
type="color"
default="#eee" value="#eeeeee"/>
<Variable name="posts.background.color" description="Post background color"
type="color"
default="#fff" value="#ffffff"/>
<Variable name="body.background.blur" description="Background blur"
type="length"
min="0px"
max="50px"
default="0px" value="0px"/>
</Group>
Jika kalian ingin batas tersebut tidak melewati latar header atau sejajar dengan latar, kalian harus merombak ukurannya melalui pengaturan CSS,  dan tampaknya hanya dapat dilakukan melalui halaman editor HTML. Kalian harus menemukan kode di atas dan merobah angka yang kami beri warna merah dengan menjadi:
min="100px"
max="640px"
default="480px" value="100px"/>

Caranya masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML (dasbor blogger baru)

Kemudian Save template 

b.  Ikon 
Template Blogger terbaru menggunakan model ikon SVG versi blogger itu sendiri. Inilah salah satu hal yang membedakannya dengan template blogger yang lebih lama. Dengan memiliki ikon ikon ini paling tidak kita tidak memerlukan ikon ikon pihak ketiga seperti ikon ikonnya font awesome.

Ikon svg pada Blogger dapat di ganti atau di robah. Misalnya jika kalian tidak menginginkan ikon backArrowIcon dan ingin mengganti tampilannya menjadi closeIcon
merobah ikon backarrow template blogger terbaru

Perhatikan contoh:
<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>

Kita dapat merobah ikon tersebut dengan merobah tulisan warna merah: 

<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='closeIcon'/>
Ikon tersebut berada pada sidebar untuk menutup sidebar tersebut, atau berada di header bagian halaman postingan dan jika kita merobahnya seperti instruksi di atas maka ikon tanda anah menghadapat ke kiri (πŸ”™) akan berubah menjadi ikon close (⨲) walau sangat terbatas, template blogger terbaru memiliki sejumlah kecil ikon bawaan (default) yang dapat kita pergunakan, yakni:

  1. menuIcon ()
  2. emailIcon (πŸ“§)
  3. commentIcon (πŸ’¬)
  4. flatbloggerIcon
  5. closeIcon (❌)
  6. backArrowIcon (πŸ”™)
  7. chevronDownIcon
  8. chevronUpIcon
  9. facebookIcon
  10. forwardArrowIcon
  11. linkIcon
  12. pinterestIcon
  13. searchIcon
  14. shareIcon
  15. svgIcon
  16. twitterIcon
  17. verticalMoreIcon
  18. sharingOtherIcon
  19. defaultAvatarIcon

Adapun jenis ikon ikon tersebut yang pada  telah di terapkan ke dalam 4 varian template blogger terbaru adalah:

menuIcon, backArrowIcon, svgIcon, shareIcon, emailIcon, dan searchIcon. dll.

C.  Pengaturan tampilan pagelist. 
Pagelist dapat dijadikan sebagai pengganti navbar untuk navigasi menu blogger, namun agar membuatnya lebih stylish dan beda dengan tampilan aslinya kalian harus merombak penngaturan CSSnya.

Jadi kita harus masuk ke pengaturan blogger pilih tema, pilih sesuaikan, kemudian cari menu 'Tambahkan CSS, dan pada blanko CSS tersebut silahkan masukan kode overrade CSS berikut:
.blog-name .PageList{
background: transparent;
border-top:double; border-color: #fff;
border-bottom:double; border-color: #fff;
margin-top:1px;
padding-top:0px;
text-align:center
}
.blog-name .PageList .overflowable-contents{
width:90%
}
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}
Save template.

Itu belum selesai sampai kalian ketemu kode berikut di dalam halaman editor HTML, silahkan masuk kepengaturan blogger dan pilih tema lalu pilih opsi edit HTML, cari kode berikut, terdapat dua kode yang sama pada template contempo, pilih yang kedua:

          <a><data:messages.moreEllipsis/></a>

Hapus kode tersebut dan ganti dengan kode berikut:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>

Kemudian Save template. 

d. Menambahkan sidebar menu pada sidebar blog. 
Jika kalian lebih suka tampilan minimalis dan ingin agar tampilan navigasi menu pada bagian sidebar, maka kalian dapat menyembunyikannya dan menampilkannya dengan cara mengklik ikon menu pada bagian homepage blogger contempo. Caranya:
  1. Masuk ke pengaturan dasbor blogger
  2. Pilih tata-letak atau layout
  3. Pilih layout bilah sisi nomor dua dari atas dan klik tambahkan gagdet/widget
  4. Pilih tambahkan HTML/Javascript.
Pada blanko kosong HTML/Javascript kosong yang muncul pastekan saja kode berikut:
<style>
body {
font-family: &quot;Lato&quot;, sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 300px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
border-radius: 1%;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a, .dropdown-btn {
padding: 6px 18px 6px 18px;
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}


/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color:purple;
}

/* Main content */
.main {
margin-left: 2px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
background-color: pink;
color: white;
}
.dropdown-container {
display: none;
background-color: indigo;
padding-right: 0px;
}

.fa-caret-down {
float: right;
padding-left: 10px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>
<div class="sidenav">
<a href="#privasi">Privasi</a>
<a href="#services">Servis</a>
<a href="#clients">Klien</a>
<a href="#contact">Disclaimer</a>
<button class="dropdown-btn">JENIS TEMPLATE: 
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</path></svg>
</button>
<div class="dropdown-container">
<a href="#">Contempo</a>
<a href="#">Soho</a>
<a href="#">Emporio</a>
<a href="#">Notable</a>
<a href="#">Masonry</a>
</div>
<a href="https://youtu.be/ShZuW2uWXhY">Demo Video</a>
</div>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

E. Gambar profile penulis di atas setiap postingan

Trik ini kami muat pada postingan dengan Judul:

Silahkan ikuti karena trik tersebut berlaku untuk semua template terbaru kecuali notable tidak perlu karena sudah memiliki fitur bawaan avatar atau gambar penulis di atas setiap postingan.

Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:

2. Trik mudah merombak tampilan dan meningkatkan performa template soho
3. Trik mudah merombak tampilan dan meningkatkan performa template emporio
4. Trik mudah merombak tampilan dan meningkatkan performa template notable


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....
Jika ingin Tutorial lengkap mengedit ke empat tempalte terbaru blogger silahkan ikut Link:


Salam blogger!

Artikel Terkaitnya:

43 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
    Replies
    1. Itu template hasil redesain emporio gan

      Delete
  18. mas apakah kamu mengalami kalau auto ads di adsense diaktifkan sedangkan kita pakai template blogger seperti soho atau contempo, kadang membuat elemen di blog gak bisa diklik sama sekali. seperti freeze gitu. navigasi gak bisa dlik, home gak bisa dilik, thumbnail gak bisa diklik.. kalau iya, bagaimana cara mengatasinya?

    ReplyDelete
  19. bagaimana Cara masang lazy load? saya mencari kode img yang menampilkan gambar artikel tidak ketemu. mohon bantuannya

    ReplyDelete
    Replies
    1. Kunjungi blog igniel.com disana lengkap dibahas perihal lazy load ini

      Delete
  20. Nyimak dulu gan, nanti di coba

    ReplyDelete
  21. Kak, kalau bikin tulisan yg paling bawah itu gimana kak,
    Contoh kyak yg ini "ADELINASASA ALLRIGHTS RESERVED" gimna itu kak,

    ReplyDelete
    Replies
    1. Template yang mas Lutfi pakai adalah contempo: di dalam halaman Edit HTML cari kode:

      <b:template-script async='true' name='indie' version='1.0.0'/>

      Itu kode desain template contempo 'bergaya INDIE' dan copy semua kode kode berikut di bawah letakan di atas kode tadi:

      <center><small>Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>.
      All rights reserved.</small>

      <a class='trans color-hover' href='#' id='jump-top-button'>
      <span class='block black color-hover'><svg style='width:44px;height:44px' viewBox='0 0 24 24'>
      <path d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z' fill='indigo'/>
      </svg></span>
      <span class='block color-hover upper'><center>KLIK UNTUK KEMBALI KE ATAS</center></span>
      </a>
      </center> </center>
      </div>
      </div></div>

      Jika terdapat error cobalah kurangi atau tambahkan kode </div> uji dengan cara 'preview' setelah benar baru di save templatenya

      Delete
    2. Untuk meletakkan di bagian mana itu kak, maaf awam banget

      Delete
    3. Diatas kode:

      <b:template-script async='true' name='indie' version='1.0.0'/>

      Delete
    4. Tema Anda tidak dapat diuraikan karena tidak terbentuk dengan baik

      Delete
    5. eror kak, udah aku copy smua

      Delete
    6. Coba kurangi div paling bawah satu persatu sampai habis

      Delete
    7. makasih banyak kak udah bisa, tapi cuma copyright nya doang, yang tab kembali keatas gak aku pake kodenya

      Delete
  22. Lah dimana saya harus meletakkan kak
    Maaf awam bgt

    ReplyDelete
    Replies
    1. Tempatnya diatas kode yang disebutkan

      Delete
  23. AnonymousJuly 13, 2020

    Sangat-sangat Serius Dalam Memodifikasi Template Sangan Bermanfaat Juga Terimakasih;)

    ReplyDelete
  24. terimaksih pak bro, saya suka ini, karena menggunkana tema bawaan sudah pasti lebih di recomendasikan dengan edit lebih dinamis sangat saya ingin mempraktekannya

    ReplyDelete
  25. ijinkan saya untuk copas scribnya pak bro..mantap ni bawaan blogger

    ReplyDelete

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates