Cara Membuat Floating Media Sosial

Widget media sosial yang saya bagikan ini bisa mengikuti gerakan naik turun atau bisa dikatakan melayang pada bagian samping template blog, sehingga membuat blog anda terlihat lebih menarik dan bagus.

Pada widget ini juga ditambahkan jquery, apabila anda mengarahkan cursor pada salah satu media sosial tersebut, maka akan terlihat efek easing yang ada pada jquery-ui.min. Selain menambahkan efek easing, jenis media sosial yang dipasang juga lebih banyak.

Jika anda ingin memasang widget ini pada blog anda, silahkan ikuti langkah-langkah berikut ini.
1. Login blogger
2. Pilih Template > Edit HTML
3. Copy dan paste kode CSS berikut ini diatas ]]></b:skin>

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqjUy3O09tfIPYBw2JCdJT9KxPB0jmV4AirL4AdWbatkCB57a9Q3Uhj1mD5X0gg6kFnEgiOhf4DG1SxkmEwi2QDtZ-9ZafLd9rx6mJssJFQcE_ZDfbXYfUcWgSGzMaLI2Zhlcdo5oUK8/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

4. Kemudian menambahkan jquery dan JavaScript. Jika pada template anda sudah mempunyai jquery (warna biru), maka copy JavaScript saja, lalu paste diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

5. Selanjutnya copy dan paste kode berikut diatas </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/xxxxx' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/xxxxx' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/xxxxx' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/xxxxx' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/xxxxx' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/xxxxx' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

6. Ganti tulisan warna biru dengan Id media sosial anda. Kemudian simpan kembali template blog anda.

Demikian tutorial cara membuat floating media sosial di blog anda. Semoga bermanfaat dan selamat mencoba.

Baca juga: Cara membuat blog

Read more

Cara Membuat Tabel Keterangan pada Postingan Blog

Tentunya anda pernah melihat tabel keterangan pada sebuah blog yang anda kunjungi. Tabel ini berfungsi menampilkan suatu keterangan yang dimuat dalam artikel. Contohnya seperti keterangan spesifikasi ponsel. Tentunya hal demikian mempermudah pembaca untuk mengetahui keterangan spesifikasi dari sebuah ponsel.

Contoh Tabel Keterangan

Cara Membuat Tabel Keterangan

Untuk membuat tabel pada postingan seperti pada contoh gambar diatas, anda bisa mengikuti tata cara berikut ini.

1. Buka dasbor blog anda
2. Pilih Template > Edit HTML
3. Cari (CNTRL+F) kode ]]></b:skin> atau </style>
4. Kemudian salin dan paste kode CSS dibawah ini diatas salah satu kode tadi

/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) &gt; td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) &gt; td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target=&quot;_blank&quot;]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

Setelah itu simpan kembali template blog anda. Kemudian pada saat setiap anda membuat artikel yang membutuhkan tabel, maka salin dan paste kode berikut ini pada menu HTML disamping Compose yang ada pada pos terbaru blog anda.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>Keterangan</th> </tr>
<tr> <td>keterangan anda</td> <td>Beauty</td> </tr>
<tr> <td>keterangan anda</td> <td>norak</td> </tr>
<tr> <td>keterangan anda</td> <td>OK</td> </tr>
<tr> <td>keterangan anda</td> <td>Lumayan</td> </tr>
<tr> <td>keterangan anda</td> <td>Kuno</td> </tr>
<tr> <td>keterangan anda</td> <td>Makyus</td> </tr>
<tr> <td>keterangan anda</td> <td>Panas</td> </tr>
<tr> <td>keterangan anda</td> <td>Dingin</td> </tr>
<tr> <td>keterangan anda</td> <td>Huhui</td> </tr>
<tr> <td>keterangan anda</td> <td>Bagus</td> </tr>
<tr> <td>keterangan anda</td> <td>Sip</td> </tr>
<tr> <td>keterangan anda</td> <td>Cantik</td> </tr>
<tr> <td>keterangan anda</td> <td>Indah</td> </tr>
<tr> <td>keterangan anda</td> <td>Jorok</td> </tr>
<tr> <td>keterangan anda</td> <td>Kotor</td> </tr>
</tbody> </table>

Ubah keterangan yang ada pada kode diatas sesuai dengan keterangan yang anda inginkan. Sebaiknya simpan kode ini pada notepad sehingga bisa anda gunakan pada saat butuhkan.

Read more

Cara Membuat Gambar menjadi Responsive di Blog

Bagi anda seorang blogger, pernahkah anda mengalami masalah ketika mengirim gambar dengan lebar yang lebih besar dari lebar ukuran konten postingan blog atau gambar terlihat tidak responsive ketika anda mengubah ukuran browser / tidak mengikuti ukuran browser anda ?

Apabila gambar pada artikel blog kita responsive, maka blog kita akan terlihat bagus dan rapi karena gambar mengikuti ukuran tampilan layar browser yang digunakan. Namun jika gambar blog anda belum responsive, maka anda perlu menerapkan metode dibawah ini.

Cara ini sangat mudah untuk anda lakukan, hanya dengan menambahkan sedikit kode CSS pada template blog anda dan bisa dterapkan pada semua template blog.

1. Login blog anda
2. Pilih Template > Edit HTML
3. Cari (CNTRL+F) kode ]]></b:skin> 
4. Lalu copy dan paste kode CSS dibawah ini diatas ]]></b:skin> atau bisa juga diatas kode </style>
5. Kemudian klik simpan.

.post-body img {
  max-width:100%;
  height:auto;
}

atau bisa juga menggunkan kode ini

.separator a{margin-left:0px !important;margin-right:0px !important;} .post img{max-width:100%;height:auto;}

Silahkan mencoba, semoga bermanfaat.

Read more

Cara Membuat Widget Kategori Keren dan Menarik di Blog

Apa Itu Kategori ?

Kategori (Labels) pada blog merupakan widget yang berfungsi untuk mengelompokkan setiap artikel dengan jenis konten yang sama.

Pemasangan widget ini juga bertujuan untuk mememudahkan para pembaca artikel blog dalam menavigasi blog kita. Setiap blog tentunya memiliki fitur widget labels, secara default ada 2 pilihan yaitu list dan cloud.

Cara Membuat Widget Kategori Keren dan Menarik

1. Login blogger dan masuk ke dahsbord blog anda

2. Pilih Tata letak > klik Tambahkan gadget > Pilih Labels

3. Pilih konfigurasi tampilkan dengan cloud seperti pada gambar berikut

4. Klik simpan

Setelah melakukan settingan konfigurasi label, selanjutnya anda perlu menambahkan kode CSS pada template blog. Anda bisa memilih salah satu dari kode CSS berikut ini untuk tampilan widget kategori pada blog anda.

Kode CSS Untuk Tampilan Kategori

Tampilan Kategori 1

<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 }
.cloud-label-widget-content{  text-align:left }
.label-size { background:#4169E1; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; }
.label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; }
.label-size:hover { background:#333333; }
.label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }
.label-size { line-height:1.2 }
</style>

Tampilan Kategori 2

<style type='text/css'>
.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#555;} .label-size a:hover:before{border-color:transparent #555 transparent transparent;}
</style>

1. Pilih Template > edit HTML/JavaScript

2. Cari (CNTL+F) kode ]]></b:skin> atau </style>

3. Pilih salah satu kode CSS yang anda suka, lalu copy dan paste diatas kode ]]></b:skin> atau </style>
4. Kemudian simpan

Demikian cara membuat tampilan widget kategori keren serta menarik. Apabila ada masalah ataupun pertanyaan mengenai tutorial ini, silahkan tinggalkan tulisan anda pada kotak komentar.

Baca juga: Cara Membuat Blog

Read more

Cara Membuat Menu Navigasi Halaman dan Kotak Pencarian di Atas Header Blog

Menu navigasi halaman pada blog / situs adalah salah satu elemen yang perlu diperhatikan, karena selain untuk mempercantik tampilan desain, pengunjung blog juga akan lebih cepat dalam menelusuri serta menemukan hal yang mereka ingin cari pada blog tersebut.

Ada bermacam-macam bentuk menu navigasi yang didalam sebuah blog, navigasi horizontal, navigasi vertikal dan lainnya. Namun pada artikel ini saya akan membahas tentang cara membuat menu navigasi halaman blog beserta kotak pencarian.

Jika anda ingin memasang menu navigasi halaman diatas judul blog anda, silahkan ikuti langkah berikut ini.

1. Masuk ke blogger

2. Klik template > Edit HTML

3. Cari (CNTRL+F) kode ]]></b:skin>

4. Copy kode berikut ini dan pastekan diatas ]]></b:skin>

/* CSS FOR SEARCH BAR STARTS */ 

 #search{width:330px; border:none;background:transparent;height:20px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB} 

 #search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 

 #search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 

 #search-wrap{padding:15px 0} 

 .topsearch #search{margin-top:0;margin-bottom:0} 

 /* CSS FOR MENU BAR STARTS */ 

 .shadowblockmenu{ 

 font-weight: bold; 

 font-size: 85%; 

 width: 980px; 

 background-color: #eeeded; -webkit-box-shadow: 0 3px 3px #666;

 } 

 .shadowblockmenu ul{ 

 border: 1px dotted #BBB; 

 border-width: 0px 0; 

 padding: 0; 

 margin: 0; 

 overflow: hidden; 

 } 

 .shadowblockmenu ul li{ 

 display: inline; 

 margin:0; 

 padding:0; 

 } 

 .shadowblockmenu ul li a{ 

 display:block; 

 float:left; 

 text-transform: none; 

 color: black; 

 padding: 8px 15px 8px 9px; 

 margin: 0; 

 text-decoration: none; 

 } 

 .shadowblockmenu li:nth-of-type(1) a{ 

 padding-left:25px; 

 } 

 .shadowblockmenu li:nth-of-type(2) a{ 

 padding-left:25px; 

 } 

 .shadowblockmenu li:nth-of-type(3) a{ 

 padding-left:25px; 

 } 

 .shadowblockmenu li:nth-of-type(4) a{ 

 padding-left:25px; 

 } 

 .shadowblockmenu li:nth-of-type(5) a{ 

 padding-left:25px; 

 } 

.shadowblockmenu ul li a:hover{ 

 color: #FF0000; 

 } 

5. Kemudian cari (CNTRL+F) kode <div id='header-wrapper'> 
6. Copy dan paste kode berikut ini diatas kode <div id='header-wrapper'>

<div class='shadowblockmenu'> 

 <ul> 
 <li><a href='http://ombaron.com/'>Home</a></li>
 <li><a href='http://www.ombaron.com/p/contact-us.html'>Contact</a></li> 
 <li><a href='http://www.ombaron.com/p/sitemap_20.html'>Sitemap</a></li> 
 <li><a href='http://www.ombaron.com/p/discl.html'>Disclaimer</a></li>
 <li><a href='http://www.ombaron.com/p/about.html'>About</a></li> 
  
 <li><div class='topsearch' style='float: right'> 
 <div class='clerfix' id='search'> 
   <form action='/search' id='search' method='get'> <input name='q' placeholder='Cari artikel disini...' size='45' type='text'/><input id='search-button' type='submit' value='Cari'/>
   </form> 
 </div> 
 </div> 
 <div style='clear:both;'/></li> 
 </ul> 
 </div>

Catatan:
- Ganti url yang berwarna biru dengan url blog anda, kemudian simpan template.
- Sesuaikan dengan lebar ukuran blog anda pada kode CSS, misalkan width: 980px; diganti menjadi width: 900px;

Demikian cara membuat menu navigasi halaman dan kotak pencarian diatas judul blog. Jika anda merasa kesulitan silahkan tinggal pertanyaan pada kolom komentar.

Read more