Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Memasang Menu Navigation Pada Blog

4:01:00 PM Add Comment
Memasang Menu Navigation Pada Blog - Iya, pada sore hari ini ketemu lagi dengan anak sembada. Kali ini kita akan membahas tutorial untuk memasang menu navigation pada blog. Menu yang anak sembada bagikan kali ini adalah meni yang onclick sebelah kiri, bisa melihat gambar di bawah ini.



Bagaimana? Apakah teman-teman tertarik? kalau tertarik mari kita sama-sama menuju ke langkah-langkah di bawah ini :

Memasang Menu Navigation Pada Blog

1. Login ke Blogger > Template > Edit HTML
2. Salin Kode di bawah ini tepat di bawah kode <body

<div class='darkshadow'></div>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkO-PHfjIJTvokLKTGgqdqayGsTO3tIetk_hOtiw9dnpqcipERxPrihtI-zKM1vvbeOlUZAeB6DGmY3LSZ6XoGg0znOUNCKML90_ndTXv3rhdzfuLO9dYpPPUH3o1m_SXQspNhY9fJg7g/s1600/noimage.png' title='Admin'/>
<h3>Nama Admin</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a>
<p>emailkamu@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'></i> Ranking</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Players</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Groups</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Company</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'></i> News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'></i> Inbox</span></a></li>
<h2>Submenu</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'></i> Settings</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'></i> My File</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'></i> Upload</span></a></li>
</ul>
</div>
</nav>


Oia, saya lupa, untuk menu navigation ini blog sobat harus sudah ada jQuery dan Font Awesome agar bisa jalan.

3. Simpan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Material Design Navigation */
.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}

4. Simpan kode javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
//<![CDATA[
// Sub Nav
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>

5. Simpan Template.

Dan untuk memanggil / memunculkan menu dari samping kiri letakkan kode HTML di bawah ini di bawah kode <body

<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>


Biar lebih jelas bisa melihat demo di bawah ini






Demikian tutorial untuk memasang menu navigasi pada blog dari anak sembada pada sore hari ini. Semoga bermanfaat. Terima kasih.

Memasang Kotak Widget Social Media di Blog

1:55:00 AM Add Comment

Memasang Kotak Widget Social Media di Blog - Social media sekarang sudah sangat berkembang pesat begitu juga untuk keperluan dunia blogger, karena dengan social media visitor/pengunjung blog kita bisa bertambah. Jadi hampir semua blogger menggunakan widget social media di blog nya. Pada kali ini anak sembada akan membagikan widget social media yang akan menghiasi blog sobat. Bila teman-teman tertarik untuk mencobanya mari sama-sama kita simak langkah-langkah di bawah ini.

Memasang Kotak Widget Social Media di Blog

widget menggunakan font awesome, jadi silahkan tambahkan link CSS di bawah ini di atas kode </head> 

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

1. Buka Blogger > Editor Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>


/* Sosial Media Widget */
#HTML68 .sosmedjev-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedjev-img{position:relative;max-height:140px;overflow:hidden}
.sosmedjev-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedjev-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedjev-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedjev-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedjev-float{text-align:center;display:table;width:100%;height:100%}
.sosmedjev-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedjev-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedjev-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedjev-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedjev-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedjev-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedjev-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedjev-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedjev-icon.fbl a{background:#3b5998}
.sosmedjev-icon.twitt a{background:#19bfe5}
.sosmedjev-icon.crcl a{background:#d64136}
.sosmedjev-icon.fbl a:hover,.sosmedjev-icon.twitt a:hover,.sosmedjev-icon.crcl a:hover{background:#404040}
.extender .sosmedjev-icon:hover a,.extender .sosmedjev-icon a:hover{color:#fff;}
.sosmedjev-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedjev-info p{margin:5px 0}
.sosmedjev-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedjev-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedjev-info h4:before,.sosmedjev-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedjev-info h4:before {margin-left:-50%;text-align:right;}

Agar tampilan lebih rapi sobat tambahkan kode di bawah ini

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

2. Selanjutnya salin kode di bawah ini di tag pembuka <body> atau tag penutup </body> terserah sobat mau meletakkannya dimana.

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedjev-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4ty9aZMgr9a2OdjIX6jh6AzMp2QlaCuG-lKgQddh1IO9f79OmKS7D05o8QEUR9WP_smtaOksYOCW_Zqn3yCn1VNEeIlRK7mBjuBofckPBU86_-_kfuntJZmTh9z8JL2H1uoY7OX85IJu/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedjev-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedjev-info'>
  <h4><span>Anak Sembada</span></h4>
<p>Blog Pemberi Informasi Blogger</p>
</div>
<div class='sosmedjev-wrpicon'>
<ul class='extender'>
<li class='sosmedjev-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedjev-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedjev-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>


Ganti yang saya tandai di atas sesuai dengan kemauan sobat.


Biar lebih jelas bisa lihat demo di bawah ini






Begitulah kira-kira tutorial dari anak sembada untuk memasang kotak widget social media di blog.

Semoga bermanfaat.
Terima kasih

Membuat Flat UI Color Picker di Blog

11:34:00 PM Add Comment

Membuat Flat UI Color Picker di Blog - Anak Sembada akan membagikan tutorial untuk membuat Flat UI color picker di blog tapi kali ini yang responsive, jadi jika sobat membuka di device smartphone tetap bisa menggunakannya. Sebelumnya apa fungsi color picker? fungsinya adalah kita dengan cepat mendapatkan kode warna yang kita inginkan tapi disini kode warna yang flat ui yah sesuai dengan judulnya. Dan kegunaanya color picker juga banyak, jika sobat yang suka ngopre template pasti suka mengganti warna yang ada di dalam template jadi dengan color picker anda sangat terbantu. Nah, keunggulan color picker yang saya bagikan ini tidak  akan  berpengaruh dengan loading blog karena widget ini hanya menggunakan HTML dan CSS saja. Oke silahkan ikuti langkah-langkah di bawah ini.

Membuat Flat UI Color Picker di Blog

1. Buka Blogger > Buat postingan baru pada halaman statis > copykan kode di bawah ini ke dalam halaman tersebut.

<div id="flatujevan">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by sembadakost.blogspot.com */
#flatujevan ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatujevan ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatujevan ul.flatui li:hover{z-index:4}
#flatujevan ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatujevan ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatujevan ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatujevan ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatujevan ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatujevan ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatujevan ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatujevan ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatujevan ul.flatui li{width:100%}}
</style>

2. Publish postingan.

Baca juga : Cara Memasang CSS Minifier di Blogger

                                                          Lihat demo di bawah ini biar lebih jelas

                                                                 
                                                                        Demo Responsive




Oke, demikian tutorial untuk membuat flat ui color picker di blog dari anak sembada.

Semoga bermanfaat
Terima kasih

Cara Memasang CSS Minifier di Blogger

1:52:00 AM Add Comment

Cara Memasang CSS Minifier di Blogger - Apa itu CSS minifier? CSS minifier adalah sebuah tools untuk mengecilkan atau mengoptimalkan kode CSS kita, sesuai dengan namanaya. Nah pertanyaan lagi muncul, apa keuntungan memakai tools CSS minifier ini? seperti yang saya bilang di atas ada kata "mengecilkan atau mengoptimalkan" nah, jika kita bisa mengecilkan kode CSS kita yang ada di template kita maka loading blog kita akan sedikit lebih ringan. Jika sobat tertarik ingin menggunakannya bisa simak di bawah ini.

Cara Memasang CSS Minifier di Blogger

1. Buka Blogger > Buat postingan di halaman statis > Copy kan kode di bawah ini di tab HTML yah bukan compose.


<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>


2. Publish postingan.


Baca juga : Cara Membuat Ribbon Yang Keren

Jika sobat mau lebih jelas bisa lihat demo di bawah ini.


Itulah cara memasang CSS minifier di blogger dari Anak Sembada

Semoga bermanfaat.
Terima kasih

Cara Membagi Postingan Blog Menjadi Beberapa halaman

12:44:00 AM Add Comment

Cara Membagi Postingan Blog Menjadi Beberapa Halaman - Oke, kali ini Anak Sembada akan memberikan tips untuk membagi postingan blog menjadi beberapa halaman. Bila sobat semua tertarik ikuti langkah-langkah berikut di bawah ini.

Cara Membagi Postingan Blog Menjadi Beberapa Halaman

1. Login ke Blogger > Buka Template > Copy kode di bawah ini sebelum ]]><b:skin> atau </style>

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}


2. Kemudian copy kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>


Untuk Menambahkan halaman ganti maxIndex=4 dengan keinginan.

Baca juga : Membuat Messenger Facebok di Blog

3. Simpan Template.

4. Buat postingan baru, dan sobat copykan kode di bawah ini pada tab HTML

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>


5. Publish postingan sobat.

Biar lebih jelas teman-teman bisa lihat demo di bawah ini.


Kira-kira itulah sedikit tips dari Anak Sembada tentang cara membagi postingan blog menjadi beberapa halaman.

Semoga bermanfaat.
Terima kasih

Mempercepat Loading Blog Dengan Defer Image

3:40:00 PM Add Comment

Mempercepat Loading Blog Dengan Defer Image - Halo teman-teman blogger atau sobat blogger ketemu lagi dengan saya Anak Sembada. Yah, kali ini saya akan membagikan trik agar mempercepat loading blog dengan defer image. Blog pasti tidak pernah lepas dengan namanya image,baik itu image postingan atau image yang mendukung isi blog. Nah,sebenarnya image ini bisa berpengaruh ke loading blog bila kita tidak hati-hati sewaktu  menguploud ke blog mau itu size gambarnya yang besar atau pun kualitas imagenya rendah. Tapi disini Anak Sembada tidak akan membahas masalah kualitas image tapi saya akan memberikan trik masalah agar loading blog tidak berpengaruh karena masalah image. Oke kita langsung ke tempat kejadian perkara.

Mempercepat Loading Blog Dengan Defer Image

1. Buka Blogger
2. Pada dashboard klik Template > Edit HTML
3. Cari kode </body>
4. Lalu copykan kode CSS dibawah ini tepat diatasnya.

<script type='text/javascript'>
// Defer Image
for(var imgDefer=document.getElementsByTagName("img"),i=0;i<imgdefer.length;i++)imgdefer[i].getattribute("data-src")&&imgdefer[i].setattribute("src",imgdefer[i].getattribute("data-src"));< code="">
</script>

5. Dan yang terakhir simpan Template.

Baca juga : Cara Membatasi Jumlah Posts di Halaman Pencarian

Oke teman-teman itu lah trik agar mempercepat loading blog dengan defer image. Semoga bermanfaat.

Terima kasih.

Cara Membuat Ribbon Yang Keren

5:53:00 AM Add Comment


Cara Membuat Ribbon Yang Keren - Halo sahabat-sahabat blogger bertemu lagi dengan Anak Sembada, Kali ini saya akan memberikan tutorial cara membuat ribbon yang keren. Apa itu Ribbon? kalian bisa melihat gambar di atas, sebenarnya ribbon ini fungsinya tidak penting-penting sekali di blog kegunaannya hanya untuk mempercantik tampilan saja. Bagi yang berminat bisa ikuti caranya di bawah ini.

Cara Membuat Ribbon Yang Keren

Pasti yang pertama adalah membuka Blogger > Edit HTML
dan copykan kode dibawah ini tepat di atas </style>


.non-semantic-protector{position:relative;z-index:1}.ribbon{font-size:16px!important;width:50%;position:relative;background:#e74c3c;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}.ribbon:before,.ribbon:after{content:&quot;&quot;;position:absolute;display:block;bottom:-1em;border:1.5em solid #e74c3c;z-index:-1}.ribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}.ribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:&quot;&quot;;position:absolute;display:block;border-style:solid;border-color:#c0392b transparent transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}

CSS di atas sudah saya Minifier agar loading blog tidak berpengaruh.

Dan untuk untuk menampilkan ribbon di atas, sobat bisa copy/tulis kode dibawah ini saat mau memposting (harus pada tab HTML)

<div class="non-semantic-protector">
<h1 class="ribbon">
<strong class="ribbon-content">sembadakost.blogspot.com</strong>
</h1>
</div>

Ganti sembadakost.blogspot.com sesuai dengan keinginan sobat

Agar tampilannya lebih cantik lagi,buat di halaman statis yang penuh/full.
sobat bisa baca disini : Membuat Halaman Statis Menjadi Full

Oke, itulah kira-kira tutorial dari saya untuk Cara Membuat Ribbon Yang Keren

Cara Membuat Tombol Demo dan Download Flat UI

2:24:00 AM Add Comment

Cara Membuat Tombol Demo dan Download Flat UI - Apa kabar sobat blogger semua, kali ini saya membagikan turorial cara membuat tombol demo dan download flat ui. Pasti para blogger sering membagikan sesuatu di dalam blognya baik itu lagu,film,maupun template pasti sering menampilkan tombol demo atau download. Nah tapi saya akan membagikan tombol yang flat ui. Langsung aja kita ke topik Utamanya.

Cara Membuat Tombol Demo dan Download Flat UI

Widget ini memerlukan Font Awesome, jadi silahkan tambahkan kode dibawah ini tepat di atas </head>


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

Berikut contoh tombol yang Flat UI



1. Masuk ke Blogger>Template>Edit HTML
2. Copykan kode CSS di bawah ini dan paste di atas kode ]]></b:skin> atau </style>

/* CSS Button by sembadakost.blogspot.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}


3. Simpan Template.
4. Dan untuk penggunaannya, silahkan gunakan kode di bawah ini ketika membuat postingan. Tapi harus di tab HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://sembadakost.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://sembadakost.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>




Ganti http://sembadakost.blogspot.com dengan link tujuan

Demikian tutorial Cara Membuat Tombol Demo dan Download Flat UI , Semoga bermanfaat.

Baca Juga : Cara Membuat Blog



Formulir Kontak

Name

Email *

Message *