Skip to main content

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://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/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

Comments

  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/)

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

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

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

      Delete
  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

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

      Delete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © Editblogtema. All rights reserved.