اضف قائمة ال Mac الى مدونتك بلوجر

السلام عليكم ، موضوعنا اليوم يهم اصحاب مدونات بلوجر. حيث انه يمكنك اضافة قائمة تشبه شبها شديدا قائمة الماك التي نعرفها في حواسيب آبل !

المعاينة

و بدون اطالة نمر الى طريقة التركيب :

1- انسخ الكود التالي و ضعه قبل وسم </head> (لا تنس انه يمكنك البحث عن </head> بالضغط على Ctrl + F )

<style>
/*-------------------- font --------------------*/
@font-face {
font-family: &quot;FLATF&quot;;
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format(&#39;embedded-opentype&#39;),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format(&#39;woff&#39;),
    url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format(&#39;truetype&#39;);}

div.cap {
 display: block;
 height: 100px; 
 width: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnVUwFtwRzJZc4jPFspWuXsrj1ScToXCSaHP7lL8cwCPwyICTVpWTdo05i5MhJLaJDWIUAtGNGXbmjPdpvwAuvakZuN9x7EoZCQy-R7e13A2wsjZPdogD2-jBmSX7YzXyZmbvBnDVDD4/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: right bottom;
 position: absolute; 
 top: 0px;
 right: 0px; }
  
ul.mbl-dock { 
display: inline-block;
    height: 130px;
    padding: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnVUwFtwRzJZc4jPFspWuXsrj1ScToXCSaHP7lL8cwCPwyICTVpWTdo05i5MhJLaJDWIUAtGNGXbmjPdpvwAuvakZuN9x7EoZCQy-R7e13A2wsjZPdogD2-jBmSX7YzXyZmbvBnDVDD4/s1600/dock-background-left.png) no-repeat center;
    overflow: hidden;
    margin: 0;
    width: 700px;
    background-size: 100%; }
  
ul.mbl-dock li { 
    display: inline-block;
    position: relative;
    width: 9%;
    height: 50px;
    margin: 25px 0 0px 0;
    -webkit-transition: 0.15s linear;
    text-align: center;
    float: none;
    border: 0; }
  
ul.mbl-dock li a {
 display: block;
 height: 50px;
 padding: 0 1px; 
 -webkit-transition: 0.15s linear;

 margin: 0;
}
  
ul.mbl-dock li a img { width: 48px; }
  
ul.mbl-dock li:hover { 
 margin-left: 9px; margin-right: 9px;}
  
ul.mbl-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.5);}
  
ul.mbl-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;}
  
ul.mbl-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.25);}
ul.mbl-dock li span { 
     background: rgba(51, 51, 51, 0.67);
    position: absolute;
    top: 55px;
    margin: 0;
    height: 20px;
    width: 50px;
    display: none;
    font-family: FLATF;
    font-size: 10px;
    text-align: center;
    font-weight: 100;
    line-height: normal;
    border: 1px solid #fff;
    padding: 0px 5px;
    -webkit-border-radius: 6px;
    color: #fff;}
  
  
ul.mbl-dock li:hover span { display: block; }
  
div#mbldockwraps { 
       padding: 0px 0;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    width: 100%;
    line-height: 1;
    z-index: 100; }
  
div#macWrap { 
        display: inline-block;
    position: relative;
    line-height: 0;}
</style>

<script src='https://mybloggerlab.googlecode.com/files/jquery.js' type='text/javascript'/>
 <script src='https://mybloggerlab.googlecode.com/files/jquery.tipsy.js' type='text/javascript'/>
 <script type='text/javascript'>
  // Place all Javascript code here
  $(document).ready(function(){
   $(&quot;a[rel=tipsy]&quot;).tipsy({fade: false, gravity: &quot;s&quot;});
    $(&quot;ul.mbl-dock li&quot;).each(function (type) {
        $(this).hover(function () {
          $(this).prev(&quot;li&quot;).addClass(&quot;nearby&quot;);
          $(this).next(&quot;li&quot;).addClass(&quot;nearby&quot;);
        },
        function () {
          $(this).prev(&quot;li&quot;).removeClass(&quot;nearby&quot;);
          $(this).next(&quot;li&quot;).removeClass(&quot;nearby&quot;);
        });
      });
  });

 </script>

2- هذا هو الكود الخاص بالقائمة و اختيار مكان وضعها يرجع لك ، مثلا يمكنك استبداله بالنافبار ، انسخه و ضعه في المكان الذي تريد في القالب !

<style>
<center>
<div id='mbldockwraps'>
<div id='macWrap'>  
<ul class='mbl-dock'>
<li class='active'>
<span>المهملات</span>
  <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/128/appicns_Trash_Full.png'/></a>
   </li>
   <li>

<span>ملحوظة</span>
   <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Stickies.png'/></a>
 </li>
 <li>
<span>مجلد</span>
 <a href='###l'><img src='https://cdn2.iconfinder.com/data/icons/appicns/513/472823-appicns_folder.png'/></a>
 </li>
 <li>
     
<span>الاوامر</span>
 <a href='###'><img src='https://cdn2.iconfinder.com/data/icons/appicns/513/472771-appicns_Terminal.png'/></a>
 </li>
 <li>
     
<span>سافاري</span>
 <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Safari.png'/></a>
 </li>
 <li>
<span>فايرفوكس</span>
 <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Firefox.png'/></a>
 </li>
 <li>
<span>كروم</span>
 <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png'/></a>
 </li>
 <li>
<span>برنامج 2</span>
 <a href='###'><img src='https://cdn2.iconfinder.com/data/icons/appicns/513/472785-appicns_Word.png'/></a>
 </li>
 <li>
 <span>برنامج 1</span>
 <a href='###'><img src='https://cdn2.iconfinder.com/data/icons/appicns/513/472761-appicns_Excel.png'/></a>
 </li>
 <li>
 <span>الحاسوب</span>
 <a href='###'><img src='https://cdn1.iconfinder.com/data/icons/appicns/128/appicns_Finder.png'/></a>
 </li>
 </ul>
 </div>
 </div>
 </center>

لا تنس :
- تغيير ### بالروابط الخارجية الخاصة بك
- اذا اردت تغيير الصور فعليك فقط تغيير الروابط الحمراء بروابط صورك