قائمة لعرض الخدمات لمدونات بلوجر بقسمين بشكل رائع - عالم المدون

الأحد، 16 أبريل، 2017

قائمة لعرض الخدمات لمدونات بلوجر بقسمين بشكل رائع

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




معاينة الإضافة


معاينة 

شرح التركيب


  • اولا قم بالبحث عن هذا الوسم]]></b:skin>ثم وضع فوقه الكود التالى .


.wdbloogidebartabs .widget{border:0 none!important;box-shadow:0 0 0 1px #ddd inset}
.wdbloogidebartabs .widget h2{display:none}
#tabs-widget {overflow: hidden;float: right;width: 100%;display: inline-block;}
.tabs-widget li {float: right;list-style: outside none none;padding: 0;text-align: center;position: relative;z-index: 9;width: 49.8%;}
#wdbloogtab1 {padding-left: 20px;margin-right: 10px;}
#wdbloogtab1 a {background-color: #fff;}
#wdbloogtab1 a:hover , #wdbloogtab2 a:hover{background-color: #2896CA;color: #fff;}
#wdbloogtab2 {float: left;margin-left: 10px;width: 48.3%;}
.tabs-widget li a {color: #2896CA;display: block;line-height: 30px;text-transform: uppercase;font-weight: 500;height: 40px;width: 100%;box-shadow: 0 0 6px rgba(0,0,0,0.27);margin: 1px 0;background-color: #fff;}
.vc_services{float:right;width:255px;height:300px;padding: 15px;margin-left:10px;margin-right:10px;margin-bottom:20px;background-color:#fff;transition: all 250ms ease-in-out;box-shadow: 0 0 6px rgba(0,0,0,0.27);}
.wpb_wrapper img{width:100%;height:195px}
a.abdo-abd-alrazzaq {margin-top: -46px;display: block;float: right;position: relative;height: 40px;margin-right: 6px;}
img.abdo-abd-alrazzaq-a {border-radius: 50px;width: 50px;height: 50px;border: 3px solid #2896CA;}
.ish-services{text-align:center;margin-bottom:10px;font-weight:bold;padding:0 10px}
.ish-services a{font-weight:500;font-size: 16px;}
.ish-services a:hover{color:#2896CA}
.ish-b{font-weight:100;text-align:center;width:100%;float:right;padding:0 10px;font-size:13px}
.fa.fa-arrow-left:before {content: "\f060";font-size: 20px;line-height: 40px;}
i.fa.fa-arrow-right:before {content: "\f061";font-size: 20px;line-height: 40px;}


  • الأن معك كود القائمة ويمكنك وضع فى المكان الذى تريدها


<div class='container'>
<div class='wdbloogidebartabs'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
           <div class='vc_services-s'>
            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/programming/css-html/512087' target='_blank'>
               <img src='https://goo.gl/e5WIfs' title='تعديل وتطوير وحل مشاكل قوالب بلوجر باحترافية تامه'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/programming/css-html/512087' target='_blank'>
                    تعديل وتطوير وحل مشاكل قوالب بلوجر باحترافية تامه
                 </a> </h3>
                </a>
              </div>
            </div>
            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/programming/css-html/512731' target='_blank'>
               <img src='https://goo.gl/nFvXo7' title='انشاء مدونة اجنبية اوعربية للربح منها + مواضيع حصريه'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/programming/css-html/512731' target='_blank'>
                    انشاء مدونة اجنبية او عربية للربح منها + مواضيع حصريه
                 </a> </h3>
                </a>
              </div>
            </div>
            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/programming/css-html/519250' target='_blank'>
               <img src='https://goo.gl/LLgSro' title='جعل موقعك متجاوب مع جميع الهواتف واكسب المزيد من الزوار'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/programming/css-html/519250' target='_blank'>
                    جعل موقعك متجاوب مع جميع الهواتف واكسب الزوار
                  </a> </h3>
                </a>
              </div>
            </div>
            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/marketing/advertising/512054' target='_blank'>
               <img src='https://goo.gl/7A7HLS' title='إعلان على مدونة عالم المدون'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/marketing/advertising/512054' target='_blank'>
                    إعلان على مدونة عالم المدون لتحقيق المزيد من الزوار
                 </a> </h3>
                </a>
              </div>
            </div>
          </div>
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
           <div class='vc_services-s'>

            <div class='vc_services'>
              <div class='wpb_wrapper'>

              <a href='https://khamsat.com/misc/575542' target='_blank'>
               <img src='https://goo.gl/Kh2tFP' title='انشاء متجر الكترونى على بلوجر متكامل'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/misc/575542' target='_blank'>
                    انشاء متجر الكترونى على بلوجر متكامل لعرض عليه منتجاتك
                 </a> </h3>
                </a>
              </div>
            </div>

            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/programming/css-html/568493' target='_blank'>
               <img src='https://goo.gl/0ZgxRD' title='تعريب قوالب بلوجر بإحترافيه تامة'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/programming/css-html/568493' target='_blank'>
                    تعريب قوالب بلوجر بإحترافيه تامة عبر خمسات
                 </a> </h3>
                </a>
              </div>
            </div>

            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/marketing/advertising/583929' target='_blank'>
                <img src='https://goo.gl/7mFFU4' title='كتابة موضوع عن موقعك ونشره على موقعي'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/marketing/advertising/583929' target='_blank'>
                    كتابة موضوع عن موقعك ونشره على موقعي
                  </a> </h3>
                </a>
              </div>
            </div>

            <div class='vc_services'>
              <div class='wpb_wrapper'>
              <a href='https://khamsat.com/designing/526173' target='_blank'>
               <img src='https://goo.gl/TK5WyJ' title='إعلان على مدونة عالم المدون'/></a>
                <a>
                <a class='abdo-abd-alrazzaq' href='https://khamsat.com/user/abdo-abd-alrazzaq' target='_blank'>
               <img class='abdo-abd-alrazzaq-a' src='https://goo.gl/2E1jzS'/></a>
                  <h3 class='ish-services'><a href='https://khamsat.com/designing/526173' target='_blank'>      
اعرض شعارك بـ 20 طريقة فنية احترافية رائعة لتجعله بشكل مميز                                                                </a> </h3>
                </a>
              </div>
            </div>

          </div>
</div>                           
                               
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id ' id='tabs-widget'>
<li id='wdbloogtab1'><a href='#widget-themater_tabs-1432447472-id1'><i aria-hidden='true' class='fa fa-arrow-left'/></a></li>
<li id='wdbloogtab2'><a href='#widget-themater_tabs-1432447472-id2'><i aria-hidden='true' class='fa fa-arrow-right'/></a></li>
</ul>

</div>
</div>


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


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


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


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 4 تعليق على موضوع : قائمة لعرض الخدمات لمدونات بلوجر بقسمين بشكل رائع

    ممكن اضافه نظام الاربع تعليقات فيسبوك وبلوجر وديسكس و جوجل بلس:):)

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

    وين أضع الكود الثاني أخي الكريم ؟!

    فى أى مكان تراه مناسب أخى فى مدونتك

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر