اضافة مشاركة جزء من النص في تدوينة



في تدوينة اليوم اضافة جديدة وجميلة توفر للزائر امكانية مشاركة جزء (محدد) من النص او التدوينة عبر الشبكات التواصل الاجتماعي .



تركيب الإضافة :-

1.توجه الى لوحة التحكم ثم قالب ثم تحرير html
2.ابحث بإستخدام ctrl + f على </head> 
   ضع الكود التالي فوقه (قبله) : 
  <style type='text/css'>/*<![CDATA[*/
@keyframes selectionSharerPopover-animation{0%{transform:matrix(.97,0,0,1,0,12);filter:alpha(opacity=0);opacity:0}
20%{transform:matrix(.99,0,0,1,0,2);filter:alpha(opacity=70);opacity:.7}
40%{transform:matrix(1,0,0,1,0,-1);filter:alpha(opacity=100);opacity:1}
100%,70%{transform:matrix(1,0,0,1,0,0);filter:alpha(opacity=100);opacity:1}
}
#selectionSharerPopover{display:none;position:absolute;top:-100px;left:-100px;z-index:1010}
#selectionSharerPopover:after{content:'';display:block;position:absolute;bottom:-3px;left:50%;margin-left:-4px;width:8px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#262625;box-shadow:0 0 2px #262625}
#selectionSharerPopover.anim{transition:top 75ms ease-out;animation:selectionSharerPopover-animation 180ms forwards linear;-webkit-animation:selectionSharerPopover-animation 180ms forwards linear}
#selectionSharerPopover-inner{position:relative;overflow:hidden;-webkit-border-radius:5px;border-radius:5px;border:1px solid;border-color:#262625 #1c1c1b #121211;box-shadow:0 1px 3px -1px rgba(0,0,0,.7),inset 0 0 1px rgba(255,255,255,.07),inset 0 0 2px rgba(255,255,255,.15);background-image:linear-gradient(to bottom,rgba(49,49,47,.97),#262625);background-repeat:repeat-x}
#selectionSharerPopover .selectionSharerPopover-clip{position:absolute;bottom:-11px;display:block;left:50%;clip:rect(12px 24px 24px 0);margin-left:-12px;width:24px;height:24px;line-height:24px}
#selectionSharerPopover .selectionSharerPopover-arrow{display:block;width:20px;height:20px;-webkit-transform:rotate(45deg) scale(.5);transform:rotate(45deg) scale(.5);background-color:#454543;border:2px solid #121211;box-sizing:content-box}
.selectionSharer ul{padding:0;display:inline}
.selectionSharer ul li{float:left;list-style:none;background:0 0;margin:0}
.selectionSharer a.action,.selectionSharer a.action.googleplus{display:block;text-indent:-200px;margin:5px 7px;height:20px;border:none}
.selectionSharer a.action{width:20px}
.selectionSharer a.action.googleplus{width:32px}
.selectionSharer a:hover{color:#ccc}
.selectionSharer a.tweet{background:url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='171' height='139'%3e%3cg transform='translate(-282.32053,-396.30734)'%3e%3cpath style='fill:white' d='m 453.82593,412.80619 c -6.3097,2.79897 -13.09189,4.68982 -20.20852,5.54049 7.26413,-4.35454 12.84406,-11.24992 15.47067,-19.46675 -6.79934,4.03295 -14.3293,6.96055 -22.34461,8.53841 -6.41775,-6.83879 -15.56243,-11.111 -25.68298,-11.111 -19.43159,0 -35.18696,15.75365 -35.18696,35.18525 0,2.75781 0.31128,5.44359 0.91155,8.01875 -29.24344,-1.46723 -55.16995,-15.47582 -72.52461,-36.76396 -3.02879,5.19662 -4.76443,11.24048 -4.76443,17.6891 0,12.20777 6.21194,22.97747 15.65332,29.28716 -5.76773,-0.18265 -11.19331,-1.76565 -15.93716,-4.40083 -0.004,0.14663 -0.004,0.29412 -0.004,0.44248 0,17.04767 12.12889,31.26806 28.22555,34.50266 -2.95247,0.80436 -6.06101,1.23398 -9.26989,1.23398 -2.2673,0 -4.47114,-0.22124 -6.62011,-0.63114 4.47801,13.97857 17.47214,24.15143 32.86992,24.43441 -12.04227,9.43796 -27.21366,15.06335 -43.69965,15.06335 -2.84014,0 -5.64082,-0.16722 -8.39349,-0.49223 15.57186,9.98421 34.06703,15.8094 53.93768,15.8094 64.72024,0 100.11301,-53.61524 100.11301,-100.11387 0,-1.52554 -0.0343,-3.04251 -0.10204,-4.55261 6.87394,-4.95995 12.83891,-11.15646 17.55618,-18.21305 z' /%3e%3c/g%3e%3c/svg%3e") 2px 4px no-repeat;background-size:18px}
.selectionSharer a.facebook{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 33 33' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") 0 2px no-repeat;background-size:18px;display:none}
.selectionSharer a.googleplus{background:url(https://3.bp.blogspot.com/-cja0R5eTXHE/V_HuSDE4mpI/AAAAAAAAoEI/uXnTiMDwu4AmP4_shaADYdgtW6cGMmqiQCLcB/s1600/1475490209_40-google-plus.png) 0 -5px no-repeat;background-size:32px;color:#fff}
#selectionSharerPopunder.fixed{transition:bottom .5s ease-in-out;width:100%;position:fixed;left:0;bottom:-50px}
.selectionSharer{transition:-webkit-transform .6s ease-in-out}
.selectionSharer.moveDown{-webkit-transform:translate3d(0,60px,0)}
#selectionSharerPopunder{position:absolute;left:0;width:100%;height:0;transition:height .5s ease-in-out;background:#ccc;border:none;box-shadow:inset 0 10px 5px -10px rgba(0,0,0,.5),inset 0 -10px 5px -10px rgba(0,0,0,.5);border-radius:0;overflow:hidden}
#selectionSharerPopunder.show{height:50px}
.selectionSharerPlaceholder{height:1em;margin-bottom:-2em;transition:height .5s ease-in-out}
.selectionSharerPlaceholder.show{height:50px!important}
#selectionSharerPopunder-inner ul{overflow:hidden;float:right;margin:0}
#selectionSharerPopunder-inner ul li{padding:5px;overflow:hidden}
#selectionSharerPopunder-inner label{color:#fff;font-weight:300;line-height:50px;margin:0 20px 0 10px}
#selectionSharerPopunder-inner a{width:30px;height:30px;background-size:30px}
#selectionSharerPopunder-inner a.tweet{background-position:0 2px}
/*]]>*/
</style>
3.ابحث على </body> ضع الكود التالي فوقه (قبله) :
 <script>
//<![CDATA[
!function(e){var t=function(t){var o=this;t=t||{},"string"==typeof t&&(t={elements:t}),this.sel=null,this.textSelection="",this.htmlSelection="",this.url2share=e('meta[property="og:url"]').attr("content")||e('meta[property="og:url"]').attr("value")||window.location.href,this.getSelectionText=function(e){var t="",n="";if(e=e||window.getSelection(),e.rangeCount){for(var i=document.createElement("div"),r=0,a=e.rangeCount;a>r;++r)i.appendChild(e.getRangeAt(r).cloneContents());n=i.textContent,t=i.innerHTML}return o.textSelection=n,o.htmlSelection=t||n,n},this.selectionDirection=function(e){var t=e||window.getSelection(),o=document.createRange();if(!t.anchorNode)return 0;o.setStart(t.anchorNode,t.anchorOffset),o.setEnd(t.focusNode,t.focusOffset);var n=o.collapsed?"backward":"forward";return o.detach(),n},this.showPopunder=function(){o.popunder=o.popunder||document.getElementById("selectionSharerPopunder");var e=window.getSelection(),t=o.getSelectionText(e);if(e.isCollapsed||t.length<10||!t.match(/ /))return o.hidePopunder();if(o.popunder.classList.contains("fixed"))return o.popunder.style.bottom=0,o.popunder.style.bottom;var n=e.getRangeAt(0),i=n.endContainer.parentNode;if(o.popunder.classList.contains("show")){if(Math.ceil(o.popunder.getBoundingClientRect().top)==Math.ceil(i.getBoundingClientRect().bottom))return;return o.hidePopunder(o.showPopunder)}if(i.nextElementSibling)o.pushSiblings(i);else{o.placeholder||(o.placeholder=document.createElement("div"),o.placeholder.className="selectionSharerPlaceholder");var r=window.getComputedStyle(i).marginBottom;o.placeholder.style.height=r,o.placeholder.style.marginBottom=-2*parseInt(r,10)+"px",i.parentNode.insertBefore(o.placeholder)}var a=window.pageYOffset+i.getBoundingClientRect().bottom;o.popunder.style.top=Math.ceil(a)+"px",setTimeout(function(){o.placeholder&&o.placeholder.classList.add("show"),o.popunder.classList.add("show")},0)},this.pushSiblings=function(e){for(;e=e.nextElementSibling;)e.classList.add("selectionSharer"),e.classList.add("moveDown")},this.hidePopunder=function(e){if(e=e||function(){},"fixed"==o.popunder)return o.popunder.style.bottom="-50px",e();o.popunder.classList.remove("show"),o.placeholder&&o.placeholder.classList.remove("show");for(var t=document.getElementsByClassName("moveDown");el=t[0];)el.classList.remove("moveDown");setTimeout(function(){o.placeholder&&document.body.insertBefore(o.placeholder),e()},600)},this.show=function(e){setTimeout(function(){var t=window.getSelection(),n=o.getSelectionText(t);if(!t.isCollapsed&&n&&n.length>10&&n.match(/ /)){var i=t.getRangeAt(0),r=i.getBoundingClientRect().top-5,a=r+o.getPosition().y-o.$popover.height(),s=0;if(e)s=e.pageX;else{var l=t.anchorNode.parentNode;s+=l.offsetWidth/2;do s+=l.offsetLeft;while(l=l.offsetParent)}switch(o.selectionDirection(t)){case"forward":s-=o.$popover.width();break;case"backward":s+=o.$popover.width();break;default:return}o.$popover.removeClass("anim").css("top",a+10).css("left",s).show(),setTimeout(function(){o.$popover.addClass("anim").css("top",a)},0)}},10)},this.hide=function(){o.$popover.hide()},this.smart_truncate=function(e,t){if(!e||!e.length)return e;var o=e.length>t,n=o?e.substr(0,t-1):e;return n=o?n.substr(0,n.lastIndexOf(" ")):n,o?n+"...":n},this.getRelatedTwitterAccounts=function(){var t=[],o=e('meta[name="twitter:creator"]').attr("content")||e('meta[name="twitter:creator"]').attr("value");o&&t.push(o);for(var n=document.getElementsByTagName("a"),i=0,r=n.length;r>i;i++)if(n[i].attributes.href&&"string"==typeof n[i].attributes.href.value){var a=n[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);a&&a.length>1&&-1==["widgets","intent"].indexOf(a[1])&&t.push(a[1])}return t.length>0?t.join(","):""},this.shareTwitter=function(e){e.preventDefault();var t="“"+o.smart_truncate(o.textSelection.trim(),114)+"”",n="http://twitter.com/intent/tweet?text="+encodeURIComponent(t)+"&related="+o.relatedTwitterAccounts+"&url="+encodeURIComponent(window.location.href);o.viaTwitterAccount&&t.length<114-o.viaTwitterAccount.length&&(n+="&via="+o.viaTwitterAccount);var i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;return window.open(n,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a),o.hide(),!1},this.shareFacebook=function(e){e.preventDefault();var t=o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),n="https://www.facebook.com/sharer.php?u="+encodeURIComponent(o.url2share)+"&quote="+encodeURIComponent(t),i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;window.open(n,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a)},this.shareGoogleplus=function(e){e.preventDefault();var t=(o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),"https://plus.google.com/share?url="+encodeURIComponent(o.url2share)),n=640,i=440,r=screen.width/2-n/2,a=screen.height/2-i/2-100;window.open(t,"share_googleplus","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+n+", height="+i+", top="+a+", left="+r)},this.render=function(){var t='<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;">  <div id="selectionSharerPopover-inner">    <ul>      <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li>    </ul>  </div>  <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div></div>',n='<div id="selectionSharerPopunder" class="selectionSharer">  <div id="selectionSharerPopunder-inner">    <label>Share this selection</label>    <ul>      <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li>    </ul>  </div></div>';o.$popover=e(t),o.$popover.find("a.tweet").click(o.shareTwitter),o.$popover.find("a.facebook").click(o.shareFacebook),o.$popover.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popover),o.$popunder=e(n),o.$popunder.find("a.tweet").click(o.shareTwitter),o.$popunder.find("a.facebook").click(o.shareFacebook),o.$popunder.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popunder),o.url2share&&e(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(t){"string"==typeof t&&(t=e(t)),o.$elements=t instanceof e?t:e(t),o.$elements.mouseup(o.show).mousedown(o.hide).addClass("selectionShareable"),o.$elements.bind("touchstart",function(){o.isMobile=!0}),document.onselectionchange=o.selectionChanged},this.selectionChanged=function(e){o.isMobile&&(o.lastSelectionChanged&&clearTimeout(o.lastSelectionChanged),o.lastSelectionChanged=setTimeout(function(){o.showPopunder(e)},300))},this.getPosition=function(){var e=void 0!==window.pageXOffset,t="CSS1Compat"===(document.compatMode||""),o=e?window.pageXOffset:t?document.documentElement.scrollLeft:document.body.scrollLeft,n=e?window.pageYOffset:t?document.documentElement.scrollTop:document.body.scrollTop;return{x:o,y:n}},this.render(),t.elements&&this.setElements(t.elements)};e.fn.selectionSharer=function(){var e=new t;return e.setElements(this),this},"function"==typeof define?define(function(){return t.load=function(e,o,n){var i=new t;i.setElements("p"),n()},t}):window.SelectionSharer=t}(jQuery);
$('.post-body').selectionSharer();
//]]>
</script>
4. قم بحفظ القالب وجرب الاضافة .

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

نوت قالب بلوجر كتابي


نوت قالب بلوجر كتابي - يمتاز بشكله البسيط وقلة اضافاته مما يعطي سرعة كبيرة في تصفحه ، الوان خفيفه وشكل جديد وجميل ،سيو متحقق منه ، اماكن اعلانات و غيره .




لا تنسى الاشتراك بالمدونة ليصلك كل جديد قوالب والاضافات 

قالب نيار الاصدار التاني


قالب نيار الاصدار التاني - تصميم جميل ، متجاوب مع جميع انواع الاجهزة والمتصفحات ، سيو متحقق منه ، خاصية تحكم في الالوان من خلال مصمم النماذج ، عرض المواضيع حسب التسميات .

قالب نيار الاصدار الأول



لا تنسى الاشتراك بالمدونة ليصلك كل جديد قوالب والاضافات 

نيار قالب بلوجر متجاوب


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


مميزات القالب


 1.مقالات ذات صلة
 2.الفهرس
 3.قائمة منسدلة
 4.أزرار المعاينة والتحميل
 5.خطوط متنوعة
 6.تعليقات بإبتسامات فيسبوك
 7.صفحات ثابتة معدلة
 8.صفحة الخطأ
 9.أيقونات التواصل الإجتماعي
  والمزيد...

الواجهة كاملة








لا تنسى الاشتراك بالمدونة ليصلك كل جديد قوالب والاضافات 

اضافة مشاركة مميزة


تدوينة جديده اضافة مشاركة مميزة بشكل جديد وجميل ، تمكنك من اضافة موضوع انت تختاره  

تركيب الاضافة :- 
1.من لوحة تحكم اذهب الى تخطيط >> اضافة اداة  Html/JavaScriptوضع الكود التالي بها

  <style>
/*posts */
.bikhi{position:absolute; padding:4px; bottom:0; z-index:99999; color:#fff; background:rgba(0,0,0,0.65)}
.bikhi h3{text-align:center}
.bikhi:hover img{transform:scale(1.3)}
.post-summary{position:relative; overflow:hidden; height:300px}
.post-summary:hover .image{transform:scale(1.3)}
.image{height:100% !important; transition:0.4s; width:100%}
.bikhi h3 a{background:#2980B9; padding:9px; display:block; margin-bottom:10px; color:#fff; font-family:'29LTBukra-Bold'; font-weight:100; font-size:13px}
.bikhi p{font-family:droid arabic naskh; font-size:13px; text-align:center; color:#ECECEC}
/* libya-web.blogspot.com */
.libya {
    background: aliceblue;
margin: 9px 40px -5px 40px; 
   padding: 7px 0px 7px 0px;
}
</style><style type="text/css">
    .image {
      width: 100%;
    }
  </style>
<div class="post-summary">
<div class="bikhi"><p class="libya selected"><a href="http://libya-web.blogspot.com/2016/06/namodg-template.html">قالب نمودج الشخصي</a><p class="selected">
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من ا...
</p></p></div><img class="image" src="#" />
</div>
اللون الاخضر عنوان التدوينه
اللون الاحمر رابط التدوينه
اللون الاصفر رابط الصورة 
اللون الازرق الوصف 

الى هنا نصل الى نهاية التدوينه ادا واجهتك مشكلة باب التعليقات مفتوح 


إضافة محتوى مخفي في موضوع



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

تركيب الاضافة :- 
1.من لوحة تحكم اذهب الى قالب ثم تحرير HTML
2.وابحث على </head>
_ضع الكود التالي فوقه (قبله)

  <link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=DroidKufi-Regular" /><style type='text/css'>
#libya-spoiler{text-align:center}
#libya-spoiler button{-moz-box-shadow:inset 0 39px 0 -24px #e67a73;-webkit-box-shadow:inset 0 39px 0 -24px #e67a73;box-shadow:inset 0 39px 0 -24px #e67a73;background-color:#e4685d;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid;display:inline-block;cursor:pointer;color:#ffffff;font-family: 'DroidKufi-Regular';font-size:15px;padding:5px 20px;text-decoration:none;text-shadow:0 1px 0 #b23e35}
#libya-spoiler button:after{font-family:FontAwesome;position:relative;content:'\f0dc';padding-left:10px}
#libya-spoiler button:active{position:relative;top:1px}
#libya-spoiler button:hover{background-color:#F56A60;outline:none}
#libya-spoiler-container{padding:1px;text-align:left;background:#f5f5f5;border:0;padding:20px;display:none}
</style>
 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#libya-spoiler").click(function() {
$("#libya-spoiler-container").slideToggle("normal");
 });
})
//]]>
</script>
استخدام الاضافة :- 
عند كتابة تدوينه انتقل الى تبويب html وضع الكودالتالي به كما موضح بالصوره.


 <button>إضغط هنا  </button></div><div id="libya-spoiler-container">
النص المخفي الذي تريد كتابته هنا 
</div>

*استبدل المحدد بالاحمر بالكلمة التي تناسبك .
*استبدل المحددد بالاصفر بالنص الذي تريد اخفائه .

الى هنا نصل الي نهاية التدوينه واذا واجهتك مشاكل باب التعليقات مفتوح



قوالب بلوجر

شاهد الكل »

إضافات بلوجر

شاهد الكل »