أضافة أزرار المعاينة والتحميل يظهر في الشريط الجانبي

اذا قمت بنشر مواقع الويب التي تقوم على طرح العديد من قوالب بلوجر العربية وخصوصأ الأجنبية مثل ThemeXpose و soratemplates و Templateism وغيرها حيث سوف تشاهد ان هذا المواقع تستخدم أضافة أزرار المعاينة والتحميل في الشريط الجانبي(السيدبار).
حيث تحتوي هذا الأضافة على زر المعاينة والتحميل ومكان لوصف النموذج,لكي تفهم أكثر شاهد المعاينة التالية لهذا الأضافة.

• المعاينة

حيث تجد مكان خاص لزر المعاينة وزر خاص لتحميل القالب ووصف القالب لتوضيح أكثر عن القالب,حيث سوف يكون درسنا لهذا اليوم حول طريقة تركيب أضافة أزرار المعاينة والتحميل في الشريط الجانبي(السيدبار) لمدونات بلوجر.
تحتوي هذا الأضاضة على أثنين من الأزرار, الزر الأول يسمح للزائر برؤية عرض القالب وز أخر لتحميل القالب مع وصف القالب,
بالنسبة للأشخاص الذين يريدون تركيب هذا الأضافة على مواقعهم فيجب قراءه طريقة تركيب هذا الأضافة لمدونات بلوجر.
طريقة تركيب أضافة ازرار المعاينة والتحميل على الشريط الجانبي لمدونات بلوجر
الخطوة الأولى.
1-أنسخ الكود أدناه وضعه فوق الشفرة </head>

<script type = 'text / javascript'> 
/ * <! [CDATA [* / 
$ (document). ready (function () { 
$ ('a [name = "details"] "). before ($ (' # (#) تفاصيل الموضوع "). html ())؛ 
$ ('# theme-details'). html ('')؛ 
})؛ 
/ *]]> * / 
    </ script>

2-أنسخ الكود أدناه وضعه فوق الشفرة ]]></b:skin>

a.fa.fa-eye{background:#07ACEC;width:273px;height:38px;line-height:36px;color:white}
.fa-eye:before{content:"\f06e";padding-left:5px}
a.fa.fa-cloud-download{width:273px;height:38px;line-height:36px;color:white;background:#07ACEC}
.fa-cloud-download:before{content:"\f0ed";padding-left:5px}
.rio-ss{padding-top:15px;overflow:hidden}
.storelist{padding:12px 0;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}
a.fa.fa-eye:hover{background:#333}
a.fa.fa-cloud-download:hover{background:#333}
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}

3-أبحث عن رمز الشريط الجانبي الخاص بمدونتك,على سبيل المثال <div id = 'sidebar-wrapper'>  أوaside id = 'sidebar-wrapper' itemscope = '' itemtype = 'http: //schema.org/WPSideBar'>  ثم قم بوضع الكود أدناه تحت الرمز الشريط الجانبي الخاص بك كما في الصورة التالية.

<a name='details'/> 
<div class = 'clear' />

4-قم بعملية حفظ القالب.
الخطوة الثانية.
عند أنشاء منشورجديد ,انقر فوق HTML ثم أضف الكود أدناه وضعه بين الكلمات أو الجمل التي تريد عرضها في الشريط الجانبي.

<div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="fa fa-eye" href="#LINK-DEMO" target="_blank">معاينة القالب</a></center>
<div class="rio-ss idb">
</div>
</div>
<div id="store-style">
<center><a class="fa fa-cloud-download" href="#LINK-PURCHASE" target="_blank">تحميل القالب</a></center>
<div class="rio-ss">
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
<span class="storelist">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</span>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>

بعد الأنتهاء قم بنشر المقال وشوف تشاهد الأضافة قد ظهرت على الشريط الجانبي.