Imam Uddin; imamuddinwp

 

langkahnya

1. buat widget baru

2. kopas semua scrip berikut ke widget baru

3. save dan lihat hasilnya

scripnya

<!-- CSS --> <style type='text/css'> #materialmenu *{margin:0;padding:0;box-sizing:border-box} #materialmenu{width:100%;height:50px;background-color:#3498DB;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)} #materialmenu a{text-decoration:none} #materialmenu > nav#menunav > div{float:left;width:16.6666%;height:100%;position:relative} #materialmenu > nav#menunav > div > a{text-align:center;width:100%;height:100%;display:block;line-height:50px;color:#fbfbfb;transition:background-color 0.2s ease;text-transform:uppercase} #materialmenu > nav#menunav > div:hover > a{background-color:rgba(0,0,0,0.1);cursor:pointer} #materialmenu > nav#menunav > div > div{display:none;overflow:hidden;background-color:white;min-width:200%;position:absolute;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:10px} #materialmenu > nav#menunav > div:not(:first-of-type):not(:last-of-type) > div{left:-50%;border-radius:0 0 3px 3px} #materialmenu > nav#menunav > div:first-of-type > div{left:0;border-radius:0 0 3px 0} #materialmenu > nav#menunav > div:last-of-type > div{right:0;border-radius:0 0 0 3px} #materialmenu > nav#menunav > div:hover > div{display:block} #materialmenu > nav#menunav > div > div > a{display:block;float:left;padding:8px 10px;width:46%;margin:2%;text-align:center;background-color:#3498DB;color:#fbfbfb;border-radius:2px;transition:background-color 0.2s ease} #materialmenu > nav#menunav > div > div > a:hover{background-color:#212121;cursor:pointer} h1{margin-top:150px;font-weight:300} @media (max-width:600px){#materialmenu > nav#menunav > div > div > a{margin:5px 0;width:100%}#materialmenu > nav#menunav > div > a > span{display:none}} </style> <!-- HTML --> <div id="materialmenu"> <nav id="menunav"> <div> <a href="#"><span>Menu </span>1</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> <div> <a href="#"><span>Menu </span>2</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> <div> <a href="#"><span>Menu </span>3</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> <div> <a href="#"><span>Menu </span>4</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> <div> <a href="#"><span>Menu </span>5</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> <div> <a href="#"><span>Menu </span>6</a> <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div> </div> </nav> </div>

hasilnya

 

langkahnya

1. buat widget baru

2. kopas semua scrip berikut ke widget baru

3. save dan lihat hasilnya

scripnya

<!-- CSS --> <style type='text/css'> nav#menunav{margin:0 auto;max-width:700px;width:95%} nav#menunav #checkbox1,nav#menunav .toggle{display:none} nav#menunav .menu{padding:0;margin:0;max-width:700px;height:50px;border-radius:5px;display:flex;flex-direction:row;justify-content:space-around;align-items:center;list-style-type:none} nav#menunav .menu li a{text-decoration:none;align-self:center;border-radius:5px;font-size:14px;padding:10px 15px;transition:background .2s linear} @media screen and (max-width:600px){nav#menunav .menu li a{font-size:13px}} @media screen and (max-width:550px){nav#menunav .toggle{clear:both;display:block;text-align:center;font-size:14px;line-height:40px;cursor:pointer;width:100%;height:40px;font-size:18px;color:#595959;background:#dbdbdb;border-bottom-left-radius:5px;border-bottom-right-radius:5px;transition:all .1s linear}nav#menunav .toggle:hover{background:#cecece}nav#menunav #checkbox1:checked + label .demo li{opacity:1;visibility:visible;transition:all .7s linear}nav#menunav #checkbox1:checked + label .demo{height:200px}nav#menunav .menu{border-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;height:0;transition:height .3s linear}nav#menunav .menu li{display:flex;/* magic */ align-self:center;width:95%;opacity:0;visibility:hidden}nav#menunav .menu li a{width:95%;text-align:center;align-self:center;align-content:center}} nav#menunav .demo{background:#625b60} nav#menunav .demo li a{color:#fff} nav#menunav .demo li a:hover{background:#6d6268} </style> <!-- HTML --> <nav id="menunav"> <input type="checkbox" id="checkbox1" /> <label for="checkbox1"> <ul class="menu demo"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">FAQ</a></li> </ul> <span class="toggle">☰</span> </label> </nav>

hasilnya

 

langkahnya

1. buat widget baru

2. kopas semua scrip berikut ke widget baru

3. save dan lihat hasilnya

scripnya

<!-- CSS --> <style type='text/css'> .nav-bar{background:#000;width:100%} .nav-bar__label{color:#fff;display:block;padding:10px 0;text-align:center;text-transform:uppercase;width:inherit} .nav-bar__label::after,.nav-bar__sub-label::after{content:" +"} .nav-bar__label,.nav-bar__sub-label{cursor:pointer} .nav-bar__list{background:#000;list-style:none;margin:0;padding:0;width:100%} .nav-bar__list,[id^="toggle"]{display:none} [id^="toggle"]:checked + .nav-bar__list{display:block} .menu_navigation{display:block} .nav-bar__link,.nav-bar__sub-label{color:#fff;display:block;padding:10px 20px;text-decoration:none;word-wrap:break-word} .menu_navigation .menu_navigation .nav-bar__link,.menu_navigation .menu_navigation .nav-bar__sub-label{padding:10px 10px 10px 30px} .nav-bar__link:hover,.nav-bar__link:active,.nav-bar__sub-label:hover{background:#666} @media all and (min-width:992px){.nav-bar > .nav-bar__label{display:none}.nav-bar > .nav-bar__list{display:block}.nav-bar > .nav-bar__list > .menu_navigation{display:inline-block;position:relative}.menu_navigation .nav-bar__list{position:absolute}.menu_navigation .menu_navigation .nav-bar__link,.menu_navigation .menu_navigation .nav-bar__sub-label{padding:10px 20px}} </style> <!-- HTML --> <nav class="nav-bar"> <label for="toggle" class="nav-bar__label">Menu</label> <input type="checkbox" id="toggle" class="nav-bar__toggle"/> <ul class="nav-bar__list"> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 1</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 2</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 3</a> </li> <li class="menu_navigation"> <label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label> <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/> <ul class="nav-bar__list"> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 1</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 2</a> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Sub Menu 3</a> </li> </ul> </li> <li class="menu_navigation"> <a href="#" class="nav-bar__link">Menu Item 4</a>

hasilnya

langkahnya

1. buat widget baru

2. kopas semua scrip berikut ke widget baru

3. save dan lihat hasilnya

scripnya

<!-- CSS --> <style type='text/css'> #menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none} #menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative} #menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px} #menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0} #menunav nav{width:auto;float:right} #menunav nav ul{display:table;float:right} #menunav nav ul li{float:left} #menunav nav ul li:last-child{padding-right:0} #menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s} #menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s} #menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s} #menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s} #menunav .toggle-menu ul{display:table;width:25px} #menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px} #menunav .toggle-menu ul li:last-child{margin-bottom:0} #menunav input[type=checkbox],label{display:none} @media only screen and (max-width:1440px){#menunav .section{max-width:95%}} @media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}} @media only screen and (max-width:480px){#menunav .section{max-width:90%}} @media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}} </style> <!-- HTML --> <div id="menunav"> <div class="section"> <a href="https://mastamvan.blog" id="logo" target="_blank">Logo</a> <label for="toggle-1" class="toggle-menu"/> <ul> <li></li> <li></li> <li></li> </ul> </label> <input type="checkbox" id="toggle-1"> <nav> <ul> <li><a href="#logo"><i class="fa fa-home"></i>Home</a></li> <li><a href="#about"><i class="fa fa-user"></i>About</a></li> <li><a href="#portfolio"><i class="fa fa-thumb-tack"></i>Portfolio</a></li> <li><a href="#services"><i class="fa fa-gears"></i>Services</a></li> <li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li> <li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li> </ul> </nav> </div> 

</div>

hasilnya

 

Cara Memasang Posting Terpopuler - Simple Popular Posts Widget di Sidebar Blog.

Posting Terpopuler, Artikel Terbanyak Dibaca, Entri Populer, atau Popular Posts adalah Widget di sidebar blogger yang menampilkan secara otomatis konten blog kita yang paling banyak dikunjungi atau dibaca.

Kadang-kadang popular posts justru berupa 'tulisan bebas' yang bukan niche blog kita. Lihat saja Posting Terbanyak Dibaca di CB Blogger.

Widget Popular Posts paling banyak menampilkan 10 judul postingan. Itu bawaan blogger.

Berikut ini desain tampilan popular post yang sederhana, namun cukup elegan dan bersih alias Simple Popular Posts Widget. Tidak dianjurkan menampilkan Popular Posts Widget berupa judul dan gambar karena kadang membuat loading jadi berat.

Berikut ini kode posting terpopuler simple dan cara memasangnya di Blogger. Desainnya berupa angka dan judul postingan sehingga fast loading.

Cara Memasang Posting Terpopuler Simple Popular Posts Widget

Cara Memasang Posting Terpopuler Simple Popular Posts Widget


Cara Pasang Widget Popular  Posts:
1. Layout > Add a Gadget di Sidebar
2. Pilih Entri Populer/ Popular Post




3. Konfigurasikan. Jangan centang apa pun!
4. Save!

Demikian Cara Memasang Posting Terpopuler Simple Popular Posts Widget. Good Luck! (www.contohblog.com).*

BANYAK yang tanya di kolom komentar, bagaimna caranya membuat Featured Post dari Posting Terbaru per Label di Blogger, seperti di halaman depan blog CB ini.

Sebenarnya sudah banyak blogger lain yang sudah share kodenya, namun kebanyakan memang dalam bahasa Inggris.

Berikut ini cara membuatnya. Penampakan Featured Post dari Posting Terbaru per Label seperti model ilustrasi gambar posting ini.

Sesuaikan lebarnya dengan lebar main-area atau main-wrapper template blog Anda. Cari aja kode berupa angka dan px.

Cara Membuat Featured Post dari Posting Terbaru per Label

Berikut ini Cara Membuat Featured Post dari Posting Terbaru per Label di halaman depan Blog Blogger Anda:

KLIK Tema/Template > Edit HTML

Kode CSS  Featured Post dari Posting Terbaru per Label 
Simpan di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
#label1-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label1 {color:#666;line-height: 1.5em;}
.label1 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label1 li {margin:0;padding:0;line-height:1.5em;}
.label1 .widget {margin:0;padding:0;}
.label1 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label1 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label1 .index a {color:#fff;background:#666;padding:3px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label1 .index a:hover {background:#333;text-decoration:none;}
.label1 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px;}
.label1 h2 {margin:0;padding:20px 20px 1px 20px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
#label2-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label2 {color:#666;line-height:1.5em;}
.label2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label2 li {margin:0;padding:0;line-height:1.5em;}
.label2 .widget {margin:0;padding:0;}
.label2 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label2 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label2 .index a {color:#fff;background:#666;padding:4px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label2 .index a:hover {background:#333;text-decoration:none;}
.label2 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;}
.label2 h2 {margin:0;padding:20px 20px 1px 20px;font:Arial;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
.label2 span.cat_meta_comment a:hover {color:c00!important;}
.label2 ul.cat_thumbs li a:hover, .label2 ul.cat_thumbs2 li a:hover {color:#c00;text-decoration:none;}
.cat_left {width:300px;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #ddd;}
.cat_right {width:290px;float:right;margin:0;padding:0;}
ul.cat_thumbs {margin:0;padding:0;}
ul.cat_thumbs li {margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {position:relative;margin:0 0 15px;padding:0;width:300px;height:220px;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs .cat_thumb img:hover {opacity: 0.7;filter: alpha(opacity=70);}
ul.cat_thumbs2 {margin:0;padding:0;}
ul.cat_thumbs2 li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px dotted #ddd;min-height:70px;}
ul.cat_thumbs2 li:last-child {border-bottom:none;margin:0 0 0;padding:0 0 0;}
ul.cat_thumbs2 .cat_thumb2 {float:left;margin:0 15px 10px 0;width:100px;height:75px;}
ul.cat_thumbs2 .cat_thumb2 img {width:100px;height:75px;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs2 .cat_thumb2 img:hover {opacity: 0.7;filter: alpha(opacity=70);}
span.cat_title {font:Arial;font-size:22px;font-weight:700;display:block;margin:0 0 5px;line-height:1.2em;text-transform:none;}
span.cat_title2 {font-size:16px;line-height:1.4em;margin:0 0 3px;}
span.cat_title a {color:#333;}
span.cat_title a:hover {color:#c00;text-decoration:none;}
span.cat_summary {line-height:1.6em;display:block;margin:5px 0 0;color:#333;font-size:12px;font-weight:400;}
span.cat_meta {display:block;font:#ddd;font-size:11px;font-weight:400;color:#888;text-transform:uppercase;}
span.cat_meta a {color:#666!important;display:inline-block;}
span.cat_meta_date, span.cat_meta_comment, span.cat_meta_more {display:inline-block;margin-right:10px;}
span.cat_meta_comment a:before {content:"f0e6";font-family: FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
span.cat_meta_comment a:hover {color:#ddd!important;}
span.cat_meta_date:before {content:"f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
ul.cat_thumbs2 li a:hover, ul.cat_thumbs li a:hover {color:#c00;text-decoration:none;}
@media screen and (max-width:1024px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:20px 25px;}
.label1 h2, .label2 h2 {padding:20px 25px 1px 25px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:20px;line-height:1.2em;}
span.cat_summary {font-size:14px;}
}
@media screen and (max-width:768px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:640px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {float:right;margin:0 0 0 15px;width:200px;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:200px;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:480px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:320px) {
 #label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:260px) {
#label1-wrapper, #label2-wrapper{width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px;}
.label1 h2, .label2 h2 {padding:10px 10px 1px 10px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
</style>
</b:if>
</b:if>

KODE HTML
Simpan di atas kode  <div id='main-wrapper'>  dan yang semisalnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='label1-wrapper'>
        <b:section class='label1' id='label1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML11' locked='true' title='Blogging' type='HTML' version='1' visible='true'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=6&#39;&gt;Index&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='label2-wrapper'>
        <b:section class='label2' id='label2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML12' locked='true' title='Tips' type='HTML' version='1' visible='true'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=6&#39;&gt;Index&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

KODE JAVASCRIPT
Simpan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('1D 1E(w){N(i v=0;v<1F;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=0;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i j;1d{j=f.1e$1f.U;j=j.17("/1g-c/","/w"+1h+"-h"+1i+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){j=d}M{j=1G}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);i h=1H 1I();h[1]="1J";h[2]="1K";h[3]="1L";h[4]="1M";h[5]="1N";h[6]="1O";h[7]="1P";h[8]="1Q";h[9]="1R";h[10]="1S";h[11]="1T";h[12]="1U";k.B('<C E="1V">');k.B('<Y E="1W">');k.B("<Z>");D(1X==H){k.B('<a G="'+z+'"><13 E="1Y"><C E="1Z"></C><W 1m="'+1h+'" 1n="'+1i+'" 1o="'+g+'" X="'+j+'"/></13></a>')}k.B('<C E="1p"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q">');D(20==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(21==H){D(n=="1 K"){n="1 K"}D(n=="0 K"){n="0 K"}16='<C E="1t"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(22==H){A=A+'<C E="1u"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B('<C E="23">');D("V"1x f){i y=f.V.$t}M{D("1y"1x f){i y=f.1y.$t}M{i y=""}}i p=/<\S[^>]*>/g;y=y.17(p,"");D(24==H){D(y.L<1z){k.B("");k.B(y);k.B("")}M{k.B("");y=y.I(0,1z);i e=y.25(" ");y=y.I(0,e);k.B(y+"...");k.B("")}}k.B("</C>");k.B("</Z>");k.B("</Y>");k.B("</C>")}k.B('<C E="26">');k.B('<Y E="27">');N(i v=1;v<28;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=1;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i q;1d{q=f.1e$1f.U.17("/1g-c/","/w"+1A+"-h"+1B+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){q=d}M{q=29}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);D(2a==H){k.B('<a G="'+z+'"><13 E="2b"><W 1m="'+1A+'" 1n="'+1B+'" 1o="'+g+'" X="'+q+'"/></13></a>')}k.B("<Z>");k.B('<C E="1p 2c"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q 2d">');D(2e==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(2f==H){D(n=="1 1C"){n="1 K"}D(n=="0 1C"){n="0 K"}16='<C E="1t 2g"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(2h==H){A=A+'<C E="1u 2i"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B("</Z>")}k.B("</Y>");k.B("</C>")};',62,143,'||||||||||||||||||var||document|||||||||||||||||write|span|if|class|link|href|true|substring|indexOf|Comments|length|else|for|feed|entry|title|break||rel|url|content|img|src|ul|li||||div|target|_top|showcomment|replace|replies|type|text|html|alternate|try|media|thumbnail|s72|thumb_width|thumb_height|catch|substr|published|width|height|alt|cat_title|cat_meta|cat_meta_date|parseInt|cat_meta_comment|cat_meta_more|Read|More|in|summary|numchars|thumb_width2|thumb_height2|Comment|function|labelthumbs|numposts|no_thumb|new|Array|January|February|March|April|May|June|July|August|September|October|November|December|cat_left|cat_thumbs|showpostthumbnails|cat_thumb|rollover|showpostdate|showcommentnum|displaymore|cat_summary|showpostsummary|lastIndexOf|cat_right|cat_thumbs2|numposts2|no_thumb2|showpostthumbnails2|cat_thumb2|cat_title2|cat_meta2|showpostdate2|showcommentnum2|cat_meta_comment2|displaymore2|cat_meta_more2'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = false;
var showpostdate2 = false;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 300;
var thumb_height = 220;
var thumb_width2 = 100;
var thumb_height2 = 75;
var no_thumb = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyj05cfhKYMCNV6Te5xVeTOVQqv26GqdlNoMJYrc4md-6B75b4RmN-vb4KGDELy9oD2U7PR7QGjPCIUjGGloSt6aGJB8XkgXQVzv-kEcjOGXxbNRTXvjSmJ86tO71o7LYpFkQpYfD7Dqg/s1600/cat_thumb.png&#39;;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0RUQnqf59ixfNCxyr3EB2eHK32YrhUyKxpWgNH_6wfsFdKvapoKmh0e9nfANWOEZwvOwrx2lQLO3fAhz0D8pSKIiifIeSnt0U6yXyVpTb3sVfm0_URS7dT5WL_b1Na0ET6l2Dw6578k/s1600/thumb_small.png&#39;;
</script>

Save Template!
Klik Layout/Tata Letak


Saatnya Menampilkan Posting:

1. Layout > Edit Label1 > ketik nama Label
2. Save!

Ulangi untuk  Featured Post dari Posting Terbaru per Label yang kedua:

1. Layout > Edit Label2 > ketik nama Label

2. Save!

Selesai.