Membuat Widget Sosial Share Melayang di Sebelah Kiri Artikel

Pada kesempatan kali ini saya akan membagikan hal yang sudah tidak asing lagi di mata anda para blogger yang sudah lama menggeluti dunia blogging. Ya tepatnya tombol share. Tombol share ini sangat berpengaruh juga untuk mendatangkan pengunjung blog dari sosial media contohnya seperti facebook, g+, dan lainnya.

Membuat Widget Sosial Share Melayang di Sebelah Kiri Artikel

Mungkin saja telah banyak yang mengetahui cara ini. Tetapi bagi yang belum tau, saya rasa tips ini tepat untuk anda yang sedang membutuhkannya. Bisa anda lihat gambar di atas, yup saya menaruhnya di sebelah kiri artikel blog yang perlahan muncul dari bawah, agar lebih kelihatan menonjol bagi para pembaca.

Simak sebagai berikut.

1. Login Blog - Tata Letak - Tambah Widget - HTML/Javascript.

2. Copy kode di bawah ini dan letakkan di dalamnya.

<style>
#rumahmediabuttonshare {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#rumahmediabuttonshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#rumahmediabuttonshare{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='rumahmediabuttonshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

3. Kemudian simpan.

Semoga bermanfaat.

Cara Membuat Daftar Isi Seperti Blog Kang Ismet

Pada kesempatan ini saya akan berbagi Cara Membuat Daftar Isi Seperti Blog Kang Ismet yang dimana fungsi ini hampir sama seperti sitemap namun lebih mirip related post dengan recent post.

Cara Membuat Daftar Isi Seperti Blog Kang Ismet

Dengan contoh gambar di atas akan saya berikan tutorialnya di bawah ini.

1. Login Blog - Laman - Buat Laman Baru

2. Salin kode di bawah ini kemudian letakkan di Laman dengan mode HTML

