تاريخ التسجيل : 01/01/1970
| موضوع: حصريا :: كود قائمة الفيس بوك ، تويتر ، يوتيوب واكواد المواقع الاجتماعية باستايلات متنوعة الثلاثاء ديسمبر 18, 2012 1:58 pm | |
| حصريا :: كود قائمة المواقع الاجتماعية الثابتة استايل خشبى Woody Social menuالقائمة تظهر بشكل جذاب للزائر مما يشجعه للإشتراك فى هذه المواقع ومتابعة موضوعات الموقع بشكل منتظم.لإضافة الكود لمدونات بلوجر: 1.اذهب إلى لوحة التحكم 2.تخطيط أو تصميم 3.عناصر الصفحة 4.أضف أداة 5.أختار HTML/JAVASCRIPT 6.أختر الستايل المناسب لمدونتك وأنسخ الكود الموجود أسفله وأضفه إلى موقعك> 7.إستبدال الروابط الملونة باللون الأزرق بما يناسبك - الكود:
-
<style type="text/css"> #hor { list-style:none; padding:0; margin:0; }
#hor li { float:left; padding:5px; }
#hor a { display:block; height: 12px; text-indent:-999em; }
#hor a.home { width:46px; background:url(vhome.gif ) no-repeat 0 0; }
#hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; }
#hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; }
/* CSS Style for Vertical Menu */
#ver { list-style:none; padding:0; margin:0; }
#ver li { padding:2px; }
#ver li a { display:block; height:12px; text-indent:-999em; }
#ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; }
#ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; }
#ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; }
.clear { clear:both; }
*{ /* A universal CSS reset */ margin:0; padding:0; }
#navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat;
/* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif; }
#navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; }
#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden;
/* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px;
/* CSS3 Transition: */ -webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; }
#navigationMenu a{ background:url('https://lh5.googleusercontent.com/-JUTjfoEynb0/UK0kCV2GfrI/AAAAAAAAEAY/ovkZlVCDcdY/s190/woody%2520icons.png') no-repeat;
height:39px; width:38px; display:block; position:relative; }
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none;
/* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 0px #FFFFFF; -webkit-box-shadow:0 0 0px #FFFFFF; box-shadow:0 0 0px #FFFFFF; }
/* Green Button */
#navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 0;} #navigationMenu .home span{ background-color:#A15203; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#A15203; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#A15203; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#A15203; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#A15203; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
</style>
<div style='position: fixed; top: 40%; left: 2%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="http://hibsgroup.yoo7.com/"> <span>الفيس بوك</span> </a> </li>
<li>
<a class="about" href="http://hibsgroup.yoo7.com/"> <span>تويتر</span> </a> </li>
<li> <a class="services" href="http://hibsgroup.yoo7.com/"> <span>الخلاصة</span> </a>
</li>
<li> <a class="portfolio" href="http://hibsgroup.yoo7.com/"> <span>يوتيوب</span> </a> </li>
<li> <a class="contact" href="http://hibsgroup.yoo7.com/">
<span>إتصل بنا</span> </a> </li> </ul> </div> الاستايل الثانى - الكود:
-
<style type="text/css"> #hor { list-style:none; padding:0; margin:0; }
#hor li { float:left; padding:5px; }
#hor a { display:block; height: 12px; text-indent:-999em; }
#hor a.home { width:46px; background:url(vhome.gif ) no-repeat 0 0; }
#hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; }
#hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; }
/* CSS Style for Vertical Menu */
#ver { list-style:none; padding:0; margin:0; }
#ver li { padding:2px; }
#ver li a { display:block; height:12px; text-indent:-999em; }
#ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; }
#ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; }
#ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; }
.clear { clear:both; }
*{ /* A universal CSS reset */ margin:0; padding:0; }
#navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat;
/* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif; }
#navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; }
#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden;
/* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px;
/* CSS3 Transition: */ -webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; }
#navigationMenu a{ background:url('https://lh3.googleusercontent.com/-UAM9oAiEhCQ/UK0bJDjpOrI/AAAAAAAAEAI/GAef1KAd_4Q/s190/social%2520navigation.png') no-repeat;
height:39px; width:38px; display:block; position:relative; }
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none;
/* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 0px #FFFFFF; -webkit-box-shadow:0 0 0px #FFFFFF; box-shadow:0 0 0px #FFFFFF; }
/* Green Button */
#navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 0;} #navigationMenu .home span{ background-color:#0033FF; border-radius: 10px; color:#3366FF; text-shadow:1px 1px 0 #44a8d0; }
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#00CCCC; border-radius: 10px; color:#007A7A; text-shadow:1px 1px 0 #44a8d0; }
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#FF6699; border-radius: 10px; color:#8F0021; text-shadow:1px 1px 0 #44a8d0; }
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#FFCC00; border-radius: 10px; color:#540000; text-shadow:1px 1px 0 #44a8d0; }
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#9999FF; border-radius: 10px; color:#3366FF; text-shadow:1px 1px 0 #44a8d0; }
</style>
<div style='position: fixed; top: 40%; left: 2%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="http://hibsgroup.yoo7.com/"> <span>الفيس بوك</span> </a> </li>
<li>
<a class="about" href="http://hibsgroup.yoo7.com/"> <span>تويتر</span> </a> </li>
<li> <a class="services" href="http://hibsgroup.yoo7.com/"> <span>جوجل بلس</span> </a>
</li>
<li> <a class="portfolio" href="http://hibsgroup.yoo7.com/"> <span>الخلاصة</span> </a> </li>
<li> <a class="contact" href="http://hibsgroup.yoo7.com/">
<span>إتصل بنا</span> </a> </li> </ul> </div> ملاحظة :: تغير روابط مواقعنا بروابط مواقعك مع تحياتى | |
|