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.

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

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 

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.

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

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