مدونة تجريبية

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

معاينة

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  

<ul class="spicesocialwidget"><li class="facebook"><a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"></a></li><li class="googleplus"><a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a></li><li class="pinterest"><a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"></a></li><li class="twitter"><a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"></a></li><li class="rss"><a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a></li><li class="skype"><a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a></li><li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li><li class="dribbble"><a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a></li><li class="flickr"><a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a></li><li class="linkedin"><a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"></a></li><li class="youtube"><a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"></a></li></ul><style>ul.spicesocialwidget {float:right;}ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqRDdAUeeQAQdNVMrjYSdZ1xlIdCJo2CrztFp2D4ni6Z3E7QfevT7_6bKt1e6L0bwKu3kGMadZD_9sl_m8TOpxwPDGK9UhCJHEg4dylAcCycYqGXmIznJkXBu-ImU-4RX1VydAzdynJZF/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqRDdAUeeQAQdNVMrjYSdZ1xlIdCJo2CrztFp2D4ni6Z3E7QfevT7_6bKt1e6L0bwKu3kGMadZD_9sl_m8TOpxwPDGK9UhCJHEg4dylAcCycYqGXmIznJkXBu-ImU-4RX1VydAzdynJZF/s1600/spice-social-gadget-sprite.png' )}ul.spicesocialwidget li.facebook a{ background-position:0 0}ul.spicesocialwidget li.flickr a{ background-position:-32px 0}ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}ul.spicesocialwidget li.rss a{ background-position:-192px 0}ul.spicesocialwidget li.skype a{ background-position:-224px 0}ul.spicesocialwidget li.twitter a{ background-position:-256px 0}ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}ul.spicesocialwidget li.youtube a{ background-position:-320px 0}ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}</style>

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

التركيب

 ]]></b:skin>

body {    font: 12px/20px 'Lucida Grande', Verdana, sans-serif;}.notepad, .notepad:before, .notepad:after {    background-color: white;    background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px);    background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px);    background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e81px, transparent 1px);    background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px,transparent 1px);    background-size: 1px 1px, 1px 1px, 23px 23px;    background-repeat: repeat-y, repeat-y, repeat;    background-position: 22px 0, 24px 0, 0 50px;    border-radius: 2px;    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);}.notepad {    position: relative;    margin: 5px auto;    padding: 0 23px 14px 35px;    width: 300px;    line-height: 23px;    font-size: 11px;    color: #666;}.notepad p, .notepad blockquote {    margin-bottom: 23px;}.notepad :last-child {    margin-bottom: 0;}.notepad:before, .notepad:after {    content: '';    position: absolute;    z-index: -1;    top: 100%;    left: 3px;    right: 3px;    margin-top: -2px;    height: 4px;    background-size: 1px 1px, 1px 1px, 0 0;}.notepad:before {    z-index: -2;    left: 6px;    right: 6px;    height: 6px;    background-color: #eee;}.notepad-heading {    position: relative;    margin: 0 -23px 14px -35px;    height: 38px;    background: #14466a;    border-radius: 2px 2px 0 0;    background-image: -webkit-linear-gradient(top, #226797, #0c3452);    background-image: -moz-linear-gradient(top, #226797, #0c3452);    background-image: -o-linear-gradient(top, #226797, #0c3452);    background-image: linear-gradient(to bottom, #226797, #0c3452);    -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;    box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;}.notepad-heading > h2 {    line-height: 36px;    font-size: 14px;    color: white;    text-align: center;    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);}.notepad-heading:before, .notepad-heading:after {    content: '';    position: absolute;    bottom: 2px;    left: 1px;    right: 1px;    height: 0;    border-top: 1px dashed #617c90;    border-color: rgba(255, 255, 255, 0.35);}.notepad-heading:after {    bottom: 3px;    border-color: #071c2c;    border-color: rgba(0, 0, 0, 0.5);}

                      بسم الله الرحمن الرحيم..