السلام عليكم أعزائي ومتابعي مدونة بلوغر بالعربي وفي الدرس الخاص بقسم بقوالب بلوجر واليوم أنشالله سوف نضع بين يديك قالب بلوجر أحترافي سوف ينأل أعجابك حتما,اليوم انشاءلله معانا قالب G Vusion النسخة الثانية من القالب الأحترافي مع كافة الألوان والأدوات والأضافات لهذه القالب الأحترافي.ويعد هذه القالب من القوالب المعربة بواسطة بلوغر بالعربي وهو قالب بسيط وجميل مع الألوان الزاهية الذي يتميز به وتستطيع معاينة وتحميل القالب من خلال الجهة اليسرى للموقع(السيدار).
طريقة التعديل على القالب
أولأ:القائمة العلوية
لتخصيص القائمة العلوية الخاصة القالب قم بالبحث عن الكود التألي وأستبدل ماتريد من الروابط والأقسام
<div class='navigation' id='navigation'>
ثانيأ:لتخصيص القائمة الرئيسية الخاصة بالقالب قم بالبحث عن الكود التألي وأستبدل ماتريد من الروابط والأقسام
<input type='checkbox'/>ثالثا:تخصيص عدد المواضيع
قم بالبحث عن الكود التالي وقم بأستبدال الرقم 5 بالرقم الذي تريده لغرض أستبدالة بعدد المقالات المعروضة
var pageNaviConfرابعأ:تخصيص صفحة أتصل بنأ او رأسلنا
من لوحة التحكم في بلوجر قم بأختيار الصفحات وقم بعمل صفحة جديدة وقم بلصق الكود التألي في خانة HTML
<div class="post-body entry-content" id="post-body-3549447732535134720">
<form name="contact-form"><span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> الأسم </span><br>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""> <br>
<br>
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> عنوان البريد الإلكتروني <span style="color:#f56954;font-weight:bold;font-size:x-small;">مهم</span></span><br>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""> <br>
<br>
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> الرسالة <span style="color:#f56954;font-weight:bold;font-size:x-small;">مهم</span></span><br>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br>
<input id="ContactForm1_contact-form-submit" type="button" value="أرسال"> <br>
<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>
<div class="clear"></div>
</div>
خامسأ: تخصيص الفهرس الخاصة بالموقعمن لوحة التحكم في بلوجر قم بأختيار الصفحات وقم بعمل صفحة جديدة وقم بلصق الكود التألي في خانة HTML
<div id="bp_toc">
من فظلك أنتظر لحظة....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Roboto';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>
سادسأ: تخصيص أيقونات التواصل الأجتماعيقم بالبحث عن الكود التألي في محرر وقم بوضع روأبطك الأجتماعية الخاصة
<div class='gvusion-socials-icons mom-socials-widget'>سأبعا:تخصيص اداة المشاركات الشائعة بواسطة التسمية
من لوحة تحكم بلوجر أختر التخطيط وقم بنسخ الكود التألي مع أستبدال كلمة "قسم" بأسم القسم الخاص بك(التسمية)
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 40;</script> <script type="text/javascript" src="/feeds/posts/default/-/قسم?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <a class='labelmore' href='/search/label/قسم/max-results=5' title='Show All'>More »</a>ثامنأ: تخصيص التعليقات
أنسخ الكود التألي وضعة في المكان الذي تريدة في التخطيط
<style scoped='' type="text/css">
#HTML85 .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")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLv29vXJNa8ulddcn2PVXwSaF8A6jozkDROw30VxB-aioAouI7UpioiCDs_AKPaAHoGDMU9ecTlyt22Dwo4k_2VrpYQECa9TiDFlGLMnLMD__aWjX9EZRwnrq2hgm3BdVxUhKbYZ9uWzCb/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lBn8UDTSH_6T5a29lNdCq9gXJm4rCiRdCWBKU95pj99fdUgXOMJVBErN5SyFEYPCXVXoPUYVp4gcmtZFqVvhXp5N4pEeiJ3mUyjeBtyJV3MPlgcQ8-TTdSjB3edMW6btwh9WPr4EsJZv/"+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+="…",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||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QX4hR0wrhK03FHrejEOR1C6irMmFrebQ8QPrGSGPVyAYttGMat6Io09WsFdhhg-lut_z89XzwGaodELi9RGA81TsfyKtpUq39HT54IiRq-sEXv8MyBKL8JiHYtjsXQ5CY6s6sayrx4Md/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More »",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&callback=arlinacomments&max-results=15"></script>
*ملاحظة مهمة:لاتقم بأستبدال حقوق التعريب والأسوف تحصل مشاكل في القالب.
0 تعليق
إرسال تعليق