<style type="text/css" scoped="scoped">
/* Multi Feed Loader /www.arlinadzgn.com */
.list-entries{background:white;border:1px solid #d8d8d8}
.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}
.list-entries li{padding:1em;border-bottom:1px solid #ddd}
.list-entries .main-title{padding:0}
.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}
.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}
.list-entries .title a:hover{text-decoration:underline;color:#5886a7}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}
.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}
.list-entries .more-link a:hover{background-color:#71a555}
.list-entries{margin:7px;width:251px;float:left;font-size:11px}
</style>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Travel",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Travel"
        },
        {
            name: "Labels",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Labels"
        },
        {
            name: "Lifestyle",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Lifestyle"
        },
        {
            name: "Travel",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Travel"
        },
        {
            name: "Labels",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Labels"
        },
        {
            name: "Lifestyle",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Lifestyle"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script>
<script type="text/javascript" src="https://rawgit.com/Arlina-Design/nubie/master/multifeedblog.js"></script>
<div style='clear: both;'></div>
</div>

Ganti kode yang telah ditandai di atas dengan Judul Kategori, URL blog, dan Nama Label blog anda.

3. Publikasikan

Sekian tips Cara Membuat Daftar Isi Seperti Blog Kang Ismet semoga bermanfaat.

Cara Memasang Tombol Followers Blogger dengan Efek Slide Out

Cara Memasang Tombol Followers Blogger dengan Efek Slide Out - Kali ini rumah media akan berbagi mengenai "followers blog" yang ada tulisannya Join This Site. Ini sebenarnya sudah disediakan oleh pihak blogger namun saya akan bagikan dengan efek Slide Out di bagian bawah pojok kanan blog.

Cara Memasang Tombol Followers Blogger dengan Efek Slide Out

Tidak menutup kemungkinan akan banyak followers pada blog anda jika ada artikel yang di sukai pembaca dan langsung memollow blog anda melalui tombol Join This Site tersebut.

Bagi anda yang tertarik silahkan ikuti tutorial di bawah ini.

1. Login Blog - Tata Letak - Tambah Widget

2. Copy kode di bawah ini dan taruh di dalam HTML/Javascript

<style scoped='' type="text/css">
/*<![CDATA[*/
#rumahmediaSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.rumahmediaButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}
.rumahmediaButton span{background:url("https://4.bp.blogspot.com/-fc3-0J--iW8/VyPNjRmxJtI/AAAAAAAAD7U/emRRY6ntYEg3IaL-mev9XxE9M1OKh50fACLcB/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.rumahmediaButton:hover,.rumahmediaButton:focus,.followActive,.followActive:hover{color:#fff}
.rumahmediaButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.rumahmediaForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.rumahmediaForm p{margin:10px 0}
.rumahmediaFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.rumahmediaFooter a{color:#aaa;background:none;text-decoration:none}
.rumahmediaFooter a:hover{color:#fff;background:none}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#rumahmediaSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".rumahmediaButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
<div id="rumahmediaSubscribe" style="bottom: -971px;">
  <div class="rumahmediaForm">
    <a class="rumahmediaButton" href="#" title="Follow"><b>+ Follow</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=5511496784234263105" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://1.bp.blogspot.com/-HViEx99kxmQ/VyPMrPGAvEI/AAAAAAAAD7M/bWz5CKpHrHkxtVdgL0z-xJQa_nA_tK0gACLcB/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Silahkan anda scroll ke bawah kode di atas dan ganti ID blog di atas dengan ID blog anda sendiri

ID Blog

3. Simpan

Sekian Cara Memasang Tombol Followers Blogger dengan Efek Slide Out semoga bermanfaat

Cara Memperbaiki Error pada Data Terstruktur untuk Blog Terbaru

Cara Memperbaiki Error pada Data Terstruktur untuk Blog - Apakah blog anda sudah di test di https://developers.google.com/structured-data/testing-tool/ ?? Coba tes dulu. Jika ada eror antara Image, Publisher, MainEntityOfPage dan lain-lain maka tips ini akan berguna untuk blog anda.

Cara Memperbaiki Error pada Data Terstruktur untuk Blog Terbaru

Untuk memperbaiki data eror di atas ikuti langkah-langkah di bawah ini.

1. Menghilangkan eror pada Image di homepage

Cari kode di bawah ini

itemprop='image'

Hapus semua kode di atas

2. Memperbaiki eror pada Image, Publisher dan MainEntityOfPage di halaman posting blog

Cari kode di bawah ini

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Kemudian letakkan kode berikut di bawah kode yang tadi

<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='data:post.firstImageUrl' itemprop='url'/>
  <meta content='600' itemprop='width'/>
  <meta content='300' itemprop='height'/>
 </div>
    </b:if>
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <meta content='URL LOGO BLOG ANDA' itemprop='url'/>
      <meta content='300' itemprop='width'/>
      <meta content='300' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
  </div>

Ganti URL di atas dengan URL logo blog anda

3. Memperbaiki eror pada dateModified di halaman posting blog

Cari kode di bawah ini

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

Tambahkan kode berikut lihat contoh di bawah ini

<span itemprop='dateModified'><a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a></span>

4. Memperbaiki eror pada author dan name di postingan blog

Hapus kemudian ganti kode untuk author di HTML template anda menggunakan kode berikut

<span class='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='publisher' title='author profile'>
<span class='post-author vcard'><span class='fn' itemprop='name'><data:post.author/></span>
</span></a></span>

5. Memperbaiki struktur data yang double

Cari kode ini kemudian hapus bila ada pada template anda

<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>

Sekian Cara Memperbaiki Error pada Data Terstruktur untuk Blog Terbaru semoga bermanfaat

Cara Membuat Tombol Demo dan Download Flat UI 2 Style

Cara Membuat Tombol Demo dan Download Flat UI 2 Style - Sebelumnya di blog ini sudah saya share cara menerapkan tombol download pada blog, kali ini saya bagikan lagi tentang tombol demo dan download ini siapa tau sobat blogger menyukainya. Sudah tau bukan fungsi dari tombol demo dan download ini yang bila di klik akan menuju pada link tertentu.

Cara Membuat Tombol Demo dan Download Flat UI 2 Style


Simak caranya sebagai berikut

1. Login Blog - Template - Edit HTML

2. Letakkan kode di bawah ini sebelum kode </head>

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

Jika sudah terpasang kode fontawesome di atas pada blog anda maka tidak perlu memasang yang ke-2 kalinya

3. Letakkan kode CSS yang anda inginkan di bawha ini sebelum kode ]]></b:skin> atau </style>

Style 1

/* CSS Button Style 1 by www.rumahmedia.id */
.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'}

Style 2

/* CSS Button Style 2 by www.rumahmedia.id */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4. Simpan

Untuk menggunakan fungsi tombol demo dan download di atas gunakan kode di bawah ini pada mode HTML postingan anda

Style 1

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

Style 2

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://www.rumahmedia.id" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://www.rumahmedia.id" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

Ganti URL di atas dengan URL tujuan anda

Sekian Cara Membuat Tombol Demo dan Download Flat UI 2 Style semoga bermanfaat

Membuat Color Picker Responsive Flat UI di Laman Statis Blogger

Membuat Color Picker Responsive di Laman Statis Blogger - Kali ini saya akan memberikan tutorial membuat yang namanya seperti judul di atas. Fungsi dari Color Picker ini adalah untuk mengetahui kode jenis-jenis warna. Anda bisa menggunakannya jika ingin mengedit-edit warna template pada blog anda sesuai selera.

Membuat Color Picker Responsive Flat UI di Laman Statis Blogger


Untuk anda yang tertarik pada Demonya silahkan ikuti langkahnya sebagai berikut.

1. Login Blog - Laman - Buat Laman Baru

2. Copy kode HTML dan CSS di bawah ini kemudian simpan di Laman pada mode HTML

<div id="flatrumahmedia">
    <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 www.arlinadzgn.com */
#flatrumahmedia ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatrumahmedia 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)}
#flatrumahmedia ul.flatui li:hover{z-index:4}
#flatrumahmedia 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)}
#flatrumahmedia ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatrumahmedia 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}
#flatrumahmedia ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatrumahmedia ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatrumahmedia 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){#flatrumahmedia ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatrumahmedia ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatrumahmedia ul.flatui li{width:100%}}
</style>

3. Publikasikan dan lihat hasilnya

Sekian artikel Membuat Color Picker Responsive Flat UI di Laman Statis Blogger semoga bermanfaat.

Membuat Simpel Sosial Media Fanpage, Google Plus, dan Twitter di Blogger

Membuat Simpel Sosial Media Fanpage, Google Plus, dan Twitter di Blogger - Kembali lagi saya akan sharing untuk membuat widget sosial media untuk blogger tepatnya di sidebar. Untuk contoh seperti gambar di bawah ini.

Membuat Simpel Sosial Media Fanpage, Google Plus, dan Twitter di Blogger

Sangat simpel dan flat desain bukan? nah untuk anda yang ingin memasangnya pada blog anda, simak tutorialnya sebagai berikut.

1. Login Blog - Template - Edit HTML

2. Letakkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

#sosmed,#sosmed-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}#sosmed-msg:before{content:" Like dan follow sosial media Rumahmedia.id ";font-weight:bold;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}#sosmed ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}#sosmed ul li{display:inline-block;margin:30px 0 0;position:relative}#sosmed ul li a{display:inline-block;color:#fff;padding:11px 0;font-size:15px;border-radius:5px;width:140px;max-width:140px}#sosmed ul li a.sosmed-gp{background-color:#f65543;border-bottom:4px solid #e13522;margin-right:4px;float:left}#sosmed ul li a.sosmed-tw{background-color:#4fc4f6;border-bottom:4px solid #35aadc;float:right}
#fanpages{padding:0;margin:auto;position:relative;text-align:center;letter-spacing:1px;list-style:none!important}#fanpages p{list-style:none;padding:0;margin:0 0 5px}#fanpages a.a-fans{clear:both;background:#eaeaea;color:#454545;display:inline-block;font-weight:bold;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:45px 0 0;height:100px;overflow:hidden;overflow:hidden}#fanpages a.a-fans:hover{background:#39599a;color:#fff}#fanpages a.a-fans p{color:#39599a!important;display:inline-block}#fanpages a.a-fans:hover p{color:#2d2d2d!important}#fanpages a.a-fans span{font-size:13px!important;font-weight:normal!important;letter-spacing:2px;text-align:center}

Ganti kata yang saya tandai pada kode CSS di atas dengan kata-kata anda

3 Simpan

Untuk menerapkan widget sosial media di atas gunakan kode di bawah ini pada widget anda

<div id="fanpages">
<a class="a-fans" href="https://www.facebook.com/RumahMedia.id/" itemprop="sameAs" onclick="this.href = 'https://www.facebook.com/RumahMedia.id/'" title="" target="_blank" rel="nofollow">Like Fanpage <p>Facebook</p><br /><span>https://fb.com/RumahMedia.id/</span></a>
<div style="clear: both;">
</div>
<div id="sosmed">
<ul>
<li><a class="sosmed-gp" href = 'http://plus.google.com/112185154047816917381/about'" target="_blank" itemprop="sameas" rel="nofollow">Google+</a></li>
<li><a class="sosmed-tw" href = 'https://twitter.com/juhdi_al'" itemprop="sameas" title="" target="_blank" rel="nofollow">Twitter</a></li>
</ul></div>
<div id="sosmed-msg">
</div></div>

Ganti yang sudah ditandai di atas dengan link sosial media anda

Simpan

Terimakasih telah membaca Membuat Simpel Sosial Media Fanpage, Google Plus, dan Twitter di Blogger semoga bermanfaat.

Cara Membuat Tombol Menuju ke Google Play Store dan Download Sebelahan

Cara Membuat Tombol Menuju ke Google Play Store dan Download Sebelahan - Kali ini saya akan membagikan tutorial membuat tombol download dan yang menuju google play store contohnya seperti di sini http://apkandroid31.blogspot.co.id/2016/04/clash-of-clans.html yang saya terapkan pada blog saya yang lain.

Cara Membuat Tombol Menuju ke Google Play Store dan Download Sebelahan

Bila blog anda menampilkan aplikasi-aplikasi yang banyak download dari google play store saya rasa tips ini cocok untuk memperindah tampilan pada blog anda.

Berikut caranya

1. Login Blog - Template - Edit HTML

2. Copy kode CSS di bawah ini kemudian simpan sebelum kode </style>

#download {list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:-webkit-inline-box;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.googlep,.download{padding:12px 15px!important;color:#fff!important;font-weight:600;font-size:13px;font-family:Open Sans;text-align:center;border-radius:3px;border:0;transition:all .2s ease-out;margin-right:10px;}
.googlep {background-color:#2D9E3B;}
.download {background-color:#1A66BC;}
.googlep:hover {background-color:#35BA45; opacity:1;}
.download:hover {background-color:#2073D2;opacity:1;}
.googlep:before {content:&#39;\f04b&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.main h3 {  width: auto;margin-top: 10px;}}

3. Simpan

Gunakan kode pemanggil pada mode HTML di bawah ini untuk blog anda

<div style="text-align: center;">
<ul id="download">
<li><a class="googlep" href="#" target="_blank">Get it from Google Play</a></li>
<li><a class="download" href="#" target="_blank">Direct Download</a></li>
</ul>
</div>
</div>

Ganti tanda # dengan link tujuan anda

Sekian Cara Membuat Tombol Menuju ke Google Play Store dan Download Sebelahan semoga bermanfaat