الخميس، 31 يناير 2013

تحميل برنامج Google Earth 2013 تنزيل برنامج جوجل ايرث ٢٠١٣

http://icons.iconarchive.com/icons/deleket/orb/256/Google-Earth-icon.png 
السلام عليكم !
اقدم لكم اليوم البرنامج الشهير لتصفح الارض عبر الاقمار الصناعيه نعم هو البرنامج الشهير و الغني عن التعريف
Google Earth للتحميل توافق البرنامج كل انظمة الويندوز و الماك ايضا طبعا هو برنامج تابع لشركة جوجل 
موقع البرنامج من هنا 
للتحميل للويندوز و الماك من 
مرسلة بواسطة في ليست هناك تعليقات:
التسميات:

الاثنين، 28 يناير 2013

ازرار المواقع الاجتماعيه الثلجيه للوورد برس و بلوجر



Ice+Cubes+Social+Sharing+Widget+For+Blogger


السلام عليكم!
اقدم لكم اليوم اضافة ازرار المواقع الاجتماعيه بستايل ثلجي
فكما ترا اعلاه فهي تقع بداخل معبات ثلج اضافه جميله:) 

تم اقتباس كود التأثير من مدونه بلوجر تيراكس

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. تخطيط.
  3. اضف اداة HTML/JavaScript'
  4.  الصق الكود التالي بداخلها:
<style>
/*Blogger-archive */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.linkedin.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfGKkgApt3IjVslDA2or_XAsSFssCTuUcP9qB0kus4skM9fDdirl4Bv0v558jCVgbEiyBFoOr0EOk2cvEj44T8GBAM0vLoH0MDDGmjdswETVTYoOKMyNeL24CkN7apkO5wWPcvzYAWCU/s1600/bloggertrix_linkedin.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_hddgkZSjMp4wY5jZGt_RBqRGOEpZCZGy8NWhVQUjVyB_iOR2FVhGHIjTwYhjVJ3k8LAB13gbvhdsHGLMsvtwfVOwB4zIc32vi7Im9tg3v75_ivWSeRVIGrVtl9ozA9TH8HXKOkxThz4/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.twitter/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGX3t2OG6tZHESvKEmWQB1ZYx0Uf6LPWpBDbmfX_J9RNSxxu-ie6xsKq1qt9nAd1IeUtW0UrxDRn6nxcnzSwfBe_HoHGA_ja18Erjvbhl-0K6SXPoHv4r3kGckr7FuXqB_6wp_-TKdlf8/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjspYkg4Zfv2Eaek74J6PGw2n7IS3hnxGHTkkYszXQlEvYrNCUXhgiw6HEf7YDAzcF_uUJc-11yYHcx3VUnU66yTdEsoG34cDoG75v0uXpat7UMtez_U_QoaLNHQYIk9i6ouwBAkQh79k/s1600/bloggertrix_RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
العدل ماهو ملون في الكود بالمطلوب :)

واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر

و الاشتراك في المدونه 


تحياتي..



مرسلة بواسطة في ليست هناك تعليقات:
التسميات:

الأحد، 27 يناير 2013

تنزيل برنامج Skype 2013 تحميل برنامج الاتصال سكاي بي ٢٠١٣

http://icons.iconarchive.com/icons/graphics-vibe/metro-style-social/256/skype-icon.png 

السلام عليكم.

برنامج السكاي بي هو من البرامج الرائده في مجالها هو برنامج للتواصل بين الناس 

عبر الكتابه او الصوت او الصوت و الصوره معاً كما يمكنه توفير مكالمة الفيديو الجماعيه

و ايضا يمكنك الاتصال إلى الهاتف عبره في حال كان لديك حساب ذهبي معهم و يكون سعر

المكالمه رخيص جدا طبعاً هو يدعم جميع انظمة الجوال و الكمبيوتر بشكل عام ! 

موقع الشركه من هنا

لتحميل البرنامج للويندوز اضغط


لتحميل البرنامج للماك اضغط:


بعد الدخول للصفحه اضغط زر تنزبل Skype  و اتبع الخطوات التي ستظهر لك

و اي استفسار انا بالخدمه لا تنسى متابعتي على تويتر و الفيس بوك

وشكرا لك:)
مرسلة بواسطة في ليست هناك تعليقات:
التسميات:

تحميل برنامج الاتصال tango 2013 ، التانجو 2013 ، للويندوز

http://cdn.marketplaceimages.windowsphone.com/v8/images/d1c5022b-077a-4e3a-9aae-272dbca0d1c1?imageType=ws_icon_large 

السلام عليكم .

البرنامج التانقو هو برنامج شهير جدا و غني عن التعريف يستخدم للتواصل بين الناس

صغير الحجم و خفيفي على الجهاز و رائع جداً حجمه " ١١ م.ب" يتوافق مع " الايفون،اندرويد

ويندوز فون و الويندوز" لم تتوفر نسخه للماك حتى الان لكن اظن ان السكايبي بديل جيد له بالنسبه للماك

موقع الشركه من هنا 
لتحميل النسخه الخاصه بالويندوز اضغط


اي استفسار يمكنك وضعه في تعليق و يمكنك متابعتي على الفيس يوك و تويتر

وشكراً لك .
مرسلة بواسطة في ليست هناك تعليقات:
التسميات:

السبت، 26 يناير 2013

برنامج Adobe Flash Player لتشغيل مقاطع اليوتيوب و العاب الفلاش

http://wwwimages.adobe.com/www.adobe.com/downloadcenter/images/flash/flash_128.jpg 

السلام عليكم!

برنامج الادوبي فلاش بلاير " Adobe Flash Player " هو برنامج غني عن التعريف

وهو احد البرامج المهمه و الاساسيه في كل كمبيوتر فهو برنامج تشغيل مقاطع اليوتيوب

و المقاطع الصوتيه و العاب الفلاش و غيرها من الوسائط و الملفات المتعدده طبعا حجمه صغير

فقط " ١٦ م.ب "  وبيئة عمله هي " ويندوز،ماك ليونكس" تم تصنيعه من شركة ادوبي

موقع الشركة من هنا الان لتحميل البرنامج  طبعا البرنامج الذي في الصفحه

ستتغير نسخته تلقائياً ليناسب نظام التشغيل الذي تدخل به

الان للتحميل اضغط:


و اي استفسار يمكنك و ضعه في تعليق وستتم الاجابه عنه في اقرب و قت ممكن 

كما ارجو منك متابعتي على تويتر و الاعجاب بصفحتي على الفيس بوك

لتبقى مطلعاً على كل جديد و مفيد في المدونه

تحياتي.
مرسلة بواسطة في هناك تعليق واحد:
التسميات:

برنامج تشغيل تطبيقات الاندرويد على الماك و الويندوز

http://www.vexite.com/images/2012/01/BlueStacks-App-Player-logo.jpg 

 السلام عليكم !

اقدم لكم اليوم برنامج تشغيل تطبيقات الاندرويد على الويندوز و الماك

اسمه " Blue Stacks " . عمله " تشغيل تطبيقات الاندرويد على الماك و الويندوز"

حجمه"٩ م.ب تقريباً" حجمة قليل و التطبيق فريد من نوعه و مفيد قد يغنيك عن استخدام نظام 

الاندرويد المهم لن اطيل عليكم  الان اترككم مع التحميل:

لتحميل النسخه الخاصه للويندوز 


للتحميل النسخه الخاصه للماك.



تحياتي.

مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

ازرار المواقع الاجتماعيه باللون الوردي البناتي جميل جداً


http://icons.iconarchive.com/icons/designbolts/pink-girly-social/256/Active-Blogger-icon.png


السلام عليكم!

سوف اشرح في هذه التدوينيه كيفية اضافة ازرار المواق الاجتماعية

ذات الاستايل الوردي البناتي مع تأثير الاستدارة بالـ CSS

تم اقتباس كود التأثير من مدونه بلوجر تيراكس

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. تخطيط.
  3. اضف اداة HTML/JavaScript'
  4.  الصق الكود التالي بداخلها:
<<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="www.youtube.com" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-YouTube-icon.png" /></a>    
<a href="www.googleplus.com" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Google-Plus-icon.png" /></a>    
<a href="https://www.twitter.com/Username" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Twitter-2-icon.png" /></a>    
<a href="www.facebook.com/" target="_blank"><img border="0" src="http://icons.iconarchive.com/icons/designbolts/pink-girly-social/48/Active-Facebook-icon.png" /></a></p></center>
العدل ماهو ملون في الكود بالمطلوب :)

واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر
و الاشتراك في المدونه 

تحياتي..



مرسلة بواسطة في ليست هناك تعليقات:
التسميات:

الخميس، 24 يناير 2013

ازرار المواقع الاجتماعيه بشكل جميل جداً مع تأثير التكبير رائع !


http://i.imgur.com/yI5mewv.png


السلام عليكم!

يسرني ان اقدم لكم اليوم اداة للاضافات الاجتماعيه مع تأثير التكبير عن تحريك الماوس

فوق احدا الايقونات الاداه منقوله و مترجمه بالتصرف من مدونه بلوجر تيراكس

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. تخطيط.
  3. اضف اداة HTML/JavaScript'
  4.  الصق الكود التالي بداخلها:
<style>
/* blogger-archive  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/ElectrN"><img src="http://icons.iconarchive.com/icons/graphics-vibe/classic-3d-social/48/google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/ElectrN"><img src="http://icons.iconarchive.com/icons/graphics-vibe/classic-3d-social/48/facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.twitter/BloggerArchive"><img src="http://icons.iconarchive.com/icons/graphics-vibe/classic-3d-social/48/twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/electrn"><img src="http://icons.iconarchive.com/icons/graphics-vibe/classic-3d-social/48/rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul></center>
العدل ماهو ملون في الكود بالمطلوب :)

واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر
و الاشتراك في المدونه 

تحياتي..



مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

الأربعاء، 23 يناير 2013

اضافة ازرار مواقع الاجتماعيه داخل صناديق اسفل كل تدوينيه اضافه جميلة جداً


https://lh5.googleusercontent.com/-rhLrCdcdMiw/UP1Kv9TsDXI/AAAAAAAAEj4/F4yrZ5U7wI8/s606/New%2520Bitmap%2520Image.jpg


السلام عليكم!

ساشرح لكم اليوم كيفية اضافه ازرار المواقع الاجتماعيه اسفل كل تدوينيه بشكل جميل

اسفل كل تدوينيه الازرار كما في الصوره اعلاه.

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
 <data:post.body/>
7.قد تجد منه٣ او ٤ و المقصود هو الثاني او الثالث على حسب القالب.
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzppyRF6Vfb-aDTh8pJSUTZ5oWZxsIPd2KxCxv-oCGSGipPGt8U6UqoX2IlgzSq426thu-NwwfMCWLtiiBvmUIGfeKFzfOU0dPBEdKoglKZQqG3ghMgB95-wEUiEMGjrWa_wJ3C6_h9kp_/s1600/chamelcool2.gif) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}

.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}

.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}

.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='اسمك في تويترl' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = &quot;//platform.twitter.com/widgets.js&quot;;
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
            </script>
        </div>
        <div class='promote_facebook'>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = &#39;facebook-jssdk&#39;;
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement(&#39;script&#39;);
                            js.id = id;
                            js.async = true;
                            js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
                            d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
            </div>
        </div>
        <div class='promote_google'>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement(&#39;script&#39;);
                    po.type = &#39;text/javascript&#39;;
                    po.async = true;
                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                    var s = document.getElementsByTagName(&#39;script&#39;)[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
            <g:plusone annotation='none' size='medium'/>
        </div>
    </div>
<p style='display:none;'> Sharing Widget by<a href='www.blogger-archive.com'>blogger-archive</a></p>
</b:if>
 عدل اسمك في تويتر في الكود:)
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر 
و الاشتراك في المدونه 

تحياتي..


مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

شريط علوي وشاحي جميل الشكل لمدونات بلوجر اضافة بلوجر حصريه




Ribbon+Style+navigation+bar


السلام عليكم!
يسرني ان اشرح لكم في هذه التدوينيه كيفية اضافة شريط اعلى المدونه 

كما في الصوره اعلاه الموضوع مترجم من الانجليزيه للعربيه من المصدر

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
  ]]></b:skin>
7. قم بلصق الكود التالي فوقه مباشره: 
/* The CSS Code for the menu starts here blogger-archive.com */

#navigation_container {
 margin: 0 auto;
 width: 900px;
}
#navigation2 li {
        list-style: none;
        display: block;
        float: left;
  margin: 1em 0.8em;
}
#navigation2 li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}
#navigation2 li.active a:hover,
#navigation2 li a:hover {
        margin-top: 2px;
}

#navigation2 li.active {
        font-style: italic;
}
#navigation2 li.active a {
}
.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   
   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
 border-radius: 2px;
 
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}
.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -5px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -45px;
   left: -150px;
}
.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        right: -45px;
        top: -107px;
}
.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        top: -149px;
        right: -145px;
}
7.الان اضغط حفظ.
8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"
9.الصق الكود التالي:

الشريط ذا الكتابه البيضاء:
  طبعا في الكود تم استبدال الكتابه الانجليزيه إلى العربيه
فيجب عليك تعديل الروابط. 
<div id="navigation_container">

<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

   <div class="rectangle">
   
<!-- the navigation links -->
    
  <ul id="navigation2">
       <li><a href="#"> الرائيسيه</a></li>
       <li><a href="#"> عن الموقع</a></li>
       <li><a href="#"> الاتصال بنا</a></li>
       <li><a href="#"> تعدي</a></li>
       <li><a href="www.blogger-archive.com/"> الدعم</a></li>
     </ul>
   
<!-- end the ribbon body -->
   </div>
   
<!-- the right side of the fork effect -->
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>
الان عدل الكتابه في الازرار و اضف رابط الزر بدل "#"
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر 
و الاستراك في المدونه 
تحياتي..
مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

الخميس، 17 يناير 2013

اضافة شريط علوي جميل و رائع جداً لبلوجر




Multilevel+CSS3+Menu+Bar+With+Icons


السلام عليكم!
يسرني ان اشرح لكم في هذه التدوينيه كيفية اضافة شريط اعلى المدونه 

كما في الصوره اعلاه الموضوع مترجم من الانجليزيه للعربيه من المصدر

الان اترككم مع كيفية التركيب:
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
  ]]></b:skin>
7. قم بلصق الكود التالي فوقه مباشره: 
/* icons Css3 menu www.bloggertrix.com*/

ul#navbt {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;

    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#navbt,ul#navbt ul {
    list-style:none;
    margin:0;
}
ul#navbt,ul#navbt .subs {
    background-color:#444;
    border:1px solid #454545;

    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#navbt .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;

    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
ul#navbt li:hover>* {
    display:block;
}
ul#navbt li:hover {
    position:relative;
}
ul#navbt ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#navbt ul {
    padding:0 5px 5px;
}
ul#navbt .col {
    float:left;
    width:50%;
}
ul#navbt li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
    margin:0 0 0 5px;
}
ul#navbt ul>li {
    margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
    outline-style:none;
}
ul#navbt a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#navbt ul li {
    float:none;
    margin:6px 0 0;
}
ul#navbt ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#navbt li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#navbt span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#navbt ul span {
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORsBsOnYmMpRqefzMBA72VHFUuIU8pS5Y_o8fy0fOY7p1eJVUnriQfYysKu9GN0M6gz-rBQV-qTyv9UTg_oTSFHiBrze-UJETeUZCV2MHjybT1z3gxn6iKlV3oGT0uBG6p-54c_Zv6xY/s1600/bloggetrix-arrow.png");
    padding-right:20px;
}
ul#navbt ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;

    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
    background-color:#313638;
    line-height:25px;
}
7.الان اضغط حفظ.
8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"
9.الصق الكود التالي:

الشريط ذا الكتابه البيضاء:
  طبعا في الكود تم استبدال الكتابه الانجليزيه إلى العربيه
فيجب عليك تعديل الروابط. 
<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPl7paDlspjKraxOtoCaBF4CY8FtpKqywXUg2_IaE_1ZZIFjCmRKn6XuBkCvOv-jkeq7iAi3KYQyt3FnHhYwhQlQEzoFw1SLeeTNkUhKu5XpWFV2t5TXCPaVWUq75RcHT_gdN7YVJRLGw/s1600/bloggetrix-home.png" /> Home</a></li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-7BFwfgMLFKaAu4Qw4CZgPEaf8h5EoLZKuuHD3CWhAqpIJO-hVAtLQzClOKHgM7E3yzX7sKDUZxKn4M9VCxCXlFP03OWhF4YP-armFzK8WCzVuPUn3zgOj8PUqIyD320QM13KsIn8kU/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
                                    <div class="subs">
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 45</a></li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 49</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJYOyFuN4eLldfjFbFehHOHbWpBXWSGN3hoyTLLNL0-XQZ9Iahd29hhKOvWKwHxGzPpd6pz9enwNqeGqvnrRnohDF6YpklouWV8XG1v4uA_VT8VPog9ZOXsy_DlXxN4uw-FOAtdZ3CG4/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 5</a></li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LVUJaceeGR4AqGMqDH4ThVDwJPfi2HkjRoiNa0DTm9gYn3xo93To09c1KZePdUswDDI-vyUcBu8n1YD6qzRXmrb5FZpzg4c0gc_sUvU6ivkz8D9qCGNL89RdHS0M_kZtsSXcGTvAtm0/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCi5uM1nmrJwWeLFY7NO-W6ED4tY_FUlhqjaxHzDU1rhyphenhyphentXr4_1AHB9ygFjIYZXAx4aO45oOtVORaqMgCO6xWZg9ko4i1dQ2NHYp968MjkliCdAoRhY-tK4ze7eDlpRt8YnwWiu6jaDtI/s1600/bloggetrix-top3.png" /> PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUSV3vuax9N8J1AqCm9a-Q1isZRoBLQgYdVVg8bNZ6KiSZt3m4KnhxyrBwEuISkmkugmMAc-QdYd05UuVb4Il1pu222OJlbU1LzksS-wHcVgUQy7sF9HIhjHXcHzD01wzv_FLEil3lQ6U/s1600/bloggetrix-top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLPRh9Riy7fM0SnCTGTPQiRs_YFhgWUmzPhfJlUDY8YJnT3RlffIb0Ej7kTaoR6ZHkT6yUxKy6FCSmiFrk6p7d9ytSDxLGOFm3rIsESRTbN_hUXebZ-1Vc61Um6IDNgE4ETV4uaqADnc/s1600/bloggetrix-top5.png" /> XSLT</a></li>
            </ul>
الان عدل الكتابه في الازرار و اضف رابط الزر بدل "#"
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر 
و الاستراك في المدونه 
تحياتي..
مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

الثلاثاء، 15 يناير 2013

شريط قوائم موقع Apple حصرياً على مدونة ارشيف بلوجر


Add+Apple+Style+Menubar+For+Blogger
السلام عليكم ورحمة الله وبركاته.


 اهلا وسهلا بكم في موضوع جديد وهذه المرة عن القوائم العلويه
هي شئ مهم تساعد الزائر على الوصول للاقسام او الصفحات بشكل اسرع
ويوم اقدم لكم قائمه ذات طابع مميز فكما ترون في الصورة اعلاه هي قائمة
شبيه بقائمة موقع ابل!
طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 
فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
  ]]></b:skin>
7. قم بلصق الكود التالي فوقه مباشره: 
/* The CSS Code for the menu starts here www.blogger-archive.com */

#appleNav { margin:40px 0; list-style:none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
   
    text-shadow: 0 -1px 3px #202020;
    width:980px; height:34px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}
#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReuwJ_kmCsu6i5GYWyclNnKgcANFL4FqYEc2XHHTlJ5Z-XtVpyP89EzCBNGnZKnFS-5f0R9NKntT0meMWrfwKE0dXb8J5BuYq56W1A2h-tv817A6cWiuaSF6brF3VqugcA_EVJpwjS6bv/s1600/btrix_magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReuwJ_kmCsu6i5GYWyclNnKgcANFL4FqYEc2XHHTlJ5Z-XtVpyP89EzCBNGnZKnFS-5f0R9NKntT0meMWrfwKE0dXb8J5BuYq56W1A2h-tv817A6cWiuaSF6brF3VqugcA_EVJpwjS6bv/s1600/btrix_magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    background-color:#6E6E6E; /* Fallback */
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;    
    border-left:none;
}
#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}
#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    border-right:none;
    width:124px;
}
/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}
#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}​
7.الان اضغط حفظ.
8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"
9.الصق الكود التالي:

الشريط ذا الكتابه البيضاء:

  طبعا في الكود تم استبدال الكتابه الانجليزيه إلى العربيه
فيجب عليك تعديل الروابط. 
<nav>
<ul id="appleNav">
   <li><a href="http://www.bloggertrix.com/" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69WNyT22NBr0hY8XmFxlST5XcgIG0sLZC9O_pBTb8cRO43hmxGpR7HrQCikDK6yEUqMLDFvnbS_gfQ8CVdZU_kOZtzI9BoUmF7woZnzELTOuoG-tcWgjwMMHHgK1Xky8X5Es1OVM2MlDj/s1600/btrix_logo.png" alt="Apple Logo" /></a></li>
   <li><a href="#" title="المتجر">Store</a></li>
   <li><a href="#" title="الماك">Mac</a></li>
   <li><a href="#" title="الايبود">iPod</a></li>
   <li><a href="#" title="الايفون">iPhone</a></li>
   <li><a href="#" title="iPad">الايباد</a></li>
   <li><a href="#" title="الايتونز">iTunes</a></li>
   <li><a href="#" title="الدعم">Support</a></li>
   <li>
        <form>
        <input type="text" />
        </form>
   </li>
</ul>
</nav>​

عدل "#" برابط الزر و الكتابة الزرقاء بماتريد.

واضغط حفظ.


فس الاخير اي استفسار يمكنك و شعه في تعليق كما ارجو منك متابعة المدونة على تويتر 

و الاستراك في المدونة و جزاكم الله خيراً.

مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,
الاشتراك في: الرسائل (Atom)