Blog Post User Friendly with Very Best Scannable Text

Blog Post User Friendly with Very Best Scannable Text

Contoh Tampilan Posting Blog User Friendly is Scannable, Readable, Enak Dibaca, Nyaman di Mata, Tidak Bikin Pusing Bacanya. 

BELOW is Blog Post User Friendly Sample with Very Best Scannable Text like successful CB Blogger Blog.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Gunakan Rata Kiri (Align Left)

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet:

1. Consectetur, adipisci velit
2. Sed quia non numquam eius modi 
3. Tempora incidunt ut labore et dolore 
4. Magnam aliquam quaerat voluptatem. 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Gunakan Alinea Pendek (Short Paragraph)

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.*

Sample Blog Post with Subheading and Block Quotes

Sample Blog Post with Subheading and Block Quotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Subheading: Sample Blog Post with Subheading

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

This is Block Quotes. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? 

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.*

Cara Jitu Mengatasi Server Error 500 CMS WordPress

Cara Jitu Mengatasi Server Error 500 CMS WordPress

Cara Mudah dan Jitu Mengatasi Server Error 500 CMS WordPress. Banyak tutorial tipa mengatasi Server Error 500. Namun, yang paling jitu adalah cara sendiri, yakni mengganti file Wordpress dengan versi sebelumnya atau di bawahnya.

Pengalaman, saat update WP ke WordPress 4.1.1 (terbaru Januari 2016), terjadi Server Error 500 dan kita tidak bisa akses dashboard, tidak bisa edit, tidak bisa posting, dan sebagainya. Halaman depan (frontpage) dan single-post/single-page normal.

Namun karena error server 500, kita tidak bisa edit atau masuk dashboard. Katanya, itu masalah file .httpaccess, plugin, theme, dan sebagainya. Pusing ah!

Cara Jitu Mengatasi Server Error 500 CMS WordPress
Cara paling mudah mengatasi Server Error 500 CMS WordPress adalah mengganti file CMS WordPress dengan yang lebih lama!

Jika membuka WP Download, link download yang tersedia hanya versi terbaru. Versi lamanya ada di arsip: Release Archieve.

1. Download salah satu versi lama --jangan yang lama banget, minimal satu-dua tingkat di bawahnya.
2. Extract!
3. Buka CPanel menggunakan WinSCP.
4. Pindahkan semua file dan folder WP hasil extract tadi KECUALI wp-content --ingat, kecuali folder wp-content, jangan direplace!
5. Tunggu sampai selesai.
6. Done!

Server Error 500 teratasi!

Itulah ribetnya blogging di selfhosted CMS WordPress. Sering error. Maka, teraman damai dan lancar jaya adalah hosting di Google Blogger saja.

1. Buat blog di blogger
2. Lakukan Custom Domain
3. Beres!

Ngeblog pun aman tanpa error.

Membuat Navigasi Menu Responsive untuk Blogger

Membuat Navigasi Menu Responsive untuk Blogger

Cara Membuat Navigasi Menu Responsive untuk Blogger. Menu responsive artinya menu bar yang adaptif atau menyesuaikan dengan layar yang digunakan untuk membuka blog.

Jika dibuka di komputer desktop, maka menu navigasi tampil biasa. Namun, ketika blog dibuka di HP, maka menu menyesuaikan dengan ukuran layar HP. Itulah menu responsif.

Desain responsive alias mobile friendly sangat disarankan oleh Google karena semakin banyak pengguna internet yang menggunakan smartphone untuk berselancar di internet

KODE CSS:

#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #f35d5c;}#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-family:'Oswald';font-size:14px;font-weight:400;text-transform:capitalize;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover > a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-family:'Oswald';font-size:30px;font-weight:400;text-transform:capitalize ;display:none;width:35px;height:51px;line-height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li > ul.menus{transition:all 0.3s linear;}#menu1 li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation: fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li > a.ai::after {content:"";margin:0 auto;background:url('http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png') no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover > a.ai::after {content:"";margin:0 auto;background:url('http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png') no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#f35d5c;color:#fff;}#menu1 .homers a:hover{background:#d95353;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a{color:#fff;}#menu1 li a:hover{background:#f35d5c;color:#fff}#menu1 li:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:"";background:url('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1 input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#f35d5c;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}}

 

KODE HTML:

<nav id='menu1'><input type='checkbox'/><label><span>MBG</span></label><ul><li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li><li><a href='#'>Drop Down1</a><ul class='menus'><li><a href='#'>Tab 1</a></li><li><a href='#'>Tab 2</a></li><li><a href='#'>Tab 3</a></li></ul></li><li><a href='#'>Seo</a></li><li><a href='#'>Blogger Template</a></li><li><a href='#'>Blogger Widget</a></li><li><a href='#'>Social Media</a></li><li><a href='#'>Get This Menu Bar</a></li></ul><a href='#' id='pull'>MENU</a></nav> 

 

CSS Popular Post Mirip Detikcom untuk Blogger

CSS Popular Post Mirip Detikcom untuk Blogger

Kode CSS Popular Post Mirip Detikcom untuk Blogger.

WIDGET Popular Post yang biasa ditampilkan di sidebar adalah elemen penting dalam sebuah blog atau website. Daftar posting terbanyak dibaca ini menjadi konten unggulan yang akan menarik perhatian pengunjung untuk membacanya.

Karenanya, popular post harus diperlakukan "istimewa" dari segi desain tampilan, minimal berbeda dengan tampilan judul posting lainnya.

Kode CSS Popular Post Mirip Detikcom untuk Blogger:


#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul {  padding-left: 0;
  counter-reset: trackit;
 }
.popular-posts ul li { 
border-bottom: 1px solid #f0f0f0; 
list-style: none outside none !important; 
margin-left: 0 !important; 
overflow: hidden; 
padding: 10px 0 !important; 
transition: all 0.25s linear 0s;
counter-increment: trackit;
  }
.PopularPosts ul li:before{
content: counters(trackit, &quot;.&quot;);
    padding: 0 .1em 0 10px;
    font-size: 20px;
    font-weight: bold;
    color: #F66;
    float: left;
    margin-right: 10px;
}

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
}

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}

.PopularPosts .item-thumbnail, .PopularPosts .item-snippet { 
display: none!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}


CSS Popular Post Default Blogger:
.PopularPosts .item-thumbnail{padding:3px;float: left;margin-right: 14px;margin-top: 5px;}
.PopularPosts .item-thumbnail:hover{background:#3C4042}
.PopularPosts .item-title{font-weight:700;}
.PopularPosts .item-snippet{font-size:11px;color:#888;overflow:hidden;text-align:left}
.PopularPosts ul li {padding:5px 0px}