• Sitemap
  • About Me
  • Contact Me
  • Privacy Policy
  • Blog Tools ▼
    • Kode Warna
    • Parse HTML
    • Check Pagerank
    • Check Speed Blog
  • Mobile
Ghiyats Blogs
  • Home
  • Blogger
  • Widget
  • SEO
  • Template
  • CSS
  • Menu Bar
  • JQuery
Home » Archive for July 2013

Tuesday, July 30, 2013

Membuat Menu Navigasi Dropdown Keren Dengan CSS

Membuat Menu Navigasi Dropdown Keren Dengan CSS

Membuat Menu Navigasi Dropdown Keren Dengan CSS | Ghiyats Blogs - Salam Sobat Semua.... Di manapun sobat berada, Pada kesempatan kali ini di penghunjung bulan juli, Saya ingin berbagi sebuat artikel tentang menu navigasi dropdown, menu navigasi dropdown adalah sebuah menu navigasi biasa awalnya, namun kalau kursor di geser kesalah satu menu akan muncul menu lagi di bawah menu tersebut.

Menu Navigasi Dropdown ini saya rasa cukup keren, simple dan menggunakan CSS, untuk cara membuat menu navigasi dropdownn ini tutorialnya, seperti dibawah ini :


Membuat Menu Navigasi Dropdown Keren Dengan CSS
--------------------------------------------------------------------------------------------------

  • Login Ke Blogger.com ( Dengan akun anda )
  • Setelah Itu, Klik ''Template''
  • Klik ''Edit HTML''
  • Masukan kode dibawah ini diatas kode ]]></b:skin
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0; }

#cssmenu ul, #cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0; }

#cssmenu ul {
  position: relative;
  z-index: 597; }

#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle; }

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; }

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%; }

#cssmenu ul ul li {
  float: none; }

#cssmenu ul ul ul {
  top: 0;
  left: 100%; }

#cssmenu ul li:hover > ul {
  visibility: visible; }

#cssmenu ul ul {
  margin-top: 0; }

#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none; }

#cssmenu ul li.last ul {
  left: auto;
  right: 0; }

#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%; }

#cssmenu:after, #cssmenu ul:after {
  content: '';
  display: block;
  clear: both; }

/* Custom CSS Styles */
#cssmenu {
  font-family: Helvetica, Arial, sans-serif; }
  #cssmenu:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
    background-color: #606a77;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
    background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
    background-image: -moz-linear-gradient(top, #4f5864, #49515b);
    background-image: -o-linear-gradient(top, #4f5864, #49515b);
    background-image: linear-gradient(#4f5864, #49515b);
    -moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
    -webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
    box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
    content: '';
    display: block;
    height: 8px;
    width: 100%; }
  #cssmenu > ul {
    border-bottom: 1px solid #252A30;
    border-top: 1px solid #252A30;
    -moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
    background-color: #566171;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
    background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
    background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
    background-image: -o-linear-gradient(top, #6e7d8f, #404854);
    background-image: linear-gradient(#6e7d8f, #404854);
    height: 27px;
    padding: 15px 15px 15px 5px; }
    #cssmenu > ul > li {
      margin: 0 10px; }
    #cssmenu > ul > li.has-sub:hover > a {
      -moz-border-radius: 3px 3px 0 0;
      -webkit-border-radius: 3px 3px 0 0;
      border-radius: 3px 3px 0 0;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box; }
    #cssmenu > ul > li:hover > a {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
      background-color: #e2e2e2;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, #c8c8c8));
      background-image: -webkit-linear-gradient(top, white, #c8c8c8);
      background-image: -moz-linear-gradient(top, white, #c8c8c8);
      background-image: -o-linear-gradient(top, white, #c8c8c8);
      background-image: linear-gradient(white, #c8c8c8); }
    #cssmenu > ul > li.active:hover > a {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
      background-color: #cb7b72;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
      background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
      background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
      background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
      background-image: linear-gradient(#f49b8e, #bd584d); }
  #cssmenu ul a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
    background-color: #c2c2c2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
    background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
    background-image: linear-gradient(#f1f1f1, #a8a8a8);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
    color: #3c444d;
    font-size: 12px;
    line-height: 27px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
  #cssmenu ul ul {
    width: 170px; }
    #cssmenu ul ul a {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      line-height: 150%; }
  #cssmenu ul .active > a {
    color: #FFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
    background-color: #c46a60;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
    background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
    background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
    background-image: -o-linear-gradient(top, #ef7260, #b04c41);
    background-image: linear-gradient(#ef7260, #b04c41); }
  #cssmenu ul .has-sub {
    position: relative; }
    #cssmenu ul .has-sub ul {
      -moz-border-radius: 0 3px 3px 3px;
      -webkit-border-radius: 0 3px 3px 3px;
      border-radius: 0 3px 3px 3px;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
      box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
      background-color: #c3c3c3;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
      background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
      background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
      background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
      background-image: linear-gradient(#e9e9e9, #aaaaaa);
      padding: 3px 0; }
      #cssmenu ul .has-sub ul a {
        background: none;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid transparent;
        text-align: left; }
      #cssmenu ul .has-sub ul .has-sub a:after {
        content: none; }
    #cssmenu ul .has-sub li:hover > a {
      border-bottom: 1px solid #1D2024;
      color: #FFF;
      background-color: #55616f;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
      background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
      background-image: -moz-linear-gradient(top, #56606f, #3f4852);
      background-image: -o-linear-gradient(top, #56606f, #3f4852);
      background-image: linear-gradient(#56606f, #3f4852);
      -moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
      -webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
      box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
      position: relative;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
      #cssmenu ul .has-sub li:hover > a:after {
        border-left: 0 none;
        background-color: #c35f54;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
        background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
        background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
        background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
        background-image: linear-gradient(#ea5f51, #a9463b);
        -moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
        -webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
        box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
        content: '';
        height: 100%;
        width: 6px;
        position: absolute;
        right: 0;
        top: 0; }
    #cssmenu ul .has-sub > a {
      padding-right: 0; }
    #cssmenu ul .has-sub > a:after {
      content: '▼';
      border-left: 1px solid rgba(100,100,100,0.2);
      color: #5D6A7A;
      -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
      box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
      display: inline-block;
      font-size: 9px;
      margin-left: 5px;
      text-align: center;
      height: 25px;
      width: 24px;
      text-shadow: 0 -1px 0 #101417; }
#cssmenu ul .active > a:after { color: #FFF; }

  • Setelah Selesai, Klik Simpan

CARA PEMASANGANNYA :

Selesai memasukkan kode cssnya di template, sekarang kita harus menambahkan kode html di tata letak
  • Pergi ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih gadget ''HTML/JavaScript''
  • Masukan kode dibawah ini didalam widget tersebut
<div id='cssmenu'>
<ul>
   <li class='active'><a href='http://gias-alauddin.blogspot.com'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

  • Ganti http://gias-alauddin.blogspot.com dengan url blog sobat
  • Dan ganti # dengan url yang ingin di tuju
  • Dan ganti Produts, About, atau Contact dengan kata kata judul menu yang anda inginkan !

Dan Demikianlah artikel ini semoga artikel yang berjudul Membuat Menu Navigasi Dropdown Keren Dengan CSS berguna bagi sobat semua dan mudah dipratekkan, dan maaf kalau artikel ini terlalu sikat atau kurang detail dan kalau sobat masih bingung atau pendapat sobat tentang artikel silakan berkomentar di kolom komentar di bawah ini Terima Kasih......

Keep Blogging
Unknown Waktu 00:00 7 comments:

Friday, July 26, 2013

Membuat Menu Dropdown Warna Hijau di Blog

Membuat Menu Dropdown Warna Hijau di Blog

Membuat Menu Dropdown Warna Hijau di Blog | Ghiyats Blogs - Menu Dropdown sudah banyak yang menggunakannya dan Membuatnya lebih menarik dan keren dengan berbagai warna, Untuk yang akan saya bagikan ini adalah Menu Navigasi Dropdown Dengan warna latarnya Hijau dan dengan search box di sampingnya. 

Seperti yang kita ketahui menu navigasi, berguna untuk mempermudah pengunjung untuk lebih jauh menjelajahin blog tersebut, Sebelum itu dibawah ini beberapa artikel yang berhubungan denganMenu Navigasi, Dan Untuk Cara Pembuatan menu dropdown ini tutorialnya seperti di bawah ini :

Artikel Lainnya Tentang Menu Navigasi :

 Membuat Menu Navigasi Dropdown Keren Dengan CSS
Membuat Menu Navigasi Dropdown Classic di Blog
Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog
Menu Navigasi horizontal Keren Di Blog

  • Login Ke Blogger.com, Dengan Akun Anda
  • Setelah Berada dii Dasbor Blogger, Sekarang Klik ''Template''
  • Terus Klik ''Edit HTML''
  • Setelah itu, Cari Kode ]]></b:skin, Terus Paste kode di bawah ini, dan taruhlah di atas/sebelum kode ]]></b:skin
/* The CSS3 Code */
 .btrix-greenymenu{width:950px;background: #7cae15;color:#eee;text-shadow: 1px 1px 1px #495505;display:inline-block;-moz-box-shadow: 3px 3px 4px #007308;
-webkit-box-shadow: 3px 3px 4px #007308;box-shadow: 3px 3px 4px #007308;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu ul{width:950px;padding:0;margin:0 auto}
.btrix-greenymenu li:first-child a{padding:7px 10px 3px}
.btrix-greenymenu li{list-style:none;display:inline-block;float:left}
.btrix-greenymenu li a{background:url(http://1.bp.blogspot.com/-4OIAjD0uSN0/UR1FWgJm2YI/AAAAAAAAAJk/H-ajqHe53Ic/s1600/sprite.png) right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding: 8px 15px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.btrix-greenymenu li a:hover{background:#333;color:#fff;text-shadow: 1px 1px 1px #000;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
.btrix-greenymenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.btrix-greenymenu li li a,.btrix-greenymenu li li a:link,.btrix-greenymenu li li a:visited{background:#439700;border-bottom:1px solid #000;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.btrix-greenymenu li li a:hover,.btrix-greenymenu li li a:active{background:#444}
.btrix-greenymenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.btrix-greenymenu li ul a{width:140px}
.btrix-greenymenu li ul ul{margin:-33px 0 0 157px}
.btrix-greenymenu li:hover>ul,.btrix-greenymenu li.sfHover ul{left:auto}
.menusearch{width:200px;float:right;margin:0 auto;padding:5px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
  • Setelah selesai, Klik Simpan

Cara Pemasanganya :

  • Pergi Ke Menu ''Tata Letak''
  • Terus atur posisinya, dan Klik ''Tambah Gadget''
  • Cari Gadget ''HTML/JavaScript''
  • Terus Taruh kode dibawah ini, di dalamnya
<div class="btrix-greenymenu">
<ul class="sf-menu">
<li><a href="http://gias-alauddin.blogspot.com/"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkJHOu8QMxIHySFmF-wdmK1Zx9wV0wiONR51hpTczU0ZGwxzWJkmQP5CxIx-efJRHGBs5oJ5ATFKXBdbgiRk4xg_QmPQuVEaPKR9fEMhdGI93eGgKMzWcooeE8dcE2c5WJb3CVRYWGOc/s1600/home.gif" style="padding: 0px;" /></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Drop Menu 3</a>
<ul>
<li><a href="#">Sub Drop Menu 3.1</a></li>
<li><a href="#">Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="menusearch">
<form action="/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="Search here...." />
    <input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06XxEGDRNJ8huc6yTrLJJ44aC7Q5e1C3Wd3XWUQ5gziABA-HXM8HbEoB3cFmHVg7sAb6ablfUNZsujLxMKPuqEFw7W3KEgWGwkBifawEbboww5xYdu1DdnaqIhdNwlLofua8XoKdPQgk/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" />
</form>
</div>
</div>

  • Ganti http://gias-alauddin.blogspot.com Dengan Url Blog Sobat
  • Ganti juga # dengan url yang ingin dituju
  • Setelah semua di ubah, sesuai keinginan sobat
  • Sekarang Klik Simpan

Demikianlah artikel dan tutorial tentang Membuat Menu Dropdown Warna Hijau di Blog ,Semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di pratekin, Silakan tinggalkan Komentar sobat tentang artikel ini di kolom komentar dibawah ini. Terima Kasih....

Via : Blogger Trix

Unknown Waktu 04:00 8 comments:

Tuesday, July 23, 2013

Membuat Menu Navigasi Dropdown Classic Di Blog


Membuat Menu Navigasi Dropdown Classic Di Blog

 Membuat Menu Navigasi Dropdown Classic Di Blog | Ghiyats Blogs - Salam Sobat Semua... Hai, Pada Artikel kali ini kita akan membahas tentang Menu Navigasi Dropdown, Menu Ini mengunakan CSS3 Yang pastinya tampilan sangat menarik dan pastinya elegan, menu ini mempunyai Warna dasar berwarna hitam, untuk cara membuatnya tutorialnya seperti dibawah ini :

Demo


Membuat Menu Navigasi Dropdown Classic Di Blog
----------------------------------------------------------------------------------------------
  • Login Ke Blogger.com, Dengan Akun Anda
  • Klik Menu ''Template''
  • Klik ''Edit HTML''
  • Setalah itu, Cari kode ]]></b:skin Setelah Ketemu kode tersebut, Taruhlah kode dibawah ini di atas/sebelum kode tersebut
/* The CSS Code */
#blogs_classic-menu{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJs3Di50mCwgB3WmUl8vr2cwrEOjOS3C_ge1BqcNuWz0swL4wDWP19vKLy7m06-d1eDQGRrdg8K2xPqPNnR2PTT0FQJ6iq-b183uvGI0BvwhEAnw9U9Zxa891uJie2FanOnnyYcfsWy-M/s1600/btrixfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#blogs_classic-menu ul,#blogs_classic-menu li{margin:0 auto;padding:0 0;list-style:none}
#blogs_classic-menu ul{height:35px;width:980px}
#blogs_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#blogs_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#blogs_classic-menu li a:hover{color:#fff}
#blogs_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#blogs_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#blogs_classic-menu label span{font-size:12px;position:absolute;left:35px}
#blogs_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#blogs_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#blogs_classic-menu ul.menus a{color:#333}
#blog_classic-menu li:hover ul.menus{display:block}
#blogs_classic-menu a.prett{padding:0 27px 0 14px}
#blogs_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#blogs_classic-menu ul.menus a:hover{background:#ddd;color:#333}
.page-blogs_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-blogs_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-blogs_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}
.page-blogs_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-blogs_classic-menu li a:hover,.page-blogs_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}

  • Setelah Selesai, Sekarang Simpan Template

CARA PEMASANGANYA :


  • Pergi ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Taruhlah kode dibawah ini di dalam widget tersebut
<div id="blogs_classic-menu">
<ul>
<li><a href="http://gias-alauddin.blogspot.com">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>

  • Ubah http://gias-alauddin.blogspot.com dengan url blog sobat
  • Ganti # dengan url yang ingin di tuju
  • Setelah semua selesai di ubah sesuai keinginan sobat, sekarang klik Simpan

Dan Demikianlah artikel ini yang berjudul ''Membuat Menu Navigasi Dropdown Classic Di Blog'' Semoga artikel ini bermanfaat dan mudah dipratekan sobat, Kalau ada masalah dalam membuat menu navigasi ini, silakan berkomentar di kolom komentar di bawah ini !!! Terima Kasih...

Via : Blogger Trix
Unknown Waktu 03:30 2 comments:

Friday, July 19, 2013

Download Template Blogger - Elesis Template


Download Template Blogger - Elesis Template | Ghiyats Blogs - Hai, Sob.. Pada artikel kali ini Ghiyats Blogs dan terutama saya ini berbagi sebuah template yang ingin saya share ke sobat semua.. template ini tentu keren sob, dan pastinya SEO Friendly, Untuk sobat yang ingin melihat dulu demonya silakan dilihat dulu, template ini buatan teman kita yang seorang blogger yaitu Darmawan Saputra, seperti ini tampilannya 

Download Template Blogger - Elesis Template

Demo   |   Download


Dan Demikianlah artikel ini maaf kalau artikel ini terlalu sikat dan kurang detail semoga bermanfaat dengan artikel ini dan berguna dan sobat boleh memberi pendapat tentang template ini di kolom komentar dibawah ini.. dan saya ucapkan terima kasih...

Happy Blogging
Unknown Waktu 16:51 No comments:

Tuesday, July 16, 2013

Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog

Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog

Cara Membuat menu Navigasi Dengan Effect Hover Di Blog | Ghiyats Blogs - Salam Semua.. Saya ingin berbagi Menu navigasi.. Sebelum itu saya ingin memaparkan sedikit tentang menu navigasi, Menu navigasi berguna untuk pengunjung atau visitor untuk bisa menjelajah lebih jauh di blog kita, seperti artikel artikel lain di dalam sebuah label untuk membantu pengunjung lebih mudah mencari artikel yang di inginkan.

Demo

Menu navigasi saya rasa cukup keren dan memiliki effect hover pada setiap menunya, Menu navigasi ini sangat mudah dipratekan, sebelum tutorialnya silakan lihat dulu demonya diatas, kalau sobat ingin membuatnya seperti tutorialnya dibawah ini :

Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog
--------------------------------------------------------------------------------------
  • Masuk ke Blogger
  • Klik Menu ''Template''
  • Setelah itu, Klik ''Edit HTML''
  • Cari kode ]]></b:skin Setelah ketemu, taruhlah kode dibawah ini di atas kode tersebut
/* The CSS Code */

.ribbon span {
    background:#A81B6A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
   
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}

  • Setelah itu, Klik Simpan

          CARA PEMASANGANYA :

  • Pergi Ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Kemudian, Taruhlah Kode dibawah ini di dalamnya

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Download</span></a>
    <a href='#'><span>Css3</span></a>
    <a href='#'><span>HTML</span></a>
    <a href='#'><span>MySQL</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>
  • Ganti # dengan link yang ingin dituju
  • Setelah semua diganti sesuai kemauan sobat, Silakan klik Simpan 

Dan Demikianlah artikel ini yang berjudul ''Cara Membuat Menu Navigasi Dengan Effect Hover Di Blog'' semoga artikel ini bermanfaat bagi sobat semua dan mudah dipratekkan dan bagi sobat yang masih bingung silakan beri pertanyaannya di kolomm komentar dibawah ini, Terima Kasih....

Via : Blogger Trix
Unknown Waktu 05:00 5 comments:

Saturday, July 13, 2013

Membuat Widget Sosial Media Melayang Di Blog

Membuat Widget Sosial Media Melayang Di Blog | Widget Sosial Media Banyak dan beraneka ragam tapi berbeda dengan widget yang satu ini, karena widget ini akan mengikuti kursor kebawah atau ke atas dan widget dengan effect hover di setiap icon sosial medianya, widget ini praktis karena hanya memasukan kode kedalam Html/Javascript bukan di HTML Template.
Membuat Widget Sosial Media Melayang Di Blog

Kalau sobat tertarik di ingin belajar membuatnya, ikutilah artikel ini sampai selesai, sebelum itu lihat dulu demonya dan jadinya dibawah ini dan daftar artikel yang membahas sosial media lain seperti bawah ini dan langsung saja kita coba membuatnya dibawah ini :

Demo

Artikel Menarik lainnya Tentang Sosial Media :

Membuat Widget Sosial Media Dengan Effect Hover
Widget Subsribe Dan Sosial Media Super Keren
Widget Sosial Media Icon Dengan Search Box Untuk Blogger
Widget Subsribe Dengan Sosial Media Biru Untuk Blogger


  • Masuk ke Blogger
  • Klik menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript
  • Masukkan kode dibawah ini di dalam gadget tersebut
<style>
.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CvkCBpjUAn1zj3WCxGuT_waTVONnMvCouLAYYHZtEshZokFTYoicDLCUH4jXOgVi3V_L3d749GRACWFhFy9xUjVI4y4N-3pjUvNZoG01BONSMvxCobhyphenhyphenBG9VG-aLvLdp8QZX74t4_hk/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq1bKC4gn8vNO683UHrgDdoWGu0cuMkXVEBYH7QR6PCxzjdCV-7jouDBLgyaAcXYopjOELocfst39yCJF7FUQk0EY2VISBTsqPTRXAUFZSrnmZ9TZgOhJXMFGhEQ7dXJ0klWYxxNYCS0/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwh7pKaL4Q0XaK3Wz071hZLoU_1vGUYGKJMtuOWc8aeo4Ig15NqB53Ki9u5_AVgmGDnBLmNlJGpTH-MAAGfGMKN5F1aGXjAKSs-HsHwjiTJM_OivFBP9z08uE4jbAaVRMdmeGYosZqj00/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxo0fuloInAOmBfAPERTCoCLSadBlgFCMH6LgxSXWUPEyEOav_FSR8KRfsHNEykVMuWXJyYciq9TTDniiuizWPwr2WEF0tDZD4YtAEbIFvxIzzJI9hvLSSpawwuBs2O-tVwsJumX4hcNk/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.fixedmenutw_1{margin:0px 0 0 43px}
.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtP3w_CNAMup2qPhbS4NbtrW6F9yKMlKgw9PVw0Rz6CHqW7-iN823awAjxnpo-0QAUePFLHPZ1RMUgmPIqcru6i4Iu6QwyR_wu3SKsABCIS3zjm1owqt3DQWn_UKOCodpmFZ2fRfUXaLs/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcb9dcLgvPRY0IU83dNMdwsh1hleJXtjxniwpgd3Ugb7tXHmDEJw0jo5nHt-6QnMtYwCnVRVU3EIz7g2qBYLA090HunSd01qPAZCqh8mZFHk2FFjQzujbdB6VB5eugnjj8mth2um8xgxY/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.fixedmenufb_1{margin:0px 0 0 43px}
.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWWVTSvMVgDuSnDMhhLgx7f0G2dyUhuPoraq2wWIfuxYzC36eWWehhcJfpvq5pBYuVwRDaX9kjzg3AcoI-fK3jR8HFE1ql2QuMBcvoYrtIssPD1oG85Lg2eZTbqgIDtmSwlqWZOUj2Qo/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0CvfiohW0bYB9AyBzV32AdhwrbXMsYBkWuPT_7fEuFgrCAswQvnr1xVMfbJzGvVf6cLgX9snFG2ytOA4-Gy_6wBxu8z2bi1Y8QcZ7Uwbk0sUI1382PEYB-6vEwxmf87D7CRt_ZyehgM/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='fixedmenu' onmouseout='this.className=&apos;fixedmenu&apos;' onmouseover='this.className=&apos;fixedmenu1&apos;'><div class='fixedmenu_1'>
<a href='https://www.facebook.com/USERNAME' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJCrZAG9ij0lSpseMsK93EJH_Tdc90z38K16QIwLrZgVO5dgAx12xy_cPnVfdNeYC1WlP8j5pvMJSlq3zbSEBeZNekLTKTS66o2kdwQ0GUmwn4zieB1T4bXLCdjIJ2R8_5mnakmsMnJc/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='fixedmenutw' onmouseout='this.className=&apos;fixedmenutw&apos;' onmouseover='this.className=&apos;fixedmenutw1&apos;'><div class='fixedmenutw_1'>
<a href='https://twitter.com/GhiyatsBlogs' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHBphLqTRoS2ZrIiEmHhaSSNuwhVs94dKs3rP6DrbXbJJuKfJypzlwfXe2U04mmjSbOM03xf1wwYjerXiNbKpBqCGPdDO855TlM53vlnfsmTwvHN1O7eNB6RXlnPw4iNoyfbeAyvWagY/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='fixedmenufb' onmouseout='this.className=&apos;fixedmenufb&apos;' onmouseover='this.className=&apos;fixedmenufb1&apos;'><div class='fixedmenufb_1'>
<a href='https://plus.google.com/ID Google+ anda' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwnbpAIG_F4F4BcU-ISm-XHY4TKboEI3YMyOw62W-BvewB8-OeZFUYmWYuZK0AfFa-apBVJfdz0p23HuqK0he0dWQAFJzrYmaC3hvZSB_bwVWXOn7KlBIBwo9wd7UvUTsPpWEhWaEsS0/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='fixedmenurss' onmouseout='this.className=&apos;fixedmenurss&apos;' onmouseover='this.className=&apos;fixedmenurss1&apos;'><div class='fixedmenurss_1'>
<a href='http://feeds.feedburner.com/GhiyatsBlogs' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyR12jqvbPckg0b4FDCK31kpW8rCW29lMkfTmeuBPwjsKdu3b5AnP17SdfP35FvkXx4ymPi5ZC9hdRkqv9VWC7I-0oo2l8R99ZJUyX8aiFnjhZXa1Ar0j5uuIEclLr5KR-79uFzakKM4/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

  • Ganti USERNAME Dengan Username facebook anda
  • Ganti GhiyatsBlogs Dengan Username Twitter anda
  • Ganti ID Google+ anda Dengan ID Profile Google+ anda
  • Ganti GhiyatsBlogs Dengan ID Feedburner anda
  • Setelah selesai diganti, sekarang Klik Simpan

Demikian artikel di semoga bermanfaat bagi sobat semua dan kalau sobat masih bingung dengan artikel ini, silakan berkomentar dan bertanya tentang artikel diatas, di kolom komentar dibawah ini

Via : Blogger Trix
Unknown Waktu 03:00 7 comments:

Tuesday, July 9, 2013

Membuat Widget Populer Post Keren di Blog

Widget Populer Post Keren

Membuat Widget Populer Post Keren di Blog | Ghiyats Blogs - Hai, Sob... Pada Artikel kali ini Ghiyats Blogs ingin berbagi widget Populer post, berbeda pada umumnya kalau Populer post hanya terdiri dengan gambar dan cuplikan artikel tersebut, kalau yang ini beda karena menggunakan CSS, Dan Tampilannya lebih keren dan menarik.

Cara membuatnya sangat simpel sekali sob, karena hanya memasukan sedikit kode di dalam template, seperti tutorial dan cara pemasangan widgetnya seperti dibawah ini :

Cara Membuat Widget Populer Post Keren di Blog
---------------------------------------------------------------------------------------

  • Masuk Ke Blogger, Dengan akun Anda
  • Pergi ke Menu ''Template'' >>> Edit HTML
  • Cari kode ]]></b:skin> Setelah ketemu taruhlah kode css di bawah ini Sebelum kode tersebut

/* The CSS Code */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

  • Setelah selesai, Simpan Templatenya 
CARA PEMASANGANYA :
  • Pergi ke Menu ''Tata Letak''
  • Klik ''Tambah Gadget'' >> Pilih Gadget ''ENTRI POPULER''
  • Atur Pengaturannya pada ''Tampilan'' Centang ''Thumbnail gambar'' Dan Jangan Centang ''Cuplikan''
  • Sekarang Simpan Gadgetnya

Demikianlah artikel ini ''Membuat Widget Populer Post Keren di Blog'' maaf kalau artikel di atas terlalu sikat dan semoga artikel ini bermanfaat dan bisa dipratekan dengan mudah, Silakan berkomentar tentang artikel di atas di kolom komentar di bawah ini.

Via : Blogger Trix
Keep Blogging
Unknown Waktu 05:00 12 comments:

Friday, July 5, 2013

Widget RSS Subscribe Dan Sosial Media Untuk Blog

Widget RSS Subscribe Dan Sosial Media Untuk Blog

Widget RSS Subscribe Dan Sosial Media Untuk Blog | Hai, Pada artikel ini saya ingin berbagi widget Subscribe dan Icon Sosial Media dalam satu widget, sebenaranya widget ini mempunyai latar yang berwarna gelap atau dark, widget Rss Subscribe adalah widget kotak berlangganan email dari blog tersebut dan setiap blog tersebut update artikel dan otomatis dikirim ke email sobat. 

Sementara widget sosial media pastinya sobat semua sudah taukan ? sebagai sarana bersosial untuk blog dan bisa menambah trafik blog sobat, lihat demonya di bawah ini dan sobat semua sudah tau sekarang kita langsung saja kita coba membuatnya di bawah ini :

Demo

Widget RSS Subscribe Dan Sosial Media Untuk Blog
------------------------------------------------------------------------------------------------------------


  • Login Ke Blogger.com Dengan Akun anda
  • Masuk ke menu ''Tata Letak''
  • Sekarang klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript
  • Masukan kode dibawah ini, Dan simpan di gadget tesebut

<style>
#btrix-newsletter{ width:290px;background:#2e3639; color:#fff; padding:20px; font-size:14px;  margin-bottom:20px;  -moz-box-shadow: 2px 2px 2px #000000;-webkit-box-shadow: 5px 5px 5px #000000;box-shadow: 5px 5px 5px  #000000;border:double 5px #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

#btrix-newsletter .btrix-title {  margin-bottom:10px;margin-top:-10px; }
.btrix-title{margin-left: 8px;font-size:25px; font-weight:bold; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:1px 8px 2px 8px;text-align:center;border:1px solid #151819;color:#fff;background:#222729;display:inline-block;}

#footer-subscribe-btn {width:116px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
position:relative;left:135px;}
.footer-submit-btn {margin-left:50px;margin-top:-5px;margin-bottom:-50px;border: none;color: #fff;text-transform: uppercase; font-size: 13px;padding: 5px 18px 5px;background: #e93a30;border-radius: 30px;-webkit-border-radius: 30px; 
-moz-border-radius: 30px;font-weight: bold;-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;-ms-transition: background .2s linear;-o-transition: background .2s linear;transition: background .2s linear;cursor: pointer;
}
.footer-submit-btn:hover { background:#e51111;}

#fastsearch ,#footer-subscribe-email{background:#62686b;color:#fff;font-size:14px;border:none;
box-sizing:border-box;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;outline:none;padding:0px 15px; height:30px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#fastsearch.inactive ,
#footer-subscribe-email.inactive {color:#b5b7b8;}
#footer-subscribe-email {width:100%;}
#sb-nl-members-count {  font-size:12px; font-weight:bold;text-align:center;width:150px;margin:0 0 -36px 0 ;display:inline-block;
</style>


<br />
<div id="btrix-newsletter">
<div class="btrix-title">
Get Email Updates</div>
<div class="btrix-nl-text">
<center>
Subscribe to Get Latest Updates Free</center>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GhiyatsBlogs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inactive footer-text-field" id="footer-subscribe-email" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="uri" type="hidden" value="GhiyatsBlogs" />
<input name="loc" type="hidden" value="en_US" />
<br />
<div id="sb-nl-members-count">
<table border="0">
<tbody>
<tr>
<td style="padding-right: 4px;"><a href="http://twitter.com/GhiyatsBlogs" target="_blank" title="Follow Me On Twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hfN-O-oECBGUo8oYIq2ZeTGzW5-Rko3W581N_2DGtG4HOLe-mtpwyBGtCg2An2ynQClQ6HmWqs7NEJTY9y58HVqCNzKuI-N5DrznCyIRXXuOUyl_WXNDnkXhBewFhmiHDnk9MskNAB0/s1600/bloggertrix.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/GhiyatsBlogs" target="_blank" title="Subscribe Via RSS">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3Cbz5q2P_J55ygC0yco_Ltkrid1dgFpTXzmega5Mxjpoob5lYcsK6I77ioSP7am6ShYMHjkKlxUzzeNKnsPZCOoH507mihl8DULYSIPoK2XSytRJVB23bmrEThDTYuEmvLU__b5uEvE/s1600/bloggertrix.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://www.facebook.com/USERNAME" target="_blank" title="Find Us On Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUu31W7H2v5Nt1NKWFEbsQ8tWV-mlYqAbLmnbhtA-GFPYiXJdFzI0Vh_Z-XNaCxH4KS0NHSOT2XZ1FaHlCL-jpF_Hi8Nwrh-JoIVtLZEe1bvyMhO8GRcz2Obf37vFZwq3Fkf5m4fFLT4/s1600/bloggertrix.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="https://plus.google.com/108021608037797119476" target="_blank" title="Add me on Google+">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0YHWan15BZ9MyJjteppZJFGBCr7Aka2cEawQ2gAZz6hay-3Sb1ZC8ob5O2UgvoqIa63uLa88XTjHt6gixhXLp29eNxYg3sV7jXIYuv6TDTMNaZ6fISjZiIc-JNKKF8OiX4rkrYsgumI/s1600/bloggertrix.com-google-icon.png" style="height: 25px; width: 25px;" /></a>
</td>
<td style="padding-right: 4px;"><a href="http://youtube.com/UserId" target="_blank" title="youtubr subscribe">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FWnAe_oPHctE_zayXN-VBiaBxZWT6GbogQQ0qjWzZUwGGK0w9CsIIkn7OwUzHYEtbaEbuSY-RW974BU1WiuAu5E6lDnUCAJKvvZBEnGa5OkS8kU91x3EfrkRkz6J-6HH3BDSb-Y0kkw/s1600/bloggertrix.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
</td></tr>
</tbody></table>
</div>
<input class="footer-submit-btn" id="footer-subscribe-btn" type="submit" value="Subscribe" />

<div class="clr">
</div>
</form>
</div>

  • Ganti GhiyatsBlogs Dengan Id Feedburner anda
  • Ganti GhiyatsBlogs Dengan username Twitter anda
  • Ganti USERNAME Dengan username Faceook anda
  • Ganti 108021608037797119476 Dengan ID Profile Google+ anda
  • Ganti Userid Dengan username youtobe anda
  • Setelah selesai, simpan widgetnya

Demikianlah artikel diatas semoga artikel ini bermanfaat bagi sobat semua dan berguna sesama, sobat semua boleh bertanya tentang artikel diatas atau masih binggung silakan berkomentar di kolom komentar di bawah ini ! dan saya akan menjawabnya pertanyaan sobat semua...

Via : BloggerTrix
Happy Blogging
Unknown Waktu 18:30 6 comments:

Thursday, July 4, 2013

Membuat Widget Sosial Media Keren Untuk Blogger

widget

Membuat Widget Sosial Media Keren Untuk Blogger | Ghiyats Blogs - Hai, sob... untuk artikel ini saya ingin berbagi widget sosial media untuk sobat semua.. widget sosial media memang diperlukan untuk sebuah blog/ website karena untuk bisa pengunjung ingin bertanya langsung dari sosial media mereka atau bisa menambah traffik dan pengunjung karena media sosial seperti Facebook, Twitter, dan lain lain, lagi menjadi tren untuk  sekarang. Langsung saja kita coba membuat widgetnya dibawah ini

Membuat Widget Sosial Media Keren Untuk Blogger
---------------------------------------------------------------------------------
  • Masuk ke Blogger
  • Ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Masukan kode dibawah di dalamnya

/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWf5WxOgtpgnrcwU2fjr6v4WL2o-lTct5jxioj5I9Ku7d2NRaHW4_e2rfY8ob_DVIwp2U8XmfcvcUiKx-_qS13PRWlk_MvO5pw8z5eM4wQ1TNnCrX0G-L5Un-g5ltn0dHJyQRRv5Bio5f/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class="socialsharing">
<a href="http://www.twitter.com/Username" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/Username" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/GhiyatsBlogs" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/username" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/ID Google+ anda" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>

  • Ganti huruf yang berwarna, dengan petunjuknya
  • Setelah selesai, Simpan


Demikianlah artikel ini semoga artikel di atas bermanfaat bagi sobat semua dan sobat boleh bertanya di kolom komentar kalau ada yang masih binggung tentang artikel di atas...

Source code : www.BloggerTrix.com
Unknown Waktu 09:45 11 comments:
‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger