‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل

42 قالب من أروع قوالب بلوجر


من أجمل ما قرأت في حرية الرأي ، وهي مقولة أرددها دوماً مقولة الإمام الشافعي رحمه الله تعالى ” رأيي صواب يحتمل الخطأ ، ورأيك خطأ يحتمل الصواب ” .
 وهو رأي حطم جميع تلك المقولات الزائفة التي يدعيها الغرب عن حرية الرأي والديمقراطية البشعة التي يمارسها نفاقاً، فما أتى بحرية الإنسان سوى الإسلام .
 لن أطيل عليكم ، تلك مقولة أحببت أن أشارككم إياها
  :-P موضوعي اليوم لأصحاب مدونات بلوجر المميزة ، بحوزتي لكم 42 قالب من أروع قوالب بلوجر .
 حجم الملف : 7.34 mb
 الملف مرفوع على 12 سيرفر ..
 اختر منها ما شئت telecharger

شرح طريقة إضافة أزرار المشاركة أسفل التدوينات


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

شكل الإضافة : 


 أولا : إدهب إلى القالب تم تحرير HTML وبعدها إبحث بالضغط على cntrl + f في الكيبورد و إبحث عن الكود التالي : 

]]></b:skin>

بعدها أضف الكود التالي قبله :

 
/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYIbkKflXx9PoJhV_TTpEn3RKc8iN2aJIOtC8ngF0HzYkMI2n142dm5PTisqsarIEHFkJQFOg4wfRMdxMLx9MfX4GTxQ25EQ-tlLR1C2wd8lMvpckRBC3q8jbHCgsgorLIEqvoyZMFhee/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}


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

<data:post.body/>

بعدها أضف الكود التالي قبله وقم بحفظ التغيرات وشاهد الإضافة أسفل كل تدوينة :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

شرح كيفية إضافة آخر التعليقات لمدونات بلوجر

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

إذهب إلى التخطيط
تم إضافة أذاة


تم إختر أداة HTML/Javascript كما هو مبين في الصورة أسفله و بعدها ضع الكود أسفله في خانة الكود
Menambahkan%2BWidget%2BBlogger

 الكود

 

شرح طريقة إضافة المشاركات الشائعة بشكل جميل و جداب

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

1.     إذهب إلى التخطيط
2.      تم إضافة أذاة

3.     تم إختر أداة HTML/Javascript كما هو مبين في الصورة أسفله و بعدها ضع الكود أسفله في خانة الكود
شرح طريقة إضافة المشاركات الشائعة بشكل جميل و جداب

 الكود
 


شرح طريقة إضافة تعليقات Disqus يدوياً



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

  •  يمكن متابعة التعليقات التي تم طرحها بسهوله
  • يمكن متابعة تصويتات الإعجاب او عدم الإعجاب التي تم طرحها
  • مكنك متابعة أشخاص او ان يكون لديك متابعين شبيهه بتويتر Followers و Following
  • يتم تحديث التعليقات وظهوره بوقت تلقائي لا يحتاج إلى تحديث الصفحة نهائياً
  • إمكانيات متقدمة في عرض التعليقات حيث يمكن عرض أفضل التعليقات بناء على أكثر الإعجابات او عرض أحدث التعليقات أو عرض أقدم التعليقات
  • إمكانية إضافة صورة أو فيديو يظهر بالصندوق مباشر
  • يمكنك مشاهدة من قام بالرد عليك بتعليقاتك سواء في نفس الموقع  أو في مواقع أخرى شاركت بالتعليق فيها من خلال نظام Disqus
  • إمكانية التعليق عبر الهاتف والإشراف على التعليقات في أي مكان فهو متوافق مع الهواتف الذكية
  • مشاهدة تعليقات مرتبطة التي تم إضافتها في الموقع ككل بحيث يظهر تعليقات قد تثير اهتمامك

  • توجد به إضافة إعلانات لربح

والمزيد...

شرح  طريقة التركيب
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن الكود التالي {إن لم تجده فإبحث عن نصفه}

<b:includable id='comments' var='post'> <div class='comments' id='comments'>

3. ضع الكود التالي أسفله
 <script type='text/javascript'>
                var disqus_shortname = &quot;Ar1web&quot;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
                    (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                })();
                </script>

4. غير Ar1web بإسم التعلقيات الخاص بك
5. إبحث عن ]]></b:skin> ضع الكود التالي فوقه 

#comments {display:none;}
.post-comment-link { visibility: hidden; }
6. إحفظ القالب ومبروك عليك الإضافة 

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

إضافة رسالة ترحيبية أو صفحة قيد الإنشاء


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

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


1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي فوقه
إضغط مرتيين لتحديد الكل
.sp-container {/* By Hm - http://www.ar1web.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Hm - http://www.ar1web.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Hm - http://www.ar1web.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
font-family: Electrolize,ge_ss_tvbold;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Hm - http://www.ar1web.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Hm - http://www.ar1web.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Hm - http://www.ar1web.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Hm - http://www.ar1web.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-family: Electrolize,ge_ss_tvbold;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Hm - http://www.ar1web.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Hm - http://www.ar1web.com*/
color: #fff;/* By Hm - http://www.ar1web.com*/
}
/* By Hm - http://www.ar1web.com*/
@-webkit-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Hm - http://www.ar1web.com*/
@-moz-keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Hm - http://www.ar1web.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Hm - http://www.ar1web.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
4. ابحث عن </head> ضع الكود الأتي فوقه

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://ar1web-com.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>
5. ابحث عن <body> ضع الكود التالي أسفله
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>إنتظر</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>مرحبا بك</span>
<span>بمدونة </span>
<span>عرب ويب</span>
</h2>
<a class='sp-link' href='#'>www.ar1web.com</a>
<a class='sp-circle-link' href='#'>إفتح</a>
</div>
</div></b:if>
* غير الكلمات بما تراه مناسب