اضافات بلوجر
الزيارات:

ahmed | 8:13 ص |
اضافة اداة البحث في المدونة بخاصية الاجاكس

لاضافة الاداة اذهب الى التخطيط-اضافة اداة واضف الكود التالي
<style>
#search-result-container h4 {
margin: 0 0 10px;
font: normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color: black;
}
.closebtn {
font-size: 18px;
}
#search-result-container li{margin:0 0 5px;padding:0;list-style:none;overflow:hidden;word-wrap:break-word;font:normal normal 10px Verdana,Geneva,sans-serif;color:#141414;background-color:white;text-transform:none}
#search-result-container li a{text-decoration:none;font-weight:bold;font-size:11px;display:block;line-height:14px;padding:0;font-weight:bold}
#search-result-container mark{background-color:yellow;color:black}
#search-result-container h4{margin:0 0 10px;font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;color:black}
#search-result-container ol{margin:0 0 10px;padding:0 0;overflow:hidden;height:450px}
#search-result-container:hover ol{overflow:auto}
#search-result-container li img{display:block;float:right;margin:0 5px 1px 0;padding:2px;border:1px solid #D1D1D1}
#search-result-loader{top:100%;position:absolute;z-index:999;width:100%;line-height:30px;color:#2E2E2E;padding:0 10px;background-color:white;border:1px solid #DBDBDB;margin:0;overflow:hidden;display:none;text-transform:capitalize}
#search-result-container p{margin:5px 0}
#search-result-container .close{position:absolute;right:8px;top:8px;font-size:12px;color:white;text-decoration:none;border-radius:9999px;width:13px;height:13px;text-indent:1px;background-color:#1295C9;line-height:12px}
.bwh-title .d-header abbr{border-bottom:0}
  #search-result-container{width:100%}
</style>
<div id="search-form-feed">
    <form action="/search" onsubmit="return updateScript();">
        <input id="feed-q-input" name="q" type="text" placeholder="ادخل كلمة للبحث" x-webkit-speech="undefined" />
<input onkeyup="resetField();" type="submit" value="بحث" />
    </form>
    <div id="search-result-container"></div>
    <div id="search-result-loader">جار البحث...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "http://ahmed-iq.blogspot.com", 
    numPost: 9999, 
    summaryPost: true, 
    summaryLength: 100, 
    resultTitle: "بحث عن",
    noResult: "لاتوجد ناتج", 
    resultThumbnail: true, 
    thumbSize: 70, 
    fallbackThumb: "http://softglad.at.ua/images/no-img.jpg"
};
//]]>
</script>
<script type="text/javascript" src="http://softglad.at.ua/widgets/blogger-search.js"></script>
<style>
#search-form-feed {
 width:100%;
 position:relative;
 margin:0 0 10px;
 padding:0 0;
 font:normal normal 11px Arial,Sans-Serif;
 color:#333;
}
#feed-q-input {
 display:block;
 width:85%;
 border:1px solid #bbb;
 background-color:white;
 padding:5px 5px;
 font:normal bold 13px Tahoma,Arial,Sans-Serif;
 color:#ccc;
 margin:0 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 float: left;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
float: right;
}
#search-form-feed input[type="submit"] {
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 5px;
    cursor: pointer;
    margin: 0;
float: left;
}
#feed-q-input:focus {
 color:#333;
 outline:none;
}
</style>




تغيير شكل تعليقات بلوجر مع ضافة خاصية الرد

تغيير شكل تعليقات بلوجر مع إضافة خاصية الرد

تغيير شكل تعليقات بلوجر مع إضافة خاصية الرد



شرح التركيب

اذهب الى لوحة التحكم>>قالب>>تحرير HTML

قم بالبحث عن هذا الكود :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
ثم قم باستبداله بالكود التالي


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
الان ابحث عن


]]></b:skin>


ثم اضف قبله الكود:

.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}.comments .comments-content .inline-thread{padding:0}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comment-replies{margin-top:1em;margin-right:40px;background:#fff}.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:normal}.comments .comments-content .user a{color:#fefefe;font-weight:normal;text-decoration:none}.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}.comments .comments-content .datetime a{color:#fefefe;font-size:12px;float:left;text-decoration:none}.comment-content{margin:0 0 8px;padding:0 5px}.comment-header{font-size:18px;background-color:rgb(248, 211, 61);border-bottom:1px solid #fec648;padding:3px}.comments .comments-content .owner-actions{position:absolute;left:0;top:0}.comments .comments-replybox{border:none;height:230px;width:100%}.comments .comment-replybox-thread{margin-top:0}.comments .comment-replybox-single{margin-top:5px;margin-right:48px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-left:4px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrWiHBnoy3MsTQdJDRO72pCvazrydYYHoLqQR_WnnnkCPiHuUOsI4DaqQ9JSx8IogpH8y5Ttr54Emx24_NRhG3N7laWih1q9IXjZwmQb7ULekx0gS7QNHap0v88XcsaLdDhHGK3Ki7C8/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}.comments .comment-block{margin-right:65px;position:relative;border:2px solid rgb(184, 184, 182);}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}


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

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


شرح التركيب


اذهب الى لوحة التحكم>>التخطيط>>اضافة اداة ثم اضاف الكود الاتي




<!--- Email Subscribe Widget --->

<style type="text/css">#sidebar-subscribe-box {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoO4lDpSQOXoi3GAV55EGr9adgHf1ABM4jjF35aQpKYmY6AYAi5Y1Lqo3LvtNW1R-C2GBtTAs2hnK8vw4p0vV5LDtkfUNuLDlltkcYJ4jynL7rUzQdnFOsnFXuqPdynWqggNVldt-3oPy/s1600/colored-strip.png) repeat scroll 0 0 transparent;

border: 1px solid #aaa;

border-radius: 3px;

padding: 3px 0;

}

.sidebar-subscribe-box-wrapper {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO0g-6gTABbeTcRPXnEUd-z7bKzldKUpKxLmLcwZEA7Ftl_BHg-E7kzVej7L9fzBSNdKlhk3An2jjN6hmIyks0i-aW7rtE3w-iimADsJJgTwCscFWGgwIgyXS4fpRLBDX_WAdSKVSgYpM/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;

color: #111;

font-size: 14px;

line-height: 20px;

padding: 1px 20px 10px;

text-align: center;

text-transform: uppercase;

}

.sidebar-subscribe-box-form {

clear: both;

display: block;

margin: 10px 0;

}

form.sidebar-subscribe-box-form {

clear: both;

display: block;

margin: 10px 0 0;

width: auto;

}

.sidebar-subscribe-box-email-field {

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsTdNpl1RXeV8R72Deb-9msIpeRq3BCyQ9Ic6tYQW293GZsLuyvgLBpR-qHSjaDun_lG0ZqT8nhMro1MLHrGMHnInj242Vgo3QV4Lg9lNCRR9AAydjvZCelk3BPGAblXMqcuzlF5YD8Obo/s1600/sprites.png) no-repeat 0 -27px;

border: 1px solid #ccc;

border-radius: 4px;

color: #444;

margin: 0 0 15px;

padding: 10px 40px;

width: 68%;

}

.sidebar-subscribe-box-email-button {

background: #09f;

border: 1px solid #007fff;

box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;

color: #fff;

cursor: pointer;

font-family: Helvetica;

font-weight: 700;

font-size: 20px;

padding: 5px;

text-shadow: 1px 1px 0 rgba(0,0,0,.4);

text-transform: uppercase;

width: 100%;

}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {

background: #1ca4ff;

}

.sidebar-subscribe-box-email-button:active {

-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;

outline: 0;

}

iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {

width: 100%;

}

embed {

border-radius: 3px;

-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);

-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);

background: #FFF;

border: 1px solid #ddd;

box-shadow: 0 2px 4px rgba(0,0,0,0.2);

margin: 0;

padding: 4px 4px 4px;

}

#footer-section {

background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWtfMOdrvowb8J_uU1RHBR8oFhW3uBFD8evBDbQtijxEhxu4YiEjX9ZccsJ-LSn77pVr_fSELVMA9oJxxMhOuyupSst4hFRZJuXAla2J3OngsoHa5PSCYpJ5awD_E-CaIeazryiDfUV2O/s0/bg-pattern.png) repeat top left;

border-top: 1px solid #aaa;

box-shadow: inset 0 4px 6px -3px #aaa;

font-size: 14px;

height: 100px;

margin: 10px -30px 5px;

padding: 0 30px;

text-align: center;

width: 100%;

}</style>

<div id="sidebar-subscribe-box">

<div class="sidebar-subscribe-box-wrapper">

<div class="sidebar-subscribe-box-form">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=ps-tek" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ps-tek',

'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="uri" type="hidden" value="ps-tek" /><input name="loc" type="hidden" value="en_US" />

<input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="أدخل بريدك الإلكتروني..." />

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form>

</div>

المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div>

</div>

<!--- Email Subscribe Widget --->


اضافة فهرس المدونة لمدونات بلوجر 

اضافة فهرس المدونة لمدونات بلوجر
اضافة فهرس المدونة لمدونات بلوجر

تحميل الكود

شرح التركيب
اذهب الى لوحة التحكم >> الصفحات
اضغط على صفحة جديدة واختر صفحة فارغة



اضافة فهرس المدونة لمدونات بلوجر


الان قم بالتحويل الى HTML والصق الكود التالي

<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="-webkit-box-shadow: #EE9A23 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; background-attachment: initial; background-clip: initial; background-color: #ee9a23; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: #ffffff; border-image: initial; border-style: dashed; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px; box-shadow: #EE9A23 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; color: white; font-size: 21px; line-height: 1.3em; margin: 10px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: center; text-shadow: #EE9A23 -1px -1px;">
<span style="font-size: large;">فهرس المدونة</span> </div>
<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<br />
<div dir="rtl" style="text-align: right;" trbidi="on">
<link href="https://sites.google.com/site/3hmedh/ps-tek.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="https://sites.google.com/site/3hmedh/js1.js"></script>
<script src="http://www.ps-tek.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script> <script src="https://sites.google.com/site/3hmedh/js2.js?attredirects=0&amp;d=1" type="text/javascript"></script></div>
</div>
</div>
</div>
</div>
اضافة فهرس المدونة لمدونات بلوجر
قم باستبدال اللون الاحمر برابط مدونتك


كود رمضان كريم لمدونات بلوجر


| تحميل الكود

اذهب الى التخطيط -اضافة اداة -اداة HTML

ثم ضيف الكود
-->