مدونة حمزة للبلوجر | hamza blogger: إضافات

‏إظهار الرسائل ذات التسميات إضافات. إظهار كافة الرسائل

السلام عليكم ورحمة الله وتعالى وبركاته في أول موضوع لمدونة إفهم ويب سنتناول وفيه طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي من تصميم عرب ويب طريقة التركيب كا الأتي
أولا نقوم بتحرير القالب
ونبحث عن هذا الوسم ]]></b:skin> بستعمال F+Ctrl
ثم نضع هدا الكود فوقه
align:right;display:table;}
.pro-me-right{float:right;width:200px;margin:5px 5px 30px 5px;position:relative;border-left:1px dashed #DDD;}
.pro-me-left{width:98%;text-shadow:1px 1px #fff;font-family: Electrolize,ge_ss_threeregular;font-size:100%;color:#666;padding:10px;}.pro-me-left h6 a{font-family: 'Great Vibes';font-size: 35px;margin:20px auto;text-decoration:none;}
.hero-image-parent{position:relative;height:160px;width:160px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:1px dashed #DDD;}
.pos{position:absolute;display:block;height:33px;width:33px;border:1px solid #DDD;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;z-index:100;opacity:0;}
.hero-image-holder{width:130px;height:130px;position:relative;margin:0 auto;margin-right: 12px;}
.hero-image.hero_animate{width:130px;height:130px;margin:-52px 0 0 -64px;border-radius:50%;}
.hero-image{position: absolute;top: 45%;left: 46%;overflow: hidden;background-position: center center;background-repeat: no-repeat;box-shadow: inset 5px 0 0 4px rgba(242, 242, 242, 1), 0 1px 2px rgba(150, 150, 150, 0.73);transition: all 0.2s ease-out;border: 4px solid #fff;}
.pos_1{top:60px;left:-26px;}.pos_2{top:125px;left:0px;}.pos_3{top:150px;right:65px;}.pos_4{top:129px;right:3px;}.pos span{display:none;top:0;}a.pos i{color:#34AACD;font-size:22px;}a.pos.pos_1 i{position:relative;top:5px;right:5px;}a.pos.pos_2 i{position:relative;top:5px;right:7px;}a.pos.pos_3 i{position:relative;top:6px;right:11px;}a.pos.pos_4 i{position:relative;top:7px;right:4px;}
a.pos.pos_1 i,a.pos.pos_2 i,a.pos.pos_3 i,a.pos.pos_4 i{color:#fff;}.pos_2{background:#F03D3D;}.pos_1{background:#2AA9E0;}.pos_3{background:#3B5998;}.pos_4{background:#E42D2D;}
.fa-star:before {content: "\f005";}
.pos_4:hover {background: #CF2C2C;}.pos_3:hover {background: #4669B3;}.

وبعدها نبحث عن هدا الوسم <data:post.body/> ونضع تحته هذا الكود

<a class='pos pos_2' href='https://www.youtube.com/' style='opacity: 1;'><i class='fa fa-youtube'/></a>
<a class='pos pos_4' href='https://plus.google.com/' style='opacity: 1;'><i class='fa fa-google-plus'/></a>
<div class='hero-image-holder'>
<img alt='Hm' class='hero-image hero_animate' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LQvFeIitwEP180t84948nYAQhyphenhyphenGFRBe-xRRxnMKgHz5JgC01f36NxOMFa2-fRyVvTDG9Q4OO4ZMmWSt7vaG3gs29IFyfXj8gY6Wyd18ROVnCfQNdUqyJsRfxU1ztYeZZihOu2S6Dxo4/s1600/iHussam.png'/>
</div>
</div>
</div>
<div class='pro-me-left'>
<h6><a class='g-profile' data-gapiattached='true' data-gapiscan='true' data-onload='true' href='https://plus.google.com/+iHussam' rel='author' title='Hm'>
<span>iHussam</span>
</a>
</h6>
<p><span style='font-style: normal; font-weight: normal;'>حسام بها</span> : من <span style='font-style: normal;color:#EC2424;'>المملكة المغربية</span>, <span style='font-style: normal;color:#333333;'>اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته </span>,<span style='font-style: normal;color:#333333;'>لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة عرب ويب تعبر عما أهواه . </span><br/>
<i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star-half-o'/><i class='fa fa-star-half-o'/>
</p></div>
</div>

ونغير ما يجب تغييره

إقرأ المزيد »

السلام عليكم ، شرح اضافة مواضيع ذات صلة الى مدونات البلوجر بالشكل جديد و احترافي متناسب مرفوق بالصورة و أيضا العنوان . موضوعنا اليوم هو شرح طريقة اضافة مواضيع مهمة أو مواضيع ذات صلة الى البلوجر مقدمة من طرف شامل ويب ، بحيث تكمن أهمية هذه الاضافة في زيادة نسبة - مدة بقاء الزائر في المدونة و تصفح مواضيع التي لها نفس العلاقة بالموضوع الأول ، حيث تظهر أسفل الموضوع المطلوب و بالتالي زيادة مدة بقاء الزائر في المدونة و تصفحه أكبر عدد ممكن من المواضيع ذات صلة .

هذه الإضافة متوفرة على مدونتنا حكمات للمعلوميات و يمكنك معاينتها بالنزول أسفل الصفحة .

شرح اضافة الى البلوجر

1. نتوجه الى مدونة ، قالب ، تحرير HTML

2. نبحث عن الكود

</head>

3. نضيف الكود الثالي فوقه

<script type='text/javascript'>
      //<![CDATA[
      var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQDYTpOPFPQm33UypS5FgZp4DcmVb8YHcjNPtEcf5zDBolGH5p0u-sNVWdkNnGEfsXilad76HH-BxI_MuJlsVtpW3xrNRFzW7Ecmaee6MRohyphenhyphenewxDXqCFfSrjyQfmqZzsqqEvV8xHMyw/s1600/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 7px 0px 0;float:right;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div style="width:172px;padding:9px 14px 20px;color:#fff;height:25px;text-align:right;margin:-61px 0px 0px 0px; font: normal 13px ge_dinar; line-height:20px;background: #111;opacity: 0.7;filter: alpha(opacity = 70);">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
      //]]>
    </script>
<style>
/*--------------Related-Posts-------------*/
/*----http://hukmat.blogspot.com----*/
      #related-posts h2 > span{
        border-bottom: 2px solid $(maincolor);
        bottom: -2px;
        padding: 4px 10px;
      }
      #related-posts{
        float:right;
        width:660px;
        margin-bottom:40px;
        font: 12px ge_dinar;
        background: #fff;
      }
      #related-posts h2{
        border-bottom: 2px solid #eee;
        padding: 4px 0;
        text-transform: uppercase;
        font: normal bold 12px ge_dinar, Oswald;
        text-align: right;
        color: #474747;
        margin-bottom: 5px;
      }
      #related-posts .related_img {
        padding:0px;
        width:200px;
        height:160px;
      }
      #related-posts .related_img:hover{
        opacity:.7;
        filter:alpha(opacity=70);
        -moz-opacity:.7;
        -khtml-opacity:.7;
      }
</style>

4. نبحث مرة أخرى عن

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>

اذا لم تجده فبحث عن

<data:post.body/>

5. و نضيف الكود التالي أسفل منه تحته

<div id='related-posts'>
                            <p class='title title-medium'>
                              <h2>
                                <span>
                                  مواضيع مهمة أيضا :
                                </span>
                            </h2>
                          </p>
                          <b:loop values='data:post.labels' var='label'>
                            <b:if cond='data:label.isLast != "true"'>
                            </b:if>
                            <b:if cond='data:blog.pageType == "item"'>
                              <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/>
                            </b:if>
                          </b:loop>
                          <script type='text/javascript'>
                            var currentposturl="<data:post.url/>";
                            var maxresults=3;
                            var relatedpoststitle="<b/>";
                            removeRelatedDuplicates_thumbs();
                            printRelatedLabels_thumbs();
                          </script>
                        </div>
                        <div class='clear'/>

6. نضغط حفظ .

المصدر

إقرأ المزيد »

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

توجه إلى تخطيط إضافة أدات HTML/JAVASCIOT

وأضف هدا الكود

القائمة البريدية

</div>

<p>سجل الان وتوصل بجديد مدونتنا</p>

</form>

</div>

#it9an-emailsubsocial {

width: 300px;

height: 330px;

border: 1px solid #ddd;

border-radius: 5px 5px 0px 0px;

}

#it9an-emailsubsocial .heading {

padding: 15px 25px;

line-height: 35px;

font-size: 26px;

color: rgb(170, 170, 170);

text-align: center;

text-shadow: 0px 1px rgba(255, 255, 255, 0.75);

background: none repeat scroll 0% 0% rgb(247, 247, 247);

}

#it9an-emailsubsocial p {

font-size: 13px;

color: rgb(170, 170, 170);

line-height: 25px;

padding: 10px 20px 0 20px;

margin: 0;

}

#it9an-emailsubsocial .emailsub {

padding: 0px 20px 10px 20px;

}

#it9an-emailsubsocial .emailsub input {

color: rgb(170, 170, 170);

padding: 10px;

margin-top: 10px;

font-size: 15px;

width: 92%;

border: 1px solid #ccc;

border-bottom: 2px solid #ccc;

border-radius: 5px;

transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

}

#it9an-emailsubsocial .emailsub input:focus {

border-color:#F4836A;

outline: none;

box-shadow: 0 0 2px 1px #F4836A;

}

#it9an-emailsubsocial .emailsub .button {

background: #F4836A;

color: white!important;

border:none;

outline: none;

border-bottom: 3px solid #B3614E;

transition:background .4s linear;

width: 90%;

margin-right: 5%;

margin-left: 5%;

cursor:pointer;

}

#it9an-emailsubsocial .emailsub .button:hover{

background: #DD7761;

}

</style>

لا تنسى تغيير لون لاحمر hamzaelbakali

وأتمنى أن يعجبكم موضوعي وإلى القاء ولدعمتا علقواا

إقرأ المزيد »

تم إفتتاح هذه المدونة بهدف مدكم بجديد الويب و حصرياته و من أجل مساعدتكم في حل مشاكلكم طبعا عن طريق الويب

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

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

ولمتابعة جديدنا نطلب منكم كا لاتي

أنضمام لاعضاء مدونة شامل ويب

من هنا

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

الفيسبوك https://www.facebook.com/hamza.wins.127

اليوتوب https://www.youtube.com/channel/UCEKpGc71ChhQrlsuyY7_G5A

جوجل https://plus.google.com/stream/circles/p7f738cfb0dba8bee

إقرأ المزيد »

طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي 2016

إضافة مواضيع دات صلة بشكل مميز و إحترافي لمدونات يلوجر 2015

إضافة قائمة بريدية إحترافية لمدونات بلوغر 2015

أفتتاح مدونة شامل ويب

إتصل بنا

إعلان

إشترك في قناتنا

تابعنا علي الفيسبوك

المشاركات الشائعة

المتابعون

نسبة أرشفة المدونة

تابعنا على تويتر

التسميات