ثم قم بالبحث عن </head>
وضع الكود الاتي فوقة / قبلة
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
بعد ذلك قم بالبحث عن </body>
وضع فوقة الكود الاتي
<div class="menu-right almtwr" style="height: 2681px;">
<ul>
<li>
<a class="ss hom" href="http://www.almtwr.net/">
<i class="ka fa fa-home"></i>
<span class="na">الرئيسية </span>
</a>
</li>
<li>
<a class="ss win" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%88%D9%8A%D9%86%D8%AF%D8%B2">
<i class="ka fa fa-windows"></i>
<span class="na">الويندوز </span>
</a>
</li>
<li>
<a class="ss cog" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9">
<i class="ka fa fa-cogs"></i>
<span class="na">البرمجة</span>
</a>
</li>
<li>
<a class="ss goo" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%B3%D9%8A%D9%88">
<i class="ka fa fa-google-plus"></i>
<span class="na">السيو</span>
</a>
</li>
<li>
<a class="ss des" href="http://www.almtwr.net/search/label/%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8">
<i class="ka fa fa-desktop"></i>
<span class="na">التصميم</span>
</a>
</li>
<li>
<a class="ss unl" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%85%D8%A7%D9%8A%D8%A9">
<i class="ka fa fa-unlock-alt"></i>
<span class="na">الحماية </span>
</a>
</li>
<li>
<a class="ss che" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%84%D9%82%D8%A7%D8%AA?max-results=8">
<i class="ka fa fa-check-square"></i>
<span class="na">شروحات عامة </span>
</a>
</li>
<li>
<a class="ss thu" href="http://www.almtwr.net/search/label/%D9%85%D9%88%D8%A7%D9%82%D8%B9">
<i class="ka fa fa-thumbs-o-up"></i>
<span class="na">مواقع مفيدة </span>
</a>
</li>
<li>
<a class="ss des" href="http://www.almtwr.net/search/label/%D9%85%D9%88%D8%A7%D9%82%D8%B9%20%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84%20%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A">
<i class="ka fa fa-desktop"></i>
<span class="na">مواقع أجتماعية</span>
</a>
</li>
<li>
<a class="ss che" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA">
<i class="ka fa fa-check-square"></i>
<span class="na">المقالات </span>
</a>
</li>
<li>
<a class="ss dow" href="http://www.almtwr.net/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1">
<i class="ka fa fa-cloud-download"></i>
<span class="na">بلوجر</span>
</a>
</li>
<li><a class="ss arc" href="http://www.almtwr.net/p/blog-page_6.html">
<i class="ka fa fa-archive"></i>
<span class="na">الارشيف </span>
</a>
</li>
<li>
<a class="ss exc" href="/404">
<i class="ka fa fa-exclamation-triangle"></i>
<span class="na">خطا 404 </span>
</a>
</li>
</ul>
</div>
ثم قم بالبحث ]]></b:skin>
وضع فوقة الكود الاتي
.menu-right{top:226px;}}
/**/.menu-right{background:none repeat scroll 0 0 #fff;border-left:1px solid #F0F0F0;top:166px;width:41px;position:absolute;z-index:9999999;}.menu-right ul li{border-bottom:1px solid #EBEBEB;box-shadow:0 1px 0 0 #FFFFFF;}.menu-right .na{/**/width:0;right:41px;padding:0;position:absolute;overflow:hidden;/**/font-family:droid arabic kufi;font-size:16px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;/**/-webkit-transition:0.25s;/**/-moz-transition:0.25s;transition:0.25s;}.menu-right.ss:hover .ka{color:#FFFFFF;}.menu-right .ss{display:block;height:39px;text-align:center;position:relative;width:41px;z-index:99999;/**/}/**/.menu-right .ss:hover .na{width:auto;padding:0 20px;overflow:visible;}/**/.menu-right .hom:hover{background:none repeat scroll 0 0 #00BAC7;}.menu-right .hom .na{background:none repeat scroll 0 0 #00BAC7;}.fa-home{color:#00BAC7;}/**/.menu-right .win:hover{background:none repeat scroll 0 0 #8F8898;}.menu-right .win .na{background:none repeat scroll 0 0 #8F8898;}.fa-windows{color:#8F8898;}/**/.menu-right .cog:hover{background:none repeat scroll 0 0 #43AF95;}.menu-right .cog .na{background:none repeat scroll 0 0 #43AF95;}.fa-cogs{color:#43AF95;}/**/.menu-right .goo:hover{background:none repeat scroll 0 0 #F3594D;}.menu-right .goo .na{background:none repeat scroll 0 0 #F3594D;}.fa-google-plus{color:#F3594D;}/**/.menu-right .des:hover{background:none repeat scroll 0 0 #5792B2;}.menu-right .des .na{background:none repeat scroll 0 0 #5792B2;}.fa-desktop{color:#5792B2;}/**/.menu-right .unl:hover{background:none repeat scroll 0 0 #F6C231;}.menu-right .unl .na{background:none repeat scroll 0 0 #F6C231;}.fa-unlock-alt{color:#F6C231;}/**/.menu-right .che:hover{background:none repeat scroll 0 0 #C61F89;}.menu-right .che .na{background:none repeat scroll 0 0 #C61F89;}.fa-check-square{color:#C61F89;}/**/.menu-right .thu:hover{background:none repeat scroll 0 0 #F75940;}.menu-right .thu .na{background:none repeat scroll 0 0 #F75940;}.fa-thumbs-o-up{color:#F75940;}/**/.menu-right .dow:hover{background:none repeat scroll 0 0 #4aa3df;}.almtwr {margin-top: 0;position: fixed;top: 0!important;z-index: 9999999;}.menu-right .dow .na{background:none repeat scroll 0 0 #4aa3df;}.menu-right .fa-cloud-download{color:#4aa3df;}/**/.menu-right .arc:hover{background:none repeat scroll 0 0 #34495e;}.menu-right .arc .na{background:none repeat scroll 0 0 #34495e;}.arc .fa-archive{color:#34495e;}/**/.menu-right .exc:hover{background:none repeat scroll 0 0 #f1c40f;}.menu-right .exc .na{background:none repeat scroll 0 0 #f1c40f;}.fa-exclamation-triangle{color:#f1c40f;}/**/.menu-right .plu:hover{background:none repeat scroll 0 0 #9b59b6;}.menu-right .plu .na{background:none repeat scroll 0 0 #9b59b6;}.fa-plus{color:#9b59b6;}.fa-minus{color:#9b59b6;}/**/.menu-right .ka{font-size:21px;line-height:36px;transform:rotate(0deg);transition:all 0.5s ease 0s;}.menu-right .na{color:#FFFFFF;}.menu-right .ss:hover .ka{color:#FFFFFF;transform:rotate(360deg);transition:all 0.5s ease 0s;}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |