إضافة اداة " تصفح المدونة بشكل افضل " بتقنية الـ 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>

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

مع تحياتى اسلام محمد

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

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

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

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

هاته القائمة إهداء لكل زواري بشكل عام وإلى أخي الكريم Ðř Ăệ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>

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

إلى هنا نصل لختام المقالة

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

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

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

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

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

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

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

صورة الإضافة

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

بالإضافة إلى 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/AVvXsEjNyRRk52YSgr8lxFHm8ghgrticGgTMwtcSbqvdOD5ZmRquKbwhJUSnoL24iPx2K3pUoDXpQEQ299yEoW7D4o7J1LGrBUIzP5lXYmmi0KdWVpuKS9CO4cFlvfrsA0AeA7sZH4ODDkQ3xYZ1/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>

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

غيرها بصورتك

إسمك

نبذة عنك

صفحتك على الفيس بوك

رابطك على تويتر

قناتك على اليوتوب

حسابك على جوجل+

رابط خلاصات مدونتك

غيره بإسم الخلاصات

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

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

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

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

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

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

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

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>
 

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

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

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

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

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

هذه  إضافة خفيفة جداً حتى لا تثقل على الزائر 

وإضافتنا هي إذاعة القرآن العامه وهي إضافة خفيفة للغاية وتقوم بعرض تلاوات طوال الوقت بأصوات قراء متعددين

كود الإضافة 

 

كل ما عليك هو إضافة اداة جديدة ثم ضع فيها هذا الكود

 <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>

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

دمتم في امان الله

انضم الينا 

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

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

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

اليوم أقدم لكم أداة الاشتراك فى المواقع الاجتماعية
و  لاشك أنك شكل الاداة سوف تلفت انتباه الزوار لكى يلقوا نظرة على صفحة الفيس بوك الخاصة بك أو تويتر أو 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 بالعرض المناسب لمدونتك
* قم بتغيير الكلمات التى باللون البرتقالى بإسم المستخدم الخاص بك على شبكات التواصل الاجتماعى

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

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