Siapa yang tidak tahu detikinet.com ? Ini adalah salah satu portal berita teknologi yang sangat lengkap. Pernahkah anda memperhatikan social bookmark toolbar yang ada di bagian bawah setiap berita ? Saya akan membuat toolbar yang hampir sama dengan menggunakan mootools 1.2. The Requirements
- mootools-core 1.2
- Fx.slide yang ada pada mootools-more ( versi harus sama dengan mootools-core )
The Html
Sebagian besar kode html dan css saya ambil dari website detikinet langsung.01.<div id="wrapper">02.<div id="header">03.<h2>Social Bookmark Toolbar seperti Detikinet.com</h2>04.</div>05. 06.<div class="bookmark">07. <strong>Social Bookmark Toolbar</strong>08. 09.<div class="bookmarkbar"> 10. <div id="sharebutton" class="bookmarktext">11. <a href="#"><strong>SHARE</strong></a>12. </div>13.</div>14. 15. <div id="share">16. 17. <a id="closeshare" href="#">X</a>18. <div class="sharecontent tomenu">19. <h3>Share This Article:</h3>20. <table width="463" cellspacing="1" cellpadding="2" border="0" id="sharemenu">21. <thead>22. <tr>23. <td>Social</td>24. <td>Blog</td>25. <td>Email</td>26. </tr>27. 28. </thead>29. <tbody><tr>30. <td><a title="Share to Facebook" href="#"> Facebook</a></td>31. <td><a title="Share to WordPress" rel="towordpress" id="sharewordpress" href="#">WordPress</a></td>32. <td><a title="Share to Yahoo Mail" href="#"> Yahoo Mail</a></td>33. </tr>34. 35. <tr>36. <td><a title="Share to Twitter" rel="totwitter" class="sharetwitter" href="#"> Twitter</a></td>37. <td><a title="Share to Blogger" rel="toblogger" id="shareblogger" href="#"> Blogger</a></td>38. <td><a title="Share to GMail" rel="togmail" class="sharegmail" href="#"> Gmail</a></td>39. </tr>40. </tbody></table>41. <br style="clear: both;"/>42. 43. </div>44. 45. 46. <div class="sharecontent" id="towordpress">47. <h3>Share to WordPress:</h3>48. <p>Post this to your WordPress blog:</p><br/>49. 50. <form>51. <label>Blog URL: </label>52. <input type="text" /><br style="clear: both;"/>53. <label >Username: </label>54. <input type="text" /><br style="clear: both;"/>55. <label >Password: </label>56. <input type="password" /><br style="clear: both;"/>57. <input type="submit" value="Submit"/><br style="clear: both;"/>58. </form>59. <h4><a class="backtomenu" href="#">Back to Main Menu</a></h4>60. </div>61. 62. 63. <div class="sharecontent" id="toblogger">64. <h3>Share to Blogger:</h3>65. <p>Post this to your Blogger blog:</p><br/>66. 67. <form>68. <label>Username: </label>69. <input type="text" /><br style="clear: both;"/>70. <label>Password: </label>71. <input type="password"/><br style="clear: both;"/>72. <input type="submit" value="Submit" class="sharesubmit" name="tobloggergetblog"/><br style="clear: both;"/>73. </form>74. 75. <h4><a class="backtomenu" href="#">Back to Main Menu</a></h4>76. </div>77. 78. </div>The CSS
Kode CSS pun sebagian besar saya ambil dari website detikinet dengan mengubah beberapa class.01.#wrapper {width:700px;margin:0 auto;}02. 03.a {text-decoration:none;color:#06c}04..bookmark {05. background:#308AE6;06. border:1px solid #BFBFDF;07. clear:both;08. color:#FFFFFF;09. font-weight:bold;10. margin:0 auto;11. padding:7px 9px;12. width:500px;13.}14. 15..bookmarkbar {16. background:#fff;17. color:#000000;18. font-weight:bold;19. height:30px;20. margin:7px 0 0;21. padding:3px 0 6px 15px;22. }23. 24..bookmarktext {25. clear:right;26. color:#FFFFFF;27. float:left;28. font-family:Arial,Helvetica,sans-serif;29. font-size:12px;30. padding:6px 30px 10px 5px;31. vertical-align:middle;32. width:auto;33. }34. 35.#sharebutton {36. cursor:pointer;37. }38. 39.#share {40. width:486px;41. color:#000099;42. display:block;43. font-family:Arial,Helvetica,sans-serif;44. font-size:12px;45. font-weight:bold;46. line-height:normal;47. padding:10px;48. position:relative;49. background:#ccc;50. }51. 52.#closeshare {53. background:#EEEEEE none repeat scroll 0 0;54. border:1px solid #CCCCCC;55. float:right;56. font-size:16px;57. height:20px;58. position:absolute !important;59. right:10px;60. text-align:center;61. top:10px;62. width:20px;63. }64. 65..sharecontent {66. background:#FFFFFF none repeat scroll 0 0;67. border:1px solid #CCCCCC;68. padding:10px;69.}The Javascript
Kode Javascript murni saya lakukan sendiri. Detikinet menggunakan kode javascript native yang tidak saya ketahui ( saya hanya mengerti kode javascript dari framework :P ).01.window.addEvent('domready',function(){02. 03.var myHorizontalSlide = new Fx.Slide('share', {04. mode: 'vertical',05. duration:1000,06. link:'cancel',07. transition:'quart:out'08. }).hide();09. 10.$('towordpress').setStyle('display',"none");11.$('toblogger').setStyle('display',"none");12. 13. $('sharebutton').addEvent('mouseenter', function(){14. myHorizontalSlide.slideIn();15. });16. 17. $('closeshare').addEvent('click', function(){18. myHorizontalSlide.slideOut();19. });20. 21. $('sharewordpress').addEvent('click',function(){22. $$('.tomenu').setStyle('display',"none"),23. $('towordpress').setStyle('display',"block"),24. myHorizontalSlide.slideIn();25. });26. 27. $('shareblogger').addEvent('click',function(){28. $$('.tomenu').setStyle('display',"none"),29. $('toblogger').setStyle('display',"block"),30. myHorizontalSlide.slideIn();31. });32. 33. $$('.backtomenu').addEvent('click',function(){34. $$('.tomenu').setStyle('display',"block"),35. $('share').getElements('div[id^=to]').setStyle('display',"none"),36. myHorizontalSlide.slideIn();37. });38. 39.});Social bookmark toolbar sudah selesai. Untuk lebih jelasnya dapat melihat demo yang telah saya buat atau download seluruh code ini. Semoga bermanfaat.
Source : http://gadaguna.freevar.com/index.php/mootools/22-membuat-social-boomark-toolbar-seperti-detikinet-dengan-mootools12
0 komentar:
Posting Komentar