الخميس، 29 سبتمبر، 2016

تحميل قالب Invert-Grid معرب بإحترافية

قالب Invert-Grid معرب بإحترافية
أقوى قالب تقني معرب 2017
قالب بلوجر تقني Invert-Grid معرب كامل 
قالب Invert-Grid معرب بإحترافية
قالب Invert-Grid معرب بإحترافية



معلومات عن القالب

✔ القالب متجاوب و داعم للهواتف و الأجهزة اللوحية
✔ قالب أنيق بألوان خفيفة و متناسقة
✔ قالب سريع التصفح و خفيف
✔ به أزرار المشاركة أسفل و أعلى الموضوع
✔ به صفحة الخطأ
✔ قالب سيو جاهز
✔ قالب إعلانات جاهز
✔ به آخر التعليقات  ✔ و آخر المواضيع ✔ و مواضيع عشوائية
✔ و به نمودج المراسلة مخصص
و العديد ...

مشاهدة و تحميل القالب


شرح تركيب و تعديل القالب

لتعديل على قائمة أزرار مواقع التواصل

من داخل القالب إبحث عن هذه الكلمة socright 
 <li class='socright'>
            <a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a>
        </li>
        <li class='socright'>
            <a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a>
        </li>
        <li class='socright'>
            <a href='https://www.facebook.com/rTemplate/' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a>
        </li>
        <li class='socright'>
            <a href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/><span class='inv'/></a>
        </li>
        <li class='socright'>
            <a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a>
        </li>
غير ما باللون الأحمر و هذه العلامة بروابط الخاصة بك



لإظافة السلايد شو 

من داخل القالب إبحث عن هذه الكلمة تقنية 
// Featured Slider
cat1 = 'تقنية'; 
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-tinWKTDJ8Ak/VU47yzz0f3I/AAAAAAAAKCM/yX9sXfgdgec/s1600/no-image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150; 
summaryTitle = 50; 
numposts1 = 9
غير ما باللون الأحمر بإسم القسم الذي تريد إظهار مواضيعه



لتعديل على صندوق مواقع التواصل الإجتماعية

من داخل القالب إبحث عن invert-socials-icon mom-socials-widget
<div class='invert-socials-icon mom-socials-widget'>
    <ul>
        <li class='facebook'><a href='https://www.facebook.com/rTemplate/' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></a></li>
        <li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>
        <li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></a></li>
        <li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></a></li>
        <li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></a></li>
        <li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></a></li>
        <li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'/></a></li>
        <li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></a></li>
        <li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></a></li>
        <li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></a></li>
        <li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></a></li>
        <li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '/></a></li>
        <li class='delicious'><a href='#' rel='nofollow' target='_blank' title='Follow us on Delicious'><i class='fa fa-delicious '/></a></li>
        <li class='flickr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Flickr'><i class='fa fa-flickr '/></a></li>
    </ul>
</div>
غير ما باللون الأحمر و هذه العلامة # برابط الخاص بك



لإظافة نمودج إتصل بنا 

توجه إلى تخطيط و في المكان الذي يناسبك ضع هذا الكود داخل أداة HTML/JAVASCRIPT
<form name="contact-form">
<span> الإسم </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span> البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">هام</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span> الموضوع <span style="color: #f56954; font-size: x-small; font-weight: bold;">هام</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>



لتعديل على الكاتب 

من داخل القالب إبحث عن هذه الكلمة zonani
<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><img class='avatar' height='100' src='https://s26.postimg.org/w65q19yyx/said_zonani.jpg' title='صاحب المدونة' width='100'/><h4 class='author-box-title'>من هو  <span itemprop='name'>سعيد زنـاني</span></h4><div class='author-box-content' itemprop='description'><p>نبذة قصيرة عنك أو عن موقعك هنا </p></div></div>

غير ما باللون الأحمر بربط صورتك الشخصية
غير ما باللون الأخضر بإسمك
غير ما باللون الأزرق بنبذة مختصرة عنك



لتعديل على صندوق الإشتراك

من داخل القالب إبحث عن هذه الكلمة feedburner
(ستجده أسفل عن الكاتب )
<div id='subscribe-box'>
<h4>إشترك عبر البريد الإلكتروني</h4>
<p>هل أعجبك الموضوع أعلاه &#1567; إذا إشترك ليصلك باي المواضيع</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=r-template&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ضع بريدك هنا ..&quot;;}' onfocus='if (this.value == &quot;ضع بريدك هنا ..&quot;) {this.value = &quot;&quot;;}' type='text' value='ضع بريدك هنا ..'/>
<input name='uri' type='hidden' value='rtemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='إشترك'/>
</form>
</div>
غير ما باللون الأحمر برابطك في feedburner
غير ما باللون الأخصر بإسمك في feedburner




لإظافة آخر المشاركات و آخر التعاليق و مواضيع عشوائية









توجه إلى تخطيط و في المكان الذي يناسبك ضع لكل نمودج الكود الخاص به داخل أداة
HTML/JAVASCRIPT

كود آخر المشاركات
<script>
var arlina_thumbs = 73; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=6&amp;alt=json-in-script&amp;callback=arlinagrid"></script>


كود آخر التعاليق
<style scoped='' type="text/css">
#HTML4 .widget-content {max-height:300px;overflow:auto;}
ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=arlinacomments&amp;max-results=15"></script>

كود مواضيع عشوائية
<div id='twisted-random'>جاري التحميل ..</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://r-template023.blogspot.com',
    maxResults = 5,
    containerId = 'twisted-random';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
function TwistedRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=TwistedRandomPosts"></scr' + 'ipt>');
//]]>
</script>
غير ما باللون الأحمر برابط موقعك
رقم 5 عدد المواضيع التي ستظهر



بعض الإظافات الأخرى +
كود أزرار التحميل و المشاهدة

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>


كود الجدول

<table cellpadding="0" cellspacing="0" style="text-align: right;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>


كود زر إخفاء ة إظهار

<div id="flippy"><button>نص مخفي</button></div>
<div id="flippanel">
--- ضع هنا النص ---
</div>

ليست هناك تعليقات:
إترك تعليق

لدعم هذا المشروع