Tampilkan postingan dengan label template SOHO. Tampilkan semua postingan
Tampilkan postingan dengan label template SOHO. Tampilkan semua postingan
Template soho custom
Template soho custom
Disamping membuat menu navigasi yang responsif pada bagian header template blogger (berbasis HTML), para pembuat template blog juga (termasuk Wordpress yang berbasis Php) harus memikirkan sebuah desain yang baik untuk menampilkan informasi penting dan "abadi" atau selamanya di bagian footer template blog mereka.

Itulah mengapa sebabnya saat memberikan tutorial seperti ini saya lebih menyukai halaman yang di buat berbasis HTML. Itu bukan berarti Wordpress tidak mumpuni, saya memilih template berbasis HTML hanya semata semata karena kesederhaannya, tidak harus menggunakan add on dan begitu banyak ekstensi.

Sekarang mari membuat widget Follow By Email atau tombol Subscription untuk bagian kaki bloggger kalian! Perhatian contoh pertama berikut sebelum masuk ke "DEMO" yang telah saya buat:

Subscribe to my Newsletter

Cobalah isikan data kalian, karena form kontak diatas bukanlah sebuah gambar , melainkan sebundel kode HTML-CSS yang saya tanamkan lewat opsi HTML. Kalian dapat mengisikan alamat email dan mengetuk tombol 'send' atau kirim.

Cara menerapkannya adalah sebagai berikut:
  1. Masuk ke dasbor / pengaturan blogger
  2. Pilih Layout atau Tataletak
  3. Pilih Add Gagdet atau Tambahkan Gadget
  4. Pilih HTML/JavaScript
  5. Pada halaman atau form kosong HTML/Javascript yang telah terbuka copy dan lalu paste-kan kode berikut ke dalamnya:
<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    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: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}
#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    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: #E64C4B;
    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("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/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;
}
</style>
<center><div class="hbzsub">
<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" 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="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div></center>
SAVE dan lalu geser widget ke bagian paling bawah template blog  Kalian bisa melihat demonya langsung disini:

Kelebihan template ini sekalipun di banding dengan template premium adalah:
  • Tidak memiliki footer kredit
  • Basisnya asli bawaan blogger (SOHO) dengan kostumisasi dan peningkatan fitur premium
  • Lebih aman, karena tidak memiliki script tersembunyi.
  • Memiliki hampir semua fitur dasar dan tambahan blogging
Atau: Jika kalian hanya ingin menggunakan tombol subscriber bawaan blogger namun dengan tampilan berbeda cukup dengan cara:
  1. Masuk ke dasbor / pengaturan blogger
  2. Pilih Layout atau Tataletak
  3. Pilih Add Gagdet atau Tambahkan Gadget
  4. Pilih tambahkan "FollowBy Email"
    Follow by Email widget
    Follow by Email widget

    Lalu Geser widget tersebut ke bagian footer tataletak template. Save.
  5. Tambahkan kode CSS berikut tepat di atas tag penutup </style> di dalam opsi editor "edit HTML" template blogger kalian:
#FollowByEmail1 {background: #ccc; 14px;margin-left:1px;width:100%;color:#666}
Kalian dapat menerapkan ini pada template SOHO dan Contempo yang telah kalian "customisasi" buat saja sebuah blog "ecek ecek" alias "dummy" sebagai percobaan.

Peringatan!

  • Template dapat kalian pergunakan dengan bebas, tanpa kredit, bebas memodifikasi dengan tujuan pembelajaran semata mata. Template telah di lengkapi dengan meta tag seperlunya. 
  • Selama Algoritma Google terus berubah template membutuhkan pembaharuan, jika terjadi kesalahan itu bukan kesalahan editblogtema karena template ini telah dibuat pada awal tahun 2019. Versi terbaru masih dalam pengujian.
  • Kami tidak menyediakan template secara khusus, biasanya hanya di pergunakan untuk penggunaan personal dan untuk di sumbangkan kepada yang membutuhkannya.
  • Semua template berbasis template default. (Bahkan jika kalian membeli sebagian template premium sekalipun melakukan hal yang sama)
Salam, Anissa.

SHARE YA:

PANDUAN SINGKAT MEROMBAK TEMPLATE SOHO

10 komentar

Agustus 10, 2019

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

SHARE YA:

editblogSOHO updated: The lighting style Blogger Theme

Tidak ada komentar

Agustus 06, 2019

template premium editblogSOHO
editblogSOHO v.3.0.
Pada update terbaru terdapat perbaikan pada:
  1. Kecepatan loading template
  2. Mengembalikan meta-tag ke default blogger.
  3. Membuang (membersihkan) kode css style tidak terpakai untuk tampilan navigasi menu.
  4. Mengembalikan tombol berbagi bawaan 
  5. Footer simple.
Tampilan demo mirip template yang sedang dipakai editblog, atau eksplore saja iframe dibawah berikut, klik "home" atau Judul blog dalam frame, scroll konten keatas dan kebawah:

Template ini lebih ringan daripada template versi sebelumnya dengan beberapa perbaikan bug keamanan juga.


www.editblogtema.net

SHARE YA:

BeautyTheme editblogtema
Template beautytheme cocok untuk promo produk, wisata dan pengalaman  melalui tulisan
Tema ini berbasis SOHO, jadi template ini memiliki kelebihan orisionalitas:
  1. SEO Responsif
  2. Mobile Friendly
  3. Tampilan Atraktif, Modern dan Dinamis
  4. Mudah Digunakan dan User Friendly
  5. Adsense Friendly
  6. Lebih aman, atau lebih secure
  7. Loading Yang Cepat
Template ini telah saya buat memiliki hampir semua syarat premium:
  • Memiliki Menu navigasi fixed (tetap berada diatas saat halalan di scroll naik dan turun) yang dapat diedit melalui pengaturan blog (saya memindahkan fungsi widget PageList menjadi menu Navigasi) sehingga pengguna dapat mengedit link menu mereka tanpa perlu melakukannya melalui halaman editor HTML blogger.
  • Navigasi ini juga memiliki kelebihan sticky yang dapat disipi dengan iklan adsense. Sehingga iklan akan muncul pada saat konten di scroll.
  • Memiliki breadcrumbs
  • Memiliki related post
  • Memiliki sidebar scroll bawaan SOHO yang keren
  • Jangan kuatir meta tag sudah otomatis
  • Cocok bagi blogger yang suka memposting gambar berkualitas
  • Tampilan kelas dunia. Model ini modern, dinamis dan tidak ketinggalan zaman
  • Tombol berbagi (share buttons) lengkap, bisa berbagi kemana saja untuk meningkatkan trafik
Jika berminat silahkan request. FREE.


www.editblogtema.net

SHARE YA:

SOHO modified
Template Soho adalah salah satu dari 4 varian template default blogger terbaru. Banyak orang lebih rela membeli template karena mengira template premium lebih hebat daripada template bawaan, padahal dengan sedikit usaha saja template default atau template bawaan akan berubah menjadi premium dan hebat.

Template bawaan selalu memiliki kelebihan karena dibuat secara official oleh para developer dibawah lisensi Google langsung, lebih aman dan lebih mudah di trackin pada sisi server Google.

Google juga tidak melarang kita merombaknya, bahkan pada bantuan blogger Google memberikan petunjuk petunjuk dasar cara merombak template dari cara pengaturan hingga bagaimana caranya membuat dan menempatkan kode kode dasar blogger. Contoh cara membuat HTML widget dimulai dari pembukaan:
<b:section> <b:widget> 
Hingga penutup:
</b:widget> </b:section> 
Di jelaskan dengan cara sederhana dan mudah dimengerti, saya tadinya buta masalah koding akhirnya jadi mulai mengerti dimulai dari sana. Terimakasih Google.
Setelah di modifikasi/ make over template SPHO berubah menjadi:

  1. Lebih modern
  2. Tetap responsive dan mobile friendly
  3. Memiliki Menu bar navigasi fixed, dropdown sekaligus header sticky.
  4. Memiliki kotak pencarian baru
  5. opsi sidebar multi profile
  6. Related Posts
  7. Breadcrumbs
  8. Metatag standard tambahan yang aman
  9. Blackquote sederhana yang pass untuk blog trik, tips dan tutorial
  10. Dapat di kustom melalui pengaturan blogger desainer
  11. dll


1. Membuat tampilan grid pada homepage SOHO
Secara default template soho hanya menampilkan tampilan grid pada homepagenya di layar desktop dan laptop, namun supaya dia juga tampil grid pada tablet dalam posisi landscape (bukan portrait) maka dibutuhkan pengaturan melalui BLOGGER THEME DESIGNER.
  1. Masuk kepengaturan
  2. pilih tema/theme
  3. Pada tampilan preview template dibawahnya terdapat dua pilihan: Sesuaikan (customize) dan edit HTML
  4. Pilih "sesuaikan"
  5. Kemudian pilih "advance" atau "lanjutan"
  6. Scroll menu hingga ditemukan "lebar" atau "width"
Begitu muncul bar pengaturan atur sebagai berikut:
  1. sidebar: 100
  2. konten: 780
  3. margin: 780
Blogger theme designer
Pengaturan ini akan membuat tempilan konten lebih rapi dan enak pada saat di akses dan dibaca.

Tapi jika sobat tidak menginginkannya, biarkan saja secara default seperti yang saya lakukan.


2. Menampilkan Sticky Header pada saat konten di scroll
Kode sticky header pada template SOHO mirip dengan template varian terbaru pada umumnya, terutama dia mirip sekali dengan kode yang dipasang oleh Google pada varian template NOTABLE. Perhatikan.
.centered-top-container.sticky{left:0;position:fixed;right:0;top:0;width:auto;height:50px;z-index:50;
Jadi silahkan masuk ke pengaturan blog>tema>edit HTML: tekan CTRL+F pada keyboard atau papan ketik laptop windows dan pada kotak pencarian yang muncul dibagian atas halaman editor HTML masukan kode yang saya sorot kuning diatas. Setelah muncul di halaman editor HTML, cari kode yang saya sorot merah z-index: 50..
Robah menjadi z-index: 108

Apa gunanya? Gunanya agar tidak tertindih oleh menu navigasi yang akan kita tambahkan.

3. Mengganti gambar kucing pada template SOHO
Secara default Soho dan kelima variannya memiliki gambar sendiri. Kita dapat menggantinya dengan gambar berkualitas namun ringan (saya sarankan jangan melebihi 200kb) cari gambar yang diinginkan di PEXEL.COM.

Caranya:
  1. Masuk kepengaturan
  2. pilih tema/theme
  3. Pada tampilan preview template dibawahnya terdapat dua pilihan: Sesuaikan (customize) dan edit HTML
  4. Pilih "sesuaikan"
  5. Kemudian pilih "background" atau "latar belakang"
  6. Ada dua pilihan hapus gambar dan pilih gambar yang kita inginkan dari librari atau dari komputer/ perangkat kita sendiri.
mrobah latar gambar latar header soho
Saya lebih suka memilih upload gambar ketimbang memilih gambar yang sudah ada milik blogger, ini tentu saja tergantung selera:
upload gambar untuk latar header soho
Mengganti gambar header ini sangat efektip merobah tampilan soho sampai membuat orang pangling menebak template jenis apa yang kita gunakan. Misalnya saya mencoba memilih salah satu gambar untuk disesuaikan dengan kebutuhan kaum wanita
Lihat:

4. Membuat menu navigasi, kotak pencarian, back top, relaed post sekaligus.
Sekarang langkah untuk menyempurnakan:
Tambahkan CSS style.
Masuk kepengaturan blogger>pilih tema atau theme>pilih edit HTML, cari kode </head> dan letakan kode berikut seluruhnya tepat diatasnya.
<style>
#editblogmenu{width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#007ad6;}
#editblogmenu ul,#editblogmenu li{margin:0;padding:0;list-style:none;}
#editblogmenu ul{height:45px}
#editblogmenu li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#editblogmenu a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#F5F5F5;}
#editblogmenu ul li:hover a{color:#666;}
#editblogmenu input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#editblogmenu label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:45px;height:40px;line-height:45px;text-align:center;}
#editblogmenu label span{font-size:13px;position:absolute;left:35px}
#editblogmenu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#editblogmenu ul li ul li a{color:#fff;height:40px;line-height:40px;background:#000;width:390px;}
#editblogmenu ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#000;
position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}

#editblogmenu li:hover &gt; ul.menux{visibility:visible;opacity:1;top:55px;}
#editblogmenu a.dutt{padding:0 27px 0 14px}
#editblogmenu a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu a.dutt:hover::after,#editblogmenu ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu ul.menux li a{background:#fff;color:#000;}
#editblogmenu ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}

#editblogmenu li.facebook {padding:0 5px;}

@media screen and (max-width:960px) {

#editblogmenu li:hover &gt; ul.menux{display:block;}

#editblogmenu ul{border:none;border-bottom:4px solid #e9e9e9;}

#editblogmenu{position:fixed;border:none;border-bottom:4px solid #e9e9e9;}

#editblogmenu ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}

#editblogmenu ul.menux{width:100%;position:static;border:none}

#editblogmenu li{display:block;float:none;width:auto;text-align:left}

#editblogmenu li a{color:#fff}

#editblogmenu li a:hover{background:#f1f1f1;color:#f9f9f9}

#editblogmenu li:hover{background:#8493a0;color:#fff;}

#editblogmenu a.dutt{font-weight: bold;}

#editblogmenu li:hover &gt; a.dutt,#editblogmenu a.dutt:hover{background:#b1b1b1;color:#fff;}

#editblogmenu input,#editblogmenu label{display:inline-block;position:absolute;right:0;top:0;}

#editblogmenu input:after,#editblogmenu label:after {content:&quot;\f00a&quot;;font-family:FontAwesome;

font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;

display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}

#editblogmenu input{z-index:4;}

#editblogmenu input:checked + label{color:#666;font-weight:700}

#editblogmenu input:checked ~ ul{display:block}

#editblogmenu ul li ul li a{width:100%;color:#666;}
#editblogmenu ul li ul li a:hover{background:#8493a0;color:#666;}

#editblogmenu ul.menux a{background:#fff;color:#666;}

#editblogmenu ul.menux a:hover{background:#8493a0;color:#666;}

#editblogmenu ul.menux li{background:#fff;color:#666;}

#editblogmenu ul.menux li:hover{background:#8493a0;color:#fff;}

#editblogmenu ul.menux li a{background:#fff;color:#666;}

#editblogmenu ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

</style>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

<style>

body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.tombolbuka {
background: transparent;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 109;

top: 1px;
right:16%;
}
.tombolbuka:hover {
background: transparent;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 150;
top: 0;
left: 10;
background-color: none;
}
.overlay-content {
position: relative;
top: 0%;
width: 100%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .tomboltutup {
position: absolute;
top: -2px;
left: 92%;
font-size: 40px;
cursor: pointer;
color: blue;
z-index:101;
}
.overlay .tomboltutup:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: #c0c0c0;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #c0c0c0;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #f1f1f1;
}
</style>
<style>
blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #0000FF;
font-style: Courier;
margin: 10px;
padding: 10px;
text-align: left;
font-size: 15px;
}
</style>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#tombolbalikkeatas {
display: block;
position: fixed;
bottom: 10px;
right: 0px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #ddd;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
#tombolbalikkeatas:hover {
background-color: #555;
}
#ArtikelTerkait{
display:block;
margin:20px 0px;
line-height:1.25em;
}
#ArtikelTerkait h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#ArtikelTerkait h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#ArtikelTerkait h3.title:before{
content: &#39;&#39;;
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#ArtikelTerkait ul{
margin:20px 0px 0px;
padding:0px;
}
#ArtikelTerkait ul li{
list-style:none;
margin-bottom:15px;
padding-bottom:15px;
border-bottom:1px solid #ccc;
-webkit-margin-start:0px !important;
display:inline-block;
width:100%;
clear:both;
}
#ArtikelTerkait ul li:last-child{
border:0px;
padding:0px;
}
#ArtikelTerkait ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
float:left;
margin-right:15px;
}
#ArtikelTerkait ul li a{
display:block;
}
#ArtikelTerkait ul li a.judul{
color:#808080;
font-weight:600;
font-size:16px;
overflow:hidden;
line-height:1.25em;
}
#ArtikelTerkait ul li .snippet{
color:#444;
font-size:13px;
overflow:hidden;
margin:7px 0px 0px;
padding:0px;
}
#ArtikelTerkait ul li a.judul:hover, #ArtikelTerkait ul li:hover a.judul{
color:#0000FF;
}
#ArtikelTerkait ul li a img{
width:120px;
height:90px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#ArtikelTerkait ul li a img:hover, #ArtikelTerkait ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#ArtikelTerkait .tidakTerkait{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#ArtikelTerkait ul li a.judul{
font-size:14px;
}
#ArtikelTerkait ul li .snippet{
font-size:12px;
}
}</style>
<style>
img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
 Tambahkan HTML:

Dibawah </head> tambahkan seluruh kode HTML berikut:
<nav id='editblogmenu'>
<input type='checkbox'/>
<label/>
<ul>
<li>
<a href='/' title='Header'><h1> <large><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></large></h1></a>
</li>
<li>
<a class='dutt' href='#'>Tutorial</a>
<ul class='menux'>
<li><a href='#'><i aria-hidden='true' class='fa fa-arrows-alt'>Tutorial Anissa</i></a>
</li>
<li><a href='#'>Menyulap template sederhana menjadi modern</a>
</li>
<li><a href='#l'>Panduan singkat: dua cara unik dan sederhana membuat menu navigasi mobile untuk blogger</a>
</li>
<li><a href='#'>Cara membuat kartu Profile blogspot keren dalam bentuk kartu animasi</a>
</li>
<li><a href='#'><i aria-hidden='true' class='fa fa-arrows-alt'>Tutorial editblog</i></a>
</li>
<li><a href='#'>edit sorapink</a>
</li>
<li><a href='#'>edit template contempo</a>
</li>
<li><a href='#'>edit template emporio (lengkap)</a>
</li>
<li><a href='#'>edit template sederhana</a>
</li>
</ul>
</li>
<li>
<a class='dutt' href='#'>Template layout 3</a>
<ul class='menux'>
<li><a href='#'>Template sederhana (layout versi2)</a>
</li>
<li><a href='#'>Template contempo custom (layout versi3)</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_7.html'>Template emporio custom (layout versi 3)</a>
</li>
<li><a href='#'>Template Notable custom (layout versi 3)</a>
</li>
<li><a href='#'>Template Pandora (layout versi 3)</a>
</li>
<li><a href='#'>Template contempo custom 2 (layout versi 3)<span class='sr-only'/>
</a>
</li>
</ul>
</li>
<li>
<a href='https://www.editblogtema.net/2019/07/gallery-template-editblogtema.html'><b>GALLERY TEMPLATE</b><span class='sr-only'/>
</a>
</li>
</ul>
</nav>
<div class='overlay' id='myOverlay'>
<span class='tomboltutup' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'><i class='fa fa-search' style='color:transparent;'/></button>
</form>
</div>
</div>
<button class='tombolbuka' onclick='openSearch()'><i class='fa fa-search' style='color:white;'/></button>
Lalu cari kode <body> dan letakan kode berikut tepat dibawahnya:
<button id='tombolbalikkeatas' onclick='topFunction()' title='tombolbalikkeatas'><i class='fa fa-chevron-circle-up fa-2x'/></button>
Tambahkan JavaScript:
Cari kode </body> dan letakan kode berikut tepat diatasnya
<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]>
function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
    document.getElementById(&quot;tombolbalikkeatas&quot;).style.display = &quot;block&quot;;
  } else {
    document.getElementById(&quot;tombolbalikkeatas&quot;).style.display = &quot;none&quot;;
  }
}
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5be7e50ef90c0b8e' type='text/javascript'/>
Tambahkan data markup berikut dibawah <data:post.body/>
<b:if cond='data:view.isPost'>
<div id='ArtikelTerkait'>
<h3 class='title'><span>Barangkali anda suka:</span></h3>
<script>//<![CDATA[
var jumlah = 6;
var kata = 150;
Tambahkan kode berikut: (klik tautan) tepat dibawah tulisan  var kata = 150;

Lalu tambahkan kode berikut tepat dibawahnya:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>
</b:loop>
<ul>
<script>ArtikelTerkait();</script>
</ul>
<b:else/>
There is no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>
</div>
5. Memasang breadcrumbs
Cara memasang breadcrumbs pada template SOHO adalah sebagai berikut:
Masuk kepengaturan>tema>edit HTML cari kode </head> dan letakan css Style berikut  tepat diatasnya:
<style>.breadcrumbs {font-size:80%;overflow:hidden;color:#333;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 10px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:20px;height:20px;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:#333333;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#000;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#0000ff;}
.breadcrumbs a:hover {color:#fff;}
</style>
Lalu pasang kode berikut tepat diatas <data:post.body/> Soho hanya punya satu satunya kode tersebut.
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>
Dan cari kode dibawah ini:
<b:defaultmarkup type='Common'>
 Lalu letakan kode berikut tepat dibawahnya:
<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>
Save template.

Menghilangkan powered by blogger dan menggantinya dengan kredit footer:
Masuk kepengaturan letakan kode berikut:
Setelah "Tambahkan CSS" di klik akan muncul kotak halaman CSS seperti gambar dibawah ini:
Nah pada kota dialog tersebut tuliskan kode perintah ini:

div.blogger {
display: none;
}
Silahkan di copy saja lalu dipastekan ke dalam kotak dialog CSS seperti yang kami tunjukan pada gambar.

Jangan lupa SAVE TEMPLATE.

Terakhir :
LIHAT DEMO
Perhatian! Jika terjadi error pada pemasangan tolong jelaskan pada kolom komentar agar kami dapat memperbaikinya. Kami sangat sangat  berterimakasih atas masukan bersifat membangun.

SHARE YA:

Soho suhunya template layout versi ke 3

Tidak ada komentar

Juli 13, 2019

Soho suhu
Soho adalah salah satu dari 4 varian template blog terbaru. Namun tampilan dasar bawaannya memiliki 4 varian warna. Saya hanya perlu merlakukan sedikit saja perombakan untuk membuat template ini menjadi berbeda.

Soho memiliki Header yang yang unik karena dapat dihiasi dengan gambar menarik dan mencolok pada bagian homepagenya. Ketika memasuki konten header ini akan bersembunyi. Begini perubahan dasarnya:
  1. Mengganti gambar bagian header
  2. Merobah lebar halaman tataletak (layout) halaman
  3. Menambahkan menu navigasi dan kotak pencarian custom
  4. Menambahkan related post
  5. Menambahkan (membuat) widget atribusi khusus pada bagian footer
  6. Dan lain lain
Untuk merobah ukuran halaman juga juga mudah sekali, cukup dengan menambahkan kode CSS dan tidak perlu melalui edit HTML. Cukup dengan masuk kepengaturan>pilih Tema> pilih "Sesuaikan" kemudian pilih "lanjutan" dan lalu scroll menu hingga ke paling bawah disana ada pilihan "tambahkan CSS" yang jika diklik akan memunculkan blanko atau form kosong. Sebenarnya tool ini akan meletakan CSS yang kita pasang diatas kode ]]></b:skin> secara otomatis ke dalam halaman editor HTML.
kotak CSS blogger designer
Letakan (atau pastekan) kode berikut kedalamnya:
/* untuk lebar layar kurang dari 1280px */
@media screen and (min-width:1280px) {
    .centered-bottom, .centered-top {
        width: 1180px;
    }
     body.item-view .widget.Blog .post {
        width: 800px;
    }
}
  /* untuk lebar layar kurang dari  1400px */
@media screen and (min-width:1400px) {
    .centered-bottom, .centered-top {
        width: 1300px;
    }
     body.item-view .widget.Blog .post {
        width: 1060px;
    }
}
div.blogger {
display: none;
}
CSS ini juga berfungsi menyembuyikan "Powered by Blogger" dengan efektif. Untuk melihat hasilnya lihat
DEMO
www.editblogtema.net

SHARE YA: