كنا في درس سابق شرحنا ' طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية ' و كان هو الإصدار الاول للقائمة المبثقة لمدونات بلوجر التي تضفي شكل جميل على المدونة و تعطيك شعور لك و للزائر بان الموقع إحترافي و يحوي عديد الأشياء الرهيبة بداخله .
قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
- المعاينة : من هنا
طريقة التركيب :
قم بتحري القالب ثم ctrl+f وابحث عن وسم ]]></b:skin> و ضع الكود التالي قبله ( فوقه ) :
#sidebar2 {float: right;overflow: hidden;}
#sidebar2 h2 {color: #7986CB;position: relative;display: block;margin: 10px 0;font-size: 17px;padding: 8px 0;height: 50px;line-height: 25px;font-weight: 500;letter-spacing: 1px;text-align: right!important;border-bottom: 2px solid #ccc;}
#sidebar2 h2::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #7986CB;bottom: -2px;left: initial!important;right: 0;}
#sidebar2 h2:after {content: "\f00c";display: block;background-color: #7986CB;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
#sidebar2 .widget {margin-bottom: 20px;background-color: #fff;padding: 10px 15px 10px;width: 315px;float: right;}
.center-copy {float: right;width: 100%;text-align: center;padding-bottom: 20px;font-size: 16px;font-weight: 500;}
.center-copy a {color: #7986CB;}
.t-menu2{margin:0;padding:0;width: 100%;padding-top: 15px;}
.t-menu2 a {color: #000!important;float: right;font-size: 16px!important;font-weight: 500;width: 100%;padding-right: 20px!important;height: 50px;line-height: 45px;}
.t-menu2 a i {margin-left: 10px;}
.t-menu2 a:hover {color: #7986cb!important;;}
.openNavw {
position: relative;
z-index: 9999;
height: 35px;
display: block;
float: left;
line-height: 37px;
font-size: 20px;
color: #fff;
background-color: #7B88CC;
margin-top: 0;
width: 35px;
padding: 0 8px;
margin-right: 3px;
}
.sidenav {height: 100%;width: 0;position: fixed;top: 0;right: 0;background-color: #FFF;overflow-x: hidden;transition: 0.5s;z-index: 99999999;padding-top: 65px;}
.sidenav .closebtn {position: absolute;top: 0;left: 0;font-size: 23px;}
.closebtn {position: relative;z-index: 9999;height: 65px;display: block;float: left;line-height: 55px;color: #fff;background-color: #7B88CC;width: 100%;padding: 0 20px 0 10px;}
.closebtn i {margin-left: 10px;}
#sidebar2 .widget-content ul li {color: #000;font-size: 18px;padding: 10px 0;font-weight: 500;}
#sidebar2 .widget-content ul li a:hover {color: #7986cb;}
بعدها إبحث عن وسم </body> و ضع الكود التالي فوقه تماما
<script type='text/javascript'>
/*<![CDATA[*/
// mySidenav
function openNav() {document.getElementById("mySidenav").style.width = "350px";}
function closeNav() {document.getElementById("mySidenav").style.width = "0";}
/*]]>*/
</script>
في المرحلة الثالثة ابحث عن <body> او <body و ضع الكود التالي فوقه
<div class='sidenav' id='mySidenav'>
<b:section id='sidebar2'>
<b:widget id='LinkList2' locked='false' title='الأقسام' type='LinkList'>
<b:widget-settings>
<b:widget-setting name='link-3'>http://</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>جديد التقنية</b:widget-setting>
<b:widget-setting name='link-1'>http://</b:widget-setting>
<b:widget-setting name='text-0'>حلقات حصرية</b:widget-setting>
<b:widget-setting name='link-2'>http://</b:widget-setting>
<b:widget-setting name='text-3'>شروحات</b:widget-setting>
<b:widget-setting name='link-0'>http://</b:widget-setting>
<b:widget-setting name='text-2'>الربح من الانترنت</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='LinkList1' locked='false' title='صفحات المدونة' type='LinkList'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>خدمات</b:widget-setting>
<b:widget-setting name='link-1'>http://</b:widget-setting>
<b:widget-setting name='text-0'>الابلاغ عن رابط</b:widget-setting>
<b:widget-setting name='link-0'>http://</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='تابع المدونة على الفيسوك' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'><div class="fb-page" data-href="https://www.facebook.com/amnitech8" data-width="400" data-height="245" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='PopularPosts2' locked='false' title='المشاركات الشائعة' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>5</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i aria-hidden='true' class='fa fa-times'/> إغلاق القائمة </a>
<div class='center-copy'>
جميع الحقوق محفوظة لـ
<a expr:href='data:blog.homepageUrl'> اَمني </a>
</div>
</div>
المرحلة الاخيرة قم بوضع الكود التالي في المكان الذي يناسبك في القائمة العلوية او اي مكان ترديه من القالب
<a><span class='openNavw' onclick='openNav()' title='قائمة جانبية'><i aria-hidden='true' class='fa fa-bars'/></span></a>
الاَن يمكنك الذهاب الى التخطيط بعد حفظ القالب طبعا و ستجد اربع نوافذ جديدة لوضع تخصيص القائمة بشكل مبسط جدا .
Post a Comment