PANDUAN SINGKAT MEROMBAK TEMPLATE SOHO

SOHO template redesigned
Template SOHO setelah di desain ulang
Aduh apa apan? SOHO yang headernya gambar kucing itu? Tunggu, jika anda tidak menyukainya dengan mudah anda membuang gambar tersebut dan menggantinya dengan gambar yang lebih sesuai dengan misi blogging anda sendiri.

Masih tidak suka ada gambar header? Saya akan menjelaskan cara membuangnya plus menghilangkan sisa space yang ditinggalkannya pada bagian akhir tutorial kali ini, lanjutkan membaca...

Fitur:
  1. Struktur asli bukan custom.
  2. Tampilan menawan, dapat di modifikasi tanpa batas.
  3. Mudah digunakan sekalipun oleh pemula. Mudah diedit melalui pengaturan blogger: Blogger Designer.
  4. Tampilan professional
  5. Material dan elemen bersih dan 100% asli blogger mencakup jaminan keamanan, fitur, SEO bawaan yang stabil
  6. Sidebar sebagai opsi kontainer menu navigasi blog yang keren
  7. Breadcrumbs versi 3
  8. Related post
  9. Footer dan tautan Sosial Media ready untuk di edit.
  10. Benar benar Fastloading.
7 keuntungan menggunakan template asli apalagi setelah di re-desain?
  1. Lebih aman, sistem sekuriti kemanan script, sisi server sepenuhnya dari Google (saya jamin saya tidak mencampur campur elemen HTML kecuali memodifikasi material dan elemen yang telah ada di dalam HTML dan masih sesuai dengan basis template blogger). 
  2. Meta-tag otomatis. Jika ada update akan mendapatkan notifikasi, contohnya pada saat tombol sharing Googleplus di hilangkan, template template premium tidak akan bisa hilang otomatis harus menghubungi pembuatnya.
  3. Lebih mudah di modifikasi, opsi Designer blogger theme ready. Setiap waktu anda bisa merobah tampilan antar muka template seperti warna, tataletak widget dll, tanpa takut mempengaruhi performa adsense.
  4. Menu navigasi bagian header adalah widget laman anda tidak perlu mengedit navigasi melalui editor HTML blogger cukup melalui setting blogger biasa. Dan jangan kuatir, menu navigasinya sangat responsive dan mudah di akses pada segala ukuran layar.
  5. Menu navigasi sidebar adalah widget Link anda juga tidak perlu mengeditnya melalui editor HTML cukup melalui setting blogger biasa.
  6. Lebih cepat loading (setelah di modifikasi)
  7. Soho adalah salah satu dari 4 template ter "up to date" blogger pada saat ini, support layout versi 3.
  8. Antar muka yang minimalis, modern, cantik dan fresh.
GTmetrix test for SOHO
SOHO redesign in GTMetrix test
Saya tidak mengajak sobat merombak template buatan orang, saya mengajak sobat merombak template "mentah" google agar enak dipergunakan dan menjadi premium. Google sendiri tidak melarangnya dan bahkan menyediakan petunjuk dasar cara merombak tema tema yang memang mereka sediakan sangat terbatas jika dibanding dengan Wordpress yang seolah memiliki "toko template" dengan melihat fakta tersebut saya percaya Google akan dengan senang hati melihat penggunanya "bereksplorasi". Siapa tahu setelah piawai sobat malah bisa menjual jasa seperti ini, siapa tahu bukan? Yang penting dimana ada kemamuan disana selalu ada jalan!

Jika anda ingin Black SOHO enteng dan ringan versi editblog, silahkan download melalui tombol dibawah gambar tampilannya:
SOHO tema editblog
editblogtema juga menggunakan template SOHO
EMPAT JENIS TEMPLATE TERBARU.

Bukan hanya Soho tapi juga contempo, emporio dan notable, yakni empat model template terbaru bawaan blogger. Jika sobat suka tentu tidak perlu membeli template premium lagi.

Tanpa banyak ribet sobat bisa merobah template template tersebut tapi baiklah kita bahas template SOHO saja terlebih dahulu ini adalah cara yang paling sederhana yang dapat sobat lakukan:

1. MEROBAH GAMBAR BACKGROUND BAWAAN
  1. Cobalah cari gambar gambar berkualitas tinggi dari situs penyedia gambar berkualitas tinggi, kompres gambar tersebut hingga tinggal 50kb dengan aplikasi yang banyak terdapat pada ponsel atau tablet android. Simpan gambar.
  2. Masuk kepengaturan template blogger SOHO bawaan
  3. Pilih Tema lalu pilih "sesuaikan" lalu pilih "latar belakang"
  4. Pada bagian bawah kotak "gambar latar" pilih hapus gambar.
  5. Lalu setelah gambar dihapus, pada sisi kotak gambar ada mata panah menghadap kebawah klik itu.
  6. Akan muncul kotak dialog "pilih gambar latar" silahkan pilih "upload"
  7. Ketika pilih "upload" diklik sobat diarahkan ke folder perangkat cari tempat sobat menyimpan gambar yang telah di download dan di kompress tadi jika telah ketemu klik, dan save.
tampilan gambar latar SOHO setelah di ganti
tampilan gambar latar SOHO setelah di ganti

2. Mengatur lebar homepage dan konten
  1. Masuk kepengaturan template blogger SOHO bawaan
  2. Pilih Tema lalu pilih "sesuaikan" lalu pilih "lanjutan"
  3. Ketika muncul daftar menu scroll keatas dan klik "lebar"
  4. Atur lebar sebagai berikut:

  5. Lebar sidebar=315
    Lebar konten=1270
    Margin konten=530
    Ukuran tersebut sebenarnya terserah sobat, bisa di coba coba kok dari "Desainer Tema Blogger" ini.
Save tema.

3. Memasang related post
Saya mengambil contoh dari tutorial mbak igniel silahkan kunjungi igniel.com untuk mengambil contoh turial lengkap tetapi saya faham sobat pasti tidak ingin repot saya berikan contoh kodenya sbb:
Masuk ke pengaturan blogger, pilih edit HTML, cari kode ]]></b:skin> lalu letakan kode CSS berikut tepat diatasnya:
/* Related Post */
#relatedpost{ display:block; margin:20px 0px; line-height:1.5em; } #relatedpost h3.title{ font-size:16px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #relatedpost h3.title span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #relatedpost h3.title:before{ content: ''; display: block; position: relative; top:10px; width: 100%; border-top: 2px solid #cccccc; } #relatedpost ul{ margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; } #relatedpost ul li{ list-style:none; width:calc((100% / 3) - 15px); text-align:center; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important; } #relatedpost ul li .thumb{ overflow:hidden; line-height:0px; border-radius:7px; } #relatedpost ul li:nth-of-type(3n){ margin-right:0px; } #ignielRelated ul li a{ display:block; } #relatedpost ul li a.judul{ color:#000; /* Warna Huruf */ font-weight:600; margin-top:7px; } #relatedpost ul li a.judul:hover, #relatedpost ul li:hover a.judul{ color:#ff5722; /* Warna Huruf Ketika Disorot */ } #relatedpost ul li a img{ width:100%; max-height:143px; transition:all .3s ease; border:0px; margin:0px; } #relatedpost ul li a img:hover, #relatedpost ul li:hover img{ transform:scale(1.1) rotate(-5deg); filter: brightness(75%); -webkit-filter: brightness(75%); } #relatedpost .norelated{ text-align:center; font-weight:600; } @media screen and (max-width:480px){ #relatedpost ul li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; } #relatedpost ul li:nth-of-type(3n){ margin-right:15px; } #relatedpost ul li:nth-of-type(2n){ margin-right:0px; } }
Save tema.
Masih di dalam halaman editor HTML cari kode <data:post.body/> lalu letakan kode JavaScript berikut tepat dibawahnya:
<!-- Related Post --> <b:if cond='data:view.isPost'> <div id='relatedpost'> <h3 class='title'><span>Related Posts</span></h3> <script>//<![CDATA[ var jumlah = 6; eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|relatedpost|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{})); //]]></script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/> </b:loop> <ul> <script>relatedpost();</script> </ul> <b:else/> There is no other posts in this category. </b:if> </div> <div class='clear'/> </b:if>
 Save template.

4. Memasang breadcrumbs
Nah kalau yang ini saya ambil dari tutorialnya Bung Franky, menurut dia sangat cocok buat template dengan layout versi ke-3 seperti SOHO ini, buktinya memang keren!

Masuk ke pengaturan blogger, pilih edit HTML, cari kode berikut:
<b:defaultmarkup type='Common'>
Jika sudah ketemu letakan kode parameter berikut tepat dibawah kode diatas tadi:
<b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>
Kemudian cari kode berikut:
<h3 class='post-title entry-title'>
Dan letakan kode berikut tepat dibawahnya:
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>
Kembali cari kode </head> dan letakan kode berikut tepat diatasnya:
<style>.breadcrumbs {font-size:55%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}</style>
Save template.

5. Membuat footer style dan memasang kredit tahun otomatis 
Masih dalam opsi editor HTML template cari kode berikut:
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
<div class='navigation'>
Tepat diatas kode tersebut terdapat satu kode penutup: </div> nah letakan kode berikut diatas kode penutup </div> tesebut:
<div class='hbzsub'>
<div class='hbzsocial-icons'>
  <ul>
  <li class='social-facebook'><a href='https://m.facebook.com/AnissaSufyan/?ref=bookmarks' target='_blank' title='Facebook'>Facebook</a></li>
   <li class='social-twitter'><a href='[Twitter url]' target='_blank' title='Twitter'>Twitter</a></li>
   <li class='social-gplus'><a href='https://www.instagram.com/sufyan_yaan/' target='_blank' title='Google+'>Instagram</a></li>
   <li class='social-pinterest'><a href='https://pin.it/5ennxi2waf22f5' target='_blank' title='Pinterest'>Pinterest</a></li>
    <li class='social-rss'><a href='https://news.google.com/news/rss' target='_blank' title='RSS'>RSS</a></li>
  </ul>
 </div>
            <center><small>Hak Cipta&#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear()); </script><a expr:href='data:blog.homepageUrl'> <data:blog.title/> </a></small></center>
                  </div>
Save template. Dan selanjutnya cari kode </head> lalu letakan kode CSS berikut tepat diatasnya:
<style type='text/css'>
.hbzsub {
    background-color: #C0C0C0;
    width: auto;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px &quot;trebuchet MS&quot;,&quot;Tahoma&quot;;
}
.hbzemailform {
    width: 240px;
    margin: 10px auto;
}
#hbzemailbox {
    background-color: #007ad6;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}
#hbzemailbutton {
    background-color: #007ad6;
    border: 1px solid #007ad6;
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px &quot;trebuchet MS&quot;,&quot;Tahoma&quot;;
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}
#hbzemailbutton:hover {
    background-color: #007ad6;
    border: 1px solid #BF4A49;
}
.hbzsignup-form {
    margin-top: 15px;
}
.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}
.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}
.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}
.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}
.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
     background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiyFwM2RFP-XsDRDL0uL4_4LurLMvMUmh-h3wI1_2FC_cHOruK85Ihkj7PVX2MKC0c4CjIH61Vh8CC6oDyJtJ1S8fey6vp029VKFdRS9dGx61tRuTdd5hqC9W3Aw6HMAr_1XAEEFgCK1H/s1600/sprite_32x32.png&quot;) no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}
.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}
.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998;
}
.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}
.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced;
}
.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}
.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39;
}
.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}
.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027;
}
.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}
.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12;
}
.cd-top--is-visible { // back-to-top button visible
  visibility: visible;
  opacity: 1;
}
body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
</style>
Save template. Selesai.
soho redesign in mobile screen
soho redesign in mobile screen
fast loading test
Fast loading untuk mobile

6. TRIK MENYEMBUNYIKAN DAN ATAU MENGHAPUS BACKGROUND GAMBAR "KUCING" PADA HEADER TEMPLATE SOHO
  1. Masuk kepengaturan blogger
  2. Pilih tema/theme
  3. Pilih "edit HTML"
  4. cari kode berikut:
body.homepage-view .hero-image.has-image{
background:$(body.background);
background-attachment:scroll;
background-color:$(body.background.color);
background-size:cover;
height:0vw;
max-height:65.5vh;
min-height:75px;
width:100%
}
Robah nilai yang saya merahkan menjadi 0 (nol) untuk menghilangkan space atau ruang tersisa yang meninggalkan jarak dari header ke konten. Namun jika ingin menghapus bukan menyembunyikannya maka setelah melalui langkah berikut anda harus masuk kembali kepengaturan blog:
  1. Pilih tema/theme
  2. Pilih "sesuaikan"
  3. Pilih latar belakang atau background
  4. Setelah muncul kotak gambar dibawahnya pilih "hapus background"
  5. Save tema 
