Amatullah's Page

Posted: 17 Apr 2010 08:35 AM PDT

View Demo

Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya, blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.
Alhamdulillah saat blogwalking kesuatu web site, saya melihat featured content slider ini, rasa keingintahuan saya mengantarkan saya tuk search digoogle bagaimana cara pembuatannya. Dan saya menemukan tutorial yang saya cari dari Web Developer Plus.
Nah disini saya ingin berbagi bagaimana caranya agar tutorial tadi bisa diterapkan khusus untuk template blogger.
Berikut tutorial menambahkan featured content slider menggunakan JQuery ini pada template blogger.
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

3. Tambahkan juga script berikut setelah kode diatas

<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>

Catatan: 5000 adalah kecepatan link hover berpindah dari satu content ke content berikutya, sobat bisa mengganti angka itu sesuai selera
4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>

#featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}
#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333; background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}
#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('images/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

catatan: Silahkan edit css diatas dengan menambahkan image selected item, image transparent, atau jika sobat ingin mengganti ukuran dari widget dan mengganti warna dari hover link dll. Untuk panduan kode warna lihat disini
4. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>
    
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
    </div>
    
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
</div>

Catatan: Silahkan edit kode diatas dengan mengganti judul, deskripsi dan link content

6. Simpan template

Selesai.
Semoga bermanfaat.
View Live Demo

Glossy Horizontal Menu

Posted: 23 Feb 2010 02:50 AM PST

View Demo

Banyak trik yang bisa kita gunakan untuk memodifikasi tampilan tab menu navigator horizontal pada template blogger. Kalau tidak salah sudah ada tiga pembahasan dengan category tersebeut pada blog ini, yang pertama cara membuat menu tab navigator horizontal sederhana, selanjutnya 30 widget tab navigator horizontal, dan sebelum postingan ini multi level drop down menu using JQuery.

InsyaAllah pada postingan kali ini, tutorial yang ingin saya ketengahkan cara membuat glossy horizontal menu seperti screenshot diatas atau livedemo lihat pada blog saya yang lain disini

Berikut tutorial membuat glossy horizontal menu

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB (http://www.amatullah83.blogspot.com/) */

.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(http://sites.google.com/site/amatullah83/background/menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Untuk image bisa sobat ganti sesuaikan dengan template blogger sobat, contoh image lainnya yang bisa sobat gunakan:

Silahkan upload dulu ya image diatas ketempat hosting masing-masing. Oke lanjut...

3. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<ul class="glossymenu">
    <li class="current"><a href="http://www.amatullah83.blogspot.com/"><b>Home</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam/"><b>Agama</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Teknologi/"><b>Teknologi</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Kesehatan"><b>Kesehatan</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger/"><b>Tutorial Bogger</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Widget"><b>Blogger Widgets</b></a></li>
</ul>

Silahkan sobat edit link dan anchor teks kode HTML diatas

4. Simpan tempalate.

Mudah bukan? Selamat mencoba, semoga bermanfaat! Jangan lupa komentar!!!

Thanks to Dinamic Drive

Halaman

Amatullah's Page

Amatullah's Page

6. Simpan template

TULIS NAMA BARANG YANG DIPESAN :

TULIS BIODATA LENGKAP PENGIRIMAN(untuk menentukan ongkos kirimnya)

REKENING REFUND (PENGEMBALIAN UANG) PELANGGAN

Dibutuhkan jika tiba2 terjadi setelah pelanggan transfer mendadak stok habis maka kami mengembalikan uang transfer sepenuhnya tanpa potongan. jika rekening refund menyusul lewat sms maka di kosongi saja

NAMA BANK

Halaman

Amatullah's Page

Amatullah's Page

6. Simpan template

TULIS NAMA BARANG YANG DIPESAN :

TULIS BIODATA LENGKAP PENGIRIMAN(untuk menentukan ongkos kirimnya)

REKENING REFUND (PENGEMBALIAN UANG) PELANGGAN Dibutuhkan jika tiba2 terjadi setelah pelanggan transfer mendadak stok habis maka kami mengembalikan uang transfer sepenuhnya tanpa potongan. jika rekening refund menyusul lewat sms maka di kosongi saja NAMA BANK

REKENING REFUND (PENGEMBALIAN UANG) PELANGGAN

Dibutuhkan jika tiba2 terjadi setelah pelanggan transfer mendadak stok habis maka kami mengembalikan uang transfer sepenuhnya tanpa potongan. jika rekening refund menyusul lewat sms maka di kosongi saja

NAMA BANK