دليل المدون

2012-11-23

قائمة ثابتة من أيقونات المواقع الاجتماعية الخشبية woody social menu

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

لاشك أن ازرار المواقع الإجتماعية هامة جدا لأى موقع فهى تمكن زوارك لمتابعة الموقع او المدونة على حسابهم على هذه المواقع الإجتماعية ومشاركتها مع أصدقائهم
و هذه طريقة مختلفة لعرض ازرار المواقع الاجتماعية فى موقعك على هيئة قوائم جانبية ثابتة رأسية بتقنية Css لأيقونات مواقع التواصل الإجتماعى  فيسبوك ، تويتر ، جوجل بلس ، يوتيوب  , RSS
أكثر من تصميم لقائمة ذات ستايل خشبى تظهر عائمة بجانب الموقع بمرور الماوس عليها تظهر اسم الرابط الذى يؤدى إليه.
القائمة تظهر بشكل جذاب للزائر مما يشجعه للإشتراك فى هذه المواقع ومتابعة موضوعات الموقع بشكل منتظم.
يمكنك أيضًا متابعة قوائم جانبية لأقسام المدونة الهامة من هــناااااااااا

1.style NO

facebook,tweeter,googleplus
لإضافة الكود لمدونات بلوجر:
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKlsyv9ZA4C-MbbrcOn0dU6Dizz8IyCjma5fXQtXKWt_1peAzuVfmrSNDQbQtfFLhELc8yX6gilJmZeAN0VN_VI8ms8Oy2Ddwl24oRLxQF2krqmaPNnGTDLTVTn_fBXsNfTDfnNA0u9OFs/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="رابط الفيس بوك">
<span>الفيس بوك</span>
</a>
</li>

<li>

<a class="about" href="رابط تويتر">
<span>تويتر</span>
</a>
</li>

<li>
<a class="services" href="رابط الخلاصات">
<span>الخلاصة</span>
</a>

</li>

<li>
<a class="portfolio" href="رابط اليوتيوب">
<span>يوتيوب</span>
</a>
</li>

<li>
<a class="contact" href="رابط نموذج الإتصال">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://www.condaianllkhir.com/"  rel="nofollow" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

style NO.2

social site menu


<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvXCGgE9Ao1TCDygMdxwFsRwXGrR8ZZHD98F3fOBnDbUXWr1Z3ZUGkCD8-BN6gonsAP9EbpWA2mGW-9zzDPzUGEiKrslXp6ROwKYtvK2uhFFXJxZDf4QFFn0c8wfB9uQn6U3pi6zaA06O/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" رابط الفيس بوك">
<span>الفيس بوك</span>
</a>
</li>

<li>

<a class="about" href="رابط تويتر">
<span>تويتر</span>
</a>
</li>

<li>
<a class="services" href="رابط جوجل بلس">
<span>جوجل بلس</span>
</a>

</li>

<li>
<a class="portfolio" href="رابط الخلاصات">
<span>الخلاصة</span>
</a>
</li>

<li>
<a class="contact" href="رابط نموذج الإتصال">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://www.condaianllkhir.com/"  rel="nofollow" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

خطوات تركيب السكريبت بمدونات بلوجر:

  1. الذهاب إلى لوحة التحكم
  2. تخطيط أو تصميم
  3. عناصر الصفحة
  4. أضف أداة
  5. اختار Html/Javascript
 ثم إنسخ الكود التالى كاملاً وألصقه

إقرأ المزيد http://www.condaianllkhir.com/2012/10/vertical-menu-blogger.html#ixzz2D2ftVzDa

  تابع أيضا:

 إضافة أزرار Like,tweet,+1 بأبسط  الطرق
إضافة قطار المواقع الإجتماعية المتحرك إلى موقعك
4 نوافذ متحركة لصندوق الفيس بوك,تويتر, جوجل بلس,القائمة البريدية
المزيد من إضافات بلوجر المميزة

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا  


إقرأ المزيد http://www.condaianllkhir.com/2012/05/blue-islamic-html-page-design-for-face.html#ixzz2D2Z7IIoD

تنبيه:المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلى وإسم المدونة وشكرًا.

تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 4 تعليقات

  1. قمت بوضع الكود وظهرت الايقونات في خلفية المنتدى , ما الحل جزاكم الله خيرا ؟

    ردحذف
  2. السلام عليكم

    كيف بدي الغي القائمة الخشبية

    كل ما احط قالب ابتظهر

    كيف بدي اشيلها للابد

    وشكرا

    ردحذف
  3. لحذف الاضافة قم بحذف الأداة من تخطيط المدونة فى لوحة التحكم

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون