Template SOHO setelah di desain ulang |
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:
- Struktur asli bukan custom.
- Tampilan menawan, dapat di modifikasi tanpa batas.
- Mudah digunakan sekalipun oleh pemula. Mudah diedit melalui pengaturan blogger: Blogger Designer.
- Tampilan professional
- Material dan elemen bersih dan 100% asli blogger mencakup jaminan keamanan, fitur, SEO bawaan yang stabil
- Sidebar sebagai opsi kontainer menu navigasi blog yang keren
- Breadcrumbs versi 3
- Related post
- Footer dan tautan Sosial Media ready untuk di edit.
- Benar benar Fastloading.
7 keuntungan menggunakan template asli apalagi setelah di re-desain?
- 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). 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.
- 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.
- 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.
- Menu navigasi sidebar adalah widget Link anda juga tidak perlu mengeditnya melalui editor HTML cukup melalui setting blogger biasa.
- Lebih cepat loading (setelah di modifikasi)
- Soho adalah salah satu dari 4 template ter "up to date" blogger pada saat ini, support layout versi 3.
- Antar muka yang minimalis, modern, cantik dan fresh.
SOHO redesign in GTMetrix test |
Jika anda ingin Black SOHO enteng dan ringan versi editblog, silahkan download melalui tombol dibawah gambar tampilannya:
editblogtema juga menggunakan template SOHO |
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
- 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.
- Masuk kepengaturan template blogger SOHO bawaan
- Pilih Tema lalu pilih "sesuaikan" lalu pilih "latar belakang"
- Pada bagian bawah kotak "gambar latar" pilih hapus gambar.
- Lalu setelah gambar dihapus, pada sisi kotak gambar ada mata panah menghadap kebawah klik itu.
- Akan muncul kotak dialog "pilih gambar latar" silahkan pilih "upload"
- 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 |
- Masuk kepengaturan template blogger SOHO bawaan
- Pilih Tema lalu pilih "sesuaikan" lalu pilih "lanjutan"
- Ketika muncul daftar menu scroll keatas dan klik "lebar"
- Atur lebar sebagai berikut:
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:
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:
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&callback=relpostimgcuplik&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>
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&nbsp;</span></a></span>&nbsp;›
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'> › </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'>Kembali cari kode </head> dan letakan kode berikut tepat diatasnya:
<b:include data='post' name='breadcrumb'/>
</b:if>
<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 >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>
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© <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 "trebuchet MS","Tahoma";
}
.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 "trebuchet MS","Tahoma";
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiyFwM2RFP-XsDRDL0uL4_4LurLMvMUmh-h3wI1_2FC_cHOruK85Ihkj7PVX2MKC0c4CjIH61Vh8CC6oDyJtJ1S8fey6vp029VKFdRS9dGx61tRuTdd5hqC9W3Aw6HMAr_1XAEEFgCK1H/s1600/sprite_32x32.png") 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>
soho redesign in mobile screen |
Fast loading untuk mobile |
6. TRIK MENYEMBUNYIKAN DAN ATAU MENGHAPUS BACKGROUND GAMBAR "KUCING" PADA HEADER TEMPLATE SOHO
- Masuk kepengaturan blogger
- Pilih tema/theme
- Pilih "edit HTML"
- 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%
}
- Pilih tema/theme
- Pilih "sesuaikan"
- Pilih latar belakang atau background
- Setelah muncul kotak gambar dibawahnya pilih "hapus background"
- 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 -->Hapus kode yang di merahkan ya...
<b:if cond='data:posts.any and data:view.isHomepage'>
<h3 class='title'><data:messages.latestPosts/></h3>
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...
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
BalasHapus(https://www.syukmagroups.com/)
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..
HapusMin adakah tutorial cara menghapus tombol back / anak panah pada template soho?
BalasHapusMasuk ke pengaturan blogger, ada dua kodenya; pilih edit HTML dan temukan kode berikut:
Hapus<a expr:href='data:blog.homepageUrl'>
<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>
</a>
Hapus bagian tengahnya saja, yakni:
<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' 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: "touch-icon sidebar-back rtl-reversible-icon" }' name='backArrowIcon'/>
hapus kembali.
kalau kita mmembuka halaman ..ikon panah yang masih muncul pada theme cotemo gimana bos menghapusnya
HapusTetap cari backArrowIcon dan hapus kodenya.
HapusItu hanyalah kode bawaan SVG template
Hapusmasih muncul yang slidebar dikiri
artikelnya sangat menginspirasi mas.
BalasHapustapi 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
Mas Pelatge, kodenya mungkin salah, saya coba sekali lagi bisa kok.
HapusAtau kalau memang agak ribet pasang saja breadcrumbs sderhana yang saya posting pada artikel terpisah, itu buat contempo, tapi juga bagus untuk soho...
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