شرح اضافة اقسام المدونة بألوان احترافية وجميلة

<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFZ20J-HunalvB3OyX0q0QxGOmPrB9vvNE0shET5lbEyBlV4QumQWnv3HqU-IDJANxtvBxt0QXWDhWLDp-Zn89bKMfs14MaAoe-MfZepuMVwnXfTPF8r9iVzQYbC0VPh9b6W3Dn873AZ1/s1600/%D8%A7%D9%82%D8%B3%D8%A7%D9%85+%D8%A8%D8%B4%D9%83%D9%84+%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81%D9%8A.JPG" imageanchor="1" style="background-color: black; margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFZ20J-HunalvB3OyX0q0QxGOmPrB9vvNE0shET5lbEyBlV4QumQWnv3HqU-IDJANxtvBxt0QXWDhWLDp-Zn89bKMfs14MaAoe-MfZepuMVwnXfTPF8r9iVzQYbC0VPh9b6W3Dn873AZ1/s200/%D8%A7%D9%82%D8%B3%D8%A7%D9%85+%D8%A8%D8%B4%D9%83%D9%84+%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81%D9%8A.JPG" width="132" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> طبعاً اعجبتني هذه الاضافة وقلت اضفها كتدوينة في عالمي تك</div> <div class="separator" style="clear: both; text-align: center;"> طريقة سهلة جداً</div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <span style="color: red; font-size: large;"><b>طريقة التركيب</b></span></div> <div class="separator" style="clear: both; text-align: center;"> <b><span style="color: #3d85c6;">1 - تخطيط</span></b></div> <div class="separator" style="clear: both; text-align: center;"> <b><span style="color: #3d85c6;">2 - اضافة كود جافا سكربت</span></b></div> <div class="separator" style="clear: both; text-align: center;"> <b><span style="color: #3d85c6;">3 - تغير اسم المدونة والرابط واسم القسم</span></b></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> الكود هنااا</div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <blockquote class="tr_bq"> <blockquote class="tr_bq"> <style type="text/css"></blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a {</blockquote> <blockquote class="tr_bq"> display:block;</blockquote> <blockquote class="tr_bq"> background:#eee;</blockquote> <blockquote class="tr_bq"> border:1px solid #ccc;</blockquote> <blockquote class="tr_bq"> margin: 0 0 20px 0;</blockquote> <blockquote class="tr_bq"> height:65px;</blockquote> <blockquote class="tr_bq"> width:250px;</blockquote> <blockquote class="tr_bq"> overflow:hidden;</blockquote> <blockquote class="tr_bq"> text-decoration:none;</blockquote> <blockquote class="tr_bq"> font-family:inherit;</blockquote> <blockquote class="tr_bq"> font-size:16px;</blockquote> <blockquote class="tr_bq"> color:#000000;</blockquote> <blockquote class="tr_bq"> text-shadow:0 1px 2px rgba(0, 0, 0, 0.75);</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up h5 {</blockquote> <blockquote class="tr_bq"> color:#000000;</blockquote> <blockquote class="tr_bq"> margin-top:0px;</blockquote> <blockquote class="tr_bq"> height:65px;</blockquote> <blockquote class="tr_bq"> text-align:center;</blockquote> <blockquote class="tr_bq"> line-height:65px;</blockquote> <blockquote class="tr_bq"> -webkit-transition: margin-top 0.2s linear;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a:hover h5{</blockquote> <blockquote class="tr_bq"> margin-top:-90px;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up div {</blockquote> <blockquote class="tr_bq"> font-family:inherit;</blockquote> <blockquote class="tr_bq"> font-size:17px;</blockquote> <blockquote class="tr_bq"> color:#FFFFFF;</blockquote> <blockquote class="tr_bq"> text-align:center;</blockquote> <blockquote class="tr_bq"> padding:0px;</blockquote> <blockquote class="tr_bq"> opacity: 0;</blockquote> <blockquote class="tr_bq"> <br></blockquote> <blockquote class="tr_bq"> -webkit-transition: all 0.3s linear;</blockquote> <blockquote class="tr_bq"> -webkit-transform: rotate(10deg);</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a:hover div {</blockquote> <blockquote class="tr_bq"> opacity: 1;</blockquote> <blockquote class="tr_bq"> -webkit-transform: rotate(0deg);</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a:nth-child(1) div { background: #EF7901; line-height:70px;}</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a:nth-child(2) div { background: #98bf0d; line-height:70px;}</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy-up a:nth-child(3) div { background: #01b0ec; line-height:70px;}</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy a{ text-decoration:none; margin:10px; font-family:inherit; font-size:8px; font-weight:bold; color:#000000; overflow:hidden;-webkit-transition: All 1s ease;-moz-transition: All 1.5s ease;-o-transition: All 1.5s ease;-ms-transition: All 1.5s ease;transition: All 1.5s ease;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .Blogger-Widget-ahtrafy a:hover{ text-decoration:none; margin:75px; font-family:inherit; font-size:13px; font-weight:bold; color:#1fd4e9;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;</blockquote> <blockquote class="tr_bq"> } </blockquote> <blockquote class="tr_bq"> </style></blockquote> <blockquote class="tr_bq"> <br /></blockquote> <blockquote class="tr_bq"> <br /></blockquote> <blockquote class="tr_bq"> <br /></blockquote> <blockquote class="tr_bq"> <br /></blockquote> <blockquote class="tr_bq"> <br /> <section class="Blogger-Widget-ahtrafy-up"></section></blockquote> <blockquote class="tr_bq"> <a cc0000="" href="http://www.blogger.com/%3Cfont%20color=">http://almmi-tec.blogspot.com</a></blockquote> </blockquote> /"><br /> <blockquote class="tr_bq"> <h5> <span style="color: #674ea7;">مدونة عالمي تك</span></h5> </blockquote> <blockquote class="tr_bq"> <div color="#ff0000" font=""> >اسم القسم</div> </blockquote> <blockquote class="tr_bq"> </blockquote> <blockquote class="tr_bq"> <a cc0000="" href="http://www.blogger.com/%3Cfont%20color=">http://almmi-tec.blogspot.com</a></blockquote> /"><br /> <blockquote class="tr_bq"> <h5> <span style="color: #a64d79;">مدونة عالمي تك</span></h5> </blockquote> <blockquote class="tr_bq"> <div> <span style="color: red;">اسم القسم</span></div> </blockquote> <blockquote class="tr_bq"> </blockquote> <blockquote class="tr_bq"> <a cc0000="" href="http://www.blogger.com/%3Cfont%20color=">http://almmi-tec.blogspot.com</a></blockquote> /"><br /> <blockquote class="tr_bq"> <h5 color="#674ea7" font=""> >مدونة عالمي تك</h5> </blockquote> <blockquote class="tr_bq"> <div> <span style="color: red;">اسم القسم</span></div> </blockquote> <blockquote class="tr_bq"> </blockquote> <blockquote class="tr_bq"> <br /></blockquote> <blockquote class="tr_bq"> </blockquote> <blockquote class="tr_bq"> <br /> <section class="Blogger-Widget-ahtrafy"></section></blockquote> <blockquote class="tr_bq"> <a href="http://a7trafy.blogspot.com/2013/08/List.html">Blogger-Widget</a></blockquote> <blockquote class="tr_bq"> </blockquote> <br /> <div style="text-align: center;"> <span style="color: red; font-size: large;"><b>تم بحد الله وبعونه</b></span></div> <div style="text-align: center;"> <span style="color: red; font-size: large;"><b>اخوكم حمودي من مدونة عالمي تك </b></span></div> </div>

طبعاً اعجبتني هذه الاضافة وقلت اضفها كتدوينة في عالمي تك طريقة سهلة جداً طريقة التركيب 1 - تخطيط 2 - اضافة كود جافا سكربت 3 - تغير اسم المدونة والرابط واسم القسم الكود هنااا .Blogger-Widget-ahtrafy-up a { display:block; background:#eee; border:1px solid #ccc; margin: 0 0 20px 0; height:65px; width:…

مزيد من المعلومات »