Mempercantik Blog WordPress.com dengan Custome Menu?
Bingung kan maksudnya apa? Agar tidak bingung sebaiknya lihat tampilan Custom Menu yang saya maksud di blognya Bro Yudha Qirana (Click Yudha Qirana) atau blog Moderator kita yang baik hati, siapa lagi kalau bukan Bro Arman Budiman (Lost My Idea).
Nah sudah tahu kan Custome Menu yang saya maksud? Betul. itu lho tampilan menu-menu yang ada dibawah halaman blog mereka yang menampilkan tentang penulis, nonton tv online, download software dan lin-lain.
Mungkin dari sahabat ada yang tertarik untuk memasangnya?, kalau iya silahkan coba kode berikut.
Seperti biasa masuk ke Menu Tampilan > Widget lalu tambahkan widget text ke sidebar Anda. Silahkan copy paste kode dibawah ini ke dalam widget text tadi tanpa di beri judul.
<a style="display:scroll;position:fixed;bottom:0;left:0;"> <img src="http://puspaloving.files.wordpress.com/2012/05/my-footer2.png"> </a>
<a style="display:scroll;position:fixed;bottom:7px;left:82px;" title="Home" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/home1.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:126px;" title="tentang penulis" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/aboutme.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:169px;" title="software" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/pengaturan.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:209px;" title="favorites" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/favorites.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:249px;" title="users" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/usb-drive.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:293px;" title="games" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/game1.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:340px;" title="download" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/backup-drive.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:380px;" title="hardware" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/idisk.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:420px;" title="tukarlink" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/users-folder.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:465px;" title="browser" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/firefox.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:506px;" title="tv online" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/tv-online.png"> </a>
<a style="display:scroll;position:fixed;bottom:10px;left:548px;" title="buku tamu" href="http://irfanhandi.wordpress.com/">
<img src="http://lpplmataram.files.wordpress.com/2012/05/bukutamu.png"> </a>
Keterangan :
- Kode yang berwarna merah adalah link gambar / icon yang dapat Anda sesuaikan dengan keinginan Anda. Untuk mendapatkan koleksi icon yang sesuai selera Anda, silahkan browsing saja di google image dengan kata kunci “icon png” lalu untuk cara menambahkan atau mengganti iconnya bisa lihat pada tutorial sebelumnya yaitu Cara Menambahkan Tombol Sosial Media di Sidebar WordPress
- Kode yang berwarna biru adalah alamat link yang ingin Anda tuju sesuai dengan gambar icon yang telah Anda Upload, misalnya icon TV Online bisa Anda hubungkan linknya ke halaman TV Online (jika belum pasang TV Online silahkan baca Cara Membuat TV Online di WordPress)
- Sedangkan kode yang berwarna hijau adalah judul dari icon itu sendiri.
Apabila setelah Anda mengganti iconnya dan ternyata jaraknya terlalu jauh atau sebaliknya, maka yang harus Anda lakukan adalah menyesuaikan Posisinya. Lihat contoh berikut :
display:scroll;position:fixed;bottom:7px;left:82px
Silahkan ganti angka yang berwarna merah dengan angka yang lebih kecil untuk menggeser icon kesebelah kiri dan tambahkan angka tersebut dengan angka yang lebih besar untuk menggesernya ke arah kanan.
Jika Sahabat ingin menggunakan Custome Menu persis sama seperti yang digunakan oleh Bro Yudha Qirana ataupun seperti miliknya Moderator kita tercinta Bro Arman Budiman, Silahkan gunakan kode dibawah ini.
Custome Menu Versi Bro Yudha Qirana
<div style="display:scroll;position:fixed;bottom:0;left:0;"><a><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/my-footer2.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:40px;"><a href="http://clickyudhaqirana.wordpress.com" title="Home"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/home.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:105px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/education/" title="Education"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/education.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:170px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/hardware-seputar-it/" title="Hardware"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/hardware.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:235px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/info-it/" title="Info IT"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/info-it.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:300px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/networking/" title="Networking"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/networking.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:365px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/internet-seputar-it/" title="Internet"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/internet.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:430px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/programing-seputar-it/" title="Programming"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/programming.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:495px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/security-hacking-seputar-it/" title="Security and Hacking"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/security.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:560px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/sistem-operasi/" title="Sistem Operasi"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/os.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:625px;"><a href="http://clickyudhaqirana.wordpress.com/category/seputar-it/software-seputar-it/" title="Software"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/software.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:690px;"><a href="http://clickyudhaqirana.wordpress.com/2011/12/30/tv-online-indonesia/" title="TV Online"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/tv-online.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:755px;"><a href="http://clickyudhaqirana.wordpress.com/2012/01/13/kata-kata-romantis/" title="Kata-Kata Romantis"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/love-2.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:820px;"><a href="http://clickyudhaqirana.wordpress.com/my-blog/" title="About My Blog"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/about-me.png"></a></div>
<div style="display:scroll;position:fixed;bottom:-3px;left:885px;"><a href="http://www.wordpress.com/" title="Wordpress"><img src="http://clickyudhaqirana.files.wordpress.com/2012/03/wordpress.png"></a></div>
Custome Menu Versi Bro Arman Budiman (Losmyidea)
<a style="display:scroll;position:fixed;bottom:0;left:0;">
<img src="http://lostmyidea.files.wordpress.com/2011/09/tolbar.png"> </a>
<a style="display:scroll;position:fixed;bottom:5px;left:82px;" title="Beranda" href="http://lostmyidea.wordpress.com">
<img src="http://lostmyidea.files.wordpress.com/2011/09/home.png"> </a>
<a style="display:scroll;position:fixed;bottom:5px;left:129px;" title="tentang penulis" href="http://lostmyidea.wordpress.com/2011/05/14/about-me/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/about.png"> </a>
<a style="display:scroll;position:fixed;bottom:5px;left:169px;" title="mailto" href="mailto:terlantar31@gmail.com">
<img src="http://lostmyidea.files.wordpress.com/2011/09/mail.png"> </a>
<a style="display:scroll;position:fixed;bottom:5px;left:209px;" title="software" href="http://lostmyidea.wordpress.com/category/sedikit-tentang/software-tutorial/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/software.png"> </a>
<a style="display:scroll;position:fixed;bottom:5px;left:249px;" title="game" href="http://lostmyidea.wordpress.com/category/sedikit-tentang/game-online/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/game.png"> </a>
<a style="display:scroll;position:fixed;bottom:6px;left:293px;" title="kuis" href="http://lostmyidea.wordpress.com/category/tentang-admin/kuis/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/gratis.png"> </a>
<a style="display:scroll;position:fixed;bottom:6px;left:331px;" title="chatting" href="http://lostmyidea.chatango.com/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/love.png"> </a>
<a style="display:scroll;position:fixed;bottom:6px;left:367px;" title="tips" href="http://lostmyidea.wordpress.com/category/sedikit-tentang/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/tips.png"> </a>
<a style="display:scroll;position:fixed;bottom:6px;left:409px;" title="Award" href="http://lostmyidea.wordpress.com/category/tentang-admin/award/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/papan.png"> </a>
<a style="display:scroll;position:fixed;bottom:7px;left:454px;" title="tukarlink" href="http://lostmyidea.wordpress.com/tukar-link/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/buku.png"> </a>
<a style="display:scroll;position:fixed;bottom:7px;left:486px;" title="FAQ" href="http://lostmyidea.wordpress.com/2011/05/14/f-a-q/?preview=true&preview_id=2599&preview_nonce=ff7456adf6">
<img src="http://lostmyidea.files.wordpress.com/2011/09/faq.png"> </a>
<a style="display:scroll;position:fixed;bottom:7px;left:536px;" title="Download" href="http://lostmyidea.wordpress.com/category/sedikit-tentang/download/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/download.png"> </a>
<a style="display:scroll;position:fixed;bottom:7px;left:568px;" title="novelku" href="http://lostmyidea.wordpress.com/category/tentang-admin/novelku/">
<img src="http://lostmyidea.files.wordpress.com/2011/09/hiburan.png"> </a>
</div>
Catatan Penting :
Kode diatas telah memiliki hak cipta dari masing-masing sumber, Dilarang keras mengcopy paste tanpa seijin pemilik. Untuk dapat menggunakannya silahkan minta izin kepada Empunya. 
Irfanhandi tidak bertanggung jawab apabila setelah Anda menggunakan kode diatas menu icon tiba-tiba hilang disebabkan sang pemilik menghapus link sumber gambar.
Dan saya menyarankan agar Anda membuatnya sendiri sesuai dengan keinginan Anda.
Selamat Bereksperimen. 
izin make gan
Posted by agung2222 | Maret 10, 2013, 2:03 pm