إضافة قائمة جانبيه معروض بها بعض قنوات البث المباشر (حصري خبره بالفطره)

إضافة قائمة جانبيه معروض بها بعض قنوات البث المباشر (حصري خبره بالفطره)

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

الكود

 <style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight: normal;
position: absolute;
left: 20px;
top: -1px;
color: #fff;
padding: 3px;
z-index: 9999;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
background-color: rgba(12, 106, 205, 0.95);
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
 .adss img { max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style>
<center>

<div class="adss" id="adsanime">
<a href="http://www.khebrabelfetra.blogspot.com/2016/12/quran-karim.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaL8CGUm7VyuWx3tl-po5LfKLaCJfA5_f8Sh7C7vZVcKaMvagZ6GhlpHjckLO3q3g6maeTIgk1tLusnCOPEzNlz86Rz9m_Vetxsi7ih6EKhMb_prqZPg3woj3WmY1pGsHN0u-gFxDgxM/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D9%2586-%25D9%2587%25D9%2586%25D8%25A7yyyfdfdggggghhtgg.png" />
   <strong>إذاعة القرآن الكريم من القاهره</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://www.khebrabelfetra.blogspot.com/2016/12/bein-sport-3.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9sJAg24lrCp4IYVSOK_cd588dSo8d2SejhDd22pVQjHA6tUsPSPWHhTp5aiVosCXSszGZGVEbeo3gSSgQSA-HicIaSnKhJfUf8ios0DAyM7fAHcQPD2M-fDeVkis32mkAFJTAjFY5fg/s1600/fffggghhvv.png" />
   <strong>بي إن سبورت 3</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/2.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5cDs-DwpcE05ttaVLSC1Sp2A0iMXVEvQ1sU1mSrSCvmqabixv95iQDsnomXKlzZiOjaXPFgvosTm_TphbDt0t2G4E3F_cMOfUHXup3FP4pOahVSSwbSrJcVQbIu-fNUUzGr5_Hx47Qo/s1600/fffggghhvvvvv.png" />
   <strong>القناه التانيه المصريه</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/roya-tv-live-stream.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QCFZDxk3h9Esj-uvLYTsqRpVxH6WByWTWxVM8p7a_SIWHApFQ9HaqpYSItHzR5fTLOxfsOUwBBZt870hjfpDoQfQrxcaEmp-01nTEwrSO_XLaIdo6-VNQrEdV5KPe8CGpvcqZ9R_9Pg/s1600/fffg.png" />
   <strong>قناة رؤيا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/blog-post_28.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QEOuapeV2JG1KZ8sc3kqLFfB_UwhTxBfwvYSUJT5FJkn3NX9aZLwp5zNmz8ow6YCR0VTWywYbyBpZyEXV2kPxb_xhLhMIXTer0BzOxutEqSrUTvOBfdwGBt2i1YCJchqWDwyaTph-7Q/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D9%2586-%25D9%2587%25D9%2586%25D8%25A7yyyfdfdggggghhtgggg.png" />
   <strong>قناة نون</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/makkah-live-hd.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqo-xx6zw04UpNYdEPiudcge_FOowP9evHhpg9JZa-7zmxTYtNAaEE6Uz9G3rne3e75Tm9V_CqZx_dIKpEYcf0aul1tOXvHYQ_TdBv6feo3490jwZudg86S7GpQbCRT7M_N3i6DTcBPZ8o/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D9%2586-%25D9%2587%25D9%2586%25D8%25A7yyyfdfdggggghhf.png" />
   <strong>قناة مكه مباشر</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/cbc-extra-live.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE3GNB0V5So6jkXZ_gYTTLlJe2MWP2dhEksC1M8Ql4HM6ZfDJZnTAb1NLAbqBgoM_KAMzFDCl7ZSaepXyWN218KYSLnnr3BRf8V0XTywCU4mYZH0xemjkwWYGssWiiUYjAvbZ41Hsb8O8/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D9%2586-%25D9%2587%25D9%2586%25D8%25A7yyyfdf.png" />
   <strong>قناة سي بي سي إكثترا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/cbc-channel-live.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBm2s0nMpJo7B81UwXZETdaL0qRGpP5AIwMfuXdf3GRiI3er66xmXL4RfbZfjutKMTKcsqovVOZsQiSLOBpDln2Iu_CssrksfYN5KV2vqZIgI9kiuEfe_PpeRRA6aAjZBte6L0KTX9kes/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D9%2586-%25D9%2587%25D9%2586%25D8%25A7yyyfdfdgggg.png" />
   <strong>قناة سي بي سي</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://khebrabelfetra.blogspot.com/2016/12/1.html" target="_blank">
   <img class="hoverZoomLink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXXkWCv7CJnGX2NfLYCTCcR1F6e_Yo9ORlK8WfzuzY0BGAvqvRuIil1Wu3SJy_UnZHDMGMfbLyhVKSqG03wVK70D3jkBP2dDkdZbAErMN_pWW0epsNekDZpOCKjEhoDg-4D0MOW3quOw/s1600/fffgggh.png" />
   <strong>قناة الحياه</strong></a>
    </div>
</center>
<br />
<br />
<center>
<a href="http://www.khebrabelfetra.blogspot.com/p/live.html" target="_blank">
<img style="width: 250px; height: 50px; top:-7px;
 margin-top: -6px;" alt="شاهد المزيد من قنوات البث المباشر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiSp940MKVTCCpFiwSkuJBn5WnkRjBHigpUIiiVfBJrrErhKVOszg2uJ7-sEVMFyXJzEb5BGj86ex8bEAlIak6uEMkxFMmd3bpE3gKDXLj0sNFBcr1YyigCUAcBM3OLag1qVaUEWBqXSw/s1600/222222222222222222fecd.png" border="0" title="بث مباشر مدونة خبره بالفطره" /></a>
</center>

<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=1001817475912916521&amp;widgetType=HTML&amp;widgetId=HTML6&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML6&quot;));" target="configHTML6" title="تحرير">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div> 

الكود باللون الأصفر : هو رابط صفحة البث المباشر إن وجدت

الكود باللون الأزرق : هو اسم القناة

الكود باللون الأخضر : رابط صورة قناة ويجب أن يكون بمقاس 120੪120 وأنصح ببرنامج فوتو سكيب للتحرير لأنه من أفضل البرامج وهذا رابطه إضغط هنا

الكود باللون الأحمر : هو ربط المشاركه أو الموضوع الموجود بداخله القناة

مع الذكر إن ه يمكن زيادة أو نقصان في عدد القنوات المعروضه عن طريقة إضافة أو حذف هذا الكود كمثال

<div class="adss" id="adsanime">
<a href="ربط الموضوع الخاص بالقناة" target="_blank">
   <img class="hoverZoomLink" src="رابط صورة القناة بحجم 120 في 120" />
   <strong>إضافة إسم القناه</strong></a>
    </div>

وهذا الكود يمكن وضعه هنا كما في الصوره

وهذه الصوره 





مقتبسه من هذه الصورة



حتى لانأخذ حق غيرنا الصوره من مدونة الأوائل


معاينة الاضافة من هنا أو الصوره

رابط  الكود 


هذا الموضوع حصري والكود من تطويري

للمساعده تواصل معي عبر فيس بوك من هنا