نقدم لكم إضافة حصرية وهي تغيير شكل مشاركة مميزة إلى شكل أكثر احترافية, هذه الإضافة حصرية فقط لدى مدونة
توجه إلى لوحة التحكم في المدونة.
تأكد من تفعيل إضافة مشاركة مميز من التخطيط.
<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
قم باغلاقة عن طريق الضغط على المساحة الفارغة قبل رقم السطر في اليسار تم حدد علية الى ان تصل </b:widget> واستبدلة بكود التالي
الكود هنا
<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
<b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
<b:include name='quickedit'/>
</b:includable>
<b:includable id='content'>
<div class='item-list'>
<div class='item item-1'>
<div class='img'><a href='javascript:;'>
<div class='like'><i aria-hidden='true' class='fa fa-heart'/></div></a>
<a expr:href='data:postUrl'>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<div class="img-content" style="background-image: url(<data:postFirstImage/>);"></div>
</b:if>
</a>
</div>
<div class='social'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:postUrl' target='_blank'>
<div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div></a>
<a expr:href='"whatsapp://send?text=" + data:postUrl' target='_blank'><div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div></a>
<a expr:href='"http://twitter.com/share?url=" + data:postUrl' target='_blank'><div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div></a></div>
<div class='text-container'>
<div class='title'><b:if cond='data:showPostTitle and data:postTitle != ""'>
<a expr:href='data:postUrl'><data:postTitle/></a>
</b:if></div>
<div class='content'>
<p><data:postSummary/></p>
</div>
<div class='readmore'>
<h4><a expr:href='data:postUrl'>أقراء المزيد</a></h4>
</div>
</div>
</div>
</div>
<style type='text/css'>
.item {
width: 100%;
background: #fff;
position: relative;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
border-bottom: 3px solid #c9c9c9;
}
.item .img {
width: 100%;
height: 195px;
background: black;
border-radius: 10px 10px 0 0;
z-index: 5;
overflow: hidden;
display: block;
}
.item .img-content {
width: 100%;
height: 100%;
transition: 0 !important;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg/640px-26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.item.showfull .text-container {
height: 90%;
}
.item.showfull .content {
height: 78%;
}
.item.showfull .social {
top: 25px;
}
.item.showfull .img-content {
transform: scale(1.04);
filter: blur(5px);
}
.item.showfull .like {
margin-top: 100px;
}
.item .text-container {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
box-shadow: -3px -6px 8px rgba(0, 0, 0, 0.3);
display: block;
margin: -20px 0 0 0;
text-align: center;
overflow: auto;
}
.item .content {
overflow: hidden;
}
.item .social {
width: 100%;
height: 33px;
direction: ltr;
position: absolute;
z-index: 15;
top: 39.5%;
display: flex;
justify-content: flex-end;
}
.item h2 {
margin-bottom: 0;
margin-top: 10px;
display: block;
}
.item .social div {
width: 30px;
height: 30px;
background: green;
margin: 0 2px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.item .social div:hover {
transform: scale(1.1);
}
.item .social a:last-child {
margin-right: 10px;
}
.item a .tw {
background-color: #0084b4;
}
.item a .fb {
background-color: #3b5998;
}
.item a .ig {
background-color: #0eba31;
}
.item .like {
position: absolute;
width: 20px;
height: 20px;
background: #e82323;
border-radius: 50%;
color: #fff;
right: 8px;
top: 8px;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.item .like:hover {
transform: scale(1.1);
}
.item .like i {
font-size: 10px;
}
.item .like.clicked {
background: #ffcece;
}
.item .like.clicked i {
color: #e60026;
}
.item .readmore {
display: block;
padding-bottom: 5px;
}
.item .readmore h3 {
display: block;
width: 70px;
text-align: center;
padding: 10px 15px;
border-radius: 40px;
border: 1px solid;
cursor: pointer;
font-size: 10px;
margin: 0 auto 5px;
}
.item .readmore h3:hover{
background: #bababa;
color: #fff;
}
.item .readmore h3:hover a{
color: #fff;
}
.text-container .title{
margin: 11px 9px 0px;
font-size: 17px;
padding: 0 0 3px 0;
border-bottom: 1px solid #e82323;
}
.text-container .content{padding: 0 9px 8px;}
</style>
<script>
//<![CDATA[
$(".item a .ig").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>
</b:includable>
</b:widget>
COMMENTS