7. Menghilangkan Judul Recent Posts?
Judul ini tampil pada homepage dan menurut saya mengurangi kerapian tampilan blog pada pandangan pertama. Untuk menghilangkannya, masuk kepengaturan>pilih tema>pilih edit HTML, di dalam editor HTML blogger cari 2 buah  kode berikut :
Letaknya ada dibawah:
<!-- Display title on homepage -->
<b:if cond='data:posts.any and data:view.isHomepage'>
<h3 class='title'><data:messages.latestPosts/></h3>
Hapus kode yang di merahkan ya...
Selanjutnya cari kode kedua yang sama, letaknya:
   <!-- Display title on homepage -->
          <b:if cond='data:posts.any and data:view.isHomepage'>
            <h3 class='title'><data:messages.latestPosts/></h3>
Hapus kode yang di warnai merah saja. Save tema.

Masih ada yang kurang? Ya tombol back to top! Silahkan cari cara memasang back to top paling ringan melalui blog ini atau melalui Google! Kalau mau menggunakan template yang sudah jadi silahkan saja download template tersebut. Sobat bebas memodifikasinya, saya tidak melarangnya...

www.editblogtema.net

10 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. mas sofyan, saya tertarik dengan footer template soho https://cleaningservicestop.blogspot.com/ yang didownload dari https://seo-v6.blogspot.com/2018/09/soho-v2-template-blog-responsive-seo.html tapi saya kurang ngerti cari codingnya. bisa mas buatkan artikel footer seperti itu....thank's
    (https://www.syukmagroups.com/)

    BalasHapus
    Balasan
    1. Siap, Mas. Sebenarnya footer itu dapat dibuat dalam bentuk widget yang dapat di modifikasi melalui pengaturan blog, saya akan menambahkan elemennya agar bisa tampil pada "tataletak atau layout" pengaturan blogger itu sendiri, sehingga pengguna bebas mau menempatkan dan menambahkan widget apa saja di bawahnya. Tunggu kelanjutannya...saya juga perlu bertandang ke link yang Mas Syukma berikan SEO-V6..

      Hapus
  2. Min adakah tutorial cara menghapus tombol back / anak panah pada template soho?

    BalasHapus
    Balasan
    1. Masuk ke pengaturan blogger, ada dua kodenya; pilih edit HTML dan temukan kode berikut:

      <a expr:href='data:blog.homepageUrl'>
      <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
      </a>

      Hapus bagian tengahnya saja, yakni:

      <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>


      Namun ikon panah pada sidebar tetap dan jika ingin menghapusnya juga maka cari kode kedua yang mirip sebagai berikut di dalam editor HTML:

      <b:include data='{ iconClass: &quot;touch-icon sidebar-back rtl-reversible-icon&quot; }' name='backArrowIcon'/>

      hapus kembali.

      Hapus
    2. kalau kita mmembuka halaman ..ikon panah yang masih muncul pada theme cotemo gimana bos menghapusnya

      Hapus
    3. Tetap cari backArrowIcon dan hapus kodenya.

      Itu hanyalah kode bawaan SVG template

      Hapus

    4. masih muncul yang slidebar dikiri

      Hapus
  3. artikelnya sangat menginspirasi mas.
    tapi saya punya kendala dengan breadcrumb yang dijelaskan diatas.di templat soho saya,tidak ada efek yang muncul,saya sampai berkali-kali mengulang kembali dari awal tapi tetap juga hasilnya sama saja.terima kasih

    BalasHapus
    Balasan
    1. Mas Pelatge, kodenya mungkin salah, saya coba sekali lagi bisa kok.

      Atau kalau memang agak ribet pasang saja breadcrumbs sderhana yang saya posting pada artikel terpisah, itu buat contempo, tapi juga bagus untuk soho...

      Hapus
  4. Nayla, Kamu pasti bisa. tinggal menambahkan pengaturan CSS ke bagian atas kode penutup header. Sepertinya sudah pernah kami posting caranya walaupun tidak spesifik untuk SOHO.

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak