من شاهد اعمالى
السبت، 25 أبريل 2015
اضافة اليوم عبارة عن قائمة عمودية جميلة جدا لأقسام المدونة وفروعها, بحيث تفتح القائمة بعد النقر عليها وليس عند تمرير الماوس كما رأينا في القائمة المنسدلة .وعند النقر على قسم آخر من القائمة يغلق القسم الأول تلقائيا ويفتح القسم الثاني. وهكذا....
شكل القائمة العمودية بعد تركيبها
طريقة تركيب القائمة العمودية في مدونة بلوجر
الخطوة الأولى: اضافة سكريب (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!
}
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).
dropDown.stop(false,true).
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- قم بتغيير ما باللون البرتقالي لتغيير عرض القائمة العمودية لتتناسب مع عرض مدونتك .
0 التعليقات
الاشتراك في:
تعليقات الرسالة (Atom)
المشاركات الشائعة
-
بسم الله و الحمد لله و الصلاة و السلام على المصطفى الأمين نبينا محمد العدنان و على الآل و الصحب أجمعين. السلام عليكم و رحمة الله. بعد أن ... -
السلام عليكم ورحمة الله وبركاته أهلآ بكل متابعى و زوار مدونة الغالى الكرام سنتعرف اليوم بأذن الله على كود يبحث عنه الكثير من المدونين و... -
طريقة التحكم في حجم الهيدر فى قوالب بلوجر شرح كامل header قسم إضافات بلوجر كل التدوينات السلام عليكم ورحمة الله تعالى و... -
سكربت شريط الاخبار احصل علي شريط اخبار لموقعك مجانا. يمكنك اختيار من اشرطة الاخبار التالية. ويمكنك اضافة كود شريط الاخبار في ...
-
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين إذا كنت ترغب فى أن تجعل مد... -
أسهل طريقة لإضافة Slider Show للمدونة عمل احترافي بسم الله الرحمان الرحيم من أجمل الاضافات التي تعطي احترافية لأي مدونة هي ...
-
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين سأوضح كيفية تركيبها لصفحات الفيس بوك ... -
نقدم لكم هذه الإضافة الرائعة، التي ستضيف على شعارك لمعانا يجعله أكثر إحترافية بدون الحاجة إلى العمل عليه بالفوطوشوب وتحميل صورة صع... -
اهلا بكم من جديد اليوم نتطرق لموضوع فى غاية الاهمية. وهو أفضل قوالب بلوجر التى يمكنك ان تبحث عنها على الانترنت اقدم لكم اليوم نخبة... -
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين التطبيق يتيح تركيب العديد من أ...