Tempatnya Belajar dan Berbagi

Written By Unknown on Minggu, 03 November 2013 | Minggu, November 03, 2013

Tempatnya Belajar dan Berbagi


Membuat Menu Horizontal Animasi di Blog

Posted: 02 Nov 2013 09:10 AM PDT


Seperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua).


Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

    .animatedtabs{
    border-bottom: 1px solid gray;
    overflow: hidden;
    width: 100%;
    font-size: 14px; /*font of menu text*/
    }
    .animatedtabs ul{
    list-style-type: none;
    margin: 0;
    margin-left: 10px; /*offset of first tab relative to page left edge*/
    padding: 0;
    }
    .animatedtabs li{
    float: left;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a{
    float: left;
    position: relative;
    top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOTsO782ghkYSx3uRu79TCWZ6fhbAGOfORH4xESItH_5oPSJf036CVDTyuuDFwIjta0jY2nkpo4e267HkoH1UuCsUGj2NE12ifVEaD4H__WF3QhuGrhkapizzJGBJOb-MPgs5RvRB6HA/s320/tab-blue-left.gif) no-repeat left top;
    margin: 0;
    margin-right: 3px; /*Spacing between each tab*/
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs a span{
    float: left;
    position: relative;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjj-22a2Mh8GJLHBf5H4VkMZLVrjJuJDR0auryld_KETlSqc0nqwRh-eJXoAWn1eV_sKfNwVK-aAxQXRzIkQ88z1ocw0ny2sgyKM-aH6WYqQ7DtDzN68RqQ9W6Ni9sVtcm5SNr5ArjBNY/s320/tab-blue-right.gif) no-repeat right top;
    padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
    font-weight: bold;
    color: black;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .animatedtabs a span {float:none;}
    /* End IE5-Mac hack */
    .animatedtabs .selected a{
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected a span{
    background-position: 100% -125px;
    color: black;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
    .animatedtabs a:hover{
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a:hover span{
    background-position: 100% -125px;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class='animatedtabs'>
    <ul>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
    </ul>
    </div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

Membuat Menu Navigasi Horizontal Glossy di Blog

Posted: 02 Nov 2013 08:38 AM PDT


Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.


Langsung saja. berikut ini tutorial membuat glossy horizontal menu
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Modified : IB  (http://www.maskolis.co./) */
    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLru2u1v2jQ7NhyphenhyphenZ_k6x0hyPp4ojKIp8m42jD1l2aZ11jhkyx2Athn6VfItZUnVJV1YzPmmclL_Wuy-uL3Tkw_2QCRPePHxS4sxC-3abpZJ0DAJyqxgBjAeTnGaY-EgN-gYxdbv6lr_g/s1600/maskolis+menu.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSZIDFL3s_plLwJfit7syUME6a_vhCaUPZisf6obGVFYECV6u5dNX6p50N5XF6A0Oe9s7C13pwi8hyphenhyphen2ERlhH4NP0vScAPHGHuWO_MzviFxKAxhQC0a810k9KGZ4kQ5pYEuZPYrQSAO4VI/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
        background-position: left;
    }
    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyeyUo25ZJU2AZbaCdVk6vuSpj4yzqZ_gZOrIZ8ZwUN3MxYjlG9T82x1EXaS51j70aun4Wb6me8iexRk77lFSD85-N6-bzKcNxyO80h3yV3Ii3b00Un9lDNvvc-gu-UeDx-EViaC6kRqA/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
    }
    Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
    image 
  4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
  5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
    <ul class='glossymenu'>
    <li class='current'><a href='http://creatingwebsite-maskolis.blogspot.com/'><b>Home</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
    </ul>
  6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
  7. Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....

Kepada Yang Terhormat Warga Negara Indonesia Semua

Posted: 02 Nov 2013 07:57 AM PDT


Hari ini saya lagi pada posisi static, lagi males intinya. Mau ngisi postingan di blog juga nggak ada ide, mau jalan-jalan nggak punya pacar, mikirin blog yang nggak kunjung ada komentarnya.Yah, dari pada bingung mending saya nulis apa yang ada di otak saya saat ini, mungkin di antara pembaca ada yang ngasih solusi. Belakangan ini saya sering membaca artikel dari berbagai media, entah itu dari internet maupun dari media cetak. Banyak yang membahas masalah politik, khususnya dari negara Mesir, yang denger-denger disana baru aja ada kudeta kekuasaan, Pakde Husni Mubarak disuruh meletakkan jabatan sama rakyatnya.  rakyatnya bosan  si Pakde terlalu lama memerintah negera Mesir. Mereka berontak karena perubahan yang mereka minta nggak kunjung datang

Ketika saya mampir di warung orang-orang membicarakan politik, di pasar tukang sayur dan tukang ikan lagi berdebat masalah politik, bahkan kemarin waktu saya di pasar burung sesama tukang parkir hampir berantem gara-gara berdebat siapa presiden paling hebat di negeri kita tercinta ini. Hanya ibu-ibu aja yang nggak begitu perduli dengan politik, mereka asyik ngobrol tentang cerita sinetron yang ditayangkan semalem, tentang kenapa Adjie Massaid yang begitu gagah perkasa meninggal dunia pada usia muda,  tentang kenapa si artis ini kok bisa gini, atau artis itu kok bisa gitu. Di negara kita ini semua serba terkondisi, anak-anak dikondisikan untuk membuat facebook, remaja-remaja dikondisikan untuk mendengarkan lagu-lagu tentang cinta atau drama tentang cinta, ibu-ibu dikondisikan untuk membicarakan seluk beluk selebritis, dan bapak-bapak dikonsidikan untuk membicarakan masalah politik.

Kita kembali ke masalah politik, kadang-kadang saya berpikir, apa memang politik itu satu-satunya tema yang mesti kita bahas di dalam kehidupan kita. Apa nggak ada pilihan lain selain politik? Perlu temen-temen semua ketahui di negeri kita tercinta ini kondisinya sudah sedemikian parah, kejahatan dimana-mana, orang miskin sudah tak terhingga jumlahnya, si kuat semakin merajalela dan si lemah ahh... tahu sendiri kan kondisinya seperti apa? Di negara kita ini banyak sekali fasilitas semu yang menjanjikan semua mimpi-mimpi indah. Kita terbelenggu dengan mimpi-mimpi itu tanpa bisa mengabadikannya sebagai sebuah kenyataan. Coba teman perhatikan gambar di bawah ini yang saya ambil dari http://cs0506.wordprss.com, apa yang ada dalam benak anda jika melihat gambar itu? Bisa jadi memang gambar itu hasil rekayasa orang untuk mencari popularitas atau apalah namanya. Tapi jika  gambar itu bukan hasil rekayasa dan memang apa adanya. Apa menurut anda itu adalah sebuah hal yang wajar dan manusiawi karena di dunia ya harus ada si kaya dan si miskin. 
129743151148218647
Mereka masih anak-anak, mereka mempunyai keinginan layaknya anak-anak lain, mereka juga mempunyai mimpi-mimpi indah seperti anak-anak lain. Tapi kenapa mereka harus dikondisikan seperti itu, bukannya anak-anak lain sibuk dengan facebook-nya, sibuk dengan mainan mobil-mobilan yang dipinjam temannya, sibuk tentang baju yang akan dipakai untuk ulang tahun temannya. Mereka adalah generasi yang akan mengisi negara kita ini, sejak kecil mereka sudah dibikin susah oleh keadaan. Kondisi keluarganya yang melarat membuat mereka bisa hidup dari belas kasihan sedikit orang yang peduli sama mereka. Kalau sejak kecil mereka sudah susah gimana nanti kalau sudah besar?  Kemungkinan yang belum tentu benar seperti ini : keluarga mereka melarat tidak mampu untuk membiayai biaya sekolah yang semakin hari semakin nggak bisa ditoleransi. Jika mereka nggak sekolah gimana mereka bisa mempunyai pengetahuan untuk membangun negara kita tercinta ini? Semoga hal itu nggak terjadi, mereka harus mendapatkan hak yang sama dengan anak-anak lain, hak untuk bermain, hak untuk sekolah, hak untuk mendapatkan perlindungan dari ibu pertiwinya. Mereka anak Indonesia harapan bangsa yang harus kita bina, kita wujudkan cita-citanya. Biar mereka bisa dengan bangga menyanyikan lagu nasional ciptaan Ismail Marzuki ini :
Tanah airku Indonesia
Negeri elok amat kucinta
Tanah tumpah darahku yang mulia
Yang kupuja s'panjang masa
Tanah airku aman dan makmur
Pulau kelapa yang amat subur
Pulau melati pujaan bangsa sejak dulu kala
Melambai-lambai, nyiur di pantai
Berbisik-bisik, Raja K'lana
Memuja pulau, yang indah permai
Tanah airku Indonesia
Saya berharap kepada yang terhormat warga negara Indonesia semuanya tanpa terkecuali untuk perduli dengan mereka, bapak-bapak yang diatas coba sekali waktu menengok ke bawah jendela gedung megah bapak, apa yang terjadi pada anak-anak negeri kita saat ini? Saya hanya bisa nulis artikel ini tanpa bisa berbuat apa-apa, saya hanya rakyat biasa yang mencoba untuk merubah keadaan walaupun saat ini sangat sulit sekali, tapi saya punya cita-cita jika punya duit banyak saya akan bikin panti asuhan untuk mereka, menampung mereka agar mereka memperoleh kesempatan seperti anak-anak lainnya.

Membuat Menu dTree di Blogger

Posted: 02 Nov 2013 05:08 AM PDT


Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

cara membuat menu dtree

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini. Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Letakkan kode/ script berikut di atas kode </head>
    <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>        
    <script src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js' type='text/javascript'/>
  4.  Save Template anda.
Langkah Kedua
  1. Pada dasbor klik rancangan 
  2. Kemudian klik elemen halaman => Tambah Gadget 
  3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
    <div class="dtree">
    <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'Creating Website');
    d.add(1,0,'Folder 01','#.html');
    d.add(2,1,'Sub Folder 01',' #.html');
    d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
    d.add(4,0,'Folder 02',' #.html');
    d.add(5,4,'Sub Folder 02',' #.html');
    d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
    d.add(7,0,'Folder 03',' #.html');
    d.add(8,7,'Sub Folder 03',' #.html');

    d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,0,'File[non-folder]',' link anda.html');
    d.add(11,0,'File[non-folder]',' link anda.html');
    d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
    document.write(d);
    //-->
    </script>
    </div>
  4. Terakhir simpan, dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 
<h2>Arsip</h2>
<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Creating Website');
d.add(1,0,'Daftar Isi','#.html');
d.add(2,1,'Tutorial Blog','http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial%20blog');
d.add(3,1,'Joomla','http://creatingwebsite-maskolis.blogspot.com/search/label/joomla');
d.add(4,1,'Wordpress','http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress');
d.add(5,0,'SEO','#.html');
d.add(6,5,'Tips Dasar-Dasar SEO','http://creatingwebsite-maskolis.blogspot.com/2011/02/tips-dasar-dasar-seo.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Google','#.html');
d.add(10,9,'Cara Daftar Google Adsense','http://creatingwebsite-maskolis.blogspot.com/2011/02/cara-mendaftarkan-blog-di-google.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kode warna','http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-kode-warna-di-blog.html');
d.add(15,13,'Google Page Rank','http://creatingwebsite-maskolis.blogspot.com/2011/01/google-page-rank-dan-manfaatnya.html');
d.add(16,0,'SEO Tips','http://creatingwebsite-maskolis.blogspot.com/2011/01/seo-tips-dengan-melakukan-blog-ping.html');
document.write(d);
//-->
</script>
</div>
Tentu saja temen-temen bisa ganti alamat url diatas dengan link url anda. Terakhir simpan dan lihat hasilnya. Demikian tutorial membuat menu d'tree kali ini, selamat mencoba dan semoga bermanfaat

0 komentar:

Posting Komentar