إضافة جديد من إضافات مدون anis tetche وهى إضافة احترافية مثل التى يتم استخدامها فى المدون وتم عمل موضوع على المدونة لهذه الإضافة بعدما قام احد متابعى المدونه بطلبها وها أنا ذاك اولبى طلبه واقوم بتوفيرها له ولكل متابعى المدونه يمكنكم الحصول عليها وهذه الإضافة تجمع بين وصف قصير للمدونه وازار مواقع التوصل للمشارك عليها والإضافه لاتحتاج معاينة لانها تسخدم على المدون ويمكنك مشاهدتها وأنت تقرا هذا الموضوع الأن .
تركيب الإضافة
اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة .
div#entry-post-content {
overflow: hidden;background: #2a4057;
margin: -5px auto;
position: relative;
height: 300px;
border: 5px solid #fff;
width: 99%;
box-shadow: 0 0 0 1px #cccccc;
margin-bottom: 10px;
margin-top: 10px;
}
div#entry-post-content > img {
width: 100%;
height: 100%;
opacity: 0.2;
}
.post-meta-entry {
position: absolute;
top: 0;
text-align: center;
margin: 0 auto;
padding-top: 40px;
bottom: 0;
right: 0;
left: 0;
}
.post-meta-entry > span {
display: block;
color: #fff;
margin-bottom: 4px;
}
img.katib-src {
border: 0;
border-radius: 50%;
width: 50px;
padding: 5px; margin-bottom: 10px;
}
h3.post-title.entry-title54:before {
content: "\f011a5";
display: none;
}
span.post-author-th3 {
color: #FFFFFF;
font-size: 20px;
}
.fa-facebook-f:before, .fa-facebook:before {
content: "\f09a";
margin-right: 2px;
}
.ardfst2 {
margin-top: 15px;
margin-bottom: 15px;
}
span.shadfdfrek {
color: #FFFFFF;
font-size: 15px;
}
.gbdgardfst2 {
margin-right: 463px;
}
.facebook-share:hover {
transition: all .2s ease-in-out;
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.twitter-share:hover {
transition: all .2s ease-in-out;
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.google-share:hover {
transition: all .2s ease-in-out;
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
h1.post-title.entry-title {
color: #FFFFFF;
background-color: #456B8E;
}
i.fa.fa-twitter {
color: #fff;
display: block;
font-size: 22px;
height: 40px;
line-height: 40px;
text-align: center;
width: 44px;
margin-left: 11px;
}
i.fa.fa-google-plus {
color: #fff;
display: block;
font-size: 22px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
margin-top: -40px;
margin-right: 44px;
}
i.fa.fa-facebook {
color: #fff;
display: block;
font-size: 22px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
margin-right: -45px;
}
h3.post-title.entry-title54 {
margin-top: 20px; margin-bottom: 25px;
}
2- الكود الخاص بالإضافة هذا الكود يتم وضعه فى المكان الذى تراه مناسب ومن الممكن ان يضف أسفل الوسم </header> فى قالب مدونتك .
<b:if cond='data:blog.pageType == "item"'>
<div id='enter-posts'><div id='entry-post-content'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3-jtAsduLrsB2ircel-InFFah1JbLrb5o7yddSOoX8D9lzGEkNjM2D9oK3sJyniayDLDw_q7rvSm5qvBg1N-PzYyMKDrHaQUR9jEF0IAPKeSTXHOxAXvLfZRk12T1RUP5VtmTIPd3Xs/s1600/home.jpg'/>
<div class='post-meta-entry'>
<div class='po454d'>
<div class='po4jh54d'>
<img class='katib-src' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfsqo6wxJsyRwS7MveGa9YkzpMfoY-fjOrsUOD0YIFaTchdEwvS7pi0VkCckpZH0MzteJxpoVWMFVguZreWy5qFqCOrCIXxOK3nM-NSAdh9puG01VQQoJdQFcNdNIdbiTHRhxHcLRtHoU/s1600/10401879_463780717160047_3223573746725786489_n.png'/>
</div>
<span class='post-author-th3'>
<i class='fa fa-user'/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='http://wdbloog.blogspot.com/' itemprop='url'/>
<a class='g-profile' data-gapiattached='true' data-gapiscan='true' data-onload='true' href='http://wdbloog.blogspot.com/' rel='author' style='color: #FFFFFF;font-family: Electrolize,hacen_saudi_arabiaregular;' title='عالم المدون'>
عالم المدون
</a>
</span>
</span>
</div>
<h3 class='post-title entry-title54' style='color: #FFFFFF;'>طريقك لإحتراف التدوين لدينا كل ما يحتاجه المدونون معنا ستصبح مدون محترف</h3>
<div class='goo-twi-fac-art2'>
<div class='ardfst2'>
<span class='shadfdfrek'>شارك هذه التدوينة على</span>
</div>
<div class='gbdgardfst2'>
<ul>
<div class='facebook-share'>
<a class='fac-art2' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-facebook' style='margin-bottom: -40px;background-color: #3B5998;border-radius: 50%;'/></a>
</div>
<div class='twitter-share'>
<a class='twi-art2' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter' style='border-radius: 50%; background-color: #00ACED;width: 39px;'/></a>
</div>
<div class='google-share'>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, right=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus' style=' border-radius: 50%;background-color: #D14836;'/></a>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</b:if>
يمكنك تعديل على وصف المدونه بما تريد وكذلك اسم المدون والصورة .
والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)