أفضل وأنجح طريقة لإضافة اداة متعدد التبيويبات بتدوينة بلوجر

<

السلام عليكم ورحمة الله وبركاته في تدوينة جديدة وتدوينة اليوم داخل نطاق بلوجر ربما شخص ما يسألني لما اقوم بالتدوين بمجال بلوجر هذه الايام اجابه هذا السؤال لان العديد من الاشخاص يريدون بعض من الادوات الهامة لتكون شكل مدوناتهم و تدويناتهم أفضل ننتقل الي الموضوع حتي لا أطيل عليكم

ما هي الإضافة

هي عبارة عن ثلاث او اربع مستطيلات بجانب بعضهم كلما ضغطنا علي مستطيل يتغير الموضوع بالأسفل شاهد المثال الحي للإضافة لتفهم بشكل اسهل

 كما يوجد العديد من الاضافات المشابها لها بجوجل ولكن هذه الأفضل

صورة الإضافة

مثال حي للإضافة

نهنئ الامة الاسلامية بحلول شهر رمضان المبارك {شَهْرُ رَمَضَانَ الَّذِيَ أُنزِلَ فِيهِ الْقُرْآنُ هُدًى لِّلنَّاسِ وَبَيِّنَاتٍ مِّنَ الْهُدَى وَالْفُرْقَانِ فَمَن شَهِدَ مِنكُمُ الشَّهْرَ فَلْيَصُمْهُ وَمَن كَانَ مَرِيضًا أَوْ عَلَى سَفَرٍ فَعِدَّةٌ مِّنْ أَيَّامٍ أُخَرَ يُرِيدُ اللَّهُ بِكُمُ الْيُسْرَ وَلاَ يُرِيدُ بِكُمُ الْعُسْرَ} نسأل الله أن يعيننا على صيامه وقيامه

مدونة Alshabh 4 Download تتمنى لكم عيد اضحى مبارك وكل عام وانتم طيبون

كاتب الموضوع: Seaf EL Dinمدون عربي مهتم بكل ما هو جديد في عالم الانترنت أحب التدوين ومشاركة أفكاري مع الأخرين كما أن الهدف من هذه المدونة الشرح والتبسيط للافادة فــأرجو منكم المتابعة

كما يمكنك معاينتها في هذه التدوينة لتري شكلها أفضل

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

بعدما شاهدنا مثال حي للإضافة يمكنك الأن تركيبها بمدونتك

1.قم بالذهاب الي لوحة التحكم
2.قم بالانتقال الي قسم قالب
3.اضغط علي تحرير HTML

الخطوة الأولي

 قم بالبحث عن الكود التالى
 ]]></b:skin>

وأضف الكود التالي فوقه 

.simpleTab .tab-wrapper li{display:inline-block;margin:0;padding:0;margin-left: 1px;margin-bottom: 1px;}
.simpleTab .tab-wrapper li a{background-color:#333;color:#FFF;padding:10px 25px;display:block}
.simpleTab .tab-wrapper li:before{content:'';display:none}
.simpleTab{margin:10px 0}
.simpleTab .tab-content{padding:15px;background-color:#f2f2f2}
.simpleTab .tab-wrapper li a.activeTab{background-color:$(main.color);color:#fff}
.simpleTab *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.simpleTab.side .tab-wrapper{float:left;width:20%;margin:0!important;padding:0!important}
.simpleTab .tab-wrapper{padding:0!important;margin:0!important}
.simpleTab.side .tab-content{float: left;width: 78%;margin-right: 10px;}
.simpleTab.side .tab-wrapper li{width:100%;display:block;text-align:center;margin-bottom: 1px;}
.simpleTab.side .tab-wrapper li a{padding:15px 0}
.simpleTab.side{overflow:hidden}
.simpleTab.side .tab-wrapper{float:right}
.simpleTab.side .tab-content{float:right}

الخطوة الثانية

قم بالبحث عن

 </body>

وأضف الكود التالي فوقه 

<script type='text/javascript'>
//<![CDATA[
// Plugin: SelectNav.js ~ url: https://github.com/lukaszfiszer/selectnav.js
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"→",u=n.label||"- Menu -",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}(); 
/**
* Simple Tab JQuery Plugin by Taufik Nurrohman
* With some help: http://css-tricks.com/forums/discussion/18008/jquery-plugin-patterns-that-can-be-applied-for-multiple-elements
* On: 9 June 2012
* https://plus.google.com/108949996304093815163/about
*/
(function(e){e.fn.simpleTab=function(t){t=jQuery.extend({active:1,fx:null,showSpeed:400,hideSpeed:400,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},t);return this.each(function(){var n=e(this),r=n.children("[data-tab]"),i=t.active-1;n.addClass("simpleTab").prepend('<ul class="tab-wrapper"></ul>');r.addClass("tab-content").each(function(){e(this).hide();n.find(".tab-wrapper").append('<li><a href="#">'+e(this).data("tab")+"</a></li>")}).eq(i).show();n.find(".tab-wrapper a").on("click",function(){var i=e(this).parent().index();e(this).closest(".tab-wrapper").find(".activeTab").removeClass("activeTab");e(this).addClass("activeTab");if(t.fx=="slide"){if(r.eq(i).is(":hidden")){r.slideUp(t.hideSpeed,t.hideEasing,function(){t.hide.call(n)}).eq(i).slideDown(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else if(t.fx=="fade"){if(r.eq(i).is(":hidden")){r.hide().eq(i).fadeIn(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else if(t.fx=="fancyslide"){if(r.eq(i).is(":hidden")){r.slideUp(t.hideSpeed,t.hideEasing,function(){t.hide.call(n)}).eq(i).delay(t.hideSpeed).slideDown(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else{if(r.eq(i).is(":hidden")){r.hide().eq(i).show()}}t.change.call(n);return false}).eq(i).addClass("activeTab")})}})(jQuery)
//]]>
</script>
<script>
//<![CDATA[
$(function() {
$('#tab1').simpleTab();
$('#tab2').simpleTab({active:4});
$('#tab3').simpleTab({fx:"fade",active:3});
$('#tab4').simpleTab({fx:"fancyslide"});
$(".post-tabs").simpleTab({active:1,fx:"fade",showSpeed:800,hideSpeed:800})}
);
$(document).ready(function () {
$(".com-tab").simpleTab({
active: 1,
fx: "fade",
showSpeed: 400,
hideSpeed: 400
});
$('.tab-blogger').append($('#comments'));
$(".com-tab.simpleTab .tab-wrapper").wrap("<div class='com-tab-title'/>");
$('.com-tab-title').prepend('<h3><span>Post A Comment</h3></span>');
});
//]]>
</script>

أنت الأن قمت بتركيب الإضافة بالفعل بقي خطوة أخيرة وهي تركيبها
اثناء كتابتك التدوينة قم بالدخول الي HTML بدلا من تأليف وضع الكود الذي يناسبك 

صورة

الكود الخاص بها

<div class='post-tabs side'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>

قم بتغيير

Your Tittle Here : بالعنوان الظاهر بالتبويب

Your Text Here : بالكلام أو الصور أو الفيديو الذي تريده

صورة

الكود الخاص بها

 <div class='post-tabs'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>

قم بتغيير

Your Tittle Here : بالعنوان الظاهر بالتبويب

Your Text Here : بالكلام أو الصور أو الفيديو الذي تريده

الخاتمة

وهكذا انتهت تدويتنا لهذا اليوم ارجو ان تكون سهلة وبسيطة وان تكونوا استفدتم وقمت بنشرها تلبيه لطلب احدكم فاذا اردتم اي شئ قوموا بوضعه بتعليق لانفذه لكم و السلام عليكم ورحمة الله وبركاته

<

8:10 ص