Cara Memasang Menu Navigasi

Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.

Memasang menu navigasi ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah menu navigasi seperti yang ada pada blog ini, atau Anda bisa lihat contoh gambarnya di bawah ini:

Cara Membuat Menu Navigasi Pada Blog

1. Login ke blog Anda

2. Pilih Template > Click Edit Template.

3. Cari kode ]]></b:skin> atau </style>

4. Copy-paste code CSS berikut ini tepat diatasnya :

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;-moz-border-radius: 10px; border-radius:4px} #menubar {width:100%} #menubar,#menubar ul {list-style:none; margin:0; padding-left:10px} #menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px} #menubar li {float:left; width:auto} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}

 Keterangan :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor

Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML

5. Kemudian cari kode <div id='content-wrapper'>
6. Copy-paste code berikut ini tepat dibawahnya :

 

<div id='menunavigasi'> <ul id='menubar'> <li><a href='http://www.tugasku4u.com'>Homepage</a></li> <li><a href='#'>Kumpulan Tugas</a></li> <li><a href='#'>Kumpulan Makalah</a></li> <li><a href='#'>Tutorial Blogger</a></li> <li><a href='#'>Tips Dan Trick</a></li> <li><a href='#'>Bantuan Donasi</a></li> </ul> <div style='clear:both;'/> </div> <div class='clear'/>

Keterangan:

- Ganti tulisan warna merah dengan alamat link milik Anda yang ingin dimasukkan dalam menu.

- Ganti tulisan warna biru dengan nama alamat link yang dimasukkan tadi.

7. Pratinjau, jika tidak ada kesalahan silahkan simpan template Anda.

Demikian tutorial cara memasang menu navigasi pada blog, semoga tutorial ini bisa bermanfaat bagi sobat semua.

source : http://www.tugasku4u.com/2013/09/cara-memasang-menu-navigasi-pada-blog.html

Cara Membuat Scroll Box Pada Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)

Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.


1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.
 

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

source : http://tutorialuntukblog.blogspot.com/2011/06/tutorial-buat-scroll-box-untuk-blog.html

Cara Memberi Widget Burung Twitter Warna Warni Di Blog

Cara Memberi Widget Burung Twitter Warna Warni Di Blog - . Kini saya akan posting lagi tutorial yang sama, hanya saja jika sebelumnya saya posting hanya yang berwarna biru, kini saya akan posting beberapa warna. Anda bisa pilih salah satu yang cocok untuk blog anda.

1. Masuk ke akun blogger anda

2. Pergi ke tata letak -> tambah gadget -> html/javascript

3. Masukkan script ini ke kolom

<!-- floating twitter Bird --> <script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWdxA8MP4vQLPlv7fJTkTIyuh-Vmg2klUnHT0jMJ3P-wT9X86gujVdzjpFvG5eS3bE-ApCODG5Jhn_GtDDXiopfKn3RmStFDejdS0Tu14tcIU9NWPWaQtPWDwVcZCuRJw937JiV2O3vgw/s1600/burung+twitter+terbang.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/androidnymous07"; var tweetThisText = "Twitter - UserID http://ramadhanlmzero.blogspot.com/"; tripleflapInit(); </script>

Ganti text yang berwarna biru muda dengan url twitter anda
Ganti text yang berwarna merah dengan url warna burung twitter yang anda suka. Berikut pilihannya :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjx4Iq9Lx-EZkZz3mBMxv0BDNBvnUGWoCD79M81zzE9Gc8Rcprh-2INASMwmEiFmvnHLUasfIxJCxyo45DTrPh4B4Oa0d3h4PwIpy0Wu1eyPYQI-1yzHImwluSVawqVIfPolO2QmAy08/s1600/yellow+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwTz71LH-YQ3ozRIbzCycFJerNCZQaDmDIRIiVJCZjGBY8_IIG4016ixJBBbC-RHFCKTv4lZ3AIYpSiZFOXITRu9WrPuQXmSa0qEMahMFEf0teWzYmxn9sBjsjnV3byWqBXNFpkUDbAM/s1600/black+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD3NB2X7tWT0FPTVLAIWLj_m9xelo6IZMB7nm50NEjpY-s7ociJMzS5N7EySvYqFqZZ3LER-QBNSe8q08Ts3FLn56Tibi6chV5W7ZGhOZscKeGIAAz6Z0U23yVjQXNvtC6QtoqOwICKQ/s1600/Blue+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqlLafOW5ZtnuahGPcyi0zQo_XiRLPj4Ov3bjGVu1dfrc4yv6dl8BDLIHat-szL2YQJrUS3Oj2G7U-S-jhrGqm7W0rfMpQbwrBLqvRWnMNmdICwb9NlC8PTIDA74Utj8SyGk_HNRQKP8/s1600/brown+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpfa0p7K8TazfbBSnO6fMAOPRFBlP-5RGMyKGnQGaPhBrB6q1ifgEXrCHIHlb3hPJ7mmlXPX4AmB8z7FNmmqKEm7bm_MCcEEZcSDuuYliE2Dhiao1pk7fC8xEKw0zrRnZag6cFNZRZeg/s1600/Green+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUD5RcUTngXYe2n3WurlOp6wpqDlWVuHF_ZIsZ-Rt40AsX5J1Dwp22XBjtiV8HnUR8Flwm0ZONySJfcsWhdC69I_oBfMNRwIoiGYoUVZ57ol-f3Gyw-rHnt5596z3vRk_mnifSG7MJpqw/s1600/purple+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRU24PAew79JpsONTEOk0NFM1eqoVpNE9GkdSmcw1mdJGqAVr_u8sxm6JFB8lpsbWFt8UVN1SD2LaTHXGgo3Ut2wuWDy4twlPwWI9Wr6K5PjjKQSwIqMG_SoigNINEzTVkTOoemxcz8tM/s1600/white+bird.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhglsjsjiYIX_N4-c-mTWHf_DbYD-3RvLiKXb1bfA0XW_uZ76zHT8bmqBtMoKJskjBmRkoiIifnOXeAJwDmxTa0VpQhXpwfNayQLavwQXZ2NTWNSfbaDF9xM97MqL76mFBc4_wC746Vg/s1600/red+bird.png

5. Untuk text yang berwarna biru bisa anda ganti dengan url twitter anda

6. Klik "simpan"

Selesai, anda suka memiliki widget burung twitter terbang sesuai warna yang anda pilih.

Source : http://ramadhanlmzero.blogspot.com/2013/03/cara-memberi-widget-burung-twitter.html