اخر الاخبار
جار التحميل...

اضافة فانوس رمضان متحرك لمدونات بلوجر

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

اضافة فانوس رمضان متحرك لمدونات بلوجر

 اضافة فانوس رمضان متحرك لمدونات بلوجر


1. اذهب الى لوحة التحكم > القالب > تحرير HTML

2. ابحث عن </body> وضع الكود التالى فوقه

<!--  Ramadan Lantern By Rotkx.blogspot.com (start) -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0"><tr><td width="900" height="0">
<div style="float:top left; position:absolute; overflow:visible; right:45px; top:0px; height:192px; width:144px z-index: 9999;"> 
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144">
<param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/>
<param name="quality" value="High"/>
<param name="wmode" value="transparent"/>
<embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed>
</object> </div></td></tr></table>
</div>
<!--  Ramadan Lantern By Rotkx.blogspot.com (end) -->

3. اضغط على حفظ النموذج.

رمضان كريم وكل عام وأنتم بخير

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

رمضان كريم وكل عام وأنتم بخير

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

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

وكل عام والامة الاسلامية بخير، تحياتى لكم جميعا.

قالب Mostheme Mini معرب

قالب Mostheme Mini معرب - موسثيم هو قالب بلوجر مصمم باحترافية وبطريقة نظيفة وبساطة، قالب يمكن استخدامه فى مختلف المجالات والاعمال التجارية، الشركات، المنتجات، والتسويق، تم ترتيب وتنسيق الاكواد والتأثيرات للحفاظ على سرعة القالب، تم تركيب خط عربى مناسب للقالب وتم تعريب القالب بنسبة 100%، يحتوى القالب على العديد من الاضافات المميزة والجديدة كـ اداة المشاركات الاخيرة، وصفحة الخطأ بشكلها العصرى، توجد مساحات اعلاينة داخل الموضوع منسقة بشكل احترافى.

قالب Mostheme Mini معرب

اضافات ومميزات قالب موسثيم مينى


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


لتحميل القالب انضم الى اعضاء المدونة واترك تعليق به بريدك الالكترونى

قالب Mostheme معرب

قالب Mostheme معرب - موسثيم هو قالب بلوجر مصمم باحترافية وبطريقة نظيفة وبساطة، قالب يمكن استخدامه فى مختلف المجالات والاعمال التجارية، الشركات، المنتجات، والتسويق، تم ترتيب وتنسيق الاكواد والتأثيرات للحفاظ على سرعة القالب، تم تركيب خط عربى مناسب للقالب وتم تعريب القالب بنسبة 100%، يحتوى القالب على العديد من الاضافات المميزة والجديدة كـ اداة المشاركات الاخيرة، وصفحة الخطأ بشكلها العصرى، توجد مساحات اعلاينة داخل الموضوع منسقة بشكل احترافى.

قالب Mostheme معرب

اضافات ومميزات قالب موسثيم


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


لتحميل القالب انضم الى اعضاء المدونة واترك تعليق به بريدك الالكترونى

قالب New Line معرب

قالب New Line معرب - فى هذا الموضوع على مدونة روتكس سوف اشارككم عن قالب بلوجر مدفوع يمكن تحميله بالمجان، قالب نيو لاين قالب بلوجر متجاوب مع الاجهزة اللوحية بشكل كامل، يتم عرض المواضيع فى القالب بشكل افقى، يتميز قالب نيو لاين بالعديد من المميزات، كما ان نظام التعليقات بشكل مخفى ويمكن اظهاره بالضغط على "تعليقات ديسكس"، دعونا نلقى نظرة على مميزات القالب المعتادة فى القوالب السابقة.

قالب New Line معرب

اضافات ومميزات قالب نيو لاين


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

اضافة شريط اخبار احترافى لمدونات بلوجر

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

اضافة شريط اخبار احترافى لمدونات بلوجر

فائدة شريط الاخبار

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

معاينة شريط الاخبار

اضافة شريط اخبار احترافى لمدونات بلوجر


اضافة شريط اخبار احترافى لمدونات بلوجر


1. اذهب الى لوحة التحكم > القالب > تحرير القالب > ضع الكود التالى فوق ]]></b:skin>

/* CSS Breaking News Rotkx */
#breakingnews{position:relative;font-family:'Droid Arabic Kufi',Roboto;margin:20px 20px 0 20px;height:50px;line-height:26px;overflow:hidden;padding:4px 0;border-top:2px solid #ecf0f1;border-bottom:2px solid #ecf0f1}
#breakingnews:after{content:'\f0c9';font-family:fontawesome;color:#bdc3c7;position:absolute;left:18px;font-size:1.2rem;font-weight:normal;top:12px;text-align:center}
#breakingnews .breakhead{background:#e74c3c;color:#fff;display:inline-block;float:right;font-size:17px;font-weight:700;padding:6px 12px}
#adbreakingnews{float:right;margin-right:12px;margin-top:6px;line-height:28px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#adbreakingnews li a {font-weight:400;color:#000;margin-top:10px;}
#adbreakingnews li a:hover {color:#e74c3c;}
#adbreakingnews li a:before{content:'\f079';font-family:fontawesome;display:inline-block;float:right;margin:0 0 0 8px;line-height:29px;}

2. ضع الكود التالى فوق </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://www.rotkx.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>لا توجد نتائج!</span>")},error:function(){$("#adbreakingnews").html("<strong>خطأ فى التحميل Feed!</strong>")}})});
//]]>
</script>

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

3. ضع الكود التالى من التخطيط فى المكان المناسب او من تحرير القالب بين <body> و </body>

<div id='breakingnews'><span class='breakhead'>اخر الاخبار</span>
<div id='adbreakingnews'>جارى التحميل...</div></div>

4. احفظ القالب

انتهى شرح اضافة شريط اخبار احترافى لمدونات بلوجر، شكرا لكم على الزيارة.

كيفية تصميم قالب بلوجر يدويا

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

كيفية تصميم قالب بلوجر يدويا

تصميم قالب بلوجر ليس سهل وسريع كما يعتقد البعض، وليس من الصعب تنفيذ الفكرة بالنسبة للذين لديهم خبرة تصميم قوالب بلوجر، ومع ذلك فهذا الموضوع مقدمة او درس تمهيدى فى مقدمة تصميم قالب بلوجر يدويا وضعت لكم بعض الاكواد التقديمية.

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

  • الهيدر
  • المواضيع
  • الفوتر

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

يجب ايضا عليك معرفة بعض الاكواد التى تمكنك من تكويد القالب بسهولة، اكواد HTML الأساسية واكواد CSS التى تتواجد فى قالب او موقع على الويب، حسنا قمت بجمع لكم قالب بلوجر ولكن ليس قالب ابيض او فارغ، هو يحتوى على الهيدر والمواضيع والفوتر ولكن يحتاج الى تأثيرات CSS من تكويدك، لتنفيذ فكرة تصميم القالب الذى تريده او حسب ذوقك.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd &quot; + data:blog.pageType' expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<!--[if lt IE 9]> <script src="http://html5shiv.g<ooglecode.com/svn/trunk/html5.js"> </script> <![endif]-->
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link href='https://plus.google.com/102442301709620757978/posts' rel='publisher'/>
<link href='https://plus.google.com/102442301709620757978/about' rel='author'/>
<link href='https://plus.google.com/102442301709620757978' rel='me'/>
<meta content='pzMFv6FZc9fet-71sUjPE9fUBmfZjSw6sgU7nTNJbOY' name='google-site-verification'/>
<!-- ميتا تاج سيو -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<meta content='Egypt' name='geo.placename'/>
<meta content='Mahmoud Elgohary' name='Author'/>
<meta content='general' name='rating'/>
<meta content='eg' name='geo.country'/>
<!-- نهاية ميتا تاج سيو -->
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<!-- ميتا تاج سيو -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>الارشيف لـ <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>الصفحة غير موجودة - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>
</b:if>
<!-- إعدادات التواصل الاجتماعى -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<meta content='430352253733985' property='fb:app_id'/>
<meta content='100000013167350' property='fb:admins'/>
<meta content='ar_EG' property='og:locale'/>
<meta content='eg_EG' property='og:locale:alternate'/>
<meta content='ar_AR' property='og:locale:alternate'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='بيتا بريس قالب بلوجر متجاوب' property='og:description'/>
</b:if>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@Ma7moud2lgohary' name='twitter:site'/>
<meta content='@Ma7moud2lgohary' name='twitter:creator'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type='text/javascript'>(function(h){h.className=h.className.replace(/(^| )no-js( |$)/,&quot;$1js$2&quot;)})(document.documentElement);</script>
<b:skin><![CDATA[
/*
Created By : Mahmoud Elgohary - Rotkx
Created On : April 2017
URL        : http://www.rotkx.com
*/
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.navbar,.post-feeds,.feed-links,#navbar-iframe,.date-header,#layout ul{display:none;}
body{font-size:13px;color:#222;margin:0;padding:0;background:#dee2e4;font-family:'Open Sans',sans-serif;}
a:link,a:visited{color:#333;text-decoration:none}a:hover{color:#3498db;text-decoration:none}
a img{border-width:0}*{box-sizing:border-box}.clear{clear:both}strong,b{font-weight:bold;padding:0;}cite,em,i{font-style:italic;}
#Attribution1,.quickedit,#ContactForm1,#ContactForm1 br {height:0;width:0;visibility:hidden;display:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'></b:widget>
</b:section>
</body>
</HTML>

تريد جعل القالب بعرض معين نفترض 640px وبه تأثيرات، اجعل اسمه مثلا #wrapper-rotkx، قم بوضع الكود التالى فوق ]]</b:skin>

#wrapper-rotkx{position:relative;max-width:640px;margin:0 auto;background:#fff;padding:10px;overflow:hidden;box-shadow:0 0 0 20px rgba(0,0,0,0.02);}

ضع الكود التالى تحت <body>

<div id='wrapper-rotkx'>

ثم ضع الكود التالى فوق </body>

</div>

وفى الاخير انتهى شرح كيفية تصميم قالب بلوجر يدويا اتمنى ان يكون مفيد لكم.