 |
| تبويبات احترافية و أنيقة داخل التدوينات |
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته
أهلا و سهلا بكم زوار و متابعى مدونة سمارت المعلوماتية فى هذه التدوينة أحبابى فى الله أقدم اضافة رائعة جدا من اضافات بلوجر حيث تقوم هذه الاضافة باختصار طول الصفحة اى تقليل ارتفاع الموضوع داخل صفحة التدوينة اذا كانت التدوينة كبيرة حتى لا يمل الزائر منها كما أنها تعطى لمحة و لمسة و انطباع جمالى للتدوينة حيث أنه كما علمنا سابقا أنه كلما كانت المدونة جميلة و رائعة كلما كان عدد الزوار أكثر لما تعطيه المدونة لدى الزائر من انطباع جميل عن المدونة.
لذلك أحبابى فى الله أقدم لكم اضافة رائعة جدا كما ترون فى الصورة بالأعلى و تمكنك هذه الاضافة من عمل تبويبات داخل التدوينة و هذه التبويبات من الممكن أن تكون رأسية أو أفقية و ذلك الأمر سوف تتحكم به طبقا لما تريد و يتحتم عليك فعله و تكتب بها ما تريد مثلا على ذلك عند اضافة أكثر من اضافة أو أكثر من كود داخل التدوينة الواحدة كل ما عليك هو أن تقوم بعمل هذه التبويبات لكل كود أو اضافة مع كتابة عنوان التبويب باسم الاضافة حتى تسهل على الزائر و تجذبه الى مدونتك مرة أخرى
لن أطيل عليكم أحبابى فى الله لذلك اترككم مع الاضافة
معاينة الاضافة
التبويبات الأفقية
Your Text Here
Your Text Here
Your Text Here
التبويبات الرأسية
Your Text Here
Your Text Here
Your Text Here
طريقة تركيب الاضافة فى قالب بلوجر الخاص بك
أولا قم بالذهاب الى قالب و من ثم تحرير 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>
و يتبقى لنا الخطوة الاخيرة و هى
أولا عند عمل تبويبات أفقية استخدم الكود التالى
<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>
أولا عند عمل تبويبات رأسية استخدم الكود التالى
<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>
إرسال تعليق