العديد من القوالب تكون بغير تعريف كاتب واضافات اخرى للموقع لذا نحاول ان نجمع تلك الاضافات لمساعده المواقع والمدونين والارتقاء بهم لذا فى هذا الوضوع سوف اتطرق معكم فيه عن اضافه من الاضافات المميزه للمدونه
وهى اضافه تعريف الكاتب واضافه المشاهدات واضافه الاقسام واضافه التاريخ واضافه التعليقات وكل هذا فى اضافه واحده لمدونه بلوجر
وسأتطرق معكم الى طريقه تركيب تلك الاضافه بسهوله كى لايواجه المدونه مشكله عند تركيب اضافه بلوجر
- اول شى ستقوم بالدخول الى القالب وعمل تحرير
- بعدها سوف تبحث عن </head>
- بعدها ستضع ذالك الكود فوقه مباشره
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
@font-face{font-family:'Arabic';font-weight:400,700;font-style:normal;src:url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.eot);src:url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.eot?#iefix) format("embedded-opentype"),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.woff) format("woff"),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.ttf) format("truetype"),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.svg#web) format("svg")}
.post-by-ar1web li:last-child { border-bottom: none; } .post_byfix { float: right; background: #FFFFFF; Color:#333333; width: 100%; overflow: hidden; clear: both; margin-bottom: 10px; } .post-img {display: block; float: right; padding: 4px!important; margin-right: 2px!important; margin-top: 5px!important; overflow: hidden; width: 34%;} .post-img img {position: relative;width: 220px; height: 190px;} .post-by-ar1web {overflow: auto; text-decoration: none; background: #fff; margin: 20px 0; border: 1px solid #D0CFCF; box-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,0.10);} .post-by-ar1web ul { margin: 0; padding: 0; margin-top: 9px; } .post-by-ar1web li { list-style: none; padding: 5px 0; border-bottom: 1px dashed rgba(233, 234, 237, 0.9); overflow: auto;} b.fa.fa-user,b.fa.fa-tag,b.fa.fa-clock-o,b.fa.fa-comments-o,b.fa.fa-eye{ background: #E9EAED; padding: 4px 0; margin-right: 5px; color: #969DAE; width: 22px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: 0px 1px #fff; }
a.onwan_ar1web { font-size: 18px!important; line-height: 30px; color: #2A2A2A!important; text-overflow: ellipsis; font-family: Droid Arabic Naskh,sans-serif; } #post-info-ar1web a,.ar1webviewers,#post-info-ar1web { color: #868585; font: normal normal 13px 'Arabic',verdana,tahoma; } .lb-style-custom .lb-like:hover:after,.lb-style-custom .lb-dislike:hover:after { content: 'موضوع رائع'; color: #383637; padding-right: 10px; position: relative; font: normal normal 12px 'Arabic',verdana,tahoma; }
.lb-style-custom .lb-dislike:hover:after { content: 'لا بأس به'; } span.ar1webmochahda { margin-right: 3px; }i.fa.fa-circle-o { font-size: 6px; color: #EC2828; }
.ar1webviewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0r38V-YU9h-AnNtW9usHrL2EKEbAk8zXEUZ3o7qQNAVexxo0G_IYv6JcNv5hvv8tfi0QGW1JDYBwnmkL2cytWaN-_wpL051-NM0bv-ugnTUsoeGI7x7w_cLVgEA2NFSGoWLZLaNLBuu7/s1600/loader.gif') no-repeat 0 0;vertical-align:middle} span.ani_ar1web { position: absolute; right: 35px; margin: 6px auto; padding: 2px 8px; color: #F7F5F5; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); font-size: 11px; font-weight: 700; background-color: transparent; background-image: -moz-linear-gradient(#ED0509, #8E0002); background-image: -webkit-linear-gradient(#ED0509, #8E0002); background-image: linear-gradient(#ED0509, #8E0002); background-repeat: repeat-x; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; z-index: 1;} .post-img img:hover { opacity: .85; } a.reportar1web { float: right; width: 100%; background: #EC595B; color: #fff!important; text-align: center; padding: 5px 0; margin: 10px 0; cursor: pointer; border: 1Px solid #EF4749; } a.reportar1web:hover { background: #444; color: #fff!important; border: 1Px solid #333; }#post-info-ar1web a:hover,a.onwan_ar1web { color: #0088b2!important; } .lb-style-custom .lb-like-icon, .lb-style-custom .lb-dislike-icon {font-size: 18px!important; } .lb-style-custom .lb-like, .lb-style-custom .lb-dislike { background-color: #FFFFFF!important; border: 1px solid #DEDEDE!important; overflow: hidden; } .likebtn-wrapper { margin-left: 20px; position: relative; float: right; margin-top: 10px; } .printfriendly{float:left;left:10px;background:transparent;color:#777;text-decoration:none;padding:3px 0 3px 5px;font-family:'Open Sans';font-size:12px;font-weight:400;} span.print { position: absolute; margin: 165px 0; right: 28px; font-size: 18px; z-index: 999; color: #F3F3F3; background: rgba(0, 0, 0, 0.75); padding: 0 5px 0; line-height: 1.6; } span.print:hover:after { bottom: 0px; background: none repeat scroll 0% 0% #FFF; color: #383637; content: 'اطبع الموضوع'; display: block; left: -100px; padding: 6px 14px; position: absolute; font: normal normal 12px Arabic,verdana,tahoma; }
</style>
</b:if>
بعد وضع ذالك الكود كما وضحنا بعدها سوف تنتقل الى <data:post.body/> وتقوم بنسخ هذا الكود والبحث عنه بعدها سوف تجده متكرر مرتين يعنى كودين ببهذا الشكل مايهمنا هو الكود الثانى ستقوم بوضح الكود فوق ان اردت ان يظهر المعلومات الخاصه بالتدوينه فوقها وان اردتها باخر التدجوينه ضعه بعدها بعد وضع الكود قمع بالدخول الى موضع لرؤيه الاضافه وهكذا تكون اضفتها
<b:if cond='data:blog.pageType == "item"'>
<div id='post-info-ar1web'>
<div class='post-by-ar1web'>
<div class='post-img'>
<b:if cond='data:post.thumbnailUrl'>
<span class='ani_ar1web'>عن الموضوع</span>
<div class='clear'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;'><span class='print'> <i class='fa fa-print'/></span></a>
<img class='posts-ar1web' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
<b:else/>
<img alt='no image' class='posts-ar1web' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfh6bcNcI1YV42PjPJrmmc2NzLYg3GF2w6zj1bW5aYDIuWSj6hacEa2HmS9FSRSd0JhnBZTZXpka62lh4advZJbuyKSyVwsp0dWQ3-GYCLM0EfMvvXvYrTVQp73QZqxIJ5_TGr_wHWo7EJ/s1600/no_image.jpg'/>
</b:if>
<a class='reportar1web' href='#' rel='nofollow' target='_blank'><b class='fa fa-info-circle'/> إبلاغ عن خطأ</a>
</div>
<ul>
<li><b/> <a class='onwan_ar1web' expr:href='data:post.url'><data:post.title/></a>
<div class='clear'/>
<span class='likebtn-wrapper' data-bg_c='#e9eaed' data-brdr_c='#ffffff' data-btn_size='25' data-counter_d_c='#969dae' data-counter_l_c='#969dae' data-f_family='Tahoma' data-f_size='15' data-icon_d='sml3-u' data-icon_l='sml3-h' data-lang='ar' data-loader_show='true' data-show_like_label='false' data-theme='custom'/>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
</li>
<li><b class='fa fa-user'/> <span class='post-author vcard'> <b:if cond='data:post.authorProfileUrl'><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><meta expr:content='data:post.authorProfileUrl' itemprop='url'/><a expr:href='data:post.authorProfileUrl' rel='author' title='بروفيل الكاتب'><span><data:post.author/></span></a></span><b:else/><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><span><data:post.author/></span></span></b:if></span></li>
<li><b class='fa fa-tag'/> <span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> ,
</b:if>
</b:loop>
</b:if>
</span></li>
<li>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<b class='fa fa-clock-o'/> <span class='time-info'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</span>
</b:if>
</b:if>
</li>
<li>
<b:if cond='data:post.allowComments'>
<b class='fa fa-comments-o'/> <span class='comment-info'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> 0 اضف تعليق </b:if><b:if cond='data:post.numComments == 1'>تعليق واحد</b:if><b:if cond='data:post.numComments > 1'><data:post.numComments/> تعليقات</b:if>
</a>
</span>
</b:if>
</li>
<li>
<div class='ar1webviewers' expr:id='"obs-" + data:post.id'> <b class='fa fa-eye'/> <span class='loading'/>&nbsp;مشاهدة</div>
</li>
</ul>
</div>
</div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
تقييمات المشاركة : <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'> <span itemprop='average'>9</span> على <span itemprop='best'>10</span> مرتكز على <span itemprop='votes'>10</span> تقييمات. <span itemprop='count'>9</span> تقييمات القراء.
</span>
</div>
</div>
<div class='clear'/>
</div></b:if>
