PANDUAN MEROBAH DAN MENGEDIT TEMPLATE NOTABLE : MENGHILANGKAN SIDEBAR

Di antara 4 template blogger terbaru Notable adalah pavorite saya. Dia tampil ciamik pada layar pada saat dibuka melalui perangkat ponsel/handphone dan tablet/iPad. Tapi pada layar desktop konten akan terlihat terlalu sempit dan terlalu ke kiri. untuk menyiasatinya agar nampak balans (seimbang) saya menyarankan agar anda merobah aba aba CSSnya, membuang sidebar kanannya dan memaksimalkan nilai default lebar ruang baca kontennya

template simple SEO Notable - (siseno)
DEMO  DOWNLOAD

Caranya adalah:
Masuk ke pengaturan blogger, pilih tema, pilih edit HTML. Pada halaman editor HTML cari kode berikut: (anda bisa menekan tombol keyboard  CTR+F secara bersamaan untuk menampilkan kolom pencarian dan tuliskan sidebar.width di dalamnya lalu tekan "enter" pada keyboard)

Gambar halaman editor HTML template notable

Anda akan menemukan kode berikut:

<Group description="Widths">
<Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="320px" value="320px"/><Variable name="feed.width" description="Content width" type="length" min="860px" max="1440px" default="1280px" value="1280px"/></Group>
*/

Robah semua nilai variabel yakni untaian CSS merah dan gantikan semua nilai atau angka yang saya sorot warna kuning dengan NOL (0)

Sedangkan untuk variabel CSS berwarna biru silahkan ganti : min="860px"  dengan min="730px" 
max="1440px" default="1280px"  dengan max="1800px" default="1280px"

Dan yang terakhir paling menetukan adalah nilai: value="1280px"

harus diganti dengan: value="1800px"
Maka alinea/pragraf CSS akan tampak menjadi sebagai berikut:

<Group description="Widths">
<Variable name="sidebar.width" description="Sidebar width" type="length" min="0px" max="0px" default="0px" value="0px"/><Variable name="feed.width" description="Content width" type="length" min="730px" max="1800px" default="1280px" value="1800px"/></Group>
*/

Atau anda bisa menghapus untaian kode CSS yang anda temukan di atas dan menggantikannya dengan kode CSS yang di bawah (yang nilainya sudah saya ganti nol dan nilai lebar telah saya akhiri dengan: value="1800px"

IKON JUGA DAPAT DI ROBAH

a. Merobah ukuran ikon SVG bawaan blogger:

Tidak seperti template lama dan klasik, Template terbaru blogger telah di lengkapi dengan ikon  ikon SVG seperti tombol menu (hamburger menu) dan tombol pencarian (bentuk kaca pembesar) Blogger menggunakan jenis ikon SVG yang terintegrasi langsung ke dalam templatenya. Jika ingin memperbesar ikon seperti pada template editblogtema sekarang, maka cari kode pengaturan CSS berikut di dalam halaman editor HTML:

.svg-icon-24,.svg-icon-24-button{
cursor:pointer;
height:24px;
width:24px;
min-width:24px
}

Ganti setiap angka 24 menjadi 34.

b. Mengganti tampilan ikon pencarian pada tampilan PC Desktop dan Laptop.
Pada tampilan layar ukuran PC desktop dan Laptop, tombol pencarian pada template Notable secara default berbentuk tulisan 'SEARCH' namun pada tampilan layar kecil seperti hape atau layar smartphone tombol pencarian tampil dengan ikon kaca pembesar. Nah walaupun sepele, banyak sekali yang minta agar hal itu bisa di robah, yakni baik pada layar besar maupun layar kecil tampilan harus sama: Ikon menu pencarian berbentuk 'KACA PEMBESAR'.

Jadi kembali ke halaman editor HTML blogger dan cari kode CSS berikut:

.search-expand-icon{
display:none
}
.search-expand-text{
display:block
}

Robah none menjadi block. Sebaliknya robah block menjadi none.
Wel, well...that's All.Save tema.

MENGATUR TAMPILAN HOMEPAGE
Cari pengaturan kode CSS berikut di dalam template notable:

.post-outer .snippet-thumbnail{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
background:#000;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
height:256px;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
margin-$endSide:136px;
overflow:hidden;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2;
position:relative;
width:300px;
}

Yang bisa di robah (disesuaikan) angka yang saya merahkan (256, 300)

www.editblogtema.net