آخر الأخبار

الخميس

المشاركات الشائعة بشكل افقي

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


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

توجه إلى تخطيط  أضف أداة HTML/Javascript و ألصق الكود التالي :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #random-posts li{width:130px;height:180px;margin-right:16px;float:right;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:100px;height:100px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:0px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:50%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 6; var rdp_snippet_length = 0; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmnnimWl3Yy4zO6LrpbC-gIB3Higgp3Dz59j-oWsxFEpNf-c4oYvF_ZXGxJBwbmhIS4Flg3qc_Iu2yBqwNoy5AANxT1EJckaBuN74fGKIgrigKdt9JAyxBF22A0GAOZI2piygbLT6upc8/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script> </b:if>

قم بالحفظ الان و اتجه للقالب لتشاهد النتيجة


الأربعاء

اضافة واجهة ميترو بتقنية css3


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

اليوم اخواني الكرام نقدم لكم اضافة جميلة و رائعة بتقنية css3 لصفحات التواصل الاجتماعي على شكل واجهة ميترو metro الشبيهة بويندوز 8 حيث تتميز بتنسيق جميل و مبهر وواضع للعيان.

لإضافة الواجهة اتبع الخطوات التالية:

قم بأخذ نسخة احتياطية للقالب تحسبا لاسترجاعها

توجه إلى لوحة التحكم توجه إلى القالب > ثم تحرير HTML .

قم الآن بالبحث عن كود  ]]></b:skin> ضع قبله مباشرة الكود التالي:

للبحث عن الكود اضغط  CTRL+F

/*===MBL METRO UI Menu==*/

body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
بعد اضافة الجزء الاول قم بحفظ القالب. الآن نتجه لاضافة الواجهة 

توجه إلى تخطيط  أضف أداة HTML/Javascript و ألصق الكود التالي في المكان اللذي تريده:

<!-- mblmetromenu -->
<div class="mblmetromenu">
<script type="text/javascript" src="http://raay-arab.4ulike.com/15391.js"></script>
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEw8fEs1eMWbbL9uJbQnrVefzb_zBkSnJvT3EhKbLXd4AKgRJAcJYGvUTTEBP4Tw6jLMOnuBFYTfBzDwe80wa7JlolPoarHs-v_095FmGUK7J3uuM622OPaWDvMZADjiX3Wv9sGsrFlcA/s1600/home.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
    
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZEVyan8ZXB_sxoNLU5dalfpMxDhya2b6fElA3BjZW-Pjuo5T45KQ4uIpXxMxVZ-OFIAeuTt3YcU9owDgl4DOeW9hFmP8kbX1u3YZ9Ow_DKBvJH_RcudBI-YjCBcbtduwk4CgskOktDc/s1600/messanger.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
    
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQVfRhBDDFfNyYf5SpyLRircG9f-URnrHsyjMIoBo7R5K3hgdRrgclZMUX2_iTyngYX2ICXkN_-kbs2sWJMOlc5Hxogl-mO68XRB2IeJbR80VPZktbfZgLNgEQoDDBGuwJFuop6ytT70/s1600/rss.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
    
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ktuxBDrMUqybJPGWIvUl-rCB5qUZw5JW1sto92d0wZ-M5Z_A_ckFoZWXWiBtrExbRHQFMCudL4tuOfPupCMxZHr2LfdKB5QBCbaNjcUHETyA5jrMCTJ1D1KpygEQVXyvTLkL1aphBug/s1600/search.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbICDK3escdaaki33_Wv_Yn9p05WEdc2v9jENG9RcQcgwdcYKRla8x5vzFYxDjTgge6VvgI3J2VbtWf0M5KpqE_6W_og9aQWcwZcnt4aWDsd4DLn-19oc1DhBtvRNMswVMhczauFMrV2s/s1600/mail.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQeObXmuwa8WZl7-uI8memBDUrmRGoxaYo8mEoK5ddTIkPx9wcKOdKQ2haowz_7ZIAQ_zt0Rng-ekLIZpgz4i2aJ43MADGwESblII96WhNJa8eNhNmHKsvTJ70PZoZ11-kwVE769CNFU/s1600/help.pn" alt="" />
 <span class="light-text">تعديل</span>
</a>
 </div>
      
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdlStFMf_XyHUVAc-k5tFcyHG8glUMnifmmKwYYU7E4ctc7DTW5abo6dg-PsLSZUDoTi2-q31_0kZUImCf-L9fACEcY8CBhslz_Nppmsffe4P3WTOUd0E7-od5vcaxji8R0WTQ3gqbVQ/s1600/youtbe.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIM1GoWSdxW2hWVuKqOjrxgbjGQuJvH6_WkdsxkfHG60XbZKKXlEIyYWIoFiZQxa0Hj-ab3sPRKNy8W6tyKoe04t1S9fK1PxWf-cNfmR-v-CN8YjfpGPs9H1ru0mU_8QdEKS4be2ni4A/s1600/face.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFno75OQ3wDv6skV7D9irFEQaNwYX1MdM9lk1_5o5H8793G2P5FtwYKLOpm9QpE_ZBtVhUWMDpEpDXG2_t3EElC6v_87RVuoxsFbleLxMZznhwislsOdkx9Cji8DfrhgZMqd-HEl-De3g/s1600/photo.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2wVSYK18PrLqvF-JZH7TLLK7Nx3jkQOceNg3jpqdGjvzuNTISujVOOQ7Yy5ubsgSoFKZH9XKJk4DuVp3PmERvhyTgMRhV4i8xEkWs6Qfpmh-wSQnqbRGWNb6z8FT1ui5P9DDzHC99T4/s1600/music.png" alt="" />
<span class="light-text">تعديل</span>
</a>
 </div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://konozblog.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYlWL9osbd_qXXyuhgKY0i7-ijWyk2ioU4NLvZeWrgk8ZSX8wrKWT2xAAs4jD_qEZJPdDqCd6Nl0UFXl-8eOVacM3zUy8cr_x9UyKfnDLX2__-P78B4bVFKc7EsVxNlxYYtd2-BiA_NY/s1600/MBL.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu -->

قم بتغيير كلمة تعديل  بما تريد وضع مكان علامة # الرابط المناسب

يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS.

 نتمنى ان تستفيد من الموضوع 

اضافات بلوجر

تسمية 5

تسمية 1

 
جميع الحقوق محفوظة © 2015 أدوات بلوجر

تعريب مداد الجليد