اضافات بلوجر


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



اقدم لكم اليوم اضافة تصفح المدونة بدون مشاكل 
بتقنية css3 لتضيف الى مدونتك لمسة فنية
اضافة جميلة ولا غنى عنها لاى مدون


صورة من الاضافة
إضافة اداة " تصفح المدونة بدون مشاكل " بتقنية الـ CSS3 لمدونة بلوجر

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

اذهب الى التخطيط--اضافة اداة--html/javascript
اضافة هذا الكود



<center><div class="hovergallery"><a href="https://www.google.com/intl/ar/chrome/browser/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/YLcCM.png"></a><a href="https://www.mozilla.org/en-US/firefox/new/?utm_source=firefox-com&amp;utm_medium=referral" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/pKuJG.png"></a><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/Mo1Lg.png"></a></div><style type="text/css">/*Credits: Dynamic Drive CSS Library */.hovergallery img{-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/-moz-transform:scale(0.8); /*Mozilla scale version*/-o-transform:scale(0.8); /*Opera scale version*/-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla duration version*/-o-transition-duration: 0.5s; /*Opera duration version*/opacity: 0.7; /*initial opacity of images*/margin: 0 10px 5px 0; /*margin between images*/}.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/-moz-transform:scale(1.1); /*Mozilla scale version*/-o-transform:scale(1.1); /*Opera scale version*/box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/opacity: 1;}  </style><div class="hovergallery"> <a href='http://arabetutorial.blogspot.com' style='display: none;' rel='dofollow' >المدونة التعليمية للكمبيوترe.com/safari/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/SxtCs.png"></a><a href="http://www.opera.com/ar/computer/windows" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/VDQ21.png"></a><a href="http://rockmelt.com/download" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/xrJcf.png"></a></div><style type="text/css"></style></center>


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

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

الكاتب at هناك 27 تعليقًا:
السلام عليكم ورحمة الله تعالى

اليوم أقدم لكم القائمة العليا كالتي بمدونتنا الحالية

إنها قائمة مميزة ومايميزها ظهور أقسام فرعية على شكل عمودين

هاته القائمة إهداء لكل زواري بشكل عام وإلى أخي الكريم Ðř Ăệrǿ بشكل خاص

صورة القائمة

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

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

فأنا لماذا أقول مدونتنا وليس مدونتي لأن كل مافيها هو لكم ولي
  
لكن بالنسبة لطلب القالب اكمله فهذا ليس الآن فهو حصري وخاص بنا

كفى كلاما وهيا إلى الشرح

شرح الإضافة

 اكواد html القائمة
<div class='topNav'>
   <div class='topMenu'>
 <ul id='dropmenu'>
   
 <li><a href='/'>الصفحة الرئيسية</a></li>
   
 <li><a href='#'>المنتدى</a></li>
   
   <li><a href='#'>البلوجر</a>
 <ul> 
 <li><a href='#'>دروس البلوجر</a></li>
 <li><a href='#'>إضافات البلوجر</a></li>
  <li><a href='#'>قوالب بلوجر</a></li>
 </ul>
 </li>
   
  <li><a href='#'>دورات تعليمية</a>
 <ul> 
 <li><a href='#'>تصميم قوالب بلوجر</a></li>
 <li><a href='#'>الربح من أدسنس</a></li>
 <li><a href='#'>التسويق الإلكتروني</a></li>
 <li><a href='#'>إنشاء منتدى vb</a></li> 
 <li><a href='#'>دروس الفوتوشوب</a></li>
 <li><a href='#'>إحترف لغة البرمجة</a></li>
 </ul>
 </li>

 <li><a href='#'>برامج كاملة</a></li>

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


تخصيص الإضافة حسب الألوان


الأقسام الرئيسية بالقائمة
الأقسام الفرعية بالقائمة
 روابط الأقسام

كود الـ CSS الخاص بالإضافة

.topNav {
    width:100%;
    height:40px;
    overflow:visible;
    margin:0 auto;
    background: -webkit-linear-gradient(top, #41434f, #272931);
    background: -moz-linear-gradient(top, #41434f, #272931);
    background: -ms-linear-gradient(top, #41434f, #272931);
    background: -o-linear-gradient(top, #41434f, #272931);
    border-bottom:1px solid #444;
}
.topMenu {
    height:40px;
    width:100%;
    float:right;
    overflow:visible;
    margin:0px 0 0 0;
}
.topMenu ul {
    margin: 0px 10px 0 0;
    text-align:right;
}
.topMenu ul li {
    
}
.topMenu ul li a {
}
.topMenu ul li a:hover {
    color:#fff;
}
#dropmenu, #dropmenu ul {
    margin: 0px 10px 0 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
    z-index: 999;
    width: 100%;
    font-weight: bold;
}
#dropmenu a {
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ;
    -webkit-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    display:block;
    font: normal 11px/42px Tahoma, Geneva, sans-serif;
    color:#1599ae;
    height:40px;
    display:block;
    text-shadow:0 1px #1a1b20;
    padding: 0 20px;
}
#dropmenu a:hover {
}
#dropmenu .current a, #dropmenu li:hover &gt; a {
    color:#fff;
    text-shadow:0 1px #000;
    background:#14161c;
}
#dropmenu li {
    float:right;
    height:40px;
    border-left:1px solid #262831;
    position: relative;
}
#dropmenu li:last-child {
    background: none;
}
#dropmenu ul {
    padding: 10px 5px 2px 0;
    position: absolute;
    display: none;
    width: 293px;
    top: 40px;
    right: -15px;
    background:#14161c;
}
#dropmenu ul a {
}
#dropmenu li ul li {
    float: right;
    background: none !important;
    height: 29px;
    width: 130px;
    padding:0 !important;
    margin: 0px 9px 10px 4px !important;
}
#dropmenu li ul li:hover {
    background: none !important;
    height: 29px !important;
    width: 130px !important;
}
#dropmenu li ul a {
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    padding:0 !important;
    float: right;
    height: 29px;
    width: 130px;
    color: #000;
    text-shadow:0 1px #ffffff;
    background:#ffffff;
    text-align:right;
    text-indent:8px;
}
#dropmenu li ul a:hover {
    background: #18acbd;
    color: #000 !important;
    height: 29px;
    text-shadow:0 1px #1dbecb;
    width: 130px;
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    border-top:none !important;
}
#dropmenu ul ul {
    top: auto;
}
#dropmenu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    display: block;
}

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

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

    <div id='header-wrapper'>

أو هذا

    <div id='header'>
وليضع اكواد html القائمة قبله

وأكواد الـ CSS قبل الكود التالي

]]></b:skin>

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



إضافة نبذة عن الكاتب حصرية من تصميمي لبلوجر

الكاتب at هناك 22 تعليقًا:
السلام عليكم ورحمة الله تعالى وبركاته

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

وطبعا مدونتنا المتواضعة تسعى لإكسابكم خبرة حول تصميم وصنع إضافات خاصة بكم

أحسن من البحث عنها وتكون لدى الجميع مثلها

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

صورة الإضافة



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

كفى كلاما وهيا إلى الشرح

شرح الإضافة


إبحث في القالب عن

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

أو

<div class='post-body entry-content'>

وضع بعدهما الإضافة

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  
<div class='postauthor'>
<div id='post1'>
 <img alt='' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0L9IxJw8F25ZiD-Pa5WMx6GN7w0obX69E2AnxN3h3F9IrBC8YlGtpcPU4XKhdVftmqwe_gIoZQvsfu0SnR4CIFhHRsD6fFih6RqunPsZTEhs7dISOVFAFDrXjuHDzAKROdzsl-2YNsle/s1600/avatar_2.png' width='80'/>
 <h3>بقلم <a href='Blog Link'> أسامة بويردن </a></h3>
 <p> أنا من المغرب&#1548; احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم&#1548; وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها&#1548; فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني. </p>
  </div>

 <div id='post2'>
 <div class='postauthor_fans'>
  <a href='http://www.facebook.com/pages/Arabe-Tutorial/466698286722927'><img src='http://im34.gulfup.com/tctnp.png'/></a>
 <a href='http://www.twitter.com/arabetutorial'><img src='http://im34.gulfup.com/7MzXJ.png'/></a>
  <a href='http://www.youtube.com/channel/UCySu-3Oucf2VGXantUArTAg?feature=watch'><img src='http://im34.gulfup.com/5Soef.png'/></a>
 <a href='https://plus.google.com/u/0/105578058496878662654'><img src='http://im34.gulfup.com/tD1QJ.png'/></a>
 <a href='http://feeds.feedburner.com/arabetutorial'><img src='http://im34.gulfup.com/WzRJi.png'/></a>

<div class='postauthor_rss'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=arabetutorial&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input gtbfieldid='3' id='rssquery' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني هنا...&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكتروني هنا...&quot;) {this.value = &quot;&quot;;}' type='text' value='أدخل بريدك الإلكتروني هنا...'/>
<input name='uri' type='hidden' value='arabetutorial'/><input name='loc' type='hidden' value='en_US'/>
<input id='rssbtn' type='submit' value='إشتراك'/>
</form>
   </div>

 </div>
</div>

 </div>
</b:if>

تخصيص الإضافة بك حسب الألوان


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

وأي مشكلة أو استفسار لاتتردد في طرحه بتعليق
والسلام عليكم ورحمة الله تعالى وبركاته




اضافة زر الصعود الى الاعلى فى مدونات بلوجر

الكاتب at هناك 7 تعليقات:

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

بسم الله و الحمدلله و الصلاو و السلام على رسول الله و بعد :-

اليوم معنا طريقة إضافة زر الصعود الى الاعلى لمدونات بلوجر 

الطريقة سهلة جدا نبدأ على بركة الله

1- نذهب الى بلوجر >>  قالب  >> تحرير html
2- ابحث عن <head/>   و أضف قبله الكود التالى 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#w2btoTop:active, #w2btoTop:focus {outline:none;}</style><script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script><script type="text/javascript">/*<![CDATA[*/;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); /*]]>*/</script>

و الان تمت الاضافة بنجاح لا تنسوا ترك تعليقاتم

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


اضافة القران الكريم الي المدونة

الكاتب at هناك 8 تعليقات:

اضافة القران الكريم الي المدونة

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


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

 <center>
<div id="container-main">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> حمل مشغل الفلاش </div>
<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-player.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("https://cnmu.googlecode.com/svn/trunk/cnmu-player.swf","ply","160","20","9","#FFFFFF");
s1.addParam("allowfullscreen","false");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","file=http://50.22.217.209:9998/;stream.nsv&type=mp3&volume=70&autostart=false");
s1.write("container-main");
</script>
</center>

نسأل الله أن يكون هذا العمل خالصاً لوجهه وان يوفق الجميع الى ما يحب ويرضى 
دمتم في امان الله
انضم الينا 

أداة الاشتراك فى المواقع الاجتماعية ذات نمط الوردبرس ببلوجر

الكاتب at هناك 3 تعليقات:

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

بسم الله و الحمد لله و الصلاة و السلام على رسول الله و بعد:-

اليوم أقدم لكم أداة الاشتراك فى المواقع الاجتماعية
و  لاشك أنك شكل الاداة سوف تلفت انتباه الزوار لكى يلقوا نظرة على صفحة الفيس بوك الخاصة بك أو تويتر أو google+  .......إلخ

تتبع الخطوات التالية لإضافة الاداة الى مدونتك




1-اذهب الى لوحة التحكم فى مدونتك
2- التخطيط >>  اضافة أداة >> Html/java script
3-قم بلصق الكود التالى فى الاداة 
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
<style type="text/css">

.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/technawy">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/eng17ah">تابعنى على تويتر</a></li>
<li><a class="facebook" href="https://www.facebook.com/tethnia4you">تابعنا على فيس بوك Facebook</a></li>
<li><a class="google"href="https://plus.google.com/116206173797368082294/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/eng17ah">اتصل بى من خلال LinkedIn</a></li>
</ul>
</div>

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


* قم بتغيير الرقم 320 بالعرض المناسب لمدونتك
* قم بتغيير الكلمات التى باللون البرتقالى بإسم المستخدم الخاص بك على شبكات التواصل الاجتماعى

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

ولا تنسونا من صالح دعائكم و السلام عليكم و رحمة الله تعالى و بركاته


إضافة مشغل صوتى لتشغيل بعض الملفات الصوتية ليستمع إليها من يتصفح مدونتك

الكاتب at هناك 3 تعليقات:

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

بسم الله الرحمن الرحيم و الحمدلله رب العالمين و الصلاة و السلام على أشرف المرسلين و بعد:-

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



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

إضافة طائر تويتر الى مدونتك

الكاتب at هناك 4 تعليقات:

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

بسم الله و الحمدلله و الصلاة و السلام على رسول الله و بعد:-

اليوم بمشيئة الله تعالى سوف اشرح لكم 

كيفية اضافة طائر تويتر إلى مدوناتكم 


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

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

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

اليوم أتيت اليكم بأداة (( طائر تويتر )) و هى جذابة بما فيه الكفاية لكى تجعل الزوار يتتبعونك فى تويتر 

كيفية اضافة طائر تويتر

1-بلوجر >> قالب >> تحرير html

2-ابحث عن
    </body>  
ثم أضف الكود التالى بعده مباشرة 
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

<script src='http://yourjavascript.com/1523826141/Flying twitter bird.js' type='text/javascript'>
</script> 
<script type='text/javascript'> var twitterAccount = "eng.ah17"; var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> "; tripleflapInit(); </script> 

<span style='font-size:11px;position:absolute;'/><a href='http://arabetutorial.blogspot.com/' target='_blank'>Twitter Bird Gadget</a> 

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
* استبدال eng.ah17 بإسم المستخدم الخاص بك فى تويتر
 *احفظ القالب الخاص بك
.* اذهب الى مدونتك وستجد الطائر يحلق فى أرجائها
* إذا كنت تواجه أى صعوبة فى تركيب الاداة أو الاستفسار عن شىء فلا تترد فى ترك تعليقك فى الاسفل و سيتم الرد عليه سريعا إن شاء الله



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


أداة انضم الى صفحتنا فى فيس بوك فى الزاوية أعلى مدونتك

الكاتب at هناك 9 تعليقات:

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

بسم الله الرحمن الرحيم و الحمد لله رب العالمين و الصلاة و السلام على أشرف الخلق و المرسلين سيدنا محمد صلى الله عليه و سلم

و بعد:-

اليوم بمشيئة الله تعالى 

سأوضح لكم كيفية إضافة (( أداة انضم الى صفحتنا فى فيس بوك )) و هى أداة جذابة و لافتة للنظر لأنها توجد فى الزاوية فى أعلى مدونتك و لذلك فإن أى زائر سيلاحظها و إليكم طريقة تركيب الاداة 1- نذهب الى لوحة التحكم فى مدونتك
2-نختار تخطيط >> إضافة أداة >> Html Javascript.

3-انسخ الكود التالى و ضعه فى الاداة 

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


<style type="text/css">
 #facebook {position: fixed;top: 0;right: 0;z-index: 9997;cursor: pointer;}
 </style>
<a target="_blank" id="facebook" href="http://www.facebook.com/technia4you  /"><img src="http://s7.postimg.org/vsenujydn/Join_Us_On_Facebook_copy.png" alt="الانضمام الى صفحتنا في الفيس بوك" /></a>



ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
 * قم بتغيير technia4you  برابط صفحتك فى فيس بوك


4- قم بحفظ الاداة و مبارك لكم الإضافة 

*لأى استفسار أو سؤال نرجوا تركه فى تعليق 


ولا تنسونا من صالح دعائكم و السلام عليكم و رحمة الله تعالى و بركاته


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

الكاتب at هناك 7 تعليقات:

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



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

صورة الإضافة

شرح الإضافة

إذهب إلى لوحة تحكم بلوجر
ثم إضغط على تخطيط
ثم إضافة اداة
إختر اداة HTML/JavaScript
ثم ضع الكود التالي
<!-- Twitter Follower Box --> <script type='text/javascript'> function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';} </script> <div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("arabetutorial");</script type="text> <!-- End Twitter Follower Box -->
ثم قم بتغيير الإسم المستعمل الخاص بمدونتي arabetutorial بإسمك المستعمل في تويتر
ومبروك عليك الإضافة
والسلام عليكم ورحمة الله تعالى وبركاته

شرح إضافة ' هاته الصفحة غير موجودة خطأ 404 ' مع رابط لرئيسية المدونة لبلوجر

الكاتب at هناك 4 تعليقات:

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

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

مما يعني أنها سريعة التحميل ولاتحتاج إلا لثانية لاغير

إضافتنا اليوم هي عبارة عن الصفحة الغير الموجود

او ماتدعى Page Not Found
الخطأ 404

صورة الإضافة





شرح الإضافة

إذهب إلى

لوحة التحكم | إعدادات | تفضيلات البحث |  الأخطاء وعمليات إعادة التوجيه  |  لم يتم العثور على الصفحة المخصصة 

ثم إضغط على تحرير أو Edit كما بالصورة التالية


ثم قم بلصق الكود الآتي ثم قم بحفظ التغييرات

<style type="text/css"> #error-404 { border: 15px solid #555;box-shadow:inset 0px 0px 10px #444; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>
</div> <h1 class="large-heading" style="text-align: center;">  ! هذه الصفحة غير موجودة</h1> <h2 class="light-heading" style="text-align: center;">نرجوا منك التعديل على الرابط أو ادخل على<a href='#' style="text-decoration: none; color:#FA4C29;" > الصفحة الرئيسية  </a>للموقع </h2>

تخصيص صفحة الخطا حسب الألوان

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

لتجربتها ضع رابط مدونتك مع إضافة لخبطات وحروف بعد رابط مدونتك

 وإلى هنا أبلغكم تحياتي الطيبة ولاتسونا بتعليقاتكم

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






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

الكاتب at هناك 23 تعليقًا:

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

أقدم لكم أحد أجمل الإضافات
الخاصة بأحدث المواضيع

إضافتنا اليوم

 خاصية أحدث المواضيع متحركة و منزلقة لمدونات بلوجر



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

قم بالذهاب إلى لوحة التحكم > عناصر الواجهة > إضافة أداة > Html/JavaScript


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

<style type="text/css"> 
#rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script> 
<script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> 
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://arabetutorial.blogspot.com/" target="_blank"><span style="color:#fff;">احصل على مثلها</span></a></small>
 طبعا ستقوم بتغيير التالي

رقم 5 الذي باللون الاخضر لعدد المواضيع التي تريد ظهورها

وعدد 1500 اللذي باللون الوردي وهو سرعة حركة أو انزلاق المواضيع

أرجوا التعليق فهو مفتاح لاجتهاد المدون

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

اضافة بلوجر اخر التدوينات بشكل رائع واحترافي


بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة
اهلا بزوار و متابعين مدونة رفع العرب في هده التدوينة سوف اقدم لكم اضافة بلوجر رائعة واحترافية 
في مدونة رفع العرب وهي اضافة اخر المشاركات بشكل رائع جدا و احترافي هي عبارة عن صور و بخاصية  Tooltip 
معاينة الاضافة
10-12-2013+21-03-52
طريقة التركيب

كل ما عليك هو الذهاب إلى تخطيط  >> ثم إضافة أداة جافاسكريبت وضع بها الكود التالى 

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#333333;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#999999;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "آخر التدوينات مدونة رفع العرب",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://arb-up.net";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
التعديل فقط هو تغيير الرابط باللون الأحمر برابط مدونتك

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

إرسال تعليق

الاشتراك في: الرسائل (Atom)