قالب لحظات الجديد في عالم بلوجر مجانا

السلام عليكم ورحمة الله وبركاته عدت اليكم اليوم ومع قالب جديد وحصري بمدونة علي نائل , قالب احترافي بمعني الكلمة واتوقع انك اذا رايته سوف تقوم بتركيبه لمدونتك لا اطيل عليكم نبدأ بالمميزات

 مميزات القالب     

1. متوافق مع جميع الاجهزة الذكية
2. ارشفة سريعه
3. شكل تعليقات مميز 
4. يحوي على عمودين
5. لون ابيض واحمر جذاب مريح للعين
6. داعم للاعلانات في الاجهزة الذكية
7. المشاركات الشائعة مع الصور
8. صندوق بحث احترافي
9. ازرار مشاركات 
10. زر الصعود للاعلى باحترافيه
11. قوائم منسدلة
12. صفحة خطأ
13. والمزيد اكتشفها عند المعاينة

 تخصيص القالب     

للتعديل على كود الميتا للارشفة

<meta content='YOUR, KEYWORD, PUT, HERE' name='keywords'/></b:if>

<link href='https://plus.google.com/YOURGPLUS/posts' rel='publisher'/>

<link href='https://plus.google.com/YOURGPLUS/about' rel='author'/>

<link href='https://plus.google.com/YOURGPLUS' rel='me'/>

<meta content='YOUR VERIFICATION GOOGLE CODE' name='google-site-verification'/>

<meta content='YOUR VERIFICATION BING CODE' name='msvalidate.01'/>

<meta content='YOUR VERIFICATION ALEXA CODE' name='alexaVerifyID'/>

<meta content='INDONESIA' name='geo.placename'/>

<meta content='YOUR NAME' name='Author'/>

<meta content='general' name='rating'/>

<meta content='ID' name='geo.country'/>

<meta content='YOURFBAPPSID' property='fb:app_id'/>

<meta content='YOURFBUSERID' property='fb:admins'/>

<meta content='@USERNAME' name='twitter:site'/>

<meta content='@USERNAME' name='twitter:creator'/>

اضافة الارشيف قم بانشاء صفحة فارغة جديده ثم الصق فيها الكود التالي في تبويب html

 .<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>تصنيف بواسطة : </label></td><td><select id="orderFeedBy"><option selected="" value="published">مواضيع جديده</option><option value="updated">المواضيع المحدثة</option></select></td></tr>
<tr><td><label>تصفيه بواسطة : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">انتظر...</option></select></span></td></tr>
<tr><td><label>ابحث عن ماتريد : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
انتظر...</div>
<script src="https://googledrive.com/host/0B5NxkB895DDIMDB3YnM0ZkFUVDg" type="text/javascript"></script></div>
 

اضافة احدث التعليقات ,, ادخل الى تخطيط ثم اضافة اداة جديده وضع فيها الكود التالي

<style type="text/css" scoped> 

ul.kangismet_recent{list-style:none;margin:0;padding:0;} 

.kangismet_recent li{background:transparent;margin:0 0 6px!important;padding:3px  

!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;

border-radius:9px; max-height: 100px;} 

.kangismet_recent li:hover{background:#fff;border: 1px solid #e9e9e9;}

.kangismet_recent a {text-decoration:none;}

.avatarImage{padding:3px;background:#fefefe;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} 

.avatarRound{border-radius:100px;width:35px;height:35px} 

.kangismet_recent li span{margin-top:4px;color: #444;display: block;font-size: 12px;line-height: 1.4;} 

</style>

<script type="text/javascript">

//<![CDATA[

    var

 numComments  = 5,

 showAvatar  = true,

 avatarSize  = 35,

 roundAvatar = true,

 characters  = 40,

 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

 hideCredits = true;

 maxfeeds=50,

 adminBlog='Lina';

//]]>

</script>

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/recent.js"></script>

<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">

</script>

الان مع هذه الخطوة مهمة لمن يريد ان يقوم بتركيب السلايد شو الاحترافي بشكلة الفريد
ضع اداة html فوق المشاركات
فيها الكود التالي 

 .<style>
/* CSS Responsive Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"YOUR-BLOG-URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script> 

مع تغير YOUR-BLOG-URL الى رابط مدونتك

لاضافة حرف كبير في بداية التدوينة , تعطي جمالية للموضوع قم بلصق الكود التالي في داخل التغريده

<span class="awal">K</span>

مع تغير حرف K الى الحرف المراد البداية به

وهذه ازرار ويب ايضا يمكنك اضافتها داخل التدوينة

  /*----Small Buttons-----*/

  <a href='/' class="button small red">Button Text</a>

  <a href='/' class="button small pink">Button Text</a>

  <a href='/' class="button small orange">Button Text</a>

  <a href='/' class="button small yellow">Button Text</a>

  <a href='/' class="button small green">Button Text</a>

  <a href='/' class="button small turquoise">Button Text</a>

  <a href='/' class="button small blue">Button Text</a>

  <a href='/' class="button small purple">Button Text</a>

  <a href='/' class="button small midnight">Button Text</a>

  <a href='/' class="button small grey">Button Text</a>

  <a href='/' class="button small asbestos">Button Text</a>

  <a href='/' class="button small dark">Button Text</a>


  /*----Medium Buttons-----*/

  <a href='/' class="button medium red">Button Text</a>

  <a href='/' class="button medium pink">Button Text</a>

  <a href='/' class="button medium orange">Button Text</a>

  <a href='/' class="button medium yellow">Button Text</a>

  <a href='/' class="button medium green">Button Text</a>

  <a href='/' class="button medium turquoise">Button Text</a>

  <a href='/' class="button medium blue">Button Text</a>

  <a href='/' class="button medium purple">Button Text</a>

  <a href='/' class="button medium midnight">Button Text</a>

  <a href='/' class="button medium grey">Button Text</a>

  <a href='/' class="button medium asbestos">Button Text</a>

  <a href='/' class="button medium dark">Button Text</a>

  

  /*----Large Buttons-----*/

  <a href='/' class="button large red">Button Text</a>

  <a href='/' class="button large pink">Button Text</a>

  <a href='/' class="button large orange">Button Text</a>

  <a href='/' class="button large yellow">Button Text</a>

  <a href='/' class="button large green">Button Text</a>

  <a href='/' class="button large turquoise">Button Text</a>

  <a href='/' class="button large blue">Button Text</a>

  <a href='/' class="button large purple">Button Text</a>

  <a href='/' class="button large midnight">Button Text</a>

  <a href='/' class="button large grey">Button Text</a>

  <a href='/' class="button large asbestos">Button Text</a>

  <a href='/' class="button large dark">Button Text</a>  

وصناديق css و html و javascript

<pre title="HTML"><code class="language-markup"> ... HTML CODE  </code></pre>

<pre title="CSS"><code class="language-css"> ... CSS CODE HERE ... </code></pre>

<pre title="Javascript"><code class="language-javascript"> ... JAVASCRIPT CODE HERE ... </code></pre>

  

معاينة القالب

تحميل القالب


انتهى الموضوع في الاخير اتمنى منكم تعليق مشجع على 
المجهود 
الذي بذلته في طرح هذا القالب , وشكرا ونجوا منكم عند نقل
 الموضوع ذكر المصدر وعدم تغير الحقوق 

تنويه : يرجى من كل شخص قام بتحميل القالب , ان يقوم بتحميله من جديد , بسبب اضافة بعض الاشياء المهمه للقالب