.jpg)
Recent post
Archive for 2013
.jpg)
Halo sahabat semua, kali ini saya akan berbagi cara membuat sub menu bar di blog. Sub menu bar sangat diperlukan bagi setiap blogger sejati. Bagi para pengunjung hal ini juga sangat dibutuhkan guna mencari informasi berdasarkan pada kategori di sub menu bar. Memberi sub menu bar juga membuat blog kita tampak lebih tampan, teratur, dan praktis (tidak acak-acakan). Langkah-langkahnya berhubungan dengan edit HTML. Bagi para blogger pemula mungkin akan merasa sulit, tetapi sebenarnya hal ini sangat mudah. Ikuti saja langkah-langkah yang kami jelaskan di bawah ini.
Ok, setelah berbasa-basi. Let's check it out...
Berikut ini langkah-langkah yang harus dilakukan :
- Klik Menu Desain
- Pilih Menu Template lalu pilih menu Edit HTML
- Pilih/klik menu Lanjutkan
- Pilih/klik menu Expand Template Widget
- Cari scrift berikut :
Agar lebih mudah, klik saja F3 pada
keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman
saya setelah membolak balik informasi di www.google.com maka yang cocok
adalah :
div class='main-outer'>.
Bisa jadi beda dengan template yang lain…
Setelah dapat, copas scrift berikut tepat diatas script yang dicari tadi :
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;
font-weight:700; font-size:14px; display:block; z-index:100; padding:0
15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li
a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px; padding:0 10px; font-size:11px; font-style:normal;
font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul,
#secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover
ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
PENJELASAN :
- Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
- Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
- Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan.
7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.
Saran
: back up dulu template anda sebelum merubah/menambah scrift diatas,
agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan
srcritf diatas.
8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama,
Maka ikutilah saran berikut :
Note :
kode # ganti dengan link kalian yang terdapat di addres bar- Masuk ke Menu Laman
- Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
- Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.
Blog sudah bisa dipublikasikan...
Apabila melalui
cara yang kami bagikan ini belum berhasil, coba sahabat ulangi lagi
dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa
berkonsultasi dengan Info Bagus Fakta Bagus melalui komentar di bagian
bawah ini.
Semoga bermanfaat kebaikan.
Mengganti Kursor Blog dan berbagai aneka kursos dengan gambar Animasi Keren.bisa
dilakukan dengan gambar sendiri dan karya penampilan sendiri, jika
merasa punya tingkat daya seni yang menarik, lebih baik untuk membuat
icon cursor sendiri, tentu itu adalah hal yang sangat gambang, baiklah
jika merasa tertarik untuk hanya mencoba coba, coba lihat dulu yang satu
ini Klik DEMO.
Oke langsug saja,, hehe
- Masuk Ke Blogger - Pilih Template - Edit HTML
- Dan Cari Code </head>
- Pilih kursor sesuai keinginanmu dibawah ini dan Paste code-nya tepart diatas code </head>
Cursor 1
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/horse-ani1.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 2
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Heart.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 3
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Halloween_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 4
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Fly_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 5
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/aliendance.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 6
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/apple-tmani.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 7
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bounce.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 8
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/tail2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 9
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bluemultiglit.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 10
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Arrow_02.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU_tKikk4uLJaM-DCZaQ4kdzAoy6MQOk8Iqc9-16fLqZuQvR7VgkB_4nbqDlN_-zzxyxt8CW_TISQFCYxslBZ7aXSsyi9r8l3yogesdNJh30l2O95dUbB7-SiX8Xj9cHzwhQkOtpkpA/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 11
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html" target="_blank" title="Blue Fire Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue Fire Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 12
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur949.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur949.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/26/batman-begins-help-select.html" target="_blank" title="Batman Begins - Help Select"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins - Help Select" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 13
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur201.ani), url(http://cur.cursors-4u.net/cursors/cur-3/cur201.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/22/shiny-flashy-green-matrix.html" target="_blank" title="Shiny Flashy Green Matrix"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Shiny Flashy Green Matrix" style="position:absolute; top: 0px; right: 0px;" /></a>
Z-T Blog
- hay sobat maaf nih baru ngepost lagi karena sibuk terganggu dengan
jadwal ujian tengah semester -_- ,bingung mau share apa.. :( saya share
cara membuat widget tombol social media di blog ya..? :) widget ini
mungkin bisa jadi bermanfaat untuk sobat, Dengan
memasang widget sosial media pada blog, sobat dapat mengundang
pembaca/pengunjung blog untuk terlibat dalam jejaring sosial sobat, dan
tentunya dapat meningkatkan reputasi blog sobat. Namun hal itu tak akan
terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring
sosial sobat, dan mereka hanya akan mengklik atau mengikuti update blog
sobat kecuali mereka merasa atau menemukan hal yang berguna dan
bermanfaat pada blog sobat. Widget ini tidak otomatis dapat meningkatkan
follower blog sobat diberbagai jaring sosial tapi setidaknya kita dapat
memancing mereka untuk setidaknya mengklik sekali pada tombol dengan
membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek
hover yang meluas, mulus dan rapih . Efek hover ini kita buat dengan
bantuan CSS3 transisi.
Fitur Dari Widget Ini :
- Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
- Efek memperluas ke samping
- Penggunaan CSS sprite
- Sangat rapi dan bersih
Tidak ada JavaScript. JQuery No. Ini murni CSS
sudah jelas yaa.. :D oke langsung ke caranya.. :)
- masuk ke tata letak
- Tambah Gadget
- pilih HTML / JavaScript
- Lalu Masukan Kode Di Bawah Ini..
- Simpan.. :)
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus,
.pinterest, .rss, .twitter{position:relative; z-index:5; display:block;
float:none; margin:10px 0 0; width:210px; height:38px;
border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYuER1EtFL5oCQuQuTdHxHCnnyB7cbo-fNZBWpvvSb5_6o_o1lxuFDZtWMw0MwzZl-MhC5NSC5ivYhyphenhyphenaK2E7gbUwQ7POftI9QiL-KNLjj-5JR6Wu8mudSYZdf6GTUGpprH2Up9EcsgF6Y/s800/sprites.png)
no-repeat; background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0
2px 3px; color:#141414; text-align:left; text-indent:50px;
text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s
ease-in-out; -moz-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -o-transition:width .25s ease-in-out,background-color
.25s ease-in-out; transition:width .25s ease-in-out,background-color
.25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute;
top:0; left:50px; z-index:2; display:block; height:38px; color:#141414;
content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div
style="font-size:80%; text-align:right; text-shadow:2px 2px 2px
#adadad;"><a
href="http://zhalltrozans.blogspot.com/2013/03/cara-membuat-tombol-social-media-keren.html"
target="_blank" title="Widget Follow Us">+ Get This Widget
Here</a></div></small>
Keterangan :
- Kode yang berwarna Orange, ganti dengan masing-masing alamat social media sobat..
nanti hasilnya akan seperti ini.. :)
bagaimana keren gak..? :D ,silahkan di coba.. :) jangan lupa tinggalkan jejak di komentar.. terima kasih.. :)
