اضافة قائمة عمودية تفتح بالنقر على القسم وليس بتمرير الماوس

اضافة اليوم عبارة عن قائمة عمودية جميلة جدا لأقسام المدونة وفروعها, بحيث تفتح القائمة بعد النقر عليها وليس عند تمرير الماوس كما رأينا في القائمة المنسدلة .وعند النقر على قسم آخر من القائمة يغلق القسم الأول تلقائيا ويفتح القسم الثاني. وهكذا....

شكل القائمة العمودية بعد تركيبها

معيانة حية للقائمة العمودية

(انظر في الأعلى تجد القائمة,يمكنك تجريبها قبل تركيبها في مدونتك)

طريقة تركيب القائمة العمودية في مدونة بلوجر

الخطوة الأولى:  اضافة سكريب (Jquery Plugin) الى قالب المدونة .

1- من لوحة التحكم  >>>  قالب  >>>  تحرير html
2- ابحث بواسطة  ctrl+f عن </head>
3- اضف قبله مباشرة الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

الخطوة الثانية اضافة القائمة في أداة html/javascript

1- من لوحة التحكم  >>>  تخطيط >>>  اضافة اداة html/javascript
2- انسخ الكود التالي في الاداة :

<style>
ul.container{
width:275px;margin:0 auto;
padding:0px;
}
li.menu{
padding:5px 0;
width:100%;
}
li.button a{
display:block;
font-family: Arial, sans-serif,Helvetica;
font-size:12px;
overflow:hidden;
padding:0px 0px 5px 0;
position:relative;
width:100%;
text-transform:capitalize;
}
li.button a:hover{
text-decoration:none!important;
}
li.button a span{
right:0px;
top:0px;
position:absolute;
color:#ccc;
display:block;
}
.dropdown1{
display:none;
padding-top:5px;
width:100%;
}
.dropdown1 li{
border:1px solid #7E7E7E;
color:#CCCCCC;
margin:5px 0;
padding:4px 10px;
}
.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown1 li a:hover {
text-decoration:none;
}
</style>

<script>

$(document).ready(function(){

    $.easing.def = "easeOutBounce";

    $('li.button a').click(function(e){

        var dropDown = $(this).parent().next();

        $('.dropdown1').not(dropDown).slideUp('slow');
        dropDown.stop(false,true).slideToggle('slow');
       

        e.preventDefault();
    })

});
</script>

<ul class="container">
      <li class="menu">
           <ul>
            <li class="button"><a href="#">Web Hosting Guide <span>▼</span></a></li>       
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Why choose HostGator?</a></li>
                    <li>2. <a href="#">Why we hosted our blogs on HostGator?</a></li>
                    <li>3. <a href="#">HostGator Best Hosting Plans</a></li>
                    <li>5. <a href="#">10 Reasons why buy Domain</a></li>
                </ul>
            </li>
          </ul>
       </li>

<li class="menu">
          <ul>
            <li class="button"><a href="#">Google AuthorRank <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">What is Google AuthorRank?</a></li>
                    <li>2. <a href="#">Difference: AuthorRank and PageRank</a></li>
                    <li>3. <a href="#">10 Tips to improve AuthorRank</a></li>
             </ul>
            </li>
          </ul>
      </li>

<li class="menu">
          <ul>
            <li class="button"><a href="#">Do you Sell Links?<span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Google's Disavow Tool</a></li>
                    <li>2. <a href="#">Penalty on Link Sellers</a></li>
                    <li>3. <a href="#">How Google Identifies Paid links?</a></li>
             </ul>
            </li>
        </ul>
       </li>

<li class="menu">
          <ul>
            <li class="button"><a href="#">Make Money Writing Ebooks <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Introduction To Ebook Marketing</a></li>
                    <li>2. <a href="#">Planning Phase</a></li>
                    <li>3. <a href="#">Building Phase</a></li>
                    <li>4. <a href="#">Developing Phase</a></li>
                    <li>5. <a href="#">Publishing Phase</a></li>        
             </ul>
            </li>
          </ul>
       </li>

<li class="menu">
         <ul>
            <li class="button"><a href="#">Blogger SEO pack 2012 <span>▼</span></a></li>
            <li class="dropdown1" style="display: none;">
                <ul>
                    <li>1. <a href="#">Multiple Sitemap Submission To Google</a></li>
                    <li>2. <a href="#">Submit sitemap to Bing and Yahoo</a></li>
                    <li>3. <a href="#">Search Preferences Settings</a></li>
                    <li>4. <a href="#">Reduce Crawl errors</a></li>
                    <li>5. <a href="#">13 killer SEO tactics</a></li>
                </ul>
            </li>
          </ul>
      </li>

<li class="menu">
          <ul>
            <li class="button"><a href="#">How to become a Pro Blogger? <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">What skills are required?</a></li>
                    <li>2. <a href="#">The three learning stages</a></li>
                    <li>3. <a href="#">Why your blog makes no money?</a></li>
                    <li>4. <a href="#">Why learn web development?</a></li>
                </ul>
            </li>
          </ul>
      </li>

<li class="menu">
           <ul>
            <li class="button"><a href="#">Create and Design PDF<span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Create PDF File in 4 simple ways!</a></li>
                    <li>2. <a href="#">Merge Documents in PDF Format</a></li>
                    <li>3. <a href="#">Create Hot PDF Cover Pages</a></li>
                    <li>4. <a href="#">Simple Ways To Edit PDF</a></li>
             </ul>
            </li>
          </ul>
      </li>

<li class="menu">
        <ul>
           <li class="button"><a href="#">Google Penguin and Panda<span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">What are these Google Penalties?</a></li>
                    <li>2. <a href="#">10 SEO strategies to Stay Protected</a></li>
                    <li>3. <a href="#">How to recover from Google Penguin?</a></li>
                    <li>4. <a href="#">When is Next Penguin Update?</a></li>
                    <li>5. <a href="#">Identify SEO over Optimizedblogs</a></li>
                    <li>6. <a href="#">What's ideal word count Limit?</a></li>
                </ul>
            </li>
          </ul>
       </li>


<li class="menu">
          <ul>
            <li class="button"><a href="#">Facebook Comments Plugin <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Install Facebook Comments on Blogger</a></li>
                    <li>2. <a href="#">Show Facebook Comments inside Tabs</a></li>
                    <li>3. <a href="#">Display Facebook Comments Count</a></li>
                </ul>
            </li>

          </ul>
       </li>

<li class="menu">
         <ul>
            <li class="button"><a href="#">Domain Email Settings (Google Apps) <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">Create Free Email address For your domain</a></li>
                    <li>2. <a href="#">Google Short Links - Create Shortcuts to URLs</a></li>
                    <li>3. <a href="#">Create short URL For Email address</a></li>
                    <li>4. <a href="#">Connect your Website Emaill address To Gmail</a></li>
                </ul>
            </li>
         </ul>
      </li>

<li class="menu">
          <ul>
            <li class="button"><a href="#">Report Copyrights Violation <span>▼</span></a></li>
            <li class="dropdown1" style="">
                <ul>
                    <li>1. <a href="#">How to write a Warning letter?</a></li>
                    <li>2. <a href="#">Report Violation To Blogger</a></li>
                    <li>3. <a href="#">Report violation to Adsense</a></li>
                    <li>4. <a href="#">Report violation to YouTube</a></li>
                    <li>5. <a href="#">Report Paid Links To Google</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

3- احفظ الأداة .

طريقة تعديل القائمة العمودية لتتناسب مع مدونتك

1- قم بتغيير العلامة باللون الاخضر (#) برابط الموضوع .

2- قم بتغيير كل ما باللون الازرق بعنوان الموضوع الفرعي .

3- قم بتغيير ما باللون الاحمر بعنوان القسم الرئيسي في القائمة .

4- قم بتغيير ما باللون البرتقالي لتغيير عرض القائمة العمودية لتتناسب مع عرض مدونتك .

مع تحيات حمزة رمزي..........

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:

http://rydnet.blogspot.com/2014/02/Vertical-list-for-blobber.html

Paste This HTML Code On Your Page:

<a href="http://rydnet.blogspot.com/2014/02/Vertical-list-for-blobber.html">اضافة قائمة عمودية تفتح بالنقر على القسم وليس بتمرير الماوس</a>

رابط الاضافة