خدمات ويب و Blogger : برمجه باضافات خارجيه

البحث بالمدونه

‏إظهار الرسائل ذات التسميات برمجه باضافات خارجيه. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات برمجه باضافات خارجيه. إظهار كافة الرسائل

الثلاثاء

أسهل طريق لإضافة ترقيم الصفحات بشكلين Page Navigation

الثلاثاء, ديسمبر 24, 2019 0 التعليقات
قم بالبحث فى قالب مدونتك عن الوسم 
 </head> 
 ثم قم بوضع الكود الشكل الذى تريد فوقه ( قبلة ) 
 
 الشكل الأول خلفيه رصاصي غامج وازرق فاتح
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <style type='text/css'>
 /* Page Navigation */
 #blog-pager{background:#2d3141;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
 .showpage a,.showpageNum a,.showpagePoint,.showpageOf{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}
 .showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}
 .showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}
 @media screen and (max-width:640px) {
 #blog-pager {padding:12px;}
 .showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}
 @media screen and (max-width:320px) {
 .showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
 </style>
 </b:if>
 </b:if>
 الشكل الثانى ازرق ابيض
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}
.showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}
.showpagePoint{background:#2980b9;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>
 2- الأن مع الكود الخاص بأظهار الترقيم قم بالبحث فى قالب مدونتك عن الوسم 
 </body>
 ثم قم بوضع الكود التالى فوقه ( قبلة )
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <script type='text/javascript'>
 /*<![CDATA[*/
 var postperpage=2;var numshowpage=3;var upPageWord ='السابق';var downPageWord ='التالى';var urlactivepage=location.href;var home_page="/";
 /*]]>*/
 </script>
 <script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/>
 </b:if>
 وسلامتكم

الاثنين

المواضيع المتشابهه بالصور المتحركه Related Post Blogger

الاثنين, ديسمبر 23, 2019 1 التعليقات

البحث عن
 </head>
 
 فوقه
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 #related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
 #related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
 #related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
 #related-posts a:hover{background-color:#1194F9;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
 .tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
 .tooltip span.top{padding:20px 5px 0;background:url(http://4.bp.blogspot.com/-5YnQgN-oJ8U/VSC5RoZChlI/AAAAAAAAK0k/mBnvrYlxfRY/s1600/BloggerSpice%2Bbubble.png) no-repeat top;}
 .tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http://4.bp.blogspot.com/-5YnQgN-oJ8U/VSC5RoZChlI/AAAAAAAAK0k/mBnvrYlxfRY/s1600/BloggerSpice%2Bbubble.png) no-repeat bottom;}
 </style>
 <script type='text/javascript'>window.onload=function(){enableTooltips(&quot;calcList&quot;)};imgBT=new Image();imgBT.src=&#39;http://3.bp.blogspot.com/-ciCUurobkhg/UoCtFhXRBuI/AAAAAAAAFIs/9FbIqQZ3KfU/s1600/BS+No+Image+White.png&#39;;</script>
 <script src='https://googledrive.com/host/0B9kc_Su2qRHNTS0xdDNRM0NVRDA' type='text/javascript'></script>
 </b:if>
 البحث عن احدهم
 <data:post.body/>
 او
 <div class='post-footer-line post-footer-line-1'>
 فوقه او تحته حسب اختيارك
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='related-posts'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast != &quot;true&quot;'>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
 <h3>Related Posts</h3>
 <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
 <script type='text/javascript'>
 var currentposturl=&quot;<data:post.url/>&quot;;
 var maxresults=10;
 var relatedpoststitle=&quot;&quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
 </script></marquee>
 </div><div style='clear:both'/>
 </b:if>
 وسلامتكم

الأحد

5 اضافات اجتماعيه قوقل وتويتر والفيس بوكس Social Sharing Widget For Blogger

الأحد, ديسمبر 22, 2019 0 التعليقات

البحث عن
 <head>
 فوقه
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' rel='stylesheet'/>
 البحث عن
 ]]></b:skin>
 فوقه
 /*CSS Share Button*/
 .bsshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
 .bsshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;}
 .bsshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;}
 .bsshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;}
 .bsshare li a:hover{background:#555555;color:#fff;}
 .bsshare li .twitter{background-color:#85c5f5;}
 .bsshare li .facebook{background-color:#6381c0;}
 .bsshare li .gplus{background-color:#ed6d5d;}
 .bsshare li .pinterest{background-color:#e44d52;}
 .bsshare li .linkedin{background-color:#2c9ad8;}
 .bsshare li .twitter:hover,.bsshare li .facebook:hover,.bsshare li .gplus:hover,
 .bsshare li .pinterest:hover,.bsshare li .linkedin:hover{color:#fff;}
 .bsshare li:last-child{margin-right:0}
 .bsshare li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;}
 .bsshare li .fa {display:initial;}
 البحث عن احدهم 
 <data:post.body/>
 او
 <div class='post-footer'>
 فوقه تحته بكيفكم
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='bsshare'>
 <ul>
 <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
 <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
 <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
 <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
 <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
 </ul>
 </div>
 <div style='clear:both'/>
 </b:if>
 وسلامتكم

الاثنين

اضافه وجوه تعبيره في البلوجربرمجه خفيفه emoMessage

الاثنين, ديسمبر 09, 2019 0 التعليقات

البحث عن
</body>
ثم أضف الكود التالي فوقه مباشرةً
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"إضغط على الرمز لظهور الكود الخاص به!",
emoMessage:"لإضافة تعليق رمزي يجب ترك مسافة واحدة قبل الرمز."
})
});
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/s/vuj0gixtm40ihha/madad2com.js' type='text/javascript'/>
</b:if>

ثم حفظ القالب إنتهى

اشهر تطبيق فوق تحت How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect

الاثنين, ديسمبر 09, 2019 0 التعليقات

البحث عن
]]></b:skin>
فوقه
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

البحث عن
</body>
فوقه
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
وسلامتكم

مجموعه مواقع لرفع ماشرات الماوس cursor

الاثنين, ديسمبر 09, 2019 0 التعليقات


اتبع التطبيقات عندك الجافا سكربت والبرمجه
البحث عن
<body>
او
<style/>
وضع فوقه الكود هذا
الصوره
http://cur.cursors-4u.net/cursors/cur-11/cur1025.png
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1025.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1025.png), progress !important;}</style>
او التطبيق الثاني البحث عن
</head>
وفوقه ضع هذا الكود
http://www.rw-designer.com/cursor-extern.php?id=46247
يمكنك تعديل الرابط من المصدر
<style type="text/css">
body {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=46247);}
</style>
الجافا سكربت اضافه وتغير الصوره
http://cur.cursors-4u.net/cursor.png

<style type="text/css">* {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth570.cur), auto !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/17/amber-11.html" target="_blank" title="Amber"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Amber" style="position:absolute; top: 0px; right: 0px;" /></a>
وعندك هذا وتغير الصوره
http://ani.cursors-4u.net/cursors/cur-13/cur1164.png

<style type="text/css">* {cursor: url(http://ani.cursors-4u.net/cursors/cur-13/cur1164.ani), url(http://ani.cursors-4u.net/cursors/cur-13/cur1164.png), auto !important;}</style>
وسلامتكم

علم الكويت على الماوس totallyfreecursors

الاثنين, ديسمبر 09, 2019 0 التعليقات

يمكنك وضع بالجافا سكربت او البحث عن
 ]]></b:skin>
 فوقه
 
 body, a, a:hover {cursor: url(http://cursors4.totallyfreecursors.com/thumbnails/kuwait.gif), progress;}
 ويمكنك تصمم وتغير مسار الصوره فقط

facebook المكون الإضافي للتعليقات من فيسبوك

الاثنين, ديسمبر 09, 2019 0 التعليقات
البحث عن

 <div class='comments' id='comments'>

 راح تجد ثنين تقريبا المهم الاول وفوقه ضع الكود
 <div class='comakauttafb-page' id='fb-comments-page'>
 <div id='fb-root'/>
 <fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='100%'/>
 <div class='comments comakauttafb-page' id='blogger-comments-page'>
 <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
 <script src='http://code.jquery.com/jquery-latest.js'/>
 <meta content='additions.blogger' property='fb:admins'/>
 <script type='text/javascript'>
 //<![CDATA[
 function commentToggle(selectTab) {$(".comakauttafb-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comakauttafb-page").hide();$(selectTab + "-page").show();}
 //]]>
 </script>
 </div>
 </div>
 وسلامتكم

الثلاثاء

كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر blogger adman

الثلاثاء, ديسمبر 03, 2019 0 التعليقات

ابحث عن الوسم
 ]]></b:skin>
 و اضف الكود التالي فوقه
 .admin-controll,.admin-controll * {
 margin: 0;
 padding: 0;
 list-style: none;
 list-style-type: none;
 line-height: 1.0;
 }
 .admin-controll ul {
 position: absolute;
 top: -999em;
 width: 100%;
 }
 .admin-controll ul li {
 width: 100%;
 background: 333333;
 }
 .admin-controll li:hover {
 visibility: inherit;
 }
 .admin-controll li {
 float: right;
 position: relative;
 }
 .admin-controll a {
 display: block;
 position: relative;
 }
 .admin-controll li:hover ul,.admin-controll li.sfHover ul {
 right: 0;
 top: 100%;
 z-index: 99;
 }
 .admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
 top: -999em;
 }
 .admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
 right: 100%;
 top: 0;
 }
 .admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
 top: -999em;
 }
 .admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
 right: 100%;
 top: 0;
 }
 .mbl-admin-bar {
 margin: 0px;
 direction: ltr;
 color: #ccc;
 font: 400 13px/32px "Open Sans",sans-serif;
 height: 32px;
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 min-width: 600px;
 z-index: 99999;
 background: #222;
 float: right;
 }
 .mbl-admin-bar li a {
 display: block;
 color: #fff;
 padding: 7px 15px;
 font-weight: 400;
 text-decoration: none;
 font-size: 14px;
 }
 .mbl-admin-bar li li a {
 font-size: 15px;
 color: #fff;
 float: none;
 padding: 0px;
 width: 0;
 }
 ul.children {
 color: #fff;
 background: #333333;
 font-size: 18px;
 min-width: 230px;
 padding: 10px;
 float: left;
 margin-right: -163px;
 }
 .mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
 color: #38b8f0;
 background: #333333;
 }
 .fa {
 font-size: 18px;
 color: #999;
 margin-left: 5px;
 }
 .fa.fa-user {
 font-size: 50px;
 float: right;
 padding: 50px;
 border: 1px solid #212121;
 background: #575757;
 }
 ul.children img {
 width: 80px;
 height: auto;
 float: right;
 margin-left: 10px;
 }
 ul.children a {
 margin-top: 10px;
 }
 li.mright {
 float: left;
 }
 li.mblogo a {
 padding: 3px 15px 3px 15px!important;
 }
 ul.child1 {
 min-width: 180px;
 color: #fff; background: #333333;
 }
 ul.child1 li a {
 padding: 10px;
 width: 100%;
 background: #333333;
 }
 الان ابحث عن الوسم
 </body>
 و اضف الكود التالي تحته
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
 <link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
 <span class='item-control blog-admin'>
 <div class='span-24'>
 <div class='mbl-cpanel'>
 <ul class='admin-controll mbl-admin-bar'>
 <li class='mblogo'><a href="https://www.traidnt.net/vb/search.php?searchid=2199468"><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/s1600/v.pn'/></a></li>
 <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
 <li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> لوحة التحكم</a></li>
 <li><a href="#"><i class="fa fa-pencil"></i> المشاركات</a>
 <ul class='child1'>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> مشاركة جديدة</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> صفحة جديدة</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> جميع المشاركات</a></li>
 <li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/> تحرير مشاركة</a></li>
 </ul>
 </li>
 <li><a href="#"><i class="fa fa-cogs"></i> تخصيص</a>
 <ul class='child1'>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> التخطيط</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> تحرير القالب</a></li>
 </ul>
 </li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> التعليقات</a>
 <ul class='child1'>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> في انتظار الإشراف</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> التعليقات غير مرغوب فيها</a></li>
 </ul>
 </li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> إعدادات</a>
 <ul class='child1'>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> أساسي</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> مشاركات و تعليقات</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> الجوال و البريد الإلكتروني</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> اللغة و التنسيق</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> تفضيلات البحث</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> اخرى</a></li>
 <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/> الإحصائيات</a></li>
 </ul>
 </li>
 <li class='mright'><a href='#'><i class='fa fa-signal'/> الإدارة </a>
 <ul class='children'>
 <li><img src='https://3.bp.blogspot.com/-BAa4infIy2s/WND97Rf83cI/AAAAAAAAGCo/Ca-gcyNtbCgq2tduAJUSdDailFcU6k7eACLcB/s1600/drupal.png'/>
 <div class='mauthor'><br/>هذى مدونتي</div>
 <a href='http://www.blogger.com/logout.g'> الخروج</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </span>
 ================================
 اهم الملاحظات حول الكود
 ================================
 http://mudwnp.blogspot.com/2014/10/how-to-create-admin-control-panel-in.html
 التغير لـ
 https://www.traidnt.net/vb/search.php?searchid=2199468
 و
 https://3.bp.blogspot.com/-BAa4infIy2s/WND97Rf83cI/AAAAAAAAGCo/Ca-gcyNtbCgq2tduAJUSdDailFcU6k7eACLcB/s1600/drupal.png صوره لمدونتك
 و
 هذي مدونتي

إضافه تعليقات الفيس بوك مدومج مع بلوجر blogspot facebook

الثلاثاء, ديسمبر 03, 2019 0 التعليقات

البحث عن
 <div class='comments' id='comments'>
 سوف تجده مكرر 
 ضع تحت كل واحدة الكود التالي
 <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='أضف تعليقات عبر Facebook'><img class='comakauttafb-tab-icon' src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30x43.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='أضف تعليقات عبر Blogger'><img class='comakauttafb-tab-icon' src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30x43.png'/> <data:post.numComments/> التعليقات</div><div class='clear'/></div><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comakauttafb-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>
 
 تغير الصور الفيس
 http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30x43.png
 البلوجر
 http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30x43.png
 ويمكنك تكبر الصوره وسلامتكم

إضافة نجوم التقييم إلى المشاركات الشائعة Popular Posts Widget امريين

الثلاثاء, ديسمبر 03, 2019 0 التعليقات

البحث عن
 
 </head>
 فوقه
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
 بعدها
 ]]></b:skin>
 فوقه
 الشكل الاول خلفيه بيضه نجوم شفافه
 /* Popular Post */
 .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
 .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
 .PopularPosts ul{margin:0;list-style:none;color:#64707a}
 .PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
 .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
 .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
 .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
 .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
 .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
 .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
 .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
 .PopularPosts ul li:hover:before{opacity:1}
 .PopularPosts ul li:first-child{border-top:none}
 .PopularPosts ul li:last-child{border-bottom:none}
 .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
 .PopularPosts ul li a:hover{color:#2476e0;}
 .PopularPosts .item-thumbnail{margin:0;}
 .PopularPosts .item-snippet{display:none}
 .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
 الشكل الثاني خلفيه بيضه
 /* Popular Post */
 .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
 .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
 .PopularPosts ul{margin:0;list-style:none;color:#64707a}
 .PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
 .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
 .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
 .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
 .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
 .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
 .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
 .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
 .PopularPosts ul li:hover:before{opacity:1}
 .PopularPosts ul li:first-child{border-top:none}
 .PopularPosts ul li:last-child{border-bottom:none}
 .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
 .PopularPosts ul li a:hover{color:#2476e0;}
 .PopularPosts .item-thumbnail{float:right;margin:0;}
 .PopularPosts .item-snippet{display:none}
 .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
 ميزته يتكرر القمج بمشاهده الصفحه نفسهااا

الأحد

شريط اخبار Colored News برمجه

الأحد, ديسمبر 01, 2019 0 التعليقات

عندك الكود التحتي الجافا سكربت تضعه بالمكان المناسب
 البحث
 ]]></b:skin>
 ضع الكود تحته
 .ticker {overflow: hidden;}
 .ticker .title {float: right; width: 130px; height: 40px; line-height: 25px; text-align: center; color: #FFFFFF; background: #31465B url(http://4.bp.blogspot.com/-xaSAYDTCql4/U1AO14YolTI/AAAAAAAAD94/Lenz-oZ0o2c/s1600/pattern-1.png);}
 .post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font:13px/1.5em tahoma;background-color: #B565BE;}
 .ticker .ticker-icon {float: right;margin-right: 10px; margin-top: 10px;}
 .ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
 .ticker .title h6 {text-align: right; line-height: 0px; font-size: 13px; font-weight: bold;position: relative;
 top: -8px; color: #fff;}
 .ticker .tickercontainer {width: 82%;margin: 0;overflow: hidden;float: right;height: 40px;}
 .ticker .tickercontainer .mask {position: relative;top: 6px;overflow: hidden;height: 40px;}
 .ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
 .ticker ul.newsticker li {float: right;padding: 2px;height: 40px;margin-left: 15px;}
 .ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #000000;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;border-radius: 5px;}
 a.post-tag {line-height: 21px;}
 .newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
 .newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
 .newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
 .newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
 .newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
 .newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
 .newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
 .newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
 .newsticker .recent-title{display: inline-block;}
 .ticker ul.newsticker span {margin: 0 0 0 10px;}
 .ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
 .ticker-section {width: 100%; overflow: hidden; background: #F7F7F7;border-bottom: solid #31465B 2px;position: relative;
 }
 الان ابحث عن الوسم
 </body>
 و اضف الكود التالي فوقه
 <script src='https://cdn.rawgit.com/cnblogger/cn3u/master/Ticker.js'/>
 <script>
 //<![CDATA[
 $(".ticker .jari").each(function () {
 var e = $(this).text();
 if (e.match("recent")) {
 $.ajax({
 url: "/feeds/posts/default?alt=json-in-script&max-results=6",
 type: "get",
 dataType: "jsonp",
 success: function (e) {
 var t = "";
 var n = "<ul>";
 for (var r = 0; r < e.feed.entry.length; r++) {
 for (var i = 0; i < e.feed.entry[r].link.length; i++) {
 if (e.feed.entry[r].link[i].rel == "alternate") {
 t = e.feed.entry[r].link[i].href;
 break
 }
 }
 var s = e.feed.entry[r].title.$t;
 var o = e.feed.entry[r].category[0].term;
 n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
 }
 n += "</ul>";
 $(".ticker .jari").each(function () {
 $(this).html(n);
 $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
 $(this).removeClass("widget-content").addClass("layout-content");
 $(this).find("ul").webTicker();
 $("p.trans").each(function () {
 var e = $(this).text();
 var t = $(this).attr("data-tran");
 $("#pages-wrapper *").replaceText(e, t)
 })
 })
 }
 })
 } else {
 $.ajax({
 url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
 type: "get",
 dataType: "jsonp",
 success: function (e) {
 var t = "";
 var n = "<ul>";
 for (var r = 0; r < e.feed.entry.length; r++) {
 for (var i = 0; i < e.feed.entry[r].link.length; i++) {
 if (e.feed.entry[r].link[i].rel == "alternate") {
 t = e.feed.entry[r].link[i].href;
 break
 }
 }
 var s = e.feed.entry[r].title.$t;
 var o = e.feed.entry[r].category[0].term;
 n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
 }
 n += "</ul>";
 $(".ticker .jari").each(function () {
 $(this).html(n);
 $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
 $(this).removeClass("widget-content").addClass("layout-content");
 $(this).find("ul").webTicker();
 $("p.trans").each(function () {
 var e = $(this).text();
 var t = $(this).attr("data-tran");
 $("#pages-wrapper *").replaceText(e, t)
 })
 })
 }
 })
 }
 });
 //]]>
 </script>
 الان الخطوة الاخيرة
 الكود التالي هو المسئول عن عمل الإضافة بحيث يمكنك إضافته في المكان الذي تُريده
 اسفل القائمة أعلى المدونة يمكنك إضافته في اي مكان
 <div class='clear'/>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <div class='ticker ticker-section' id='ticker'>
 <div>
 <div>
 <div class='content-wrap container-wrapper '>
 <div class='title second-color-bg '>
 <div class='ticker-icon'> <i class='fa fa-spinner fa-pulse'/> </div>
 <h6>آخبار الموقع</h6>
 </div>
 <div class='jari'>
 recent
 </div>
 </div>
 </div>
 </div>
 </div>
 </b:if></b:if>
 وسلامتكم

الثلاثاء

ثلاث اضافات تواصل Facebook Twitter Google+ من المصدر social-likes

الثلاثاء, نوفمبر 26, 2019 0 التعليقات
من المصدر ويمكنك التغير والتعديل حسب اختيارك ونسخه لكم المميز
http://social-likes.js.org/
سكربت جافا اضفه بالمكان المناسب بس نوعه برمجه خارجيه
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
<div class="social-likes">

<div class="facebook" title="Share link on Facebook">Facebook</div>
<div class="twitter" title="Share link on Twitter">Twitter</div>
<div class="plusone" title="Share link on Google+">Google+</div>

</div>
ويمكنك تعريب الكلمات

وضع علامه اليد في اعجبني او لم يعجبني بالارقام برمجه خارجيه likebtn

الثلاثاء, نوفمبر 26, 2019 0 التعليقات
الموقع فيه اكثر من 41 شكل ويوجد رابط البرمجه الخاصه
 
 المصدر
 والان نشرح لكم كيف التطبيق لبلوجر
 المثال لمدونتانا ويمكنك وضعه بجافا سكربت وتتحكم فيها
 البحث عن
 <data:post.body/>
 تحته تضع الكود اذا وجده اكثر من واحد الثاني هو الطلب وكرره
 <!-- LikeBtn.com BEGIN -->
 <span class="likebtn-wrapper" data-theme="greenred" data-lang="ar" data-identifier="item_1" data-show_dislike_label="true" data-loader_show="true"></span>
 <script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
 <!-- LikeBtn.com END -->
 وسلامتكم

الأحد

برمجه باضافات خارجيه Programming with external additions

الأحد, نوفمبر 24, 2019 0 التعليقات
الدرس الاول : حول ما هو البرمجه الخارجيه كمثال الروابط html css js php XML  وغيرها
حبيت اوضح المعلومه لمبتدئين في تصميم بلوجر شخصي وكيف التحكم
كمثال : تقوم بتحكم في تطبيقات من غير برمجه خارجيه وهذا الرابط اتبع
ولموضع البرمجه بالاضافات الخارجيه : اتبع الدروس والشروح بمدونتنا 


تعريب وتطوير هايف السـ العجمي ـفراني