بحث

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

اضافة ثلاثة اقسام في السايدبار بشكل احترافي

إضافات بلوجر ,
اضافة ثلاثة اقسام في السايدبار بشكل احترافي

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

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

1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
 /* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}
5- قم بالبحث عن الكود <div id='sidebar-wrapper'> او  <div id='sidebar'> واضف اسفله الكود التالي
 <!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
      
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });       
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>المشاركات</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>الاقسام</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>التعليقات</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                     
</div>
<!-- Tab Widget 2 -->               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
  
 </b:section>                                       
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<!-- Tab Widget [endt] -->
واخيراً اضغط على حفظ القالب ومبروك عليك الاضافة الرائعة
ثم انتقل الى التخطيط لكي تقوم باضافة الادوات التي تناسبك الى الاقسام

مزيد من المعلومات »
ليست هناك تعليقات:
التسميات:

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

إضافات بلوجر ,
طريقة جعل قائمة المدونات تتحرك مع النزول الى اسفل المدونة

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

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

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

نذهب الى المدونة ثم قالب
تحرير HTML ونبحث عن الكود </body>
نضع الكود التالي قبله مباشرة فوق </body>

<script type='text/javascript'>//<![CDATA[$(document).ready(function() {// Menentukan elemen yang dijadikan sticky yaitu .navvar stickyNavTop = $('#nav').offset().top;var stickyNav = function(){var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if (scrollTop > stickyNavTop) {$('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });} else {$('#nav').css({ 'position': 'relative', 'width': '100%' });}};// Jalankan fungsistickyNav();$(window).scroll(function() {stickyNav();});});//]]></script>
غير مابلون الاحمر الى الايدي (id) الخاص بقائمة مدونتك الأسهل عليكم الامر ابحث عن (الرئيسية) او اي قسم من اقسام القائمة وستجد الأيدي فوقها

شاهد الصورة



اتمنى ان تنال اعجابكم الاضافة 

في امان الله
مزيد من المعلومات »
ليست هناك تعليقات:
التسميات:

تغير شكل التسميات الى شكل احترافي بتقنية css3

إضافات بلوجر ,
تغير شكل التسميات الى شكل احترافي بتقنية css3

تغير شكل التسميات الى شكل احترافي بتقنية css3

تغير شكل التسميات الى شكل احترافي بتقنية css3


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

طريقة تغير شكل التسميات الى الشكل الجديد

1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
  .cloud-label-widget-content {
 text-align: right;
 }
 .label-size {
 background: #5498C9;
 display: block;
 float: right;
 margin:0 0 3px 3px;
 color: #fff;
 font-size: 11px;
 text-transform: uppercase;
 }
 .label-size:nth-child(1) {
 background: #F53477;
 }
 .label-size:nth-child(2) {
 background: #89C237;
 }
 .label-size:nth-child(3) {
 background: #44CCF2;
 }
 .label-size:nth-child(4) {
 background: #01ACE2;
 }
 .label-size:nth-child(5) {
 background: #94368E;
 }
 .label-size:nth-child(6) {
 background: #A51A5D;
 }
 .label-size:nth-child(7) {
 background: #555;
 }
 .label-size:nth-child(8) {
 background: #f2a261;
 }
 .label-size:nth-child(9) {
 background: #00ff80;
 }
 .label-size:nth-child(10) {
 background: #b8870b;
 }
 .label-size:nth-child(11) {
 background: #99cc33;
 }
 .label-size:nth-child(12) {
 background: #ffff00;
 }
 .label-size:nth-child(13) {
 background: #40dece;
 }
 .label-size:nth-child(14) {
 background: #ff6347;
 }
 .label-size:nth-child(15) {
 background: #f0e68d;
 }
 .label-size:nth-child(16) {
 background: #7fffd2;
 }
 .label-size:nth-child(17) {
 background: #7a68ed;
 }
 .label-size:nth-child(18) {
 background: #ff1491;
 }
 .label-size:nth-child(19) {
 background: #698c23;
 }
 .label-size:nth-child(20) {
 background: #00ff00;
 }
 .label-size a, .label-size span {
 display: inline-block;
 color: #fff !important;
 padding: 4px 10px;
 font-weight: bold;
 }
 .label-size:hover {
 background: #222;
    }
 .label-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }
 .label-size:hover .label-count, .label-size:focus+.label-count {
 background-color: #ff6bb5;
 }
واخيراً اضغط على حفظ القالب ومبروك عليك الشكل الجديد والرائع
مزيد من المعلومات »
ليست هناك تعليقات:
التسميات:

إضافة الاشتراك في البريد الإلكتروني بشكل احترافي وانيق

إضافات بلوجر ,
إضافة الاشتراك في البريد الإلكتروني بشكل احترافي وانيق

إضافة الاشتراك في البريد الإلكتروني بشكل احترافي وانيق

إضافة الاشتراك في البريد الإلكتروني بشكل احترافي وانيق ( القائمه البريديه )
بسم الله الرحمن الرحيم
والصلاة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم
السلام عليكم ورحمة الله وبركاته

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






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

  1. ادخل مدونتك 
  2. ثم التخطيط 
  3. ثم اضافة اداة جديده HTML/Javascript .
  4. انسخ الكود والصقه ( مع استبدال ما سأذكره اسفل الكود ) : 
<!--- Thesis Email Subscribe Widget by  7loll.blogspot.com --->
<style type="text/css">#sidebar-subscribe-box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCF6VVOL3cBDz3831F5z_106nV6otcir7e919JWr8QKdVevg5gd_H4A9-Id2odBL53gggmAdv2vU2fHFQc7Qgw3DOb2y7H66-LuMMai3uDCLd5LIW-pP-DU_1qOAdLj4KxROoMKI8V4qx/s1600/colored-strip.png) repeat scroll 0 0 transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCAfhSF4RWNdR92ceRezz2deWLn9_mHgAtmC2uNzTcFfro0Faq8qxWlECG_LI30DKFwPPpUs1avo6RNAwnD2K9wePsVPq1AEAgRX0XO_ZHEIIBr1E6kTyiA1zRxr1hH4y7b91uQPZYtlUd/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0;
}
form.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0 0;
    width: auto;
}
.sidebar-subscribe-box-email-field {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqlMMt_dWHjhZXRjBQj48IPOY9wvJd3fVuA39IYCyHhpq3Tz-coqT1rcL2z7ZfKGIPQCdL-we5sVk5yeXdOcUHr_DkKtSaykap9CavTQPqgajIlSGeG7xIcIdOll5SozupmGQDpRKy5GK1/s1600/sprites.png) no-repeat 0 -27px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #444;
    margin: 0 0 15px;
    padding: 10px 40px;
    width: 68%;
}
.sidebar-subscribe-box-email-button {
    background: #09f;
    border: 1px solid #007fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
    color: #fff;
    cursor: pointer;
    font-family: Helvetica;
    font-weight: 700;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    text-transform: uppercase;
    width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
    background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
    width: 100%;
}
embed {
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 4px 4px 4px;
}
#footer-section {
    background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfMS8L-rKvzf1nMOPI8ALPsI9qVnRzNZbVcFIkp06w-Jhqni5M0zSWGNEX3JkK1AjhgGG7-hZuOWQyWpyC5A8cJriwTBBPvsGkSDxxJvnuBGvmdARyVTPnKyZ_4xanuobEwesrGtKRNnW/s0/bg-pattern.png) repeat top left;
    border-top: 1px solid #aaa;
    box-shadow: inset 0 4px 6px -3px #aaa;
    font-size: 14px;
    height: 100px;
    margin: 10px -30px 5px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
}</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=jetara" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=jetara',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="jetara" /><input name="loc" type="hidden" value="en_US" />
<input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="أدخل بريدك الإلكتروني..." />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form>
</div>
المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div>
</div>
<!--- Thesis Email Subscribe Widget by  7loll.blogspot.com --->

التعديل على الكود : 

  • ابحث في الكود عن ( jetara ) واستبدله باسم حسابك في الفيدبنر ( القائمه البريديه) 

مزيد من المعلومات »
ليست هناك تعليقات:
التسميات:

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) بصور - لمدونات بلوجر

إضافات بلوجر ,
كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) بصور - لمدونات بلوجر

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) بصور - لمدونات بلوجر

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) بصور - لمدونات بلوجر

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

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



طريقة التركيب : 
  • ادخل على لوحة تحكم مدونتك 
  • ثم اذهب الى القالب 

اولآ : استبدال رابط الاقدم : ! 


ابحث عن <data:olderPageTitle/> واستبدلها بهذا الكود :
  
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC25beRuZoM2aPZ8yCl9aSINEuItHZKYdF6P3iqcawbBFSNh5MwV_zQgsQU_Erfa-s1RVCt2qioUMcRByqked7QCbbVaUYfnSdR_Ef7P3bhpHE2oZEM9q3zD4HW_3kVIxsQjOzukdudYgo/s1600/w2b_next.png" style="border: 0 none; vertical-align: middle;" />

ثانياَ : استبدال رابط الاحدث : ! 


ابحث عن <data:newerPageTitle/> واستبدلها بهذا الكود
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCe0tnoIILaXc6CJfbC3-FI_5YNY_wFp5bcFChj1gKVTHTMYJgEWSdIfTRLUwURURejEPIgcwZzp0qFuTHbPW9eDzdlsd2vbWVB33CdARPSkszV1lPJnsLSJXRjHpfDLO9cCXuOi72ayxS/s1600/w2b_prev.png" style="border: 0 none; vertical-align: middle;" />

ثالثاَ : استبدال رابط الرئيسيه : ! 


ابحث عن <data:homeMsg/> واستبدلها بهذا الكود
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGphyoMfOFP1gnlH-T2dymqJM3bbxtpqB8ovkgsJ3od9u7zUFBIRzzY-5e9HC2PeYVlQ5VF3VGZWsahMpPWxvo7CXp8bZKjSe0peXoqIP-p9Vzf1MLVofqXt17greV-3H0YIQAT1ga-QF/s1600/w2b_home.png" style="border: 0 none; vertical-align: middle;" />


ملآحظه يمكنك استبدال روابط الصور بصور من عندك ** 

الان احفظ قالبك وشاهد :)

مزيد من المعلومات »
ليست هناك تعليقات:
التسميات:

√مدونةكل ما يخصك√

مَرحبًا بِجَمِيِع زُوَّاِر مُدَوَّنَةِ كُل مَا يَخُصُّك أَتَمَنَّى لَكُمْ قضَاءَ وَقْتٍ مُمْتِعٍ مَعَنا لاَ تَنْسُو مُشَارَكَةَ اْلٌمَوَاضِيع مِنْ أَجْلِ تَعْمِيمِ اْلٌفَائِدَةِ وَشُكْرًا لكُمْ

سياسة الخصوصية

سياسة الخصوصية

سياسة الخصوصية لموقع swimo2-fes

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

  • نحن لا نجمع أي معلومات شخصية عن الزوار بشكل مباشر.
  • قد تستخدم بعض الخدمات (مثل Google AdSense أو Google Analytics) ملفات تعريف الارتباط (Cookies) لتحسين تجربة المستخدم.
  • نحن لا نشارك أي معلومات مع أطراف ثالثة.
  • قد تحتوي بعض الصفحات على روابط خارجية. لسنا مسؤولين عن محتوى أو سياسة هذه المواقع.
  • يمكنك دائمًا تعطيل ملفات تعريف الارتباط من إعدادات المتصفح الخاص بك.

لأي استفسار حول الخصوصية، يمكنك التواصل معنا عبر نموذج الاتصال في المدونة.

تاريخ التحديث: 5 أغسطس 2025