اضافة اداة المواضيع ذات تسمية بشكل رائع

اهلا بكم احبائى الكرام. اضافة اداة المواضيع ذات تسمية بشكل رائع حيث يتم عرض التدوينات بشكل رائع حسب القسم الذى تريده ويعرض به اسم صاحب التدوينة او ناشرها وايضا تاريخ نشرها وبشكل وخطوط رائع

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

1- توجه الى لوحة التحكم الخاصة بالمدونة
2- توجه الى تحرير html من قالب
3- ابحث عن </head> واضف قبله هذة الاكواد

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<script src='https://cdn.rawgit.com/MidoOops/mahows/master/widget.js' type='text/javascript'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
/*------Widget1------*/
.widget_1 {width: 100%;float: right;}
.title-widget {width: 100%;}
.title-widget {margin-bottom: 10px;overflow: hidden;background-color: #F1F1F1;}
.title-category {float: right;padding: 9px 23px;margin: 0 1px 0 0;color: #FCFCFC;background: #3c6c96;font-weight: 100;margin-left: 11px;}
a.more {padding: 3px 20px;float: left;position: relative;left: 10px;background-color: #FEFEFE;color: #4F4F4F;border-radius: 2px;top: 6px;font-weight: 100;}
.more:before {content: &#39;\f053&#39;;margin-right: 4px;float: left;font-family: fontawesome;font-size: 10px;margin-top: 1px;}
a.more:hover {padding: 3px 30px;}
.widget_1 .wrapper {float: right;width: 48%;margin-left: 0.5%;margin-right: 0.5%;padding: 3px 3px 7px;margin-bottom: 4px;position: relative;overflow: hidden;}
.pic{display: none}
.widget_1 .label_thumb {width: 100px;height: 70px;border-radius: 2px;float: right;margin-left: 8px;}
.widget_1 strong {float: right;width: 69%;height: 42px;overflow: hidden;margin-right: 109px;margin-top: -68px;}
.widget_1 strong a {height: 22px;overflow: hidden;font: normal 14px Lobster,ge_dinar_tworegular;line-height: 22px;color: #31465A;display: inline-block;float: right;}
.widget_1 .auth {color: #999;font-weight: 400;font-size: 13px;position: absolute;bottom: 8px;width: 40%;left: -16px;font-family: Lobster,ge_dinar_tworegular;}
.widget_1 .auth:before {content: '\f007';font-family: fontawesome;color: #bbb;margin-left: 4px;float: right;position: relative;top: 5px;}
span.time {color: #999;font-weight: 400;font-size: 13px;position: absolute;bottom: 7px;width: 25%;font-family: Lobster,ge_dinar_tworegular;}
.time:before {content: '\f073';font-family: fontawesome;color: #bbb;margin-left: 4px;float: right;position: relative;top: 5px;}

  </style>
</b:if>

<div class='widget_1 wow bounceIn animated' style=' background: #fff;border: 1px solid #eee;margin-bottom: 10px;'>
<div class='title-widget'>
<div class='title-category'>  فوتوشوب</div>
<a class='more' href='/search/label/فوتوشوب'>

المزيد
</a>
</div>
<script type='text/javascript'>var numposts = 8;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script src='/feeds/posts/default/-/فوتوشوب?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>
</div>