• 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 2013

Monday, December 30, 2013

Cara Membuat Menu Navigasi Vertical Di Blog

Cara Membuat Menu Navigasi Vertical Di Blog | Ghiyats Blogs - Hai, Pada Artikel ini kita akan membahas sebuah artikel tentang Menu navigasi berbeda pada menu yang sudah saya bagikan yang berbentuk Horizontal ke samping, Tapi Pada menu ini Dengan Bertuk vertical Dan ke Ke Bawah.
Cara Membuat Menu Navigasi Vertical Di Blog

Menu ini Dengan Tampilan yang elegan dan cantik, dengan di tambah sebuah icon petunjunk panah dan warna yang stylish, Yang membuat menu ini tambah Menarik, Menu ini bisa Di Taruh Di samping Kanan atau Kiri artikel, Kalau sudah mengerti langsung saja kita coba membuatnya seperti ini :


  • Pertama Login ke blogger
  • Pergi ke Menu ''Tata Letak'' >> ''Tambah Gadget''
  • Cari Gadget ''HTML/JavaScript''
  • Masukanlah kode dibawah ini, di dalam gadget tersebut
<style>
#v-menu { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#v-menu { 
    width: 275px; 
}
#v-menu ul { 
    list-style: none; 
    text-indent: 0px; 
}
#v-menu li { 
    margin-top: 0px; 
    border-bottom: 1px solid #414141; 
}
#v-menu a { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 15px; 
    font-weight:bold; 
    font-variant: inherit; 
    text-transform:uppercase; 
    padding: 0px; 
    color:#CCC; 
    display: block; 
    padding: 13px 50px; 
    height: 26px; 
    line-height: 26px; 
    text-decoration: none; 
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6un0yHadaVuOmiTgJ-M_4DSwayNyzXDpNuMx7oJxsF320zf8-wQ3twVcrswi4gaF3U6MySG4v9bf-ieHwHSqn_muMFW39a-rYHsaXUbxEiLKFSj6VbmRQEw60-oriel-dpSQys7otMJ_T/s1600/menu-bg.png) no-repeat; 
    text-shadow: 1px 1px 1px #111; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#v-menu a:hover { 
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat; 
    font-size: 14px; 
    padding: 13px 60px; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    
}
#v-menu a:visited { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat;    
}
#v-menu a:active { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat;    
} 
</style>
<div id='v-menu'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
<li><a href="#">Applications</a></li> 
</ul> 
</div>

  • Setelah itu, Ganti # Dengan url yang ingin di tuju
  • Ganti juga, Home, Widget, Seo Dan Lain Lain, Dengan Nama menu yang anda inginkan
  • Setelah Selesai, Sekarang klik ''Simpan''


Gimana Tertarik dan Mudah kan Artikelnya ? Demikianlah artikel yang baru saya bagikan ini, Semoga artikel ini berguna dan mudah di pratekkan, Silakan Tuliskan pendapat tentang artikel ini di kolom komentar dibawah ini,Terima Kasih...

 Via : MyBlogger-Tricks
Unknown Waktu 10:01 10 comments:

Monday, December 23, 2013

Menu Navigasi HTML5 Dengan Style Biru


Menu Navigasi HTML5 Dengan Style Biru | Ghiyats Blogs - Artikel Pada hari ini, Akan saya bagikan sebuah Menu navigasi Berwarna biru, Menu navigasi mungkin sobat sudah mengerti apa kegunaan, Kegunaan menu adalah untuk mempermudah pengunjung mencari halaman yang ada di blog tersebut.

Menu ini juga di lengkapi dengan Html 5, Langsung saja kita coba, Membuat artikel ini, Tutorialnya seperti di bawah ini :

  • Pertama, Kita harus login ke blogger.com
  • Terus, menuju ke menu ''Template'' >> Klik ''EDIT HTML''
  • Cari kode <head> untuk memasukkan style Html5, dan masukan kode dibawah ini, sebelum kode tersebut
<link href="https://dl.dropboxusercontent.com/u/223738947/html5-reset.css" type="text/css" rel="stylesheet">
  • Setelah itu, Kita Menuju Menu ''Tata Letak'' >> ''Tambah Gadget'' 
  • Cari gadget ''HTM/JavaScript'' Terus masukan kode dibawah ini, di dalamnya.
<style>
#nav_menu {
    width: 100%;
    margin: 10px;  
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-right: auto;
    margin-left: auto;
    text-transform: capitalize;
       
}
#nav_menu ul {  
    float: auto;
    overflow: hidden;
    margin:0 auto;
    text-align: center;
   
}
#nav_menu:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#nav_menu a {
    display:block;
    padding: 10px 30px;
    color: #fff;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 1px #333;
    text-align:center;
}
#nav_menu a:hover {
    color: #FFF;
    text-shadow: 0 2px #000;
}
#nav_menu li {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: #005fa1 #005fa1 #005fa1 #005fa1;
    background: #0096ff; /* Old browsers */
    background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
    background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */  
}
#nav_menu li:hover {
   
    background: #404040; /* Old browsers */
    background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
    background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
}
#nav_menu li:first-child {
    border-color: none;
    border-radius: 100px 0 0 100px;
}
#nav_menu li:last-child {
    border-color: none;
    border-radius: 0 100px 100px 0;
}
#nav_menu li:first-child a:hover {
border-color: #252525;
}
</style>
    <!-- begin navigation -->
    <nav id="nav_menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
               <li><a href="#">Products</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Faqs</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
       
    </nav>
  <!-- end navigation --> 

  • Ganti # dengan url yang ingin di tuju

Demikianlah artikel pada hari ini, semoga apa yang saya bagikan bermanfaat untuk sobat semua, Silakan beri komentar anda tentang artikel di kolom komentar di bawah ini, Terima Kasih...

Via : MyBlogger-Tricks 
Unknown Waktu 21:47 2 comments:

Friday, December 20, 2013

Cara Membuat Related Posts Dengan Thumbnail

Cara Membuat Related Posts Dengan Thumbnail | Ghiyats Blogs - Salam Untuk Sobat semua.... Pada artikel yang akan saya bagikan ini, kita akan membahas tentang Related Posts atau Artikel Terkait, Artikel Terkait Berguna Untuk Membantu Pengunjung Untuk mencari artikel lain yang berhubungan dengan artikel tersebut, Artikel Terkait biasanya berada di bawah postingan blog.

Related Posts
Ada yang berbentuk daftar atau pun Thumbnail, Akan saya bagikan ini berbentuk Thumbnail dan keunggulan widget ini adalah di sedia gambar bentuk yang menarik, Langsung saja kita coba membuatnya, Tutorialnya seperti dibawah ini :

  • Pertama Kita login ke blogger
  • Terus, Pergi menu ''Template''
  • Klik ''Edit HTML''
  • Setelah itu, cari kode </head> Setekah ketemu masukan kode dibawah ini di atas / sebelum kode tersebut
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNsd0wnh9uOhwxWQ0N1qVf7f1xpLFxvQ7Ong57hTRJ3QnZS_0mMcd2OOb4qfKVLoCM7Ey-_N_AdQCS57FtJhzsOJoh0WjHE-u7Nw5e8fmYMd5CG5LIlz-LAKfCoT-ntiE29NrGTsAf-fn/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Related post";
</script>

</b:if>
<!--Related Posts with thumbnails End-->

  • Terus cari lagi kode, <p class='post-footer-line post-footer-line-1'/> atau post-footer-line,Setelah ketemu COPY kode dibawah ini diatas salah satu kode diatas
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • Setelah Klik ''Simpan'' 
CATATAN :

  • Ganti Tulisan Related post Dengan tulisan yang anda suka
  • Ganti juga 5 untuk mengatur jumlah artikel terkaitnya
Demikianlah artikel ini, Terima kasih sudah membaca artikel diatas, dan kalau anda punya kesulitan tentang artikel diatas, silakan berkomentar di bawah ini, Trima Kasih...

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

Monday, December 16, 2013

3 Template Elegan Dan Cantik Untuk Blog

3 Template Elegan dan Cantik Untuk Blog | Hai sob, sudah lama blog ini tidak update artikel ,karena masalah koneksi , sudah langsung saja, pada artikel yang akan saya bagikan saya akan membahas tentang template. Ada 3 template akan saya bagikan dengan bentuk elegan dan cantik, template ini cocok untuk anda yang ingin memiliki template yang berbeda,langsung saja kita lihat koleksi seperti di bawah ini.
1. Purez

DEMO | DOWNLOAD


 2. Warm Mag

DEMO | DOWNLOAD

 3. Squid

DEMO | DOWNLOAD
Demikianlah artikel pada hari ini, Gimana Template Templatenya Keren, Bukan ? Maaf Kalau saya kurang detail dalam artikel ini, Dan silakan memberi komentar tentang template template di atas, di kolom komentar di bawah ini.Trima Kasih...

Via : Blogger Yard
Unknown Waktu 16:29 2 comments:

Friday, November 15, 2013

Membuat Popular Post Dengan Bentuk Bulat di blog

Membuat Popular Post Dengan Bentuk Bulat di blog
Membuat Popular Post Dengan Bentuk Bulat di blog| Pada artikel kali ini, akan saya bagikan sebuah widget yang berbentuk Bulat di widget popular post, artikel ini saya bagikan karena pada artikel sebelumnya Yang membahas popular post.
Unknown Waktu 11:38 8 comments:

Friday, November 8, 2013

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog | Ghiyats Blogs - Pada perjumpaan kali ini akan saya bagikan widget kotak berlangganan, widget kotak berlangganan sangat membantu para pengunjung yang ingin berlangganan via email kepada dengan begitu mereka tidak akan ketinggalan artikel terbaru dari blog tersebut.
Unknown Waktu 12:28 2 comments:

Friday, November 1, 2013

Membuat Popular Posts Dengan Efek Geser di Blog

Membuat Popular Posts Dengan Efek Geser di Blog
Membuat Popular Posts Dengan Efek Geser di Blog | Widget Popular Posts bisa membantu para pengunjung untuk mengetahui artikel artikel apa yang banyak di kunjungin blog kita, Banyak sekali Popular Posts dengan aneka bentuk yang berbeda beda. 

Tapi, Popular posts yang akan saya bagikan ini, Memiliki keunikan, Widget  di sertakan gambar artikel dan memiliki efek geser, kalau kursor mengarah ke dalam widget ini, dan ke judul artikel popular posts, secara otomatis akan ada penjelasan singkat tentang artikel tersebut.

Artikel dan tutorial nya cara membuatnya seperti di bawah ini :

  • Login ke Blogger.com
  • Setekah itu, klik Menu ''Template''
  • Klik ''Edit HTML''
  • Cari kode ]]></b:skin Kalau sudah ketemu masukan kode dibawah ini, Sebelum kode ]]></b:skin
/* Popular Post  */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post */
  • Setelah itu, klik SIMPAN

Demikianlah artikel ini, Semoga artikel yang saya bagikan bermanfaat dan mudah di pratekkan,Silakan Berkomentar di kolom komentar dibawah ini,Terima Kasih..

Via : All Blogger Tricks
Unknown Waktu 15:27 4 comments:

Tuesday, October 29, 2013

Memasang Widget Kotak Pencarian Metro Style di Blog

Memasang Widget Kotak Pencarian Metro Style di Blog
Memasang Widget Kotak Pencarian Metro Style di Blog | Ghiyats Blogs - Salam Untuk Sobat Semua.. Widget Kotak Pencarian sangat di butuhkan dan sebuah blog, karena widget ini bisa membantu pengunjung yang ingin mencari sesuatu di blog kita dengan mudah.

Dengan itulah, Akan saya bagikan sebuah widget keren dan menarik Dengan style Metro, Widget pada kotak search nya berwarna biru, Begitu, Secara sikat tentang widget ini, Kalau sobat tertarik ingin menggunakannya, Tutorialnya seperti ini : 

  • Pertama, Sobat harus login dulu Ke Blogger.com
  • Setelah Berada, DI Blogger, Sekarang Menuju Ke ''TATA LETAK''
  • Klik 'TAMBAH GADGET''
  • Pilih Gadget ''HTML JAVA/SCRIPT''
  • Copy kode dibawah ini, di dalam gadget tersebut
<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

  • Ganti 160px  ukuran kotak pencarian terserah anda
  • Ganti Type! :D Dengan tulisan yang ada di kotak pencarian
  • Setelah semua, Di ganti silakan di Simpan Gadget


Demikian artikel ini semoga apa yang saya tulis ini bermanfaat dan mudah anda pratekkan, Silakan beri pendapat tentang artikel di kolom komentar dibawah ini...

Via : All Blogger Tricks
Unknown Waktu 19:10 2 comments:

Sunday, October 27, 2013

Menu Navigasi CSS Dengan Efek Icon Hover

Menu Navigasi CSS Dengan Efek Icon Hover | Ghiyats Blogs - Salam Untuk Sobat semua... Pada artikel yang akan Saya bagikan kali ini, Kita akan membahas tentang menu navigasi, Menu navigasi ini berbeda sama menu navigasi lainnya, karena menu ini memiiki gambar dengan efek hover

Menu ini dengan warna warni yang cerah, pada setiap nama nama menu, Langsung, saja tutorial tentang artikel ini, Seperti dibawah ini :

  • Pertama, Login dulu ke Blogger.com
  • Masuk ke menu, Template
  • Klik Edit HTML
  • Cari Kode ]]><b:skin dengan menggunakan (CTRL + F ) Setdlah ketemu masukan kode dibawah ini, diatas atau sebekum kode di atas
/* The CSS Code */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} 
#btrix-nav li {float: left;} 
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} 
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} 
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} 
#btrix-nav li a:hover {cursor: pointer;} 
#btrix-nav li a:hover img {top: -85px;} 
#btrix-nav li a:hover .aname {top: 85px;} 
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;} 
#btrix-nav li:nth-child(2) a {background: #9bc704;} 
#btrix-nav li:nth-child(3) a {background: #0dc3ff;} 
#btrix-nav li:nth-child(4) a {background: #51a2ec;} 
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 

  • Terus Klik SIMPAN 

CARA PEMASANGANNYA :
  • ke menu Tata letak
  • Klik Tambah Gadget
  • Pilih gadget HTML/JavaScript
  • Copy kode dibawah ini , di dalam gadget tersebut
div id="btrix-nav"> 
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gLvGUFXVnVKgKwusxdJp3kCRL_e67K7xb5f7_ZEJI3exDIiTLH4uq5ea17aKlipOw7mo3CScmoLcJcyon4rxo38NnRZDFwbTp2emB7y6hSSpyys8us3wNDH0JfVDgT6DUGKXtWpitP0/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHvurDGnvxa9uwKRH9nLgRzhfJD5vaKq3SDmi5ssCZY_4a5RMlNNbG2jU12svCyDA3mW4m_Cp1npBw7La61O5_ai-hiNUh78Jj4vZJVh6xXVA1_3WRhRdnA8oUeeOehhivsr8kvwA-Uc/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPx5NqzcynNxp3SKcHijT15JoaqL2Uz7kf9B1f7H_tsTT9jkBledK0Yg_NY3DlAXY3qj6O7_7_nTI_rFJXr5pJFfdoGhbpPkXlxsLTF1waIWshrWm5IA_CfUdtoQqiALwQ4lUwVj7PDs/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gyE4riXpOG_y4ekJwG_OpXx6ONXHPvU1RjYVyUGh4ij60l8dTCJiX6sAngffcsyQuKm3ojrfiNWkX7IKsZkHJo1XjgnoEvcn2p32-WaXaGNSfZecRydsVOJClL6awtDAack9lNIbUmo/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcHU6P-Qu3IsNQ9GNNIItUAa1-OiuhtYoDogRypjxpUQm-lqBFG74U-zqT4smf602sV-6WTeO2h5xK6pxw05eFjWBlNGcAadYzizI-6P3QfNw4WHMLNzXBA0MVlZBv7PJA0Em58hVOsk/s1600/btrix-contact.png" /> </a> </li> </div>

  • Ganti # dengan url yang anda tuju
  •  Klik SIMPAN

Demikianlah artikel ini, semoga artikel yang baru saja saya bagikan bermanfaat dan mudah untuk dipratekkan, Silakan Komentarin artikel ini, di kolom komentar dibawah ini, Terima Kasih..

Via : Blogger Trix


Unknown Waktu 19:36 2 comments:

Tuesday, October 22, 2013

Memasang Widget Social Hover Dengan Angka Penghitung

Memasang Widget Social Hover Dengan Angka Penghitung | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, Saya bagikan sebuah tutorial sosial media dengan efek angka penghitung, widget ini memiliki Efek hover pada setiap sosial medianya, dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial media.

