Hi? Use this Navbar Plus
For easily blog functional.

Like Chat, Share Post, auto Link,
Facebook Fans, Social Network,
Blog Map, Facebook Stream
and more.
© 2009 by Anime7Graphic
Recent Post
Facebook Fans
Notification!
© 2009 by Anime7Graphic

12.28.2009

Free Download Brushes Akhir Tahun 2009

12.28.2009



Akhirnya beres juga prepare untuk Free Download Brushes Akhir Tahun 2009, sebetulnya keki juga sama upload brush nya ke hosting file, hehe.

Tapi "no problem" karena berhubung banyak kawan kawan blog Anime7Graphic yang request type brush lain (setelah 3 page khusus free download brushes) jadi saya harus pilih pilih lagi brush mana yang cocok untuk di jadikan koleksi kawan kawan, yups itulah tuntutan seorang blogger, harus memahami keinginan audience biar makin asyik "ngubek - ngubek" blog nya, hehe.
Buruan download "FREE" sebelum kehabisan..
Lho... memanganya Diskon? hehe)
















Bagaimana, apakah sudah puas dengan download di atas? Kalo belum puas, Anime7Graphic menyediakan file file brush berbentuk DVD kisaran 500 jenis brushes untuk Photoshop dan di tambah e-magazine design juga file sample design Digital Imaging menggunakan Photoshop berbentuk source PSD.
Dengan harga terjangkau apalagi isi nya "Complete" (belum tentu dapet looh kalo beli di toko).

Bagi yang berminat silahkan klik tombol "Order Now!" di bawah dan bagi 10 pemesan pertama akan mendapatkan bonus file font berisi 200 jenis font atau 50 jenis texture file, tinggal pilih.



Oh iya buat kawan kawan yang download jangan lupa komentar, saran dan kritik nya dong, OK?


»» |Read More plus icon Comments Share Article:
|share more iconmore»»

12.21.2009

Movie Poster Design (inspiration)

12.21.2009

Movie Poster Design (inspiration)

Sekilas tentang Movie Poster dalam dunia design ternyata memberikan kontribusi besar bagi dunia per-film an. Eksistensi poster dalam sebuah film (movie) tidak terlepas dari dunia Design, baik secara conceptualize maupun segi eksekusi atau penyajian (publishing).

Bahkan mulai dari bentuk poster lukisan (hand painting) di era 1960-an sampai sekarang era Modernisasi abad 21 dengan memanfaatkan teknologi digital (Digital Art) pun Movie Poster Design masih tetap di perhitungkan dan di butuhkan oleh Industrial Film.
Di bawah ini adalah beberapa contoh Movie Poster Design dari film - film terkenal dan terlaris.


Movie Poster Design untuk film Indonesia.

Quickie Express

Judul Film "Quickie Express"
Opini: Konsep retro vintage poster ini memberikan kesan exclusive dan fun, apalagi objek dalam poster ini menampilkan pemeran utama yang sudah tidak asing lagi talenta nya di Indonesia.


Perempuan Berkalung Sorban

Judul Film "Perempuan Berkalung Sorban"
Opini: Minimalis dan bermakna, dengan sebuah objek terfokus dan different di sela - sela objek lain dengan konsep repeating.


Laskar Pelangi

Judul Film "Laskar Pelangi"
Opini: Meskipun terkesan tidak natural karena ada sentuhan olah digital (Digital Imaging pada langit dan penempatan objek di atas ladang rumput) tapi poster ini patut di acungi jempol karena posisi dari para pemeran film ini di atur sedemikian sehingga membentuk sebuah barisan yang secara tidak langsung me-resume isi film ini.


Jermal

Judul Film "Jermal"
Opini: Sebuah film yang menceritakan exploitasi anak di bawah umur dan poster nya pun sangat simple dan indah sekali, dengan mengutamakan warna dominan biru dan penempatan objek di luasnya laut membuat poster ini secara natural menjadi dramatis.


Tahukah kawan sebuah konsep design poster untuk sebuah film ternyata memerlukan riset dan pemahaman mendalam seperti mempelajari behaviour audience dan target audience (untuk siapakah dan kalangan manakah film itu?), penting untuk di lakukan karena sebuah poster tersebut ternyata akan memberikan effect terhadap audience atau calon penonton.

Poster itu sendiri bahkan secara tidak langsung menjelaskan atau menggambarkan sebuah isi film secara resume. Jadi matangnya konsep dan hasil eksekusi sebuah Movie Poster Movie ternyata berpengaruh terhadap kesuksesan sebuah film yang siap di tayangkan.

Movie Poster Design untuk film Luar (Barat).

Zack and Miri Make a Porno

Judul Film "Zack and Miri make a porn"
Opini: Sebuah film drama yang penuh dengan pesan - pesan moral meskipun adegan nya di peruntukan usia +17 ("unrated") namun seperti alur cerita film ini poster nya pun simple.


Identity Movie

Judul Film "Identity"
Opini: Tak jauh dari judul film nya ternyata designer poster ini tak ambil pusing, dia dengan matangnya membuat sebuah konsep sederhana untuk film bertema Thriller ini dengan jiplakan tangan dan membubuhkan beberapa sosok orang di kelima jari tangan nya.


Transformers 2

Judul Film "Transformer 2"
Opini: Bagi sebagian penggemar Optimus pasti tak asing lagi dengan film ini, sedikit surprise memang karena ternyata orang bule di sana lebih suka design simple berikut juga dengan design poster ini yang hanya menampilkan sosok megatron (musuh dari AUTOBOTS) tak seperti film nya yang menurut saya sangat "wah...", kesan keras, jahat dan everything of the dark pokoknya di tekankan di sini.


The Ugly Truth Teaser

Judul Film "The Ugly Truth"
Opini: Penggunaan symbol sepertinya lebih terasa nuansa nya di poster ini, dan menurut saya sangat cocok sekali dengan isi dan alur cerita dari film ini "Great".


This Is It

Judul Film "This is it"
Opini: Sebuah film dokumenter dari sang legendaris raja Pop dunia sebagai bentuk dedikasi dan penghargaan terakhir untuk mendiang Michael Jackson dengan design poster minimalis yang lebih menonjolkan sosok M.J (posisi gerak tarian khas nya) .


Wow... Fantastis bukan?
Ternyata Dunia Design sangat luas untuk bisa di aplikasi kan dari segi aspek dunia seni apapun.
Bukan hanya untuk Movie Poster Design bahkan Dunia Musik dan Theater ikut membidik Design untuk pembuatan Illustration Cover, konsep produksi Wadrobe, Merchandise, Interior panggung, dan masih banyak lagi.

Salam kreatif dan selamat berkreasi (by: Ainme7Graphic)

Sebagian sumber dari Concept Magazine & 21 Cinemaplex


»» |Read More plus icon Comments Share Article:
|share more iconmore»»

11.16.2009

Creative Design with Paper and Wood Texture

11.16.2009

paper_woody.gif

Free Download plus Creative Design Paper and Wood Texture

Dalam membuat sebuah Design apakah bentuk Illustration, vector art atau Digital Imaging pastinya kita akan membutuhkan sebuah pattern atau texture apalagi style design itu bernuansa Vintage, Classical atau Architectural.
Seperti artikel di postingan ini yang menjelaskan betapa pentingnya pattern atau texture untuk sebuah design (Mix), tidak terkecuali seperti Paper Texture dan Wood Texture yang di aplikasi kan pada contoh design di bawah ini.

Digital Imaging
"Crazy Photo.jpg"
Crazy Photo

Design Template
"Anime7 Batik"
Anime7 Batik
Buy This Template for Blogger, Wordpress or Joomla
(Header and Icon will customizing with your need)
[contact me]


Design Icon Wood Texture
"Social Media Woody"
Social Media Woody
free download PSD Download file PSD nya (2.98Mb)


Design Icon Paper Texture
"Icon Paper"
Icon Paper
free download PSD Download file PSD nya (13.7Mb)


Dari kesemua Design di atas saya menggunakan texture dan pattern untuk style nya.
Sesuai judul postingan ini (Creative Design with Paper and Wood Texture) saya juga menyiapkan file Download Paper and Wood Texture yang siap di sedot.

"Screen Shot Woody Texture"
Woody Texture
Download file Woody texture.rar di sini (8.26Mb)
Download Button


"Screen Shot Paper Texture"
Paper Texture
Download file Paper texture 1.rar di sini (12.0Mb)
Download Button
Download file Paper texture 2.rar di sini (9.59Mb)
Download Button


Sekedar mengingatkan bahwa sebuah Design itu bukan berarti mempunyai faktor paten atau pasti dari Modeling sebuah 3D atau Photograph hasil capture camera.
Design itu luwes karena design itu sendiri berasal dari Seni (Art) dan Art itu sendiri memilki keluwesan dari sekedar Modeling 3D ataupun Photograph.

Salam kreatif Anime7 Graphic.


»» |Read More plus icon Comments Share Article:
|share more iconmore»»

9.21.2009

Widget Toolbar Blog with JQuery (NavBar Plus)

9.21.2009

Widget+Toolbar+Blogger

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
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">
    &lt;&lt;<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&notes=" 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)
That's right, alasan tadi cukup membuat saya percaya kepada JQuery untuk menjadikan blog ini terlihat Dinamis.

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.


»» |Read More plus icon Comments Share Article:
|share more iconmore»»
 

About Me

My Photo
Ofan
Hobi berteman, Senang berbagi, Suka bereksplorasi, Bosan jika monoton, nggak suka ikut - ikutan, Benci bermusuhan!
View my complete profile

Thank's for

Update terbaru SKB 11 Juni 2009 (klik di sini)
Terimakasih kepada kawan blogger yang berpartisipasi di SKB (Sticker Kampanye Blogging, terdaftar di right sidebar SKB partner & SKB support) Bagi kawan yang H2C dengan SKB, jangan khawatir, ada kelanjutannya kok, tetap semangat. Be the best Blogger.

My Friends [Do follow blog, Self List Link and Banner Friends]

SKB Parter Join NOW! *Special page for Banner Friends (click me). | Add link by self »»