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

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

طريقة التركيب

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

الخطوة الأولى: اضافة سكريب (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>

$(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">

<ul>

<li class="button"><a href="#">Web Hosting Guide <span>▼</span></a></li>

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

<ul>

<li class="button"><a href="#">Google AuthorRank <span>▼</span></a></li>

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

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

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

<ul>

<li class="button"><a href="#">Blogger SEO pack 2012 <span>▼</span></a></li>

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

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

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

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

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

<ul>

<li class="button"><a href="#">Domain Email Settings (Google Apps) <span>▼</span></a></li>

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

<ul>

<li class="button"><a href="#">Report Copyrights Violation <span>▼</span></a></li>

<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- قم بتغيير ما باللون البرتقالي لتغيير عرض القائمة العمودية لتتناسب مع عرض مدونتك .

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

آخر الأخبار

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







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

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

التعليقات

آخر الأخبار

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







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

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

شاهد أيضاً

التعليقات