Widget Toolbar Blog with JQuery (NavBar Plus) untuk blogger (blogspot) ini di buat berawal dari ketertarikan saya untuk mencoba memasang Strip Bar yang di adaptasi dari widget Wordpress dan berlanjut menjadi Menu Plus ala Anime7Graphic.
Alhasil menjadikan sebuah Widget sederhana baru yang di beri nama Toolbar Navigasi menu Plus ala Anime7Graphic, widget ini menggunakan JQuery system untuk engine Interface nya dan sedikit improvisation Cascading Style Sheet (CSS).
Widget Toolbar Blog with JQuery (NavBar Plus) ini sangat membantu sekali untuk menambahkan fasilitas [pada Blogspot] tambahan secara simple dan pastinya eye catching dan tidak memberatkan loading blog yang kaya akan fasilitas dan fitur.
Untuk contohnya silahkan kawan test aja di NavBar blog ini (sejajar dengan navbar default blogspot). Dan untuk cara membuatnya Silahkan lihat kode d bawah!
Sebelumnya Download keseluruhan Source Code navbar plus ini.
Java Script
- jQuery versi 1.3.2/lates
- Thickbox Engine Code (Jika di butuhkan)
- Navigasi Bar Engine Code
- Tipsy Engine Code (ambil javascript nya)
CSS
Berikutnya adalah penjelasan singkat memasukan code ke dalam blog:
- Langkah Pertama adalah masukan load kode JQuery di bawah ini di antara tag HEAD blog.
Load externel jQuery <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
Setelah itu masukan code jQuery Engine Tipsy dan Thikcbox jika di perlukan, gunakan parse code untuk memasukan code ini ke dalam HTML blog (Escpae HTML Parse) - Langkah Kedua adalah buat sebuah widget bisa manual (resource sendiri) atau via provider seperti Fan's Page Facebook, Blogcatalog, Friendfeed, Twitter Update atau Facebook Stream Box.
Apabila widget tersebut berupa Script saja maka gunakan Provider Hosting seperti ueuo.com untuk membuat, menyimpan dan meloading external file Html nya. Tapi ingat jangan sekali kali memasukan code atau script widget ke dalam add widget di edit HTML blog, karena di sini kita akan me Implementasi kan iframe jQuery.
Berikut ini adalah alamat beberapa widget Blogger yang bisa kawan cari: - Langkah Ketiga adalah buat sebuah implementasi pembuatan effect untuk Interface untuk navigasi plus nya.
Engine Interface Code!
$("#ShoutMix").click(function(){
$("table#pop_dialog_table").fadeIn("500");
$("div#shareSlide").slideUp("900");
iframeMenus.location="http://www4.shoutmix.com/?account_shoutmix_kawan";
});
$("#facebookFans").click(function(){
$("table#pop_dialog_table").fadeIn("500");
$("div#shareSlide").slideUp("900");
iframeMenus.location="alamat_widget_facebook_fans_kawan";
});
$("#TwitterTweet").click(function(){
$("table#pop_dialog_table").fadeIn("500");
$("div#shareSlide").slideUp("900");
iframeMenus.location="alamat_widget_twitter_kawan";
});
$("#RssSubscribe").click(function(){
$("table#pop_dialog_table").fadeIn("500");
$("div#shareSlide").slideUp("900");
iframeMenus.location="http://feedburner.google.com/fb/a/mailverify?uri=Judul_Feed_kawan";
});
// Collapse Panel
$("#switch_show").click(function(){
$("table#pop_dialog_table").fadeOut("500");
iframeMenus.location="alamat_widget_bentuk_HTML/blank.html";
});
$("#close_containner").click(function(){
$("table#pop_dialog_table").fadeOut("500");
iframeMenus.location="alamat_widget_bentuk_HTML/blank.html";
});
// Hide Navbar
$("#toggle_close").click(function(){
$("div#all_navbar").fadeOut("500");
$("div#shareSlide").fadeOut("500");
});
// Show Navbar
$("#toggle_nav_show").click(function(){
$("div#all_navbar").fadeIn("500");
});
// Hide all the DIV in .boxBody
$("#share_slideDown").click(function(){
$('div#shareSlide').slideDown('900');
});
$("#share_slideUp").click(function(){
$('div#shareSlide').slideUp('900');
});
// Hide Notify
$("#all_navbar").hover(function(){
$("table.notifyBar").fadeOut("500");
$("div.NotifyCont").fadeOut("500");
});
});
// Switch Button
function close_containner() {
document.getElementById('switch_hide').style.display="block";
document.getElementById('switch_show').style.display="none";
}
function share_slideDown() {
document.getElementById('share_slideUp').style.display="block";
document.getElementById('share_slideDown').style.display="none";
}
function share_slideUp() {
document.getElementById('share_slideUp').style.display="none";
document.getElementById('share_slideDown').style.display="block";
}
keterangan: ubah kode warna merah dengan nama widget yang kawan load (gunakan underscore untuk spasi), lalu ubah kode warna biru dengan link widget kawan! - Langkah Keempat adalah copy gambar/icon di bawah ini untuk Style Interface nya.
[Download Package Image di sini] - Langkah Kelima adalah buat kode CSS untuk style navigasi nya.
CSS navigasi Bar Plus!
/* -- Bullet and link style -- */
ul.shareBlog {list-style-type: none; padding: 0px; margin: 0px;margin-top:20px;padding-left:10px;}
ul.shareBlog li {padding: 5px 0px 5px 30px;border-bottom: 1px solid #666;}
ul.shareBlog li.s1:hover, ul.shareBlog li.s1:hover, ul.shareBlog li.s2:hover, ul.shareBlog li.s3:hover, ul.shareBlog li.s4:hover, ul.shareBlog li.s5:hover, ul.shareBlog li.s6:hover, ul.shareBlog li.s7:hover, ul.shareBlog li.s8:hover, ul.shareBlog li.s9:hover {background-color: #444;}
ul.shareBlog li a{color: #fff;font:normal 12px Arial;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
div#shareSlide, .container_bookmarkChat, .show_navbar, table.notifyBar {position:fixed;top:0px;right:0px;z-index:100;}
ul.shareBlog li.s9 {background:url(.../images/image_social/share-this-more.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s1 {background:url(.../images/image_social/google.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s2 {background:url(.../images/image_social/facebook.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s3 {background:url(.../images/image_social/twitter.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s4 {background:url(.../images/image_social/technorati.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s5 {background:url(.../images/image_social/delicious.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s6 {background:url(.../images/image_social/digg.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s7 {background:url(.../images/image_social/stumble.gif) no-repeat 1px 0.2em;}
ul.shareBlog li.s8 {background:url(.../images/image_social/yahoo.gif) no-repeat 1px 0.2em;}
/* -- Strip Bar -- */
.bookmark_foot a {color:#ddeeff !important;}
.bookmark_foot a:hover {color:#0795E0 !important;}
.bookmark_foot {background: url(.../images/stripedbar_mini.gif) repeat-x left top;color:#ddeeff !important;margin-bottom:10px;width:100%;text-decoration:none !important;}
.container_bookmarkChat, .show_navbar {background: url(.../images/hideBar.gif) repeat-x left top;}
.container_bookmarkChat {background:url(.../images/shadow_bc.png) repeat-x bottom left;height:40px;width:100%}
/* -- Set Pop Up Facebook style -- */
table.pop_dialog_table {font-family:verdana; border-collapse:collapse; direction:ltr; margin:auto; table-layout:fixed; width:200px;float:left:text-align:left;position:relative;}
td.pop_topleft, td.pop_topright, td.pop_bottomleft, td.pop_bottomright { height:10px; overflow:hidden; padding:0 !important; width:10px !important; }
td.pop_topleft { background:transparent url(.../images/facebook-pop-dialog-sprite.png) no-repeat scroll 0 0; }
td.pop_topright { background:transparent url(.../images/facebook-pop-dialog-sprite.png) no-repeat scroll 0 -10px; }
td.pop_bottomleft { background:transparent url(.../images/facebook-pop-dialog-sprite.png) no-repeat scroll 0 -20px; }
td.pop_bottomright { background:transparent url(.../images/facebook-pop-dialog-sprite.png) no-repeat scroll 0 -30px; }
td.pop_top, td.pop_bottom { background:transparent url(.../images/facebook-pop-dialog-sprite.png) repeat-x scroll 0 -40px; }
td.pop_side { background:transparent url(.../images/facebook-pop-dialog-sprite.png) repeat-y scroll -10px 0; }
td.pop_content {border: 1px solid #555;background: #fff;}
iframe.frame_loader_menu {background: #fff url(.../images/ajax-loader-7.gif) no-repeat center;}
div.close_containner {margin-top:0px;width: 100%; height: 20px;background-color: #ddeeff;border-top:1px solid #555;color:#006699;}
/*-- Notifycation --*/
table.notifyBar{ border-collapse:collapse; direction:ltr;z-index: 3; right: 20px; top: 25px;opacity: 0.8;}
table.notifyBar td { overflow:hidden; padding:0 !important; font-size: 12px;font-family: Georgia;color:#ddeeff;}
table.notifyBar td div {text-align: right;font-size: 10px; border-top: 1px dotted #ddeeff;font-family: verdana;}
div.NotifyCont {color:#fff;}
table#pop_dialog_table {
z-index: 3;
display: none;
}
/* -- Share Button -- */
div.bgShare {background: url(.../images/shareAll.gif) no-repeat;width:75px;height:20px;}
a div.bgShare:hover {opacity:0.8;}
/*-- Facebook Fans --*/
div.imgFacebookFans {text-align:center; width:110px; height: 15px; background-color:#F1F1F1; padding:3px;color:#555; border:1px solid #000;}
div.imgFacebookFans:hover {background-color:#ddeeff;}
a#facebookFans {text-decoration: none;}
/*-- Twitter --*/
div.imgTwitterTweet {text-align:center; width:70px; height: 15px; background-color:#F1F1F1; padding:3px;color:#555; border:1px solid #000;}
div.imgTwitterTweet:hover {background-color:#ddeeff;}
a#TwitterTweet {text-decoration: none;}
keterangan: ubah kode warna hijau dengan alamat gambar yang kawan upload! - Langkah Keenam adalah buat HTML code untuk Navigasi (Stripbar/ toolbar) di Edit HTNL blogger nya.
HTML Navbar Plus!
<!-- Setting Nav Hide -->
<div class="show_navbar" id="show_navbar">
<<<a class="east" href="javascript:showbar()" title="Show Navbar Plus?" id="toggle_nav_show">Show Navbar</a>
</div>
<!-- Setting Share Slide -->
<div id="shareSlide" style="background: #222; width: 140px; height: 280px; z-index: 3; left: 120px; top: 25px; border: 1px solid #555;display: none">
<ul class="shareBlog">
<li class="s1"><a href="http://www.google.com/bookmarks/mark?op=add&bkmk=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F&title=JUDUL_BLOG_KAWAN&annotation=" target="_blank">Google Reader</a></li>
<li class="s2"><a href="http://www.facebook.com/share.php?u=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F&t=JUDUL_BLOG_KAWAN" target="_blank">Share Facebook</a></li>
<li class="s3"><a href="http://twitter.com/home?status=share Cool Blog Design at http://ALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP" target="_blank">Tweet Me</a></li>
<li class="s4"><a href="http://technorati.com/faves?sub=favthis&add=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F" target="_blank">Technorati</a></li>
<li class="s5"><a href="http://del.icio.us/post?partner=addthis&url=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F&title=JUDUL_BLOG_KAWAN¬es=" target="_blank">Del.ico.us</a></li>
<li class="s6"><a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F&title=JUDUL_BLOG_KAWAN&bodytext=" target="_blank">Digg it</a></li>
<li class="s7"><a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP%2F&title=JUDUL_BLOG_KAWAN" target="_blank">Stumble it</a></li>
<li class="s8"><a href="http://buzz.yahoo.com/buzz?targetUrl=http%3A%2F%2FALAMAT-BLOG_KAWAN_TULIS_TANPA_HTTP" target="_blank">Yahoo Buzz</a></li>
</ul>
</div>
<!-- Notify Message -->
<table class="notifyBar">
<tr>
<td width="40px" height="20px" style="background: url('images/notify_row.png') no-repeat center bottom;"></td>
</tr><tr>
<td width="200px" height="100%" style="padding: 10px ! important;background-color: #006699;border:1px solid #006699;">
<b>Isi teks/pesan di sini sesuai keinginan<br>
<div id="FooterAnime7Claim"></div>
</td></tr>
</table>
<!-- Start NavBar setting -->
<div class="container_bookmarkChat" id="all_navbar">
<table class="bookmark_foot" height="30px" align="center"><tbody><tr>
<td width="7px"></td>
<td align="center" width="72px">
<td class="strip_space"></td>
<!-- Share Blog -->
<td align="left" width="80px">
<a class="tips-fade" href="#" id="share_slideDown" onClick="share_slideDown()" title="Share/Save Blog Post!">
<div class="bgShare"></div>
</a>
<a class="tips-fade" href="#" id="share_slideUp" style="display: none;" onClick="share_slideUp()" title="Share/Save Blog Post!">
<div class="bgShare"></div>
</a></td>
<td class="strip_space"></td>
<!-- Blog Map -->
<td align="left" width="90px">
<a class="tips-fade" href="#" id="facebookFans" onClick="facebookFans()" title="My Facebook Page!">
<div class="imgFacebookFans" id="imgFacebookFans">
<img src="images/facebookFans.gif" align="absmiddle"> <b>Facebook Fans</b></div>
</a></td>
<td class="strip_space"></td>
<!-- facebook Fans -->
<td align="left" width="70px">
<a class="tips-fade" href="#" id="TwitterTweet" onClick="TwitterTweet()" title="Follow My Twitter!">
<div class="imgTwitterTweet" id="imgTwitterTweet">
<img src="images/twitterTweet.gif" align="absmiddle"></div>
</a></td>
<td class="strip_space"></td>
<!-- Shoutmix bbutton -->
<td align="left" width="100px"><a class="tips-fade" href="#" id="ShoutMix" title="Tinggalkan Pesan!">
<div style="width:98;height:25;"><img src="images/ShoutBox.gif" align="absmiddle"/></div></a></td>
<td class="strip_space"></td>
<td class="strip_space"></td>
<!-- Notification Button-->
<td align="right">
<div class="NotifyCont">
<blink><b>Notification!</b></blink>
<img src="images/notofication.png" align="absmiddle"> </div></td>
<td class="strip_space"></td>
<!-- NavBar close button -->
<td align="center" width="50px">
<a class="east" href="javascript:toggle_hide()" id="toggle_close" title="close this Navbar plus!">
[HIDE]</a></td>
</tr>
</tbody>
</table>
<!-- Load Containner Menus-->
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<table class="pop_dialog_table" id="pop_dialog_table" style="height: 510px; width: 800px;">
<tbody>
<tr>
<td class="pop_topleft"/>
<td class="pop_border pop_top"/>
<td class="pop_topright"/>
</tr>
<tr>
<td class="pop_border pop_side"/>
<td id="pop_content" class="pop_content">
<!-- Conten Insert and Adding Here Please! -->
<div style="height: 500px;">
<iframe frameborder="no" class="frame_loader_menu" name="iframeMenus" id="iframeMenus" height="100%" width="100%" scrolling="no"></iframe>
</div>
<div class="close_containner">
<a href="#" onClick="close_containner()" id="close_containner">
<img src="images/close_containner.png" align="absmiddle"></a>
© 2009 by Anime7Graphic
</div>
<!-- End end End! -->
</td>
<td class="pop_border pop_side"/>
</tr>
<tr>
<td class="pop_bottomleft"/>
<td class="pop_border pop_bottom"/>
<td class="pop_bottomright"/>
</tr>
</tbody>
</table>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div>
<script>
var inject = document.getElementById("FooterAnime7Claim");
inject.innerHTML =
"<div style='background: none;'>"
+ "© 2009"
+ "<a href='http://anime7graphic.blogspot.com' rel='follow' title='Graphic, Flash, Vector Art Design'>"
+ " Anime7Graphic</a>"
+ "</div>";
</script> - Langkah Ketujuh adalah tambahan fitur Tipsy jQuery seperti pada toolbar Facebook.
Kode Tipsy ini hanya fitur tambahan jadi jika kawan tidak menginginkan nya maka hapus saja JavaScript engine jQuery Tipsy.Code Engine Tipsy <script type="text/javascript">
$(function() {
$('.north').tipsy({gravity: 'n'});
$('#north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('#south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('#east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
$('#west').tipsy({gravity: 'w'});
$('.tips-fade').tipsy({fade: true});
$('#tips-fade').tipsy({fade: true});
});
</script>
Untuk mengaktifkan atau menggunakan nya kita tinggal memasukan code id atau class ke dalam link code, contoh:
<a id="tips-fade" href="link_kawan" title="Test Tipsy jQuery">Test 1</a>
keterangan: masukan kode engine Tipsy setelah jQuery load javaScript!
Teknik dan implementasi dalam Widget Toolbar Blog with JQuery (NavBar Plus) adalah pembuatan loader Html widget, Flash widget, Ajax widget atau Php widget menggunakan Iframe, dan memang kebanyakan fungsi JQuery adalah menggunakan loader Iframe. Alasan nya adalah supaya widget yang kita pasang tidak semuanya di bebankan pada saat loading pertama kali blog di buka. Dan pastinya ini juga akan membuat tampilan serta loading blog menjadi simple dan efisien namun kaya akan fitur dan fungsi tambahan.
Ada beberapa alasan mengapa saya pilih JQuery untuk engine nya, karena:
- JQuery banyak pengembangan nya (sama seperti motools),
- JQuery adalah engine yang menggunakan javascript dan flexibel,
- Dalam 1 versi JQuery kawan bisa menggunakan multi effect Interface dalam implementasi nya (itu berarti sebuah keuntungan lebih jika blog kita ingin di buat dinamis),
- JQuery compatible di browser manapun,
- JQuery adalah open source alias free (gratis),
- Kawan hanya membutuhkan enginer (script command tambahan untuk mengaktifkan seluruh fungsi dari JQuery)
Jika kawan kesulitan dalam membuat prase code javaScript ke dalam Edit HTML [Blogspot] maka Solusi untuk menyimpan file script JQuery yang akan di load gunakan jasa layanan provider hosting gratis seperti ueuo.com, fileden.com atau googlecode.com
Silahkan tulis komentar untuk sharing atau tanya jawab, Salam nge Blog buat semuanya.