-->

تقنية ، إنترنت ، برامج ، دينية ، إقتصادية ، إجتماعية ، تعليمية ، رياضية

سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ... سُبْحَانَ اللَّهِ العَظَيم

الأربعاء، 15 أكتوبر 2014

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

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


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


طريقة التركيب
(مع ضرورة أخذ نسخة إحتياطية من القالب قبل عمل أي تغير )

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

1- توجه للوحة التحكم الرئيسية لمدونتك

2- تصميم

3-تحريرhtml

4- توسيع للقالب


أما بالنسبة لمستخدمي لوحة التحكم الجديدة

1 -لوحة التحكم الرئيسية بمدونتك

2-أختار من القائمة (قالب)

3- تحريرhtml

4- متابعة

5-

شرح تفصيلي لطريقة التركيب  بالنسبة لمحرر بلوجر  الحديث

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:





 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  




3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

</head>

4 - بعد أن نجد الكود السابق  نضيف قبله مباشرة  الكود التالي  :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
5- نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

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

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

1- إذهب إلى لوحة التحكم .
2- نضغط على كلمة تخطيط من القائمة الجانبية  ثم يتم الضغط على إضافة أداء جديدة  ثم نختار  الأداة HTML/Java Script
وذلك كما هو موضح بالصورة التالية :


3 - ثم نضيف الكود التالي داخل الأداة :

<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>

4- بعد ذلك يتم حفظ الأداة حيث سوف تظهر إن شاء الله في المكان الذي تم إختياره .

مع ملاحظة ضرورة تعديل القائمة العمودية لتتناسب مع مدونتك على النحو الآتي :

1- قم بتغيير العلامة باللون الاخضر (#) برابط الموضوع .
2- قم بتغيير كل ما باللون الازرق بعنوان الموضوع الفرعي .
3- قم بتغيير ما باللون الاحمر بعنوان القسم الرئيسي في القائمة .
4- قم بتغيير ما باللون البرتقالي لتغيير عرض القائمة العمودية لتتناسب مع عرض مدونتك .


                                        جزى الله خيرا كل من ساهم فيه

ليست هناك تعليقات:

إرسال تعليق