Widget ini memiliki warna yang cerah dan sangat elegan, Kalau memang sobat ingin mempraktekkan widget ini tutorialnya seperti ini

 Memasang Widget Social Hover Dengan Angka Penghitung
  • Login ke blogger
  • Pergi ke ''Tata letak''
  • Klik ''Tambah Gadget''
  • Pilih '''HTML/JavaScript''
  • Masukan kode dibawah ini, didalam gadget tersebut
<!-- Social Widget -->
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sliding-social.css"/>
<div class="abt-social">
    <ul>
        <li><a class="abt-box facebook" href="#"><p>15K+</p>Facebook </a></li>
        <li><a class="abt-box twitter" href="#"><p>10K+</p>Twitter</a></li>
        <li><a class="abt-box gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
        <li><a class="abt-box pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>
        <li><a class="abt-box rss" href="#"><p>10K+</p>RSS</a></li>
    </ul>
</div>
<!-- Social Widget -->

  • KETERANGAN :
  • Ganti # dengan url sosial media anda, ganti juga nomor angka yang berwarna merah.

Demikianlah artikel ini semoga artikel ini bermanfaaat dan mudah untuk di terapkan sama sobat, Silakan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...

 Via : All Blogger Tricks
Unknown Waktu 16:19 2 comments:

Friday, October 18, 2013

Widget Sosial Icons Metro Style Kotak Di Blog

Widget Sosial Icons Metro Style Kotak Di Blog
Widget Sosial Icons Metro Style Kotak Di Blog | Hai, Pada artikel yang akan saya bagikan ini, Akan saya share sebuah Widget sosial icons, widget ini memiliki bentuk unik, Tidak seperti Sosial Media lainnya memeliki bentuk mendatar, widget ini memiliki bentuk Kotak.

Widget ini sangat cocok sama Template yang memiliki Warna cerah, dan warna yang Cerah sangat cocok, Widget ini sangat Elegan dan Mudah untuk dipratekkan, Kalau sobat tertarik dengan widget ini dan ingin mengunakannya Tutorilanya seperti ini :

Widget Sosial Icons Metro Style Kotak Di Blog

  • Pertama, Sobat harus masuk ke Blogger
  • Setelah Berada disana, Klik menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Mauskan kode dibawah ini, didalamnya
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEED ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZVDIPQ5BZovjPw_G_9RYReR1R7LSDZoOAJLT9AuPVdDywmwILwcc3rHWqR2X9Wntbu0dfBdmjNHOC6mlR0CqRoG2kmel_OWtga5SBzvlxctZr1OxBLGWS9Qs4sWcXc3SgAkeg7Nndl8/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTER ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaKUjQ9m39ePK5lUA7IwyTwvptJCBKWD4AckHBpBtpL41c3RjGlGaq6NKl0vrGQPKc8CJPv2dlTrG-i4w7ogxPk2yubjFQ3I-afWAh6IK7HhvYXFSrXxc7fP0SAES_mZ_DGp-AohWnaY/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGE ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq009tDefYDH-gfpei5PAu3R_uyJ-egMP0UVJ6P2suuz3N_YPCDqGd2EKNIctXzDWiKaoWgC-PaKmEItuxQl-FCqi1piUfg0mXTNqUlE-0GjuVF5x30M0MZZizxZJwJnu3xZjPS0CdhL8/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOUR ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeAMJKisVqQq14wI_NxBAutUCATaOM_inKrn9UNRYPxodfNiJoNeA09y9hUn1Kx7gicP96BKGI1Rc1C0jworyOcgfw1Z7YC3heTuKtid-07M5Cd-EBrwIEnYbtdiZ3pnOBkLGLW1Styo/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
float: left;
width: 147px;
height: 147px;
margin: 0 6px 6px 0;
padding: 0 0 0 0;
border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
line-height: 1px;
display: block;
}

#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}

#abt-social-icons li a span {
display: none !important;
}
</style>
  • Ganti FEED ID Dengan url feedburner anda
  • Ganti TWITTER ID Dengan url username twitter anda
  • Ganti PAGE ID Dengan url username Facebook anda
  • Ganti YOUR ID Dengan url profile google+ anda

Demikianalah artikel ini semoga artikel ini bermanfaat dan mudah dipratekkan sama sobat semua, silakan beri pendapat tentang artikel di kolom komentar dibawah ini, Terima Kasih...
Via : All Blogger Tricks
Unknown Waktu 12:45 4 comments:

Friday, October 11, 2013

Menu Navigasi Dengan Style Klik Untuk Blog

Menu Navigasi Dengan Style Klik Untuk Blog | Ghiyats Blogs - Hai, Pada artikel ini Akan saya bagikan sebuah Menu Navigasi Stylish, Menu navigasi ini memiliki Warna di Pinggiran Menu ini warna Hitam, dan Warna Sedikit abu abu di Menunya.

Menunya Memiliki Sub Menu ke bawah dan untuk Melihatnya kita Harus Klik menu dan Seterusnya, Gimana, tertarik dengan Menu ini Kalau Memang Sobat Tertarik Tutorial Menu ini seperti ini :

Menu Navigasi Dengan Style Klik Untuk Blog
--------------------------------------------------------------------------------------
  • Pertama, Kita harus Masuk Ke Blogger
  • Setelah Berada di Blogger, Sekarang kita menuju menu ''Template''
  • Klik ''Edit html''
  • Masukan kode dibawah ini, dan Masukan kode dibawah ini, Diatas kode ]]></b:skin>
/* The CSS Code
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
white-space:nowrap;}
#bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }
#bt_tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}
#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bt_tabmenu  > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bt_tabmenu li a  {box-shadow: 0px 3px 10px  -5px black;float:right;}
#bt_tabmenu p {position:relative;height:1.6em;}
#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bt_tabmenu p:focus:after {content:'';}
#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}
#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
 #bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
 #bt_tabmenu ul ul a {margin-left:-9999px;}
 #bt_tabmenu ul ul li a:focus  {margin-left:19998px;}
#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bt_tabmenu ul li a:focus.fermoir  + ul {
margin-left:10001px;}
#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}
CARA SELANJUTNYA :

  • Pergi Ke menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Setelah itu, Masukan kode dibawah ini, didalam Gadget Tersebut
<div id="bt_tabmenu">
    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
<li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
</div>

  • Ganti # dengan Url yang Ingin Di Tuju

Demikianlah Artikel ini, maaf kalau artikel Ini kurang Lengkap dan Detail, Dan silakan Kalu Sobat Ingin bertanya Tentang Artikel ini Silakan berkomentar di kolom komentar dibawah ini, Semoga artikel ini bermanfaat dan Mudah Untuk dipratekkan. Terima Kasih..

Via : Blogger Trix

Keep Blogging

Unknown Waktu 08:00 No comments:

Tuesday, October 1, 2013

Memasang Menu Dropdown Lavalamp With Css3

Memasang Menu Dropdown Lavalamp With Css3

Memasang Menu Dropdown Lavalamp With Css3 | Ghiyats Blogs - Hai, Salam Untuk Sobat Semua... Pada artikel ini Saya akan bagikan sebuah Menu dropdown Lavalamp dengan Css3, menu ini dengan Berwarna latar Hitam, Menu ini Elegan dan Keren.

Menu ini Dengan Efek Kalau kursor menuju menunya akan Anda efek petunjuk seperti Gambar Di atas, Langsung saja, Kita akan belajar untuk Membuat dan Mencoba Menu ini Seperti Tutorial Dibawah ini.

Memasang Menu Dropdown Lavalamp With Css3
--------------------------------------------------------------------------------
  • Pertama, login ke Blogger
  • Terus, Pergi Ke Menu ''Template''
  • Klik ''Edit HTML''
  • Setelah Itu Cari Kode ]]></b:skin Setelkah Ketemu kodenya, Taruhlah kode dibawah ini diatas kode tadi
#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#abt-nav {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#abt-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#abt-nav li {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#abt-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#abt-nav li:hover > a {
    color: #00B4FF;
}
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#abt-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#abt-nav ul li {
    background: none;
    width: 100%;
}
#abt-nav ul li a {
    float: none;
}
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('http://www.script-tutorials.com/demos/249/css/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}
  • Setelah itu, Klik ''Simpan''
CARA PEMASANGGANNYA :
  • Setelah Berada diblogger, Klik Menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript'' Dan Masukan Kode dibawah, didalam Gadget Tadi
<ul id="abt-nav">
    <li><a href="http://gias-alauddin.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.blogger.com/">Back</a></li>
    <div id="lavalamp"></div>
</ul>
  • Ganti htp://gias-alauddin.blogspot.com/ Dengan Url Blog anda
  • Ganti # Dengan Url yang ingin diTuju 
  • Ganti juga Menu 1,2,3,dan Seterusnya, Seterah Sobat
  • Setelah Semua diganti, Sekarang ''Klik Simpan''

Sampai Di Penutup, Gimana Mudah, Kan? Kalau Masih belum Mengerti silakan beri Pendapat sobat di Kolom komentar dibawah ini, Semoga artikel ini bermanfaat dan mudah untuk di pratekkan, Terima Kasih..

Via : All Blogger Tricks

Happy Blogging
Unknown Waktu 00:00 8 comments:
‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger