إضافات و دروس بلوجر

إضافة خاصية البحث المخصص من جوجل على مدونات بلوجر

2015-07-16T17:59:00.007-07:00

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

قم بالتوجه إلى موقع Google Custom Search للتسجيل ،ثم قم بتتبع المراحل الآتية من خلال الصور أسفله.

2. نقوم بملأ الإستمارة التالية كما هو موضح في الصورة وذلك مع تبديل إسم مدونتي بإسم مدونتك وكذلك رابط المدونة الخاص بي الذي يجب أن يكون متبوعا بالرمز(*)

للحصول على أكواد الألوان يمكنك زيارت هذا الموضوع هنا

3.عندما تظهر لك الصفحة التالية ،قم بالصغط على الزر Next لأننا سوف نقوم بالحصول على كود الإضافة .

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم إضافة أداة جديدة

ثم نضع بداخلها الكود المحصل عليه و ضعها أين تشاء .

و في الأخير بالتوفيق للجميع

طريقة إنشاء صندوق لإختصار أكواد HTML لمدونات بلوجر

2015-06-06T05:25:00.000-07:00

طريقة إنشاء صندوق لإختصار أكواد HTML لمدونات بلوجر

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

أولا: صندوق أكواد مزود بإطار يمكنك تغيير ارتفاعه وعرضه وكذلك سماكة الإطار ولونه - تابع الألوان - كل ما عليك هو نسخ الكود داخل الصندوق وعند انشاء مشاركة جديدة قم بالضغط على HTML بجانب Compose ولصقه ثم اضغط بعدها على Compose لتجد أنه قد تم انشاء صندوق يحتوي على جملة (اكتب الكود هنا) قم بحذفها وإضافة الكود. شاهد المقطع التالى يشرح ويعاين الكود .

الكود :

<div style="font-family:georgia; font-size: 16px; height: 150px; overflow: scroll; width: 550px;border:2px solid Blue;"> الصق الكود هنا</div> <div style="font-family: verdana,arial,sans-serif; font-size: 10px;">

إضافة سلايد شو اتوماتيكي يعرض أخر المشاركات في القائمة الجانبيه

2015-06-06T05:24:00.005-07:00

إضافة سلايد شو اتوماتيكي يعرض أخر المشاركات في القائمة الجانبيه

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

طريقة تركيب السلايد شو :
   ادخل مدونتك .       اتجه الى التخطيط .

   اضف اداة جديدة عبارة عن HTML/javascript.
   انسخ والصق هذا الكود :

الكود :

<style>.slider-rotator h4{text-align:right !important;}.slider-rotator p{text-align:right !important;}.slider-rotator-nav{background:#33B5E5 !important;border:1px solid #2C3E50 !important;border-radius:5px !important;margin:2px 12px !important;}.slider-rotator-nav a{background-color:#FFF !important;color:#777 !important;border:1px solid #F74551 !important;border-radius:4px !important;}.slider-rotator-nav a:hover{background-color:#FFFDD8 !important;}.slider-rotator-nav a.current{background-color:#BDB6AA !important;border:1px solid #999 !important;color:#FFF !important;}.slider-rotator{border-radius:5px !important;}</style>
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://kalam-blogger2.blogspot.com/" // Add your blog URL
});
</script>

الاحمر : استبدله برابط مدونتك http://kalam-blogger2.blogspot.com/

اضافة شريط متحرك يضم اخر اخبار المدونه بثلاثة الوان احترافيه

2015-05-25T13:18:00.001-07:00

اضافة شريط متحرك يضم اخر اخبار المدونه بثلاثة الوان احترافيه

1 - من لوحة التحكم -> قالب -> تحرير HTML

2 - خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3 - قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</head>

وقبله تماما قم بلصق احد اكواد الالوان التاليه حسب رغبتك إليك الإختيارات الثلاث

ضف الكود التالي :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

ضف الكود التالي :

<b:if cond='data:blog.pageType != "static_page"'>
        <b:if cond='data:blog.pageType != "item"'>

        <style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;

        background: #fff;

        -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        background-clip: padding-box;

        border-left: none;

        max-height: 37px;}

        #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;

        -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

        color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;

        font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}

        #recentpostbreaking{float:right;padding-right: 15px;}

        #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

        #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}

       </style></b:if></b:if>

ضف الكود التالي :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px;
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

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

<div class='main-outer'>

ونلصق الكود التالي قبله تماما / فوقه

<b:if cond='data:blog.pageType != "static_page"'>
        <b:if cond='data:blog.pageType != "item"'>
        <div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span>
        <div id='recentpostbreaking'>Loading...</div>
        </div>
        <script type='text/javascript'>
        //<![CDATA[
        $(document).ready(function () {
        var url_blog = 'http://kalam-blogger2.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
        numpostx     = 10; // Jumlah artikel yang di tampilkan
        $.ajax({
        url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++) { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href; break; }              }
        posttitle = entry[i].title.$t;
        skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                }
        skeleton += '</ul>';
        $('#recentpostbreaking').html(skeleton);
        // kode untuk efek pada breaking news
        function tick(){
        $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
        setInterval(function(){ tick () }, 5000); } else {
        $('#recentpostbreaking').html('<span>No result!</span>');
                } }, error: function() {
        $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
               } }); });
        //]]>
        </script>
        </b:if></b:if>

الان قم باستبدل الرابط التالي http://kalam-blogger2.blogspot.com/ برابط مدونتك

وبالاخير قم بحفظ القالب والف مبروووك عليك الاضافه

سلايد شو تلقائي للبلوجر بحسب التسمية

2015-05-25T12:38:00.002-07:00

سلايد شو تلقائي للبلوجر بحسب التسمية

كيفية تركيب سلايد شو تلقائي على مدونتك؟ نذهب إلى لوحة تحكم المدونة -->> القالب ثم أنقر على تحرير html الآن نبحث عن الرمز :

]]></b:skin>

ثم نضع الكود التالي فوقه مباشرةً :

/*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOHCppQjE08484Xo2h_nHAiJo4VPA0GN2E4WbVpexDCQBfjH2BXJS6K_PYD2y_S1rumV6Liv4-J0qHaieek2Q6BO_hWk3WBZ58CB5xMIwZ-LyF3x88rXLc8rb_QkF_fKoSFNpI3DENfw/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

الخطوة الثانية نبحث عن الرمز :

</head>

ثم نضع الكود التالي فوقه مباشرةً :

غير كلمة برامج باسم التسمية التي تريد أن تظهر بالسلايد شو بما يناسبك
الرقم 6 هو لعدد المشاركات التي ترغب بأن تظهر بالسلايدر numposts1 = 6;

الخطوة الثالثة نبحث عن الرمز :

</body>

ثم نضع الكود التالي فوقه مباشرةً :

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

أو الرمز

او من خلال التخطيط ثم إضافة أداة javascrpt/html المهم أن تختار مكان مناسب للسلايد شو ثم لصق الكود التالي :

<b:if cond='data:blog.pageType == "index"'>
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

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

إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفحة محددة على بلوجر

2015-05-22T10:15:00.000-07:00

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

نتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML "
ثم قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

ملاحضة :لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

<b:widget id='HTML

والآن نحتاج إلى القليل من التركيز حيث يجب عليك تحديد أو تعليم الأداة المراد تعديلها (إظهارها أو إخفاؤها)،وهذا المثال يوضح كيفية البحث عن هذا الكود :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

الآن مباشرة بعد تحديد إسم الأداة كما هو موضح باللون ا لأحمر ،ولإظهارها فقط على" الصفحة الرئيسية" ،قم بإضافة الكودين باللون الأحمر.كما هو موضح في الكود التالي:

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'> <b:if cond='data:blog.url == " أدخل رابط الصفحة المحددة "'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/> </b:if>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "التسمية"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحة الرئيسية ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء صفحات المواضيع ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات لكاتب معين ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي مع إدخال إسم الكاتب :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:post.author == "إسم الكاتب "'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

و في الأخير أرجوا أن تنال إعجابكم هته الإضافة

حل مشكلة عدم ظهور إعلانات جوجل أدسنس على مدونات بلوجر

2015-05-22T06:08:00.000-07:00

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

عند تحميل كود الإعلان يكون على هذا الشكل :

google_ad_client = "xxxxxx";

/*xxxxxxxxxxxxxx */

google_ad_slot = "xxxxxxxx";

google_ad_width = xxxxxx;

google_ad_height = xxxxxxx;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

قم بحذف الرموز كما هو مبين باللون البني في الكود ليصبح على هذا الشكل

google_ad_client = "xxxxxx";

/*xxxxxxxxxxxxxx */

google_ad_slot = "xxxxxxxx";

google_ad_width = xxxxxx;

google_ad_height = xxxxxxx;

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

ثم قم بحفظ القالب وإنشاء الله سوف تظهر الإعلانات بشكل سليم . ومع تحياتي للإستاذ أبو إياد

طريقة عمل جدول في مدونات بلوجر

2015-05-22T06:02:00.000-07:00

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

هذا هو شكل الجدول الذي سوف يتم انشائه

هذا هو كود الجدول:

لوضع الجدول داخل التدوينة تابع الشرح بالصور :

وتكون النتيجة كالتالي :

لا تنسوا تغيير الاحرف الموجودة في الكود بالكلمات التي تريدوها والله ولي التوفيق

اضافة اداة الزوار الاكثر تعليقاً لمدونات بلوجر

2015-05-22T04:11:00.002-07:00

اضافة اداة الزوار الاكثر تعليقاً لمدونات بلوجر

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله و بركاته

أهلا و سهلا بكم متابعى و زوار مدونة كلام مفيد

اليوم أقدم لكم أداة من أهم الادوات التى لابد و أن تتواجد فى مدونات بلوجر الا و هى أداة لمعرفة الزوار الأكثر تعليقا فى مدونتك

تعتبر التعليقات جزء أساسي فى المدونات لانها تجعل المدونة أكثر ايجابيه ,كما أن الكثير من المدونين يعتبرون التعليقات البنائه هي دافع اساسي للاستمرار في التدوين.

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

وبالتالي فإنه من المهم جدا أن تعرف من هم المستخدمين الأكثر نشاطا في مدونتك ,لذلك هذه الأداه تقوم بعرض اكثر الزوار تعليقا في مدونتك

طريقة اضافة الأداة الى مدونتك

انتقل إلى لوحة تحكم مدونتك

HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر

ثم أضف الكود التالى و احفظ الأداة

قم بتغيير رابط مدونتى برابط مدونتك

http://kalammoufid.blogspot.com

لتغيير عدد المستخدمين في الاضافه

var maxTopCommenters = 8;

لتغيير حجم صورة المعلقين

var sizeAvatar = 33;

ازرار معاينة و تحميل بشكل جديد واحترافي جدا

2015-05-11T05:26:00.000-07:00

ازرار معاينة و تحميل بشكل جديد واحترافي جدا

السلام عليكم و رحمة الله و بركاته فى هذه التدوينة اسمحوا لى زوارى الأعزاء أن أقدم لحضراتكم ازرار جميلة و بسيطة وبتصميم انيق و احترافى بتقنية رائعة بتقنية css ( ازرار معاينة و تحميل ) اضافة خفيفة ورائعة تجذب الانتباه اعتقد ان الكثير منكم من يبحث عن ازرار احترافية مثل هذه.

معاينة الأزرار مباشرة من مدونتى

معاينة اضغط هنا تحميل اضغط هنا

طريقة اضافة الأزرار الى المدونة

1. من لوحة التحكم >> قالب >> تحرير HTML
2. خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3. و اتبع ما يلى

قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

ومن ثم أضف قبله مباشرة الكود التالى

#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

بعد اضافة كود الـ CSS ,عند استخدام الأزارا اذهب الو تبويب الـ html كما هو مبين بالشكل و أضف الكود التالى

ومن ثم أضف قبله مباشرة الكود التالى

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket">
</i></span> <span class="title">معاينة</span>
<span class="title-hover">اضغط هنا</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>

البرامج السهلة الممتعة في جلب اكواد الالوان بمنتهي السهوله

2015-04-25T12:10:00.002-07:00

السلام عليكم و رحمة الله تعالى

اليكم البرامج السهلة الممتعة في جلب اكواد الالوان بمنتهي السهوله بمجرد اختيارك للون الذي تريد معرفه الكود الخاص به ما عليك سوي اختيار اللون لتظهر مباشره الاكواد الخاصه به فيمكنك من خلال البرنامج استخدام الاكواد في التعديل علي اكواد الالوان الخاصه بالمدونه او الموقع الشخصي لك بمنتهي السهوله بوضع الكود داخل صفحه اكواد المودنه او الموقع والذي يستخدم لغه ال فعند تغيير الوان الخلفيه للمواقع او المدونات ما عليك سوي اختيار سطر الكود الذي يحمل لون الخلفيه للمدونه والقيامبوضع الكود الجديد بدلا منه لتحصل علي خلفيه المدونه الجديد بمنتهي البساطه ودون تعقيد البرامج متميز وحجمه 24 كيلو بايت فقط ويستحق التحميل

ColorCop

من هنـــــا

Color pix

المفاتيح المختصرة:
1- لنسخ كود HEX: اضغط Ctrl+c.
2- لرؤية المنطقة المحددة في شاشة صغيرة ملاصقة للبرنامج، اضغط Ctrl+m.

من هنـــــا

بالتوفيق و السلام عليكم

طريقة وضع إعلانين جوجل أدسنس تحت التدوينة وتحت العنوان

2015-04-25T11:11:00.000-07:00

السلام عليكم و رحمة الله تعالى و بركاته في هته التدوينة سنتطرق إلى كيفية وضع إعلانين جوجل أدسنس تحت التدوينة وتحت العنوان و الآن نبدأ العمل نتوجه إلى تحرير html ثم وضع علامة على المربع الصغير لتوسيع القالب ،ثم نبحث عن الكود التالي :

<b:include data='post' name='postQuickEdit'/>

ثم ضع أسفله هذا الكود وذلك بإدراج كود الإعلانين في المكان المناسب كما هو مكتوب باللون الأحمر ،لكن لا تنسى أن تقوم بتحويل كود الإعلان عند حصولك عليه من حسابك أدسنس وذلك بإستعمال هذا الموقع ،من هنــــا

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'>
<span class='FL'>
ضع هنا كود الإعلان الأول بعد تحويله
</span>
<span class='FR'>
ضع هنا كود الإعلان الأول بعد تحويله
</span>
<div class='spacer'/>
</b:if></b:if>

وأخيرا قم بحفظ القالب
إذا أردت أردت إدراج إعلانين تحت عنوان التدوينة قم بالبحث عن هذا الكودوأخيرا قم بحفظ القالب

إذا أردت أردت إدراج إعلانين تحت عنوان التدوينة قم بالبحث عن هذا الكود

<data:post.body/>

ثم قم بوضع الكود التالي فوقه ،مع إدراج كود أدسنس كما شهدنا في المرحلة السابقة

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:post.isFirstPost'>
<span class='FL'>
ضع هنا كود الإعلان الأول بعد تحويله

</span>

<span class='FR'>
ضع هنا كود الإعلان الأول بعد تحويله

</span>

وأخيرا قم بحفظ القالب

ملاحضة : الفرق بين الكود الأول والكود الثاني الذي يجب لصقه ،هو السطر الأول الذي يحدد الشرط الذي سوف يظهر به الإعلان ،ويدل هذا السطر إظهار الإعلان فقط في الصفحة الرئيسية وهو الموجود في الكود الأول ،أما الكود الثاني فيعني أن يظهر الإعلان في جميع الصفحات بإستثناء الصفحة الرئيسية ،وعند ملاحظتك للشرطين سوف تلاحظ أن الإختلاف بينهما يتمثل في الرمز = !

شرح كيفية التسجيل في الجيمل gmail

2015-04-25T11:09:00.003-07:00

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

الآن نضغط على هذا الرابط هنــــا

تابع الشرح مع الضغط على الصورة للتكبير

تابع الشرح

بعدها تضهر لنا

و هكذا أصبحت تملك إميل على الجيمل

يمكنكم أيضا متابعة الشرح بالفيديو من هنا

بالتوفيق و السلام عليكم

شرح الغاء كود بين code pin وتشغيل اعلانات ادسنس واستلم ارباحك

2015-04-25T11:05:00.002-07:00

شرح الغاء كود بين code pin وتشغيل اعلانات ادسنس واستلم ارباحك

بسم الله الرحمن الرحيم

الطريقة مجربة

1- تشغيل اعلانات Google AdSense 2

2- تشغيل ارسال الدفعات للمستحقين

الشرح : ادخل الى حسابك في Google AdSense

ثانيا افتح هذا الرابط في صفحة جديدة

https://support.google.com/adsense/bin/request.py?hl=ar&contact_type=id_verification&rd=3

املأ الفراغ بالمعلومات الصحيحة المتوافقة مع حسابك في Google AdSense

الطريقة مجربة من طرفي شخصيا

اتمنى ان اكون قد افدتم ولو بقليل

والله الموفق وهو يهدي الى سبيل الرشاد

طريقة رفع سعر الضغط وثباتها في حدود 0.04 دولار

2015-04-25T11:04:00.002-07:00

طريقة رفع سعر الضغط وثباتها في حدود 0.04 دولار البعض يقول انه لا توجد طرق لرفع سعر الضغطة لقد جربت طريقة منذ زمن بعيد واطبقها على حسابي ومتأكد من نتائجها الطريقة تتمثل في ضبط بعض اعدادات حساب ادسنس كالتالي :

نذهب الى التبويب السماح بالإعلانات/منعها ثم نبحث عن :

شبكات الإعلانات نظغط عليها ونقوم بمنع جميع الشبكات ثم نبحث عن الشبكات التالية

Adtegrity.com

Adtegrity.com 2

Collective Media

Criteo (US

Criteo Europe

ونسمح لها بعرض الإعلانات . الخطوة الثانية اسفل شبكات الإعلانات نجد اعدادات متقدمة نضغط عليها ونقوم بالتالي :

تفضيل إعلانات تستهدف الاهتمامات :

نختار :

لا يُسمح بعرض الإعلانات استنادًا إلى فئات اهتمام المستخدمين.

لن يتم استخدام معلومات الزيارات من مواقعي للمساعدة في إنشاء فئات الاهتمام. تفضيلات إعلانات الجهات الخارجية :

نختار :

لا يُسمح للمعلنين باستخدام معلومات الجمهور لعرض إعلانات أكثر ملاءمةً على موقعي

في الفترة الصباحية ستجدون سعر الضغطة مرتفع نوعا ما ويبدا بالإنخفاض كلما ازداد عدد المشاهدات والضغطات الا انه سيستقر عند سعر 0.04 دولار بالنسبة لحسابي فهو باليورو ويستقر احيانا عند سعر 0.04 يورو وغالبا 0.03 يورو . عليكم بتجربة الطريقة ولو لمدة 15 يوم اذا حدث معكم العكس ولم يرتفع سعر الضغطة عليكم بالعودة للإعدادات السابقة .

والله ولي التوفيق والمستعان

صندوق تحويل اكواد html

2015-01-06T06:17:00.000-08:00

تحويل كود اعلانات أدسنس و الكود html

لوضع كود اعلانات أدسنس داخل قالب مدونتك , يلزم اجراء تحويل بسيط للكود.

كل ما عليك هو نسخ كود الاعلانات الخاص بك , ثم لصقه فى صندوق النصوص الموجود بالأسفل ثم النقر

على زر التحويل " تحويل "

يمكنك الآن نسخ الكود المحول و لصقه فى المكان الذى ترغب به داخل مدونتك.

يمكنك استخدام هذا الأداه لوضع الاعلانات أسفل عنوان التدوينه , أو فى نهايتها , أو حتى فى قلب التدوينة ذاتها

قالب مشرفة تربوية حنان الزنبقي

2014-12-01T06:09:00.000-08:00

قالب مشرفة تربوية حنان الزنبقي

السلام عليكم ورحمه الله وبركاته

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

و هو قالب مشرفة تربوية حنان الزنبقي من تصميم الرائع جلال البعدانى قالب مدوفوع

وغير مجاني لكن احضرته لكم مجانا

قالب بمميزات عديدة وكثيرة وجميلة اكتشفة بنفسك

كود القالب

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='rtl' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
<meta content='053DB34E5A5A4313E1D7D13D50D7DE69' name='msvalidate.01'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link href='https://plus.google.com/103499777490414306950' rel='author'/>
<meta content='وصف قصير عن المدونه' name='DESCRIPTION'/>
<meta content='كلمات دلاليه عن المدون بين كل كلمه فاصله' name='KEYWORDS'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='حنان الزنبقي' name='author'/>
<meta content='ar' name='language'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='http://blogger-template-byalb33dani.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://blogger-template-byalb33dani.blogspot.com/' rel='canonical'/>
<link href='http://blogger-template-byalb33dani.blogspot.com/feeds/posts/default' rel='alternate' title='قالب بلوجر مدفوع متجاوب - تصميم البعداني - Atom' type='application/atom+xml'/>
<link href='http://blogger-template-byalb33dani.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='قالب بلوجر مدفوع متجاوب - تصميم البعداني - RSS' type='application/rss+xml'/>
<link href='http://www.blogger.com/feeds/5284237692732958551/posts/default' rel='service.post' title='قالب بلوجر مدفوع متجاوب - تصميم البعداني - Atom' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://blogger-template-byalb33dani.blogspot.com/' rel='openid.delegate'/>

<title>قالب بلوجر مدفوع متجاوب - تصميم البعداني</title>
<link href='http://cdn.jsdelivr.net/darfonts/0.1/cont-hili-jarida-smoth/stylesheet.css' rel='stylesheet'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='https://www.blogger.com/static/v1/widgets/2003679616-widget_css_bundle_rtl.css' rel='stylesheet' type='text/css'/>
<style type="text/css">
<style>
/*--------------css welcome home-------------*/
.l0ast{margin:0!important}.t0hreecol p{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdboRUyQU_VrMGSqGO6WZ3fxZ2ooqWMdfV1ul3X71yenOPnk4o0LzOf16rb-pfews05cCX7ePSDOLFKEal81Vto-xowvduHn8C5ky6i5zckUhkpQaFtZUfvFWmxVHR7qvlSwLbd-BZHBi/s1600/center-border.png');background-position:center top;background-repeat:repeat-x;font-size:11px;color:#A6A6A6;margin:0 auto;padding-top:5px;padding-left:10px;text-align:center;line-height:1.8}.r0ow{width:100%;max-width:100%;min-width:100%;margin:0 auto;overflow:hidden}.o0necol,.t0wocol,.t0hreecol,.f0ourcol,.f0ivecol,.s0ixcol,.s0evencol,.e0ightcol,.n0inecol,.t0encol,.e0levencol{margin-left:3.8%;float:right;min-height:1px}.r0ow .o0necol{width:4.85%}.r0ow .t0wocol{width:13.45%}.r0ow .t0hreecol{width:22.05%}.r0ow .f0ourcol{width:30.75%}.r0ow .f0ivecol{width:39.45%}.r0ow .s0ixcol{width:48%}.r0ow .s0evencol{width:56.75%}.r0ow .e0ightcol{width:65.4%}.r0ow .n0inecol{width:74.05%}.r0ow .t0encol{width:82.7%}.r0ow .e0levencol{width:91.35%}.r0ow .t0welvecol{width:100%;float:right}.c0ontainer{padding-right:20px;padding-left:20px}.b0g-1x88z1{position:absolute;right:0;left:0;top:0;height:400px;opacity:0.6}#w0rap2{padding-top:70px}#c0ontent-wrapper{max-width:1024px;margin:0 auto;width:1024px;text-align:right;margin:10px auto;overflow:hidden}#c0ontent-wrapper{max-width:92%;width:92%}#h0eden{display:none}nav.top-menu-hom0e{width:71.93478260869565%;padding:0.5em 0 0.15em 0;float:left}nav.top-menu-hom0e a:link,nav.top-menu-hom0e a:visited{width:18.9%;float:right;margin:-8px 0 0 28px;padding:16px 0 16px;font-size:16px;color:#ccc;font-weight:normal;line-height:120%;text-align:center;text-transform:uppercase;text-decoration:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckwbTgFCoiaPvWd1UNkh3fM4M76ZZj5LDnTJCPUof2Rim8o9sNOzXv2A3-UDzNs4nZet2wxqYVUaYdEzVvuy9uOzB8a1IloGg5X5fwrUi1seqXask1PFACb9w9VdmpJktFku-Qrl4WhDE/s1600/border-center-top-left.png);background-position:bottom center;background-repeat:repeat-x;-webkit-transition:background .3s linear;-moz-transition:background .3s linear;-o-transition:background .3s linear;transition:background .3s linear;position:relative}nav.top-menu-hom0e a.blog:before,nav.top-menu-hom0e a.about:before,nav.top-menu-hom0e a.archive:before,nav.top-menu-hom0e a.contact:before{position:absolute;right:-18px;top:30px;width:32px;height:32px;color:#ccc;text-shadow:0 0 12px #fff;line-height:1.87em;background-color:#333;border:6px solid #888;text-align:center;font-weight:bold;border-radius:2em;-moz-border-radius:2em;-webkit-border-radius:2em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-moz-box-shadow:0 4px 6px rgba(0,0,0,0.75);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.75);box-shadow:0 4px 6px rgba(0,0,0,0.75);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;font-family:serif}nav.top-menu-hom0e a.blog:hover:before,nav.top-menu-hom0e a.about:hover:before,nav.top-menu-hom0e a.archive:hover:before,nav.top-menu-hom0e a.contact:hover:before{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);color:#161616!important;border:6px solid #85A101;background-color:#C6EB04;-moz-box-shadow:0 0 10px #C6EB04,0 0 30px #C6EB04,0 0 50px #C6EB04,0 1px 3px #000!important;-webkit-box-shadow:0 0 10px #C6EB04,0 0 30px #C6EB04,0 0 50px #C6EB04,0 1px 3px #000!important;box-shadow:0 4px 6px rgba(0,0,0,0.25),0 0 10px #C6EB04,0 0 30px #C6EB04,0 0 50px #C6EB04,0 1px 3px #000!important}nav.top-menu-hom0e a.blog:before{content:'1'}nav.top-menu-hom0e a.about:before{content:'2'}nav.top-menu-hom0e a.contact:before{content:'3'}nav.top-menu-hom0e a.archive:before{content:'4'}nav.top-menu-hom0e a:hover{color:#C6EB04;text-shadow:0 0 30px #C6EB04}nav.top-menu-hom0e .d0ivider{float:right;text-align:center;width:1.44%}div#0phone{width:73.93478260869565%;padding:0.5em 0 0.95em 0;float:left;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tvFJCQp6qGgeTCgmolu0RbcuhsAV9XYa8LDnu6GtMlzGHw7-VS9Fszze71TGNE7qMTUu6Nq-Yan7gtBJwWWgs9UBt3N2s0TfScJcvHsRGODZQKs2Jsf3d7kfMs_lNcr86978Hgf9tEa3/s1600/big-border.png);background-position:bottom center;background-repeat:repeat-x;margin:10px 0 0 0}div#0phone h2.phone-number{font:100 40px/30px "roboto","Helvetica Neue",Helvetica,Arial,sans-serif!important;padding:0;text-transform:uppercase;float:left;color:#666}div#0phone h6.call{font:300 14px/14px "roboto","Helvetica Neue",Helvetica,Arial,sans-serif!important;float:left;width:200px;margin-top:2px;margin-left:10px;text-align:left;line-height:120%;color:#444}#0time{width:25.59521739130435%;float:right;margin-right:23px;text-align:center;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL49nsej7-vkJuoEXZlexYEJkYDZ_QdduynjQmBPoF7dxyo3IQJ568mMFGko5XHHrwHov6U2HmbfpMH7ha5vNOwp-UgE2FMYmcYSAsF2yqbyQiumJ0cjwCyyUHz3D7rMJn1UxPJlMgzm-i/s1600/big-border-top.png);background-position:top center;background-repeat:repeat-y;height:142px;color:#666;color:#fff}#0time{margin:0 auto;overflow:hidden}#0time >nav.clock{margin:0 auto;padding:30px}#0time >nav.clock #0Date{font-size:12px;text-align:center;color:#666;line-height:0.9em;font-family:serif}#0time >nav.clock ul{margin:0 auto;padding:0;list-style:none outside none;text-align:center;direction:ltr;font-family:serif}#0time >nav.clock ul li{color:#ccc;display:inline;font-size:40px;text-align:center;font-weight:100}#0time >nav.clock li.point{position:relative;padding-right:1px;padding-left:1px}.threecol h5{text-transform:uppercase;text-align:center;font-size:23px;color:#aaa;font-weight:600!important}nav#0topnav{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhKcTJqTvj83i_52B0jeummCL6sAEcoUQBABz1dNS9CIBMwQF6FPJCJhotGelbMPZi7pKzzuFgsVc1E3d_fNsLpp6z2AXyVlxQXHKpsu802R41hvKkmbAq7NOD9mG3XNPPwKVUpNLCuw9/s1600/border-nav.png);background-position:top center;background-repeat:no-repeat;padding:7px 0 0 0;margin-top:4px;width:1000px}nav#0topnav li{font-family:ge_dinar_tworegular;display:inline;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbgX2qQT8DIlYMuLpwZUnz_LKiPmVbcugCEZ6-API1ayLTnCxd7hzrAb6KW7kMyq0KCj1Oa_Vr2OFWoEfz4WROUHBuQ4d_zsDxtTCNgQbQxH1b3oCXC3yIhizGdAIz5orYiw_6CAlUpLQ/s1600/border-top.png);background-position:top left;background-repeat:repeat-y;padding:8px 10px 2px 8px;margin-top:10px}nav#0topnav li a{position:relative;padding:0 0 10px 20px!important;color:#666!important;font-size:11px}cufon{display:inline-block!important;position:relative!important;vertical-align:middle!important;font-size:17px!important;line-height:1px!important;color:#fff;text-align:center}cufon canvas{position:relative!important;margin-top:-12px}cufon cufontext{width:0!important;height:0!important;overflow:hidden!important;text-indent:-10000in!important}nav#0topnav li a:link,nav#0topnav li a:visited{text-decoration:none}#0logo-home{margin:6px 0 0 -15px;padding:0;overflow:hidden;position:relative;cursor:crosshair;height:400px}#0layout{position:absolute;width: 100%;overflow:hidden;background:-moz-radial-gradient(center center,circle cover,hsla(0,0%,0%,.0) 0%,hsla(0,0%,3%,9) 100%)no-repeat;background:-webkit-gradient(radial,center center,0,center center,800,from(hsla(0,0%,0%,.0)),to(hsla(0,0%,3%,9)) );background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000',endColorstr='#d9000000',GradientType=1 );margin:0!important;padding:0!important}#0layout{width: 100%;overflow:hidden;margin:0;padding:0!important;background-attachment:fixed;background-image:radial-gradient(ellipse at center center,transparent 5%,#000 159%)}h0eader.header{width:100%;height:55px;position:relative;z-index:20;text-align:right;border-bottom:1px solid rgba(105,105,105,0.2);background-color:rgba(0,0,0,0.56);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0qMiwjqCkCZAsE0l4Wu_yj3crurjn6N3bgA4pINeHm12N02TnvcL1LPZtVBx4xXzgygbUY0IvclMzxGwK-_oZs1h7B5tCKpltVagLBtfDk6_AhHRwx74b_nlW7cnhATXm5n62-I8Ml8ap/s1600/pattern.png');background-repeat:repeat;box-shadow:0 6px 5px rgba(0,0,0,0.35),0px 1px 0 rgba(0,0,0,0.2) inset;background-clip:padding-box}h0eader.header{margin:0 auto!important}h0eader.header section.header11{width:950px;margin:0 auto}#0logo{float:right;padding:15px 0;height:40px;width:210px}#0logo li.s-home{display:inline!important;font-weight:normal!important;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAXtXeP5tlhs1h2dXmW9ChORX6DHw9Hy5lrJ91vkO_7MPh210blkc7UtYTGSYmra4vgXGy1o850VgrxmCEaI9ip4Q1JBlk0hg9G2QrfHf0iMWt4ch9IlIOftB41M3-oM5U_ljqHRvTW2Ks/s1600/dot-circle.png');background-repeat:no-repeat;background-position:right center;padding:4px 23px 0 15px!important;float:right;position:relative}#0logo li.s-home a{animation-name:zelzal;-moz-animation-name:zelzal;-webkit-animation-name:zelzal;animation-duration:0.8s;-moz-animation-duration:0.8s;-webkit-animation-duration:0.8s;transform-origin:50% 50%;-moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-moz-animation-timing-function:linear;-webkit-animation-timing-function:linear;border-bottom:1px solid #C6EB04;padding:11px 0;color:#C6EB04;font-size:26px!important;font-family:ge_dinar,Great Vibes;line-height:0}h0eader.header section.header11 .nav{padding-top:0px;text-align:right;height:40px;padding-bottom:15px;float:left;margin:0 0 0 -13px;width:660px}h0eader.header section.header11 .nav li{display:inline!important;font-weight:normal!important;padding:4px 15px 0 7px!important;float:right;position:relative}h0eader.header section.header11 .nav li ul{position:absolute;right:-10px;background-color:rgba(0,0,0,0.73);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0qMiwjqCkCZAsE0l4Wu_yj3crurjn6N3bgA4pINeHm12N02TnvcL1LPZtVBx4xXzgygbUY0IvclMzxGwK-_oZs1h7B5tCKpltVagLBtfDk6_AhHRwx74b_nlW7cnhATXm5n62-I8Ml8ap/s1600/pattern.png');top:20px;display:none}h0eader.header section.header11 .nav li ul li{width:103px;text-align:right;background-position:right center;margin-right:10px;line-height:2;padding:5px 21px 5px 5px!important}h0eader.header section.header11 .nav li:hover ul{display:block}h0eader.header section.header11 .nav a{font-size:12px!important;font-family:ge_dinar_tworegular;font-weight:bold!important;color:#A6A6A6;text-shadow:0 -1px 1px rgba(2,2,2,0.9);text-transform:uppercase;padding:16px 0}h0eader.header section.header11 .nav a:hover{color:#C6EB04;text-shadow:0 0 10px #C6EB04,0px 0 20px #C6EB04,0px 0 30px #C6EB04}footer.footerwrap{position:relative;margin:0 auto;width:100%;z-index:0;color:#fff;text-align:right;font-size:11px;background-color:transparent!important;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4Iw5yPW1oFKl38NXrrQ0mUyG61ZchQ48e57QArX_PdoCcJLevH31tMPwD8FpxrULnS8B3tqYAEu_eTWK_E-jl8ISpQAdi5cCdp8mpU_7e3g1xEGC0y8Rg_tdp25LwS14_dV9vXZNb5M8/s1600/top-arrow.png);background-repeat:repeat-x;background-position:top center;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.9) inset;-moz-box-shadow:0 2px 5px rgba(0,0,0,.9) inset;box-shadow:0 2px 5px rgba(0,0,0,.9) inset}
</style><b:if cond='data:blog.url == data:blog.homepageUrl'><style>
/*----------css rensponsiv home welcom-----------------*/
.ayana-welcome{display:none;bakground:#111;}
@media screen and (max-width:1208px){#0content-wrapper{max-width:95%;width:95%}}@media screen and (max-width:1060px){h0eader.header section.header11 .nav{width:73%}h0eader.header section.header11{width:87%}#time >nav.clock{margin:0 auto;padding:30px 0!important}}@media screen and (max-width:980px){h0eader.header section.header11{width:94%}h0eader.header section.header11 .nav li{padding:4px 5px 0 5px!important}h0eader.header section.header11 .nav{width:72%}.container{padding-right:0;padding-left:0}.colll3{width:34.5%}ul.label-post{display:none}h0eader.header section.header11 .nav a{font-size:11px!important}}@media only screen and (min-width:769px){#menu-2{display:none}}@media only screen and (max-width:768px){.menu_btn {display: block!important;}h0eader.header {display: block!important;}#menu-2{display:block!important;text-align:center;float:left;background:none repeat scroll 0% 0% rgba(20,20,19,0.8);width:2.2em;margin:9px 22px;font-size:24px;border-radius:6px;border:solid 2px #1E1E1E}section.header11 .nav{display:none;width:96%!important;background:none repeat scroll 0% 0% rgba(20,20,19,0.8);height:auto!important;margin-top:-14px!important;float:right!important;padding:5px!important;border-radius:6px!important;z-index:10000!important}.nav.js{display:none}h0eader.header section.header11 .nav li ul li{width:100%;text-align:right;margin-right:15px;line-height:2;padding:5px 21px 5px 5px!important;background:none!important}h0eader.header section.header11 .nav li{padding:4px 15px 0 9px!important;width:100%}h0eader.header section.header11 .nav li ul{position:relative!important;right:8px;background-image:none!important;background-color:none!important;display:block!important}h0eader.header section.header11 .nav li{background-image:none!important}.post-labels:before{font-size:8pxكmargin:0 -5px 0 2px}.colll3 .post-labels a:before{margin:0 3px 0 6px}.post-snippet:before{font-size:9px}.colll1 img{display:block}.colll2{width:36.5%;font-size:9px}.colll3{width:27.5%;font-size:8px!important;line-height:2}.colll4{width:4em;height:4em;margin:2px 8px 0 0}#content-wrapper{max-width:92%;width:92%}.colll2 h3{line-height:1em;margin:0;padding:4px 0 0 10px;font-size:10px!important}.g-profile:before{font-size:9px;margin:0 0 0 5px}.sosialbutton ul li a{line-height:21px;margin:0 6px 0 0!important}.sosialbutton ul li a{width:20px;height:20px}#logo-home{height:auto!important}#time{width:100%!important;float:none;margin-right:0!important;height:78px!important}#time >nav.clock{padding:0!important}#wrap2{padding-top:32px!important}div#phone{width:96%!important}nav.top-menu-home{width:90%!important}nav.top-menu-home a:link,nav.top-menu-home a:visited{width:17.9%!important}}@media screen and (max-width:530px){.colll1{width:90px}nav.top-menu-home a:link,nav.top-menu-home a:visited{margin:-8px 0 0 24px!important}.colll2{width:40.5%}.colll3{width:34.5%}.colll4{display:none}.post{margin:0 0 8px 0;padding:5px}#wrap2{padding-top:35px}.row .threecol{width:100%!important;text-align:center!important;line-height:1.7!important}footer.footerwrap .footergrd{max-width:100%}.footergrd-c3{width:100%!important;margin:5px 15px}.footergrd-c2{width:100%;margin:5px 20px}div#phone h2.phone-number{display:none!important}nav.top-menu-home a.blog:before,nav.top-menu-home a.about:before,nav.top-menu-home a.archive:before,nav.top-menu-home a.contact:before{width:25px!important;height:25px!important;border:4px solid #888!important;font-size:13px}}@media only screen and (max-width:420px){.colll1{width:88px}.colll2{width:36.5%}.colll3{width:30.5%}.colll4{display:none}.colll3 .post-labels{display:none}.sosialbutton{float:right;margin:10px -14px 0;height:23px;width:135px}.sosialbutton ul li a{width:15px;height:15px}.sosialbutton ul li a{line-height:17px;margin:0 5px 0 0!important}.sosialbutton ul li a:before{font-size:9px}nav.top-menu-home a.blog:before,nav.top-menu-home a.about:before,nav.top-menu-home a.archive:before,nav.top-menu-home a.contact:before{width:20px!important;height:20px!important;line-height:1.87em!important;border:4px solid #888!important;line-height:1.2!important}div#phone h2.phone-number{display:none!important}nav.top-menu-home a:link,nav.top-menu-home a:visited{width:16.9%!important;font-size:12.50px!important}}@media only screen and (max-width:360px){.colll3 .post-labels{display:none}nav.top-menu-home a.blog:before,nav.top-menu-home a.about:before,nav.top-menu-home a.archive:before,nav.top-menu-home a.contact:before{width:15px!important;height:16px!important;font-size:12px!important;border:2px solid #888!important}nav.top-menu-home a:link,nav.top-menu-home a:visited{margin:-8px 0 0 18px!important;font-size:12px!important}.colll3{width:66%}.post-author vcard{display:none}.colll2{width:66%}.post{margin:0 0 8px 0;padding:5px}.sosialbutton{display:none}#menu-2{width:1.2em}}#MBT-REDIRECTION{display:none;background:#111;width:100%;height:100%}</style></b:if><script src='https://ayana-tech1.googlecode.com/svn/Ayana/clock-home.js' type='text/javascript'/><a href='http://ayanatech.blogspot.com/'/><link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<body>
<div class='tools-bar' style='display:none;'><span class='iframe simptip-position-top' data-tooltip='اتصل بنا' href='http://www.123contactform.com/form-1081027/-' id='Love-ayana' style='padding-left:0px;padding-right:4px;margin-right:0;border-radius: 0;background: #C6EB04;color: #000;'><a href='http://www.123contactform.com/form-1081027/-' style='color: #fff;' target='_blank'><i class='fa fa-envelope' style='padding-left:4px;color: #000;'/></a></span><span class='simptip-position-top' data-tooltip='إنضم للأعضاء' href='https://www.blogger.com/follow-blog.g?blogID=295450615618330528' id='Love-ayana' style='padding-left: 0px;padding-right: 4px;margin-right: 0;border-radius: 0;background: #C6EB04;color: #000;'><a href='https://www.blogger.com/follow-blog.g?blogID=295450615618330528' style='padding-left:3px;' target='_blank'><i class='fa fa-user' style='color: #000;'/></a></span><span class='simptip-position-top' data-tooltip='طباعه الصفحه' href='javascript:window.print()' id='Love-ayana' style='margin-right: 0;border-radius: 0;background: #C6EB04;color: #000;'><a href='javascript:window.print()' style='padding: 3px;color: #fff;'><i class='fa fa-print' style='padding-left: 0px;padding-right: 4px;color: #000;'/></a></span><span class='simptip-position-top' data-tooltip='الصعود إلي اعلي' href='#' id='Love-ayana' style='padding-left: 0px;padding-right: 4px;margin-right: 0;border-radius: 0;background: #C6EB04;color: #000;'><a href='#' style='padding: 10px;color: #fff;'><i class='fa fa-arrow-up' style='padding-left:4px;color: #000;'/></a></span><span class='simptip-position-top' data-tooltip='عوده للخلف' href='javascript:history.go(-1)' id='Love-ayana' style='padding-left: 0px;padding-right: 4px;margin-right: 0;border-radius: 0;background: #C6EB04;color: #000;'><a href='javascript:history.go(-1)' style='padding: 5px;color: #fff;'><i class='fa fa-arrow-right' style='padding-left:4px;color: #000;'/></a></span><span class='simptip-position-top' data-tooltip='إعاده تحميل الصفحه' href='javascript:window.location.reload()' id='Love-ayana' style='padding-left: 0px;padding-right: 4px;margin-right: 0;border-radius: 0;background: #C6EB04;color: #000;'><a href='javascript:window.location.reload()' style='padding: 5px;color: #fff;'><i class='fa fa-undo' style='padding-left:4px;color: #000;'/></a></span></div><b:if cond='data:blog.url == data:blog.homepageUrl'><div id='layout'><div id='pxsdrf' style='     margin-bottom: 50px; '><div class='bg-1x88z1'/><div id='wrap2'><div id='content-wrapper' style='     margin-top: 63px; '><header class='clearfix'><div id='time'><nav class='clock'><ul><li id='hours'/><li class='point'>:</li><li id='min'/><li class='point'>:</li><li id='sec'/></ul><div id='Date'/></nav></div><div class='clearfix' id='phone'><h2 class='phone-number'><cufon alt='+62 ' class='cufon cufon-canvas' style='width: 85px; height: 40px;'><canvas height='39' style='width: 115px; height: 39px; top: 0px; right: -1px;' width='115'/></cufon><cufon alt='857-6747-1247' class='cufon cufon-canvas' style='width: 285px; height: 40px;'><canvas height='39' style='width: 305px; height: 39px; top: 0px; right: -1px;' width='305'/></cufon></h2><h6 class='call'/></div><nav class='top-menu-home'><div class='container clearfix'><a class='tip blog' href='/search/?max-results=9'><tip>دخول المدونه</tip></a><span class='divider'/><a class='tip about' href='/search/label/قوالب بلوجر'>القوالب <tip>القوالب</tip></a><span class='divider'/><a class='contact' href='/search/label/قوالب مدفوعه'>اعمالي</a><span class='divider'/><a class='iframe archive' href='http://www.123contactform.com/form-1081027/-'>اتصل بنا</a></div></nav></header><br style='clear:both'/><div id='logo-home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-QvtO-62yE9BhW7JiO3LET6SdsoqG9GXm9v7P3RM9O1ibwEnrP350wosCvdDE7bFzrWIAsZx293o27-7uzOwvZMgsAB9QBu00TDeTUbx32GNIVjF2NFOdtofj2RGuMlOw2ciw7dfmILs/s1600/hanan-hom-logo.png' style='margin:45px 9px 0px 0px;'/></div><div class='container'><div class='row'><div class='threecol'><h5><cufon alt='kopizine' class='cufon cufon-canvas' style='width:117px;height:23px;'><canvas height='23' style='width:125px;height:23px;top:0;right:0;' width='125'/>قوالب مجانيه</cufon></h5><p>ميز مدونتك بافضل قوالب بلوجر المجانيه الاحترافيه التي تزيد مدونتك جمالا واحترافيه والتي بدورها تزيد من اقبال الزوار عليها </p></div><div class='threecol'><h5><cufon alt='kopizine' class='cufon cufon-canvas' style='width:117px;height:23px;'><canvas height='23' style='width:125px;height:23px;top:0;right:0;' width='125'/>قوالب مدفوعه</cufon></h5><p>اجعل مدونتك افضل مدونة من حيث التصميم الخلاب الذي ستحصل عليه وفق احدث معايير الويب والذي سيكون تصميم خاص وحصري بمدونتك بسعر مميز </p></div><div class='threecol'><h5><cufon alt='kopizine' class='cufon cufon-canvas' style='width:117px;height:23px;'><canvas height='23' style='width:125px;height:23px;top:0;right:0;' width='125'/>اضافات بلوجر</cufon></h5><p>احصل على احدث الاضافات والادوات الخدميه والتفاعليه مجانا والتي تزيد من انسيابية مدونتك واحترافيتها وتجعلها مدونه متكامله من حيث الشكل والمحتوى </p></div><div class='threecol last'><h5><cufon alt='Tentang' class='cufon cufon-canvas' style='width:120px;height:23px;'><canvas height='23' style='width:126px;height:23px;top:0;right:0;' width='126'/>دعم فني</cufon></h5><p>دعم فني مجاني لجميع مشاكل مدونات بلوجر ومحاولة الرد على جميع استفسارات زوار المدونه ومساعدتهم للارتقاء بمدوناتهم الى الاعلى </p></div></div></div></div></div></div></div></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<header class='header' style='margin-top: -820px!important;'>
<section class='header11'>
<div id='logo'><li class='s-home'>
<a href='/'>مدونة ويب نايت</a></li></div>
<nav class='nav'><ul><li><a href='/search/?max-results=9'>
<i class='fa fa-file'/> المدونه</a></li>
<li><a href='/search/label/قوالب بلوجر'>
<i class='fa fa-paint-brush'/>قوالب بلوجر</a><ul>
<li><a href='/search/label/قوالب بلوجر'>قوالب مجانيه</a></li>
<li><a href='/search/label/قوالب مدفوعه'>اعمالي</a></li></ul></li>
<li><a href='/search/label/اضافات بلوجر'><i class='fa fa-briefcase'/>اضافات بلوجر</a><ul>
<li><a href='/search/label/اضافات بلوجر'>جي كويري</a></li><li><a href='/search/label/اضافات بلوجر'>تعليقات</a></li>
<li><a href='/search/label/اضافات بلوجر'>ازرار + ايقونات</a></li>
<li><a href='/search/label/اضافات بلوجر'>CSS3 + CSS</a></li>
<li><a href='/search/label/اضافات بلوجر'>سلايدرشو</a></li></ul></li>
<li><a href='#'><i class='fa fa-code'/>ادوات بلوجر</a><ul>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_22.html'>محرر الاكواد</a></li>
<li><a href='http://ayanatech.blogspot.com/p/ayana-tech.html'>محول الاكواد</a></li>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_8.html'>اكواد الالوان</a></li>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_5.html'>فوتوشوب اونلاين</a></li></ul></li>
<li><a href='#'><i class='fa fa-archive'/>الارشيف</a></li>
<li><a href='#'><i class='fa fa-life-ring'/>الدعم الفني</a></li>
<li><a class='iframe' href='http://www.123contactform.com/form-1081027/-'><i class='fa fa-user'/>اتصل بنا</a></li></ul></nav>
</section><li id='ribbon'/></header>
</b:if>
<div class='ayana-welcome'>

<div id='layout'>
<div id='pxsdrf'>

<header class='header'>
<section class='header11'>
<div id='logo'><li class='s-home'>
<a href='/'>مدونة ويب نايت</a></li></div>
<nav class='nav'><ul><li><a href='/search/?max-results=9'>
<i class='fa fa-file'/> المدونه</a></li>
<li><a href='/search/label/قوالب بلوجر'>
<i class='fa fa-paint-brush'/>قوالب بلوجر</a><ul>
<li><a href='/search/label/قوالب بلوجر'>قوالب مجانيه</a></li>
<li><a href='/search/label/قوالب مدفوعه'>اعمالي</a></li></ul></li>
<li><a href='/search/label/اضافات بلوجر'><i class='fa fa-briefcase'/>اضافات بلوجر</a><ul>
<li><a href='/search/label/اضافات بلوجر'>جي كويري</a></li><li><a href='/search/label/اضافات بلوجر'>تعليقات</a></li>
<li><a href='/search/label/اضافات بلوجر'>ازرار + ايقونات</a></li>
<li><a href='/search/label/اضافات بلوجر'>CSS3 + CSS</a></li>
<li><a href='/search/label/اضافات بلوجر'>سلايدرشو</a></li></ul></li>
<li><a href='#'><i class='fa fa-code'/>ادوات بلوجر</a><ul>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_22.html'>محرر الاكواد</a></li>
<li><a href='http://ayanatech.blogspot.com/p/ayana-tech.html'>محول الاكواد</a></li>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_8.html'>اكواد الالوان</a></li>
<li><a href='http://ayanatech.blogspot.com/p/blog-page_5.html'>فوتوشوب اونلاين</a></li></ul></li>
<li><a href='#'><i class='fa fa-archive'/>الارشيف</a></li>
<li><a href='#'><i class='fa fa-life-ring'/>الدعم الفني</a></li>
<li><a class='iframe' href='http://www.123contactform.com/form-1081027/-'><i class='fa fa-user'/>اتصل بنا</a></li></ul></nav>
</section><li id='ribbon'/></header>
<div id='wrap2'>
<div id='content-wrapper'>
<div class='container' id='heden'>

      </div>

<b:section id='main-wrapper'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
    <b:includable id='main' var='top'>

<b:if cond='data:mobile == "false"'>

    
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == "false"'>
            </div></div>
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          <div class="date-outer">
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'/>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          <div class="date-posts">
        </b:if>
        <div class='post-outer'>
<div class='puertoColor'/>

        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        </div></div>
      </b:if>
      <data:adEnd/>
    </div>

    
    <b:include name='nextprev'/>

    
    <b:include name='feedLinks'/>

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
        function initialize() {
          google.annotations.setApplicationId(<data:top.blogspotReviews/>);
          google.annotations.createAll();
          google.annotations.fetch();
        }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>

<b:else/>
    <b:include name='mobile-main'/>
</b:if>

<b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
</b:if>

</b:includable>
    <b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
</span>
</b:includable>
    <b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'> </span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
</b:if>
<p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
    <b:includable id='blog-pager1'>
<ul class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <li id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </li>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <li id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </li>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

</ul>
<div class='clear'/>
</b:includable>
    <b:includable id='comment-form' var='post'>
<div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>

      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>

      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
    </script>
</div>
</b:includable>
    <b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
</span>
</b:includable>
    <b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
<b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
</b:if>
</b:includable>
    <b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
<b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
</b:if>
</b:includable>
    <b:includable id='comments' var='post'>
<div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
               
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
               
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
             
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
             
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
           
          <data:post.commentRangeText/>
           
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>

          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</div>
</b:includable>
    <b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

    <b:else/> 
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
</b:if>
</b:includable>
    <b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
    <b:includable id='iframe_comments' var='post'>

<b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

    <b:if cond='data:post.embedCommentForm == "false"'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
</b:if>
</b:includable>
    <b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

        <div class='mobile-index-arrow'>&rsaquo;</div>

        <div class='mobile-index-contents'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='mobile-index-thumbnail'>
              <div class='Image'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
            </div>
          </b:if>

          <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>

        <div style='clear: both;'/>
      </a>

      <div class='mobile-index-comment'>
        <b:if cond='data:blog.pageType != "static_page"'>
          <b:if cond='data:post.allowComments'>
            <b:if cond='data:post.numComments != 0'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </div>
    </div>
</div>
</b:includable>
    <b:includable id='mobile-main' var='top'>
    
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:if cond='data:blog.pageType == "index"'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>
    </div>

   <b:include name='mobile-nextprev'/>
</b:includable>
    <b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

</div>
<div class='clear'/>
</b:includable>
    <b:includable id='mobile-post' var='post'>
<div class='date-outer'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <div class='date-posts'>
      <div class='post-outer'>
<div class='puertoColor'/>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<style>
.hreview{display:none}
</style>
<div class='hreview'>
<span typeof='v:Review-aggregate' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span rel='v:rating'>
<span typeof='v:Rating'>
<span property='v:average'>100</span>
<span property='v:best'>100</span>
</span>
</span>
<span property='v:votes'>100</span>
</span>
</div>

          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>
          <meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
                <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>
                <span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>
          </div>

          <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
            <data:post.body/>

            <div style='clear: both;'/> 
          </div>

          <div class='post-footer'>

            <div class='post-footer-line post-footer-line-1'>



              <span class='post-comment-link'>
                <b:if cond='data:blog.pageType != "item"'>
                  <b:if cond='data:blog.pageType != "static_page"'>
                    <b:if cond='data:post.allowComments'>
                      <b:include data='post' name='comment_count_picker'/>
                    </b:if>
                  </b:if>
                </b:if>
              </span>
            </div>

            <div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
            </div>

          </div>
        </div>

        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
      </div>
    </div>
</div>
</b:includable>
    <b:includable id='nextprev'>
<ul class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <li id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </li>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <li id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </li>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

</ul>
<div class='clear'/>
</b:includable>
    <b:includable id='post' var='post'>
<article class='post'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:content='data:post.firstImageUrl'/>
   </b:if>

   <b:if cond='data:blog.pageType != "item"'>
   <b:if cond='data:blog.pageType != "static_page"'>
   <b:if cond='data:post.thumbnailUrl'>



<div class='img-thumbnail'><span class='overlay'/><span class='medal'/>
</div>
<a xpr:id='"post-body-" + data:post.id'/>
<h3 class='post-title' itemprop='name'>
<a expr:href='data:post.url' expr:title='data:post.title'/>
</h3>
</b:if>
   </b:if>
    </b:if>
    <b:if cond='data:post.title'>
      <b:if cond='data:blog.pageType != "item"'>
        <b:if cond='data:blog.pageType == "static_page"'>
          <h1 class='post-title entry-title'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h1>
        <b:else/>
       </b:if>
      <b:else/>

      </b:if>
    </b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hreview{display:none}
</style>
<div class='hreview'>
<span typeof='v:Review-aggregate' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span rel='v:rating'>
<span typeof='v:Rating'>
<span property='v:average'>100</span>
<span property='v:best'>100</span>
</span>
</span>
<span property='v:votes'>100</span>
</span>
</div>
<div class='colll1'>

<img expr:alt='data:post.title' expr:href='data:post.url' expr:src='data:post.firstImageUrl'/>
                </div>
<div class='colll2'>
<h3 class='post-title entry-title' itemprop='name'>

          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
              <b:else/>
                <data:post.title/>
            </b:if>
          </b:if>
        </h3>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <i class=''/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>
<div class='sosialbutton'>
<ul>
<li><a class='goog-inline-block share-button sb-email' href='https://mail.google.com' target='_blank' title='إرسال بالبريد الإلكتروني'>
<span class='share-button-link-text'>Email This</span></a>
</li>
<li><a class='goog-inline-block share-button sb-blog' href='https://draft.blogger.com/home' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='كتابة مدونة حول هذه المشاركة'><span class='share-button-link-text'>كتابة مدونة حول هذه المشاركة</span>
</a></li>
<li><a class='goog-inline-block share-button sb-twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' target='_blank' title='‏المشاركة في Twitter'>
<span class='share-button-link-text'>‏المشاركة في Twitter</span></a></li>
<li><a class='goog-inline-block share-button sb-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='‏المشاركة في Facebook'>
<span class='share-button-link-text'>‏المشاركة في Facebook</span>
</a></li>
<li><a class='goog-inline-block share-button sb-pinterest' expr:href='"https://plus.google.com/share?url=" + data:post.url + ""' target='_blank'><span class='share-button-link-text'>.to google+</span></a></li>
</ul>
</div>
</div>
<div class='colll3'>
<span class='post-labels'>
التسميات:

        <b:if cond='data:post.labels'>
         <i class=''/>
          <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>
<span class='post-snippet'>
<data:post.snippet/>
</span>
</div>
<div class='colll4'>
<a class='numcomment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>0 <span class='labelscomment'>تعليق</span> </b:if> <b:if cond='data:post.numComments == 1'> 1 <span class='labelscomment'>تعليق</span></b:if>
   <span class='numcomment' style='     font-size: 1em;      line-height: 0.5em !important;     margin-top: 1px;color:#5D9F5E;'><b:if cond='data:post.numComments > 1'>
<data:post.numComments/></b:if>
</span>
<b:if cond='data:post.numComments > 1'><span class='labelscomment'>تعليق</span></b:if>

</a>
</div>

<div style='clear: both;'/>
</b:if>
    </b:if>

       <b:include data='post' name='postQuickEdit'/>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

   <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType == "static_page"'>
      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
        <data:post.body/>
        <div style='clear:both;'/>
      </div>
    <b:else/>

       <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
           <div>
           </div>
           <div style='clear:both;'/>
       </div>
    </b:if>

   <b:else/>

      
      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div class='post-home'>
        </div>
      </div>
<div class='post-info'>

<b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h2>
    </b:if>


        <data:post.body/>

<center>
<div class='clear'/>
<div id='jalal-share'>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='fa fa-facebook'/></i>
<div class='slide-share'>
<p>مشاركه</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='fa fa-facebook'/></i>
<div class='slide-share'>
<p>اعجاب</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='fa fa-google-plus'/></i>
<div class='slide-share'>
<p>+ مشاركه </p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
      window.___gcfg = {lang: 'id'};

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='fa fa-twitter'/></i>
<div class='slide-share'>
<p>غرد تغريده</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' href='http://twitter.com/share' title='Share via Twitter'>تغريد</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div></div>
<div class='clear'/>
</center>
<div class='post-footer'>
<style>
.post-footer {
    background-color: rgb(223, 241, 245);
    border-radius: 4px;
    overflow: hidden;
    padding: 4px 15px 0px;
    border: 1px solid rgb(176, 227, 246);
}
</style>
<div class='profil-image-home'>
<a href='/'>
<img class='profile-img' id='profil' src='http://s8.postimg.org/okq46hpet/16432.jpg' width='72'/></a>
<div class='profil-image-icon'>
<a class='fb' href='https://www.facebook.com/profile.php?id=100003075260217' target='_blank'/>
<a class='twitter' href='https://twitter.com/H_S_R1' target='_blank'/>
<a class='google-plus' href='/' rel='publisher' target='_blank'/>
</div></div>
<div class='profil-dep-home'><p>
اسامة عبد الرضا : من الجمهورية العراقية , إهتمام وتخصص في تصميم قوالب بلوجر كذلك التصاميم العامة أعمل حر , حب وعشق للأجهزة ابل وبألعاب الفيديو أيضا مترجم أفلام ومسلسلات وبرامج تلفزيونية إنجليزية.
<a href='https://www.facebook.com/osama.barcelona.26' style='text-decoration: none;'>صفحتي على الفيس بوك من هنا</a></p></div>
<div class='post-footer-line post-footer-line-1'>
<span class='reaction-buttons'>
</span>
<span class='star-ratings'>
</span>
<span class='post-backlinks post-comment-link'>
</span>

</div></div>
<style>
/* CSS Related Posts Ar1web */
.related-post{margin:10px 0;border-radius:3px;}
.titlehead{margin:0 4px 10px;font-size:15px;border-bottom:3px solid #ecf0f1;color:3px solid #F5F5F5;font-weight:700;padding-bottom:2px;background: url("https://jetara.googlecode.com/svn/trunk/header-6.png") repeat-x scroll 0% 0% #32ADCE !important;
color: #FFF !important;
padding: 13px !important;
text-align: center !important;
margin: 0px 0px 20px;border-radius:3px;}
.titlehead span{border-bottom:3px solid #F5F5F5;padding-bottom:4px;}
.related-post{margin:1em auto 0;background: #F5F5F5;border: 1px solid #ddd;}
.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-3 .related-post-item{float:right;width:322px;height:auto;margin:0 3px;margin-bottom:-993px;padding-bottom:999px;outline:0;}
.related-post-style-3 .related-post-item:first-child{border-left:none;}
.related-post-style-3 .related-post-item-thumbnail{max-width:none;max-height:none;padding:0;float:right;}
.related-post-style-3 .related-post-item-title{font-weight:500;font-size:14px;margin-right: 10px;}
div.rel-item-post{background:#DFF1F5;padding:8px;border:1px solid #A4D4D0;}
div.rich-snippet{padding:7px 7px 20px;margin:10px 0;background:#eee;border-top:1px solid #DBDBDB;font-size:12px;color:#525252;line-height:1.6em;font-family: Electrolize,ge_ss_threeregular;border: 1px solid #DFDDDD;}
div.st_share{margin:10px 0;}
div.rich-snippet span{color:#727272;}
</style>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>",
numPosts: 6,
summaryLength: 0,
titleLength: "auto",
thumbnailSize: 65,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>

        <div style='clear: both;'/>

      </div>
    </b:if>
</article>
</b:includable>
    <b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
      </a>
    </span>
</b:if>
</b:includable>
    <b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>
    <b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
    <b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
    <a name='comment-form'/>

    <b:if cond='data:mobile'>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
    </script>
</div>
</b:includable>
    <b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
</script>
</b:includable>
    <b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</div>
</b:includable>
</b:widget>
</b:section>

<div style='clear:both'/>

</div></div>

<div class='footcol' id='fcol1'/>
<footer class='f0ooterwrap'>
<div class='footerbody'>
<article class='footergrd'>

<div class='footergrd-m1'/>
<b:section class='footergrd-c2' id='footer1'>
<b:widget id='HTML2' locked='false' title='اصدقاء المدونه على فيس بوك' type='HTML'>
    <b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

<div class='footergrd-m2'/>
<b:section class='footergrd-c2' id='footer'>
<b:widget id='PopularPosts1' locked='false' title='الاكثر زيارة' type='PopularPosts'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

<div class='footergrd-m3'/>
<b:section class='footergrd-c2' id='footer3'>
<b:widget id='PopularPosts2' locked='false' title='الاكثر زيارة' type='PopularPosts'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

<br style='clear:both'/>
</article>
</div>
<p class='pad_t_15'>Designed by © <span/><a href='http://alb33dani.blogspot.com'>albaadani</a> - Copyright </p>
</footer>

</div></div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
   // Create a newDate() object and extract the seconds of the current time on the visitor's
   var seconds = new Date().getSeconds();
   // Add a leading zero to seconds value
   $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
   },1000);

setInterval( function() {
   // Create a newDate() object and extract the minutes of the current time on the visitor's
   var minutes = new Date().getMinutes();
   // Add a leading zero to the minutes value
   $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);

setInterval( function() {
   // Create a newDate() object and extract the hours of the current time on the visitor's
   var hours = new Date().getHours();
   // Add a leading zero to the hours value
   $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(".0").1("3");$(".0").1("3").9(\'<4 b="5-2"><a><i c="6 6-d"/></a></4>\');$("#5-2").e(7(){$(".0").f()});$("8").g(7(){h(8.j>k){$(".0").l("m")}});',23,23,'nav|addClass||js|div|menu|fa|function|window|before||id|class|bars|click|toggle|resize|if||innerWidth|768|removeAttr|style'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery('a').each(function() {
// Let's make external links open in a new window.
var href = jQuery(this).attr('href');

if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr("target", "_blank");
}
});
//]]>
</script>
<div class='socialsider socialsider_left_middle socialsider_fixed socialsider_bgcolor_white socialsider_radius socialsider_spacer socialsider_opacity socialsider_hidden '><ul>
<li><a data-socialsider='facebook' href='https://www.facebook.com/profile.php?id=100003075260217' title='Facebook'><i class='fa fa-facebook'/></a></li>
<li><a data-socialsider='twitter' href='https://twitter.com/H_S_R1' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li><a data-socialsider='youtube' href='https://www.youtube.com/channel/UCWnB8K2JFwQpR5d3wyRW8Aw' title='YouTube'><i class='fa fa-youtube'/></a></li>
<li><a data-socialsider='instagram' href='http://instagram.com/hanansr1/' title='Instagram'><i class='fa fa-instagram'/></a></li>
<li><a data-socialsider='tumblr' href='https://www.tumblr.com/blog/hanan1435' title='Tumblr'><i class='fa fa-tumblr'/></a></li>
</ul></div>
<style>
.socialsider_left_middle a:hover {opacity: 1111;}
.socialsider { width:70px; display:block; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.socialsider ul { list-style-type:none; margin:0; padding:0; }
.socialsider li { margin:0; padding:0; }
.socialsider a { overflow:hidden; height:41px;display:block; text-decoration:none; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position:relative;}
.socialsider a::after { display:block; font-family:'socicon'; text-decoration:none; font-size:20px; padding:10px; position:absolute;left:0;top:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.socialsider_fixed { position:fixed; }
.socialsider_absolute { position:absolute; }
/* Effects */
.socialsider_radius a { border-radius:5px; }
.socialsider_shadow a { -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);box-shadow: 0 0 2px 2px rgba(0,0,0,0.2); }
.socialsider_opacity a { opacity:0.6; }
.socialsider_opacity a:hover::after { opacity:1; }
.socialsider_spacer a { height:42px; margin-bottom:1px; }
.socialsider.socialsider_bgcolor_white a i {font-size: 23px;margin: 9px 10px 0px 0px;}
.socialsider_left_middle { left:-30px; top:30%; }
.socialsider_left_middle.socialsider_hidden { left:-45px;}
.socialsider_left_middle.socialsider_hidden:hover { left:-25px; }
.socialsider_left_middle a { left:0px;}
.socialsider_left_middle a::after { padding-left:40px; }
.socialsider_left_middle a:hover { left:10px; }
.socialsider.socialsider_bgcolor_white a{ color:#FFF;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='twitter']{ background:#4da7de;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='facebook'] { background:#3e5b98;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='youtube']{ background:#e02a20;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='instagram'] { background:#E5C538;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='blogger']{ background:#ec661c;}
.socialsider.socialsider_bgcolor_white a[data-socialsider="tumblr"]{background:#45556C;}

</style>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script src='https://www.blogger.com/static/v1/widgets/3220738932-widgets.js' type='text/javascript'/>
</div>

</body>
</html>

طريقة تغير القالب عن طريق نسخ و لصق الكود

معاينة اضغط هنا تحميل اضغط هنا

طريقة عمل مشاركة ارباح ادسنس لمدونات بلوجر

2014-09-02T06:12:00.000-07:00

بسم الله الرحمن الرحيم

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

نذهب الي لوحة تحكم بلوجر من خلال الرابط التالي :

http://www.blogger.com/home

ثم نذهب الى تصميم للمدونة المراد اضافة الكود لها ثم تحرير html

ونقوم بالضغط على توسيع القالب ونبحث عن الكود التالي :

ثم نضع الكود التالي فوقه او تحته على حسب الرغبة

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "ayache mohammed"'>
ضع كود أدسنس هنا الخاص ب ayache mohamed
</b:if>
<b:if cond='data:post.author == "hani ahmed"'>
ضع كود أدسنس هنا الخاص ب hani ahmed
</b:if&gt
<b:if cond='data:post.author == "mostafa "'>
ضع كود أدسنس هنا الخاص ب mostafa
</b:if&gt
</b:if>
<br/>

مع تغيير اسم المدونين وتغير كود ادسنس بعد تحويله أداة تحويل الاعلانات

حل مشكلة عدم ظهور ترقيم صفحات التسميات

2012-05-16T02:03:00.001-07:00

هل تحتوى مدونتك على إضافة ترقيم الصفحات ؟ لكنك تعاني من مشكلة عدم ظهور الترقيم في صفحات التسميات ،الآن لدينا الحل أن يكون العدد المحدد لصفحات التسميات مطابق لعدد الصفحات في الرئيسية ،حفاظا علي تنسيق المدونة .

إنتقل لقالب مدونتك ،ضع علامة علي توسيع ثم قم بالبحث عن هذا الكود(سوف تجد منه أكثر من واحد).

'data:label.url'

ثم قم بإتستبدالها جميعا بهذا الكود ،مع تحديد عدد المواضيع التي سوف تعرض عند الضغط علي أحد التسميات ،وهو العدد 5 في هذا المثال .

'data:label.url + "?&max-results=5"'

قم بحفظ القالب ......إنتهى و مع تحياتي للكبير أبـــو إيــــاد

إدراج ترقيم الصفحات لمدونات بلوجر

2012-05-16T01:54:00.000-07:00

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript ولآن الصق الكود التالي :

1 : var pageCount = 5; هذه القيمة تمثل عدد المواضيع المراد عرضها في صفحة الواحدة
2 : var displayPageNum = 3; هذه القيمة تمثل عدد الصفحات التي يتم إدراجها.

و الآن قم بإدراج الأداة أسفل "رسائل المدونة الالكترونية"

ثم قم بالحفظ و دائما مع المبدع الإستاذ أبو إيــــاد

إضافة تأثيرات حركية على الصور لمدونات بلوجر

2012-05-16T01:05:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته ،سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات على الصور هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس على الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية . و الآن نذهب لتركيب الإضافة .

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.بإستعمال (CTRL+F ) قم بالبحث عن الكود التالي :

]]></b:skin>

ثم قم بوضع الكود التالي قبله

.post img {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

padding: 5px 5px 5px 5px;

-webkit-transform: rotate(+2deg);

-moz-transform: rotate(+2deg);

}

.post img:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .

والتتيجة تكون الصورة على هذا الشكل .

أتمنى أن تنال إعجابكم و تحية كبيرة للإستاذ أبو إياد

أداة عبارة على مصحف إاكتروني

2012-05-07T08:56:00.000-07:00

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

.

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم إضافة أداة جديدة

ثم نضع بداخلها الكود التالي :

يمكنك أيضا تحديد طول و عرض الأداة

ضح سعيد و بالتوفيق

أداة لعرض التاريخ الهجري

2012-05-07T08:32:00.000-07:00

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم إضافة أداة جديدة

ثم نضع بداخلها الكود التالي :

أتمنى أن تنال إعجابكم في إنتظار تشجيعاتكم

أداة المواضيع العشوائية

2012-05-05T09:16:00.000-07:00

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم إضافة أداة جديدة

ثم نضع بداخلها الكود التالي

الرقم 7 يمثل عدد المواضيع المعروضة
أتمنى أن تنال إعجابكم في إنتظار تشجيعاتكم

و بالتوفيق إنشاء الله

اداة المواضيع الأكثر زيارتا و تعليقا

2012-05-01T08:02:00.000-07:00

السلام عليكم في هذه التدوينة سنتطرق بعون الله تعالى إلى إضافة أداة رائعة حيث تقوم بعرض أكثر التدوينات زيارتا و تعليقا بطريقة جميلة كما هي على المدونة . نأتي الآن للإضافة .

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم إضافة أداة جديدة

ثم نضع بداخلها الكود التالي مع تغير رابط المدونة بالون الأحمر إلى رابط مدونتك

أتمنى أن تنال إعجابكم في إنتظار تشجيعاتكم