Lebar Layout Dashboard Blogger Menyempit, Edit Widget Tertutup

Lebar Layout Dashboard Blogger Menyempit, Edit Widget Tertutup

Desain Blog

Unknown September 05, 2016

Lebar Layout Dashboard Blogger Menyempit, Edit Widget Tertutup

UKURAN dashboard blogger menyempit. Menu paling terpengaruh yaitu Layout (Tata Letak) jadi menyempit. Menu edit widget jadi tertutup dan sulit melaksanakan perubahan di gadget.

Ukuran dashboard blogger yang tadinya 100%, sekarang menjadi 850 pixel saja di layar komputer. Jika ukuran layout melebih 850px, maka muncul "overflow-scroll" ibarat dalam gambar di atas.

Maka, untuk melaksanakan penyesuaian atau penyesuaian, CB pun melaksanakan perubahan, dari lebar layout 970px menjadi 850px.

Demikian pula ukuran layout widget header, sidebar, main-wrapper, disesuaikan. Sebaiknya memakai prosentase.

Layout pun normal kembali, tidak awut-awutan lagi. Ini isyarat layout yang CB gunakan:

KODE AWAL

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .outerpic-wrapper{width:970px}
body#layout .content-wrapper{width:970px}
body#layout .header-wrapper{width:970px}
body#layout #header{float:left;width:300px;margin-top:35px;}
body#layout #header2{float:right;width:550px;margin-top:40px}
body#layout .main-wrapper{width:600px;float:left;margin-top:20px}
body#layout .sidebar-wrapper,.sidebar1-wrapper{width:300px;float:right;margin-top:20px}
body#layout #footer-wrapper {width: 970px;margin-top:20px}
body#layout #footer1,#footer2{width:25%;float:left}
body#layout #footer3{width:25%;float:right}

KODE SETELAH DIUBAH

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .outerpic-wrapper{width:850px}
body#layout .content-wrapper{width:850px}
body#layout .header-wrapper{width:850px}
body#layout #header{float:left;width:30%;margin-top:35px;}
body#layout #header2{float:right;width:60%;margin-top:40px}
body#layout .main-wrapper{width:60%;float:left;margin-top:20px}
body#layout .sidebar-wrapper,.sidebar1-wrapper{width:30%;float:right;margin-top:20px}
body#layout #footer-wrapper {width:850px;margin-top:20px}
body#layout #footer1,#footer2{width:18%;float:left}
body#layout #footer3{width:18%;float:right}

Barangkali Anda mengalaminya juga, silakan tiru langkah CB di atas. Good Luck! (http://www.contohblog.com).*

UPDATE: 
Rabu 14 September 2018

Lebar Dashboard Blogger Kembali Normal mulai hari ini (14/9/2018). Sebelumnya, lebar dashboard blogger menyempit sehingga mengganggu edit widget di sajian Layout (Tata Letak), khususnya template blog yang memakai lebar body #layout di atas 850 pixel.

Mungkin banyak blogger yang "Send Feedback" alias komplain ke Blogger. Soalnya, bukan khusus lebar dashboad layout yang menyempit, tapi juga lebar Edit HTML, sehingga cukup mengganggu kenyamanan edit isyarat di sana.

melalui atau bersama ini kembali bermetamorfosis normal, maka kenyamakan edit widget dan elemen blogger lain juga nyaman.

Semula, banyak juga keluhan yang masuk via email CB, wacana bagaimana mengatasinya. Dikiranya itu akhir isyarat template, padahal bawaan blogger alias kebijakan gres Blogger wacana lebar dashboard menjadi 850px saja.*


Sumber http://www.contohblog.com/

Cara Dan Metode Menyembunyikan Deskripsi Header Blog

Cara Dan Metode Menyembunyikan Deskripsi Header Blog

Desain Blog

Unknown September 05, 2016

Cara dan metode Menyembunyikan Deskripsi Header Blog

TIPS berikut ini tidak usah diterapkan jikalau Anda memakai logo gambar (image) di header blog, alasannya deskripsi header blog sudah otomatis tidak akan muncul dengan settingan widget header sebagai berikut, yakni mencentang "Instead of title and description".

Namun, jikalau Anda tidak memakai logo gambar untuk nama blog atau judul blog (header), maka deskripsi blog akan muncul.

Akan tampak tidak anggun jikalau deskripsi blog Anda panjang, apalagi nyampe maksimal 500 aksara menyerupai ini:

Kita dapat menyembunyikan deskripsi tersebut dengan mudah, sehingga menjadi menyerupai ini:

Cara dan metode Menyembunyikan Deskripsi Header Blog

Ada dua cara. Dua-duanya diawali dengan klik Template > Edit HTML

Cara dan metode #1
Tambahkan isyarat berikut ini di atas isyarat ]]></b:skin>

.Header .description{display:none}

Cara dan metode #2
Cari isyarat <div class='descriptionwrapper'> dan tambahkan isyarat style='display:none' di dalamnya menjadi begini:

<div class='descriptionwrapper' style='display:none'>

Di Template Bawaan Blogger

Untuk template bawaan blogger, cari isyarat berikut ini:

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);

Tambahkan isyarat display:none di dalamnya, menjadi begini:

.Header .description {
display:none;
font-size: $(description.text.size);
color: $(description.text.color);

Demikian Cara dan metode Menyembunyikan Deskripsi Header Blog. Jika ingin menyembunyikan elemen lain, isyarat kuncinya adala style='display:none' atau 'display:none' yang artinya "tidak ditampilkan". Good Luck! (http://www.contohblog.com).*


Sumber http://www.contohblog.com/

Mengatasi Error Datepublished Structured Data Blogger

Mengatasi Error Datepublished Structured Data Blogger

Desain Blog

Unknown September 04, 2016

cara Dan Teknik Mengatasi Error datePublished Structured Data Blogger.

Error datePublished ialah salah satu kesalahan micro data template blog ketika dites di Structured Data Testing Tool Google.

Penyebab utama error datePublished (tanggal publikasi), meski template blog ditetapkan "bebas error", ialah setting format tanggal dan waktu di dashboard blogger. Jadi, bukan templatenya yang error, tapi settingan waktu.

cara Dan Teknik Mengatasi Error datePublished Structured Data Blogger

Perhatikan error berikut ini ketika CB ngetes blog demo CB Theme --template modifikasi bawaan blogger jadi responsive dan seo friendly.

Dari gambar di atas, Google tidak mengenali format waktu 00:00:00 PM. Maka untuk mengatasinya, kita ke Dashboard Blogger:

1. Klik "Setting" > klik "Language and formatting?
2. Lakukan Setting menyerupai ini:

3. Save!

Saat diuji kembali di Structured Data Testing Tool, karenanya 0 Error dan 0 Warning alias "All good".

Demikian sekilas Mengatasi Error datePublished Structured Data Blogger.

Jika cara di atas tidak berhasil, artinya kesalahan ada di template blog. Silakan simak: Mengatasi Error dateModified & datePublished di Structured Data.

Good Luck & Happy Blogging! (www.contohblog.com).*


Sumber http://www.contohblog.com/

Kode Related Posts Keren Dengan Gambar Thumbnail

Kode Related Posts Keren Dengan Gambar Thumbnail

Desain Blog

Unknown September 03, 2016

Cara dan metode Memasang Kode Related Posts dengan Gambar Thumbnail di Bawah Posting Blog.

POSTING ini "sekadar" menyimpan isyarat Related Posts Keren dengan Gambar Thumbnail yang dipasang di blog CB.

Kode Posting Terkait untuk Blogger ini bersumber dari isyarat related post yang CB share sebelumnya di posting Membuat Sendiri Related Post plus Gambar Thumbnail di Blog.

Kode entry terkait atau artikel terkait berikut ini sudah dimodifikasi sampai tampil menyerupai di ada di bawah tiap posting.

Anda yang blognya belum memasang widget Related Posts, dapat gunakan yang ini. Yang sudah ada, dan mau ganti, hapus dan replace saja isyarat related postnya dengan yang di bawah ini.

Hanya ada tiga kelompok kode, ialah CSS, HTML, dan Javascript.  CB share dua jenis tampilan related post dengan gambar thumbnail: vertikal dan horizontal.

1. Related Post Gambar Vertikal

Contoh lengkap nya menyerupai di blog CB ini dan gambar di atas.

KODE CSS:
Disimpan di atas isyarat ]]></b:skin> atau </style>

#related_posts{margin-top:15px}
#related_posts h4 {color:#FD4646;margin: 0px 0px 5px;font-size: 130%;font-family:Arial;font-weight:700;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px dashed #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:left;font-weight:400;text-transform:none;color:#333;font-size:12px;line-height:16px}
#related_img img{float:left;margin-right:7px;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

KODE HTML/XML
Simpan di bawah isyarat <data:post.body/> yang kedua atau ketiga. Bisa juga di bawah isyarat Social Share Button plus WhatsApp.

      <div id='related_posts'>
        <h4>Related Posts:</h4>
        <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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
          <script type='text/javascript'>relatpost();</script>
        </ul>
      </div>

KODE JAVASCRIPT
Simpan di atas isyarat </head> atau </body>

<script type='text/javascript'>
/*<![CDATA[*
/var relnum=0;var relmaxposts=5;var numchars=230;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgS1-BzGZtGMq4Lj_8jBOyzWf7GMKLGjhnTcRNzTAlBbR2bQckmoxrqYiazMzekhWbzDear5G1Eb8pYyQ6XLZsBlE7Ivbpc2__mSOoQ9iINErmHuqX7Hp4aAyCnoTtPFqXH3buSo8T9tps/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;
/*]]>*
/</script>

Save Template! 

2. Related Post Gambar Horizontal

Contoh lengkap nya menyerupai gambar di bawah ini:

CARA PASANG:
1. Template > Edit HTML
2. Copas isyarat berikyt ini di atas isyarat </head>

<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vd6WUBzCth5jvi7P-pu8Nwv7PSFEZ8kp1FqX4p96Vj_g5UD1MUzsrz7Zb5S7a4FjjH0ulWjNU-kpq2pQka9m9hGf3eUkyTwHJSQ2Yj9PNKjrGzhUmWRf1PhW4FxXmlYRUnFd-GrGb_d5/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails End-->

3. Copas di atas isyarat <div class='post-footer'>

<!-- Related Posts with Thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails End-->

Save Template!!!

Demikian cara memasang Kode Related Posts Keren dengan Gambar Thumbnail di Blogger. Muncul di bwah Postingan Blog.  Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Motogp Crash - Template Seo Friendly Untuk Blog Informasi Motogp & Bola

Motogp Crash - Template Seo Friendly Untuk Blog Informasi Motogp & Bola

Template Blog

Unknown September 03, 2016

MotoGP Crash - Template SEO Friendly untuk Blog Berita Olahraga MotoGP & Sepakbola. Fast Loading dan Responsive. Keren. Terbaru.

niche blog motogp selain sepakbola.

Jika Anda berminat menciptakan blog baru yang fokus ke konten sport sepakbola dan motogp, juga jenis olahraga lainnnya, template ini cocok banget. Demonya sih khusus konten MotoGP, sesuai dengan nama templatenya: motogp crash.

Tentu saja, template ini juga cocok untuk niche blog lainnya, termasuk blog pribadi, blog kesehatan, bahkan blog toko online atau untuk AdSense.

Kenapa MotoGP dan Sepakbola, alasannya dua jenis olahraga ini paling digemari di seluruh dunia, tanpa mengecilkan cabang olahraga lainnya. Eh, sudah disebutkan tadi ya :)

Berikut ini penampakan dan data template responsive MotoGP Crash:

DEMO | ORDER

Mobile-Friendly Test

Awesome! This page is mobile-friendly.

Structured Data

No Error | No Warning | All Good.

Skor SEO 100%

Fitur Template MotoGP Crash:

• SEO Optimized
• Responsive - Mobile Friendly
• User Friendly & Fast Loads
• Related Post with Thumbnail
• Blog Pager Navigasi Judul Posting
• Komentar Blogger & Facebook
• Modern & Elegant Design
• Featured Post Image Otomatis
• AdSense Ready
• Structured Data All Good
• Skor SEO Chkme 100%
• and more....

VIDEO: MotoGP Crash

Sumber http://www.contohblog.com/

Cara Dan Metode Memperbaiki Layout (Tata Letak) Blogger Yang Acak-Acakan

Cara Dan Metode Memperbaiki Layout (Tata Letak) Blogger Yang Acak-Acakan

Desain Blog

Unknown September 02, 2016

cara Dan Teknik Mengatasi / Memperbaiki Layout Blogger yang Acak-Acakan.

TAMPILAN Layout (Tata Letak) Blog di Dashboard Blogger, untuk mengatur widget, mestinya normal, rapi, tidak acak-acakan, tidak ada titik-titik, juga tidak menumpuk dan tidak rapi, serta widget tidak saling menghalangi, melebar ke bawah semua, dan error lainnya

Biasanya, minimal muncul titik-titik sesudah dan sudah kita ganti navigasi hidangan atau pasang komplemen menu, contohnya menambah Top Menu Navigasi.

cara Dan Teknik Memperbaiki Layout (Tata Letak) Blogger yang Acak-Acakan

#1. Mengatasi Titik-Titik

cara Dan Teknik memperbaiki layout yang awut-awutan berupa titik-titik saja: 

1. Template > Edit HTML

2. Simpan instruksi berikut ini di atas instruksi ]]</b:skin> 

body#layout ul {display:none;}

atau

#layout ul { display: none; }

#2. Mengatasi Layout Bertumpuk

Untuk memperbaiki tata letak widget yang Istimewa untuk bertumpu dan ada saling menghalangi, maka coba gunakan "kode pemisah" antar-elemen div class atau div id berikut ini, di bawah tiap instruksi epilog </div>

<div class='clear'/>

pola dan cara nya:

<div id="header">
.......................
.......................
</div>
<div class='clear'/>
<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</nav>
<div class='clear'/><div class='content-wrapper'>

#3. Mengatasi Layout Widget Berjejer ke Bawah
Jika widget/gadget berjejer ke bawah semua, gunakan tips dari Kang Ismet ini. 

Copy kode:

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:729px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

Simpan (Copas) di posisi teks warna merah:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ simpan instruksi CSS di sini*/]]></b:skin>

contoh dan cara :

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:729px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}*/]]></b:skin>

Jika di tata letak acak-ackan cuma ada titik-tiki doang, menyerupai gambar di atas, copy instruksi berikut ini dan Simpan di atas kode ]]></b:skin>

body#layout ul {display: none;}

CARA LAIN

Dalalam Solution for Page Elements “Layout Mode” Broken problem disebutkan, cara memperbaiki layout awut-awutan ialah sebagai berikut:

1. Copy (Ctrl+C) Kode Berikut ini:

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none} 
body#layout #outer-wrapper{overflow:visible;width:1000px} 
body#layout #header{float:left;width:240px} body#layout #header2{float:right;width:240px} body#layout .add_widget{width:240px} body#layout div.widget{width:240px} 
body#layout #sidebar-wrapper{overflow:visible;width:240px} 
body#layout #lsidebar-wrapper{overflow:visible;float:left;width:240px;margin-right:50px;} body#layout #main-wrapper{overflow:visible;float:left;width:240px} 
body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px} 
body#layout #myGallery{display:none} body#layout .featuredposts{display:none} 
body#layout .fp-slider{display:none} body#layout #navcontainer{display:none} 
body#layout .menu-secondary-wrap{display:none} 
body#layout .menu-secondary-container{display:none} 
body#layout #skiplinks{display:none} 
body#layout .feedtwitter{display:none} 
body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible} 
body#layout .section-columns{margin:0} .section{width:100%}

2. Simpan atau Paste (Ctrl+V) di bawah instruksi menyerupai ini:

/* 
Blogger Template Style
Name
Author st
*/

atau di atas kode:

/* Variable Definitions 
bla bla.....
*/

Jika instruksi di atas tidak cocok, masih belum dapat mengatasi layout acak-acakan, coba gunakan instruksi berokut ini di bawah instruksi <b:skin><![CDATA[

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Notes!

Kode mengatasi layaot blogger yang awut-awutan di atas, belum tentu cocok dengan template blog Anda. 

Jika masih gagal juga, bekerjsama tidaka masalah, asalkan masih dapat edit widget, alasannya ialah tata letak tersebut Istimewa untuk muncul di dashboard, tidak muncul di tampilan blog sebenarnya.

Demikian cara Dan Teknik Mengatasi Tata Letak Blogger yang Acak-Acakan. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber http://www.contohblog.com/

Cara Dan Metode Menciptakan Navigasi Halaman Nomor (Angka) Di Blogger Terbaru

Cara Dan Metode Menciptakan Navigasi Halaman Nomor (Angka) Di Blogger Terbaru

Desain Blog

Unknown September 01, 2016

cara Dan Teknik terbaru memasang atau membuat Navigasi Halaman Nomor atau Angka (Numbered Page Bavigation) di blogger.

Diistilahkan dengan Page Navigation with WP-PageNavi style, navigasi halaman untuk blogger dengan gaya navigasi halaman blog CMS WordPress.

Disebut terbaru alasannya yakni isyarat scriptnya tidak ngelink ke Google Code dan Google Drive yang sudah dilarang Google, sehingga semua isyarat script yang disimpan (di-hosting) di sana tidak work lagi.

Jika isyarat navigasi halaman nomor blog Anda ngelink ke Google Code, dipastikan tidakan muncul. Satu lagi yang baru: navigasi jalaman angka/nomor ini responsive (mobile friendly).

cara Dan Teknik Membuat Navigasi Halaman Nomor (Angka)

1. Install CSS style
Buka isyarat template Anda dengan klik Template > Edit HTML

Temukan isyarat  ]]></b:skin>

Masukan salah satu isyarat css berikut ini. Ada dua model, hitam putih dan berwarna.

STYLE-1

/* Page Navigation Model Hitam Putih */

.pagenavi{clear:both;margin:10px auto;text-align:center}

.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}

.pagenavi a:visited{color:#c20c0c}

.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}

.pagenavi .pages,.pagenavi .current{font-weight:bold}

.pagenavi .pages{border:none}

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

pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}

.pagenavi span,.pagenavi a{padding:5px;}

}

STYLE-2

/* Page Navigasi Nomor/Angka model Warna */

.pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#000!important;text-transform:uppercase}

.pagenavi span,.pagenavi a{padding:5px 10px;margin-right:3px;display:inline-block;color:#000!important;background-color:#fff;border:1px solid #e5e5e5}

.pagenavi .current{color:#000!important;border:1px solid #222}

.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#000!important;border:1px solid #222}

.pagenavi .pages {display:none}

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

pagenavi{clear:both;margin:15px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}

.pagenavi span,.pagenavi a{padding:5px;}

}

2.  Install script

Temukan isyarat <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Masukkan isyarat berikut ini sehabis dan sudah atau di bawah isyarat tersebut:

<b:includable id='page-navi'>

    <div class="pagenavi">

        <script type="text/javascript">

        var pageNaviConf = {

            perPage: 5,

            numPages: 9,

            firstText: "First",

            lastText: "Last",

            nextText: "Next",

            prevText: "Prev"

        }

        </script>

<script type='text/javascript'>

//<![CDATA[

function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();

//]]>

</script>

        <div class="clear" />

    </div>

</b:includable>

3. Langkah Berikutnya: Tahap Akhir

Temukan isyarat berikut ini:

<!-- navigation -->

<b:include name='nextprev'/>

Hapus dan Ganti dengan isyarat ini:

<b:if cond='data:blog.pageType == "index"'>

    <b:include name='page-navi' />

    <b:else/>

    <b:if cond='data:blog.pageType == "archive"'>

        <b:include name='page-navi' />

    </b:if>

</b:if>

Tidak Ada?

Jika tidak menemukan isyarat <b:include name='nextprev'/>, maka temukan isyarat berikut ini:

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

...

<b:includable id='main' var='top'>

...

</b:includable>

</b:widget>

</b:section>

Copas isyarat berikut ini sempurna di atas tag epilog  </b:includable> :

<b:if cond='data:blog.pageType == "index"'>

    <b:include name='page-navi' />

    <b:else/>

    <b:if cond='data:blog.pageType == "archive"'>

        <b:include name='page-navi' />

    </b:if>

</b:if>

Save Template!

Kini widget Navigasi Halaman Nomor/Angka (Numbered Page Navigation) sudah muncul di blog Anda.  

Configuration

Perhatikan isyarat berikut ini:

var pageNaviConf = {

    perPage: 5,

    numPages: 9,

    firstText: "First",

    lastText: "Last",

    nextText: "Next",

    prevText: "Prev"

}

Arti kode:

– perPage: jumlah posting tiap halaman

– numPages: jumlah nomor halaman navigasi

– firstText, lastText, nextText, prevText: teks yang muncul “First”, “Last”, “Next”, “Prev” 

Demikian cara membuat navigasi halaman nomor atau angka (numbered page navigation) di blogger terbaru.

Sumber Delux Blog Tips dengan modifikasi script Google Code yang error by CB Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber http://www.contohblog.com/