الجمعة، 17 أبريل 2015

السكريبت الإحترافي لعرض المواضيع حسب التسميات


السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مطورون أسف للغياب فحالتي الصحية لم تكن تسمح لي بالتدوين واليوم عدت لكم مع الدرس الذي ينتظره الكثيرون وهو إضافة سكريب عرض المواضيع بطريقة احترافية وذلك عن طريق جلبها بواسطة التسميات هذا السكريبت أصبح يستعمل بكثرة في القوالب الأجنبية عكس القوالب العربية والسبب هو أن أكواد هذا السكريبت مشفرة, لكنني كنت قد فككت تشفيرها عبر استخدام بعض المواقع لفك تشفير الأكواد.


مميزات السكريبت :
● متوافق مع كل الأجهزة.
● طريقة عرض احترافية.
● جلب المواضيع عن طريق التسميات.
● إمكانية التلاعب والتعديل عليه كما تريد.
طريقة التركيب :
1- إذهب إلى القالب وابحث عن <head> وأضف أسفله الكود التالي : (هذا هو كود السكريبت وبدونه لن يعمل أبدا)
<script src='https://dl.dropboxusercontent.com/u/280199022/mtawroon-posts.js' type='text/javascript'/>
2- ابحث عن ]]></b:skin> وأضف فوقه أكواد CSS التالية :
<!-- mtawroon.com -->
.tag-post3 li .tag-thumbnail, .tag-post3 li .tag-thumbnail img {
  float: right;
  display: block;
  overflow: hidden;
  margin: 0 0 0 15px;
  width: 100%;
  height: 100%;
  max-height: 120px;
  z-index: 1;
}

.tag-post3 li {
  border-left: 1px solid #f0f0f0;
  float: right;
  height: auto;
  overflow: hidden;
  padding: 12px 12px 12px 12px!important;
  width: 29.67%;
}

.tag-post3 li:first-child {
  border-left: 0 none;
  border-bottom: 1px solid #f0f0f0;
  float: right;
  height: auto;
  margin: 0;
  padding: 12px 12px 0px 12px!important;
  width: 100%;
  max-width: 659px;
}

.tag-post3 li:first-child .tag-thumbnail, .tag-post3 li:first-child .tag-thumbnail img {
  float: right;
  max-height: 260px;
  height: 100%;
  margin: 0 0 0 12px;
  overflow: hidden;
  width: 100%;
  z-index: 1;
}

.tag-post7 li .tag-thumbnail, .tag-post7 li .tag-thumbnail img {
  float: right;
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
  max-height: 120px;
  z-index: 1;
}

.tag-post7 li {
  border-left: 1px solid #f0f0f0;
  float: right;
  height: auto;
  overflow: hidden;
  padding: 12px 12px 12px 12px!important;
  width: 29.67%;
}

.tag-post2 li:first-child {
  overflow: hidden;
  padding: 12px 12px 0px 12px!important;
}

.tag-post2 li {
  overflow: hidden;
  padding: 12px 12px 12px 12px!important;
  border-bottom: 1px solid #f0f0f0;
}

.tag-post2 li:first-child .tag-thumbnail, .tag-post2 li:first-child .tag-thumbnail img {
  float: right;
  height: 200px;
  width: 100%;
  margin: 0 0 0 12px;
  overflow: hidden;
  z-index: 1;
}

.tag-post2 li:first-child .tag-thumbnail, .tag-post2 li:first-child .tag-thumbnail img {
  float: right;
  height: 200px;
  width: 100%;
  margin: 0 0 0 12px;
  overflow: hidden;
  z-index: 1;
}

.tag-post4 li {
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  padding: 12px!important;
}

.tag-post1 li #tag-rm, .tag-post2 li #tag-rm, .tag-post3 li #tag-rm, .tag-post4 li #tag-rm, .tag-post5 li #tag-rm, .tag-post6 li #tag-rm, .tag-post7 li #tag-rm, .tag-post8 li #tag-rm, #vertical li #tag-rm, #carousel li #tag-rm, #carpost li #tag-rm, .tag-gallery #tag-rm, .tag-post4 p, .tag-post5 li .tag-thumbnail, .tag-post5 p, .tag-post7 p, .tag-post8 p, .tag-gallery h3, .tag-gallery .tag-ct li span, .tag-gallery p, .tag-post8 p, .tag-gallery li .post-meta {
  display: none;
}

.tag-post1 li:first-child .effects .img, .tag-post1 li .effects .img, .tag-post2 li:first-child .effects .img, .tag-post2 li .effects .img, .tag-post3 li:first-child .effects .img, .tag-post3 li .effects .img, .tag-post4 li .effects .img, .tag-post6 li .effects .img, .tag-post7 li .effects .img, .tag-post8 li .effects .img, #carousel li .effects .img, .tag-gallery li .effects .img, .tag-gallery li:first-child .effects .img {
  position: relative;
  float: right;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tag-post6 li .tag-thumbnail, .tag-post6 li .tag-thumbnail img, .tag-post4 li .tag-thumbnail, .tag-post4 li .tag-thumbnail img, .tag-post2 li .tag-thumbnail, .tag-post2 li .tag-thumbnail img {
  float: right;
  overflow: hidden;
  margin: 0 0 0 12px;
  width: 80px;
  height: 80px;
  max-height: 100%;
  z-index: 1;
}

.tag-post6 li {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
  float: right;
  padding: 12px 12px 12px 12px!important;
  width: 43.8%;
}

.tag-post6 li:first-child #tag-rm {
  background-color:#0099CC;
  float: right;
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  padding: 7px 6px 6px 6px;
  margin: -2px 0 14px;
  text-transform: capitalize;
}

.tag-post1 li:first-child h3, .tag-post2 li:first-child h3, .tag-post3 li:first-child h3, .tag-post6 li:first-child h3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3em;
  text-transform: none;
  clear: both;
  padding: 10px 0 0!important;
  text-align: right;
}

.tag-post6 li:first-child {
  display: block;
  overflow: hidden;
  border-right: 0 solid #f0f0f0;
  float: right;
  padding: 12px 12px 0px 12px!important;
  width: 49%;
  border-bottom: 0 none;
  border-left: 1px solid #f0f0f0;
}

.tag-post6 li:first-child .tag-thumbnail, .tag-post6 li:first-child .tag-thumbnail img {
  float: right;
  overflow: hidden;
  margin: 0 0 0 15px;
  width: 100%!important;
  height: 200px!important;
  z-index: 1;
}

#tagpost-wrapper {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper3 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper4 {
width:100%;
float:right;
position:relative;
overflow:hidden;
margin:0 0 0 0!important
}

#tagpost-wrapper5 {
width:100%;
float:right;
position:relative;
overflow:hidden;
margin:0 0 0 0!important
}

#tagpost-wrapper6 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper7 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper8 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper9 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important;
display:none;
}

#tagpost-wrapper10 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}

#tagpost-wrapper11 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important;
display:none;
}

#tagpost-wrapper12 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important;
display:none;
}

#tagpost-wrapper13 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important;
}

#tagpost-wrapper14 {
width:100%;
float:right;
position:relative;
overflow:hidden;
padding:0px 0px 0px 0px!important
}
#tagpost-wrapper12 h2 {
background:#0099CC;
}

#tagpost-wrapper h2,#tagpost-wrapper4 h2 {
background:#0099CC;
margin-right: 31px;
}

#tagpost-wrapper6 h2 {
background:#0099CC;
margin-right: 31px;
}

#tagpost-wrapper3 h2,#tagpost-wrapper7 h2,#tagpost-wrapper9 h2 {
background:#0099CC;
margin-right: 31px;
}

#tagpost-wrapper5 h2,#tagpost-wrapper10 h2,#tagpost-wrapper11 h2 {
background:#0099CC;
margin-right: 31px;
}

#tagpost-wrapper8 h2,#tagpost-wrapper13 h2 {
background:#0099CC;
margin-right: 31px;
}

#tagpost-wrapper14 h2 {
background:#0099CC;
}


#tagpost-wrapper h2 a,#tagpost-wrapper3 h2 a,#tagpost-wrapper4 h2 a,#tagpost-wrapper5 h2 a,#tagpost-wrapper6 h2 a,#tagpost-wrapper7 h2 a,#tagpost-wrapper8 h2 a,#tagpost-wrapper9 h2 a,#tagpost-wrapper10 h2 a,#tagpost-wrapper11 h2 a,#tagpost-wrapper12 h2 a,#tagpost-wrapper13 h2 a,#tagpost-wrapper14 h2 a {
color:#222;
}

#tagpost-wrapper .widget,#tagpost-wrapper3 .widget,#tagpost-wrapper4 .widget,#tagpost-wrapper5 .widget, #tagpost-wrapper6 .widget,#tagpost-wrapper7 .widget,#tagpost-wrapper8 .widget,#tagpost-wrapper9 .widget,#tagpost-wrapper10 .widget,#tagpost-wrapper11 .widget,#tagpost-wrapper12 .widget,#tagpost-wrapper13 .widget,#tagpost-wrapper14 .widget,#tag-wid6 .widget {
overflow:hidden;
padding:0px 0px 20px 0px;
}

#tagpost-wrapper li a,.#tagpost-wrapper3 li a,.#tagpost-wrapper4 li a,.#tagpost-wrapper5 li a,.#tagpost-wrapper6 li a,.#tagpost-wrapper7 li a,.#tagpost-wrapper8 li a,.#tagpost-wrapper9 li a,.#tagpost-wrapper10 li a,.#tagpost-wrapper11 li a,.#tagpost-wrapper12 li a,.#tagpost-wrapper13 li a,.#tagpost-wrapper14 li a {
font-size:12px;
color:#333;
font-weight:bold;
}

#tagpost-wrapper li a:hover,#tagpost-wrapper3 li a:hover,#tagpost-wrapper4 li a:hover,#tagpost-wrapper5 li a:hover,#tagpost-wrapper6 li a:hover,#tagpost-wrapper7 li a:hover,#tagpost-wrapper8 li a:hover,#tagpost-wrapper9 li a:hover,#tagpost-wrapper10 li a:hover,#tagpost-wrapper11 li a:hover,#tagpost-wrapper12 li a:hover,#tagpost-wrapper13 li a:hover,#tagpost-wrapper14 li a:hover {
color:#111;
}

#tagpost-wrapper,#tagpost-wrapper3,#tagpost-wrapper4,#tagpost-wrapper5,#tagpost-wrapper6,#tagpost-wrapper7,#tagpost-wrapper8,#tagpost-wrapper9,#tagpost-wrapper10,#tagpost-wrapper11,#tagpost-wrapper12,#tagpost-wrapper13,#tagpost-wrapper14 {
color:#333!important;
line-height:1.5em;
}

#tagpost-wrapper ul,#tagpost-wrapper3 ul,#tagpost-wrapper4 ul,#tagpost-wrapper5 ul,#tagpost-wrapper6 ul,#tagpost-wrapper7 ul,#tagpost-wrapper8 ul,#tagpost-wrapper9 ul,#tagpost-wrapper10 ul,#tagpost-wrapper11 ul,#tagpost-wrapper12 ul,#tagpost-wrapper13 ul,#tagpost-wrapper14 ul  {
list-style:none;
margin:0;
padding:0;
}

#tagpost-wrapper .widget-content,#tagpost-wrapper4 .widget-content,#tagpost-wrapper5 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper3 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper5 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper6 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper7 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:15px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper8 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper9 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper10 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper11 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #EF6218;
margin:0;
}

#tagpost-wrapper12 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #EF6218;
margin:0;
}

#tagpost-wrapper13 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}

#tagpost-wrapper14 .widget-content {
background:#fff;
overflow:hidden;
font-size:12px;
color:#333;
list-style:none;
padding:12px;
border:1px solid #f0f0f0;
border-bottom:4px solid #0099CC;
margin:0;
}
#tagpost-wrapper h2,#tagpost-wrapper3 h2,#tagpost-wrapper4 h2,#tagpost-wrapper5 h2,#tagpost-wrapper6 h2,#tagpost-wrapper7 h2,#tagpost-wrapper8 h2,#tagpost-wrapper9 h2,#tagpost-wrapper10 h2,#tagpost-wrapper11 h2,#tagpost-wrapper12 h2,#tagpost-wrapper13 h2,#tagpost-wrapper14 h2 {
color:#fff;
font-size:15px;
padding:6px 9px;
margin:0;
text-transform:uppercase;
}
#tag-widget1 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget2 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget3 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget4 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget5 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget6 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget7 .widget-content {
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget8 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:12px!important
}

.tag-widget9 .widget-content {
width:100%;
height:265px;
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:12px 8.6px 12px 10px!important
}

.tag-widget10 .widget-content {
width:100%;
height:256px;
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget11 .widget-content{
position:relative;
overflow:hidden;
background:#fff;
padding:0px 0px 0px 0px!important
}

#tag-widget12 .widget-content{
position:relative;
overflow:hidden;
background:#fff;
}

#tag-widget11 .widget, #tag-widget12 .widget {
padding:0 0 16px 0;
}

#tag-widget13 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget14 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget15 .widget-content{
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:12px!important
}

.tag-widget16 .widget-content{
width:100%;
display:inline-block;
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}

#tag-widget17 .widget-content{
width:100%;
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
padding:0px 0px 0px 0px!important
}
#tag-wid {
width:100%;
float:right;
}

#tag-wid2 {
width:100;
float:right;
}

#tag-wid3 {
padding-right:1.8%;
width:50%;
float:right;
}

#tag-wid4 {
width:50%;
float:right;
}
#tag-wid .widget-content,#tag-wid2 .widget-content,#tag-wid3 .widget-content {
position:relative;
overflow:hidden;
background:#ffffff;
border-radius:1px;
margin:0;
}

#tag-wid .widget-content,#tag-wid2 .widget-content,#tag-wid3 .widget-content {
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
}

#col1 .widget-content,#col2 .widget-content,#col3 .widget-content {
position:relative;
overflow:hidden;
background:#ffffff;
margin:0;
}

.date:before {
font-family:FontAwesome;
text-decoration:inherit;
font-style:normal;
font-weight:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#777;
font-size:14px;
padding-left:.2em;
top:0;
right:10px;
content:&quot;\f017&quot;;
}

.comnum:before {
font-family:FontAwesome;
text-decoration:inherit;
font-style:normal;
font-weight:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#999;
font-size:14px;
padding-right:.3em;
padding-left:.4em;
top:0;
content:&quot;\f086&quot;;
}

.post-meta {
color:#999;
margin-top:4px;
font-size:12px;
font-weight:400;
margin-right:0;
padding:2px 0 2px 3px;
display:inline-block;
}

.post-meta a {
color:#777;
}

.post-meta a:hover {
border-bottom:1px #777 dotted;
color:#777;
text-decoration:none;
}

.tag-post1 li:first-child h3,.tag-post2 li:first-child h3,.tag-post3 li:first-child h3,.tag-post6 li:first-child h3 {
font-weight:700;
font-size:22px;
line-height:1.3em;
text-transform:none;
clear:both;
padding:10px 0 0!important;
text-align:right;
}

.tag-post1 li h3,.tag-post3 li h3,.tag-post7 li h3,.tag-post8 li h3,#carousel li h3 {
clear:both;
padding:10px 0px 0px 0px!important;
}

.tag-post1 li h3,.tag-post2 li h3,.tag-post3 li h3,.tag-post4 li h3,.tag-post5 li h3,.tag-post6 li h3,.tag-post7 li h3,.tag-post8 li h3,#carousel li h3  {
font-weight:700;
font-size:15px;
line-height:1.3em;
}

.tag-post1 p,.tag-post2 p,.tag-post3 p,.tag-post6 p {
margin-top:6px;
color:#7a7a7a;
font-size:12px;
font-weight:300;
display:block;
width:100%;
line-height:1.6em;
text-align:right;
}

.tag-post2 li:first-child #tag-rm {
  background-color: #0099CC;
  float: right;
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  padding: 7px 6px 6px 6px;
  margin: -2px 0 14px;
  text-transform: capitalize;
}

.tag-post2 li:first-child #tag-rm:hover {
  background-color: #0099CC;
  color: #fff!important;
}

.tag-post1 li {
display:block;
overflow:hidden;
border-bottom:1px solid #f0f0f0;
float:left;
padding:12px 12px 12px 12px!important;
margin:0px 0px 0px 12!important;
width:35%;
}

.tag-post1 li:first-child {
display:block;
overflow:hidden;
border-bottom:0;
float:right;
width:65%;
padding:12px 12px 0px 12px!important;
border-right:0px solid #f0f0f0;
border-left:1px solid #f0f0f0;
}

.tag-post1 li:first-child .tag-thumbnail,.tag-post1 li:first-child .tag-thumbnail img {
float:right;
width:100%;
height:200px;
margin:0 0 0 12px;
z-index:1;
overflow:hidden;
}

.tag-post2 li {
overflow:hidden;
padding:12px 12px 12px 12px!important;
border-bottom:1px solid #f0f0f0;
}

.tag-post2 li:first-child {
overflow:hidden;
padding:12px 12px 0px 12px!important;
}

.tag-post2.last-column {
margin-right:0;
margin-left:0;
}
3- أضف الكود التالي مكان أو قبل أو بعد التدوينات الرئيسية :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper6'>
<b:section id='tw6' maxwidgets='2' preferred='yes'>
  <b:widget id='HTML38' locked='false' title='مواضيع مهمة' type='HTML'>
    <b:includable id='main'>
<div class='tag-widget7' id='tag-widget7'>
 <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-check'/><data:title/></h2>
  </b:if>
<div class='widget-content'>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
<div class='tag-post3'>
  <div class='post7'/>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;.post7&quot;,
maxpost:4,
FirstImageSize:400,
});
</script>  
</div>
</div>
</div>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper8'>
<b:section class='hide' id='tw8' maxwidgets='2' showaddelement='yes'>
  <b:widget id='HTML58' locked='false' title='الفوتوشوب' type='HTML'>
    <b:includable id='main'>
<div class='tag-widget11' id='tag-widget11'>
 <!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-edit'/><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='tag-post6'>
<div class='tag6'/>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;.tag6&quot;,
maxpost:5,
tagName:&quot;<data:content/>&quot;
});
</script>  
</div>
</div>
<div class='clear'/>
  </div>
<div class='clear'/>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper4'>
<b:section class='hide' id='tw4' maxwidgets='2' showaddelement='yes'>
  <b:widget id='HTML56' locked='false' title='برامج' type='HTML'>
    <b:includable id='main'>
<div class='tag-post4' id='tag-widget6'>
<!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-download-alt'/><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='tag-post4'/>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;#tag-post4&quot;,
maxpost:4,
tagName:&quot;<data:content/>&quot;
});
</script>
<div class='clear'/>
</div>
</div>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper5'>
<b:section id='tw5' maxwidgets='2' showaddelement='yes'>
  <b:widget id='HTML66' locked='false' title='أندرويد' type='HTML'>
    <b:includable id='main'>
<div class='tag-post2 last-column1' id='tag-widget5'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-android'/><data:title/></h2>
  </b:if>
<div class='widget-content'>
<div id='post2x1'/>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;#post2x1&quot;,
maxpost:3,
tagName:&quot;<data:content/>&quot;
});
</script>
<div class='clear'/>
</div>
</div>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>
<div class='clear'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper13'>
<b:section id='tw13' maxwidgets='2' showaddelement='yes'>
  <b:widget id='HTML39' locked='false' title='برمجة' type='HTML'>
    <b:includable id='main'>
<div class='tag-post7' id='tag-widget13'>
 <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-code'/><data:title/></h2>
  </b:if>
<div class='widget-content'>
<div class='post8'>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;.post8&quot;,
maxpost:3,
tagName:&quot;<data:content/>&quot;
});
</script>  
</div>
</div>
</div>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='tagpost-wrapper10'>
<b:section class='hide' id='tw10' maxwidgets='2' showaddelement='yes'>
  <b:widget id='HTML62' locked='false' title='السيو' type='HTML'>
    <b:includable id='main'>
<div class='tag-post2 last-column2' id='tag-widget5'>
 <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><i class='icon-bar-chart'/><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <div id='fff'/>
<script type='text/javascript'>
pbtpost({
idpbt:&quot;#fff&quot;,
maxpost:3,
tagName:&quot;<data:content/>&quot;
});
</script>
<div class='clear'/>
</div>
</div>
</b:includable>
  </b:widget>
</b:section>
</div>
</b:if>
4- احفظ القالب واتجه إلى التخطيط وقم بوضع التسميات التي تريد في كل مربع كما في الصور :
الصورة الأولى
الصورة الثانية


وهكذا سيبدأ السكريبت بالعمل وكملاحظة مهمة يجب التعديل على عرض -width- السكريبت حتى يناسب قالبكم

إلى هنا انتهى درسنا لهذا اليوم أتمنى أن تنشروا الموضوع مرعاة للمجهود الذي قمت به رغم حالتي الصحية
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)