هي مواقع تخبر جوجل وباقي محركات البحث بكل ما هو جديد على شبكة الانترنت وترشدهم الى موقعك حتى يقوم بأرشفة كل ما هو جديد فيه وهذه المواقع مفيدة لاصحاب البلوجر والمنتديات نظرا لان تحديث المواضيع وتجديدها يحدث كل يوم تقريبا
وبعد عمل بينج للمنتدى او البلوج سوف تلاحظ زيادة عدد عناكب البحث في المتواجدون الان بمنتداك
وهذه طريقة تزيد من سرعة الارشفة وضمان حدوثها باسهل واسرع طريقة
ping my url
رجاء لا تسخدم مواقع البنج كثيرا لانة يسبب باند لموقعك
مميزات قالب Bpress
- استجابة تصميم قالب
- السيارات بلوق وظيفة تلخيص
- المحاصيل السيارات صورة مع تصغير (الصفحة الرئيسية وتسمية الصفحة فقط)
- CSS و HTML القائمة المنسدلة مع قاعدة
- تاريخ السيارات مشاهدة في رأس الجانب الأيمن
- علامات التبويب الحاجيات جاهزة (بدعم من مسج)
- صورة المتزلج (بدعم من مسج)
- بسيطة المستخدم ودية مربع البحث
- واضاف تقسيم السيارات إلى آخر تذييل
- بسيطة وسهلة وضعت رأس الجانب الأيمن ودية أيقونة الاجتماعي
- شارك الاجتماعية القطعة (وضعت مشاركة وتذييل)
- خطأ 404 مخصصة ل مع مربع البحث (الرسمية 404)
- ذات الصلة وظيفة القطعة (وضعت مشاركة وتذييل)
- إعلانات بانر جاهز
- كلمات البحث الفوقية ووصف دعم (الرسمية ميتا وصف دعم)
- حديث آخر الزوار بواسطة تسميات
- الخيار السريع تدليك (عن طريق نموذج الاتصال الرسمية)
- 4 عمود تذييل المنطقة
- وميض معرض الصور
- مسؤول "متابعة من قبل EMAIL" القطعة
يوجد ملف اندكس html بها شرح كامل لتركيب القالب بالصور والفيديو
اضافة جميلة لموقعك او مدونتك تجعل موقعك اكثر جمالا بهذة الاضافة تعطى موقعك الاناقة
معاينة
طريقة التركيب
نفتح لوحة تحكم المدونة >> نختار التخطيط >> ونضيف اداة جديدة Html /JavaScript
كود Html :
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<g id="clock-icon">
<rect id="minute-hand" transform="rotate(0 16 17)" x="15.386" y="6.464" width="1.227" height="11.439"/>
<rect id="hour-hand" transform="rotate(0 16 17)" x="15.386" y="10.291" width="1.227" height="7.626"/>
<rect id="second-hand" transform="rotate(0 16 17)" x="15.88" y="7.46" width="0.24" height="9.83"/>
<path d="M15.879,2.531c-8.14,0-14.739,6.599-14.739,14.739c0,8.14,6.599,14.739,14.739,14.739s14.739-6.6,14.739-14.739
C30.618,9.13,24.02,2.531,15.879,2.531z M15.879,30.852c-7.511,0-13.6-6.089-13.6-13.6c0-7.511,6.089-13.601,13.6-13.601 c7.511,0,13.6,6.089,13.6,13.601C29.479,24.763,23.391,30.852,15.879,30.852z"/>
<rect x="24.794" y="28.95" transform="matrix(0.7071 0.7071 -0.7071 0.7071 28.9921 -10.8671)" width="5.639" height="1.226"/>
<rect x="1.076" y="28.866" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 27.6973 47.4864)" width="5.876" height="1.227"/>
<path d="M9.946,1.291c-1.044-0.812-2.353-1.3-3.778-1.3C2.761-0.009,0,2.752,0,6.158c0,1.425,0.488,2.733,1.3,3.778
l0.524-0.524l0.002,0.002l7.859-7.859L9.684,1.553L9.946,1.291z M6.167,1.198c0.634,0,1.233,0.132,1.79,0.35L1.558,7.948
c-0.218-0.557-0.35-1.156-0.35-1.79C1.208,3.418,3.428,1.198,6.167,1.198z"/>
<path d="M30.7,9.936C31.512,8.892,32,7.583,32,6.158c0-3.406-2.762-6.167-6.168-6.167
c-1.425,0-2.733,0.488-3.777,1.3l0.524,0.524l-0.002,0.002l7.858,7.859l0.002-0.002L30.7,9.936z M30.793,6.158
c0,0.634-0.133,1.233-0.352,1.79l-6.398-6.399c0.557-0.218,1.156-0.35,1.789-0.35C28.572,1.198,30.793,3.418,30.793,6.158z"/>
<script type="text/javascript">
(function(undefined){
var setTime = function(){
var date = new Date(),
MINUTE = 60, HOUR = 60*MINUTE,
seconds = date.getSeconds(),
minutes = (date.getMinutes()*MINUTE) + seconds,
hours = (date.getHours()*HOUR)+minutes;
document.getElementById('second-hand').setAttribute('transform', 'rotate('+360*(seconds/MINUTE)+',16,17)');
document.getElementById('minute-hand').setAttribute('transform', 'rotate('+360*(minutes/HOUR)+',16,17)');
document.getElementById('hour-hand').setAttribute('transform', 'rotate('+360*(hours/(12*HOUR))+',16,17)');
}
setTime();
var interval = setInterval(setTime,1000);
})();
</script>
</g>
<filter id='color-shadow-2' data-iconmelon='filter:d8b3243222f113cd0dd357f0aaed2ee9' color-interpolation-filters="sRGB">
<feComponentTransfer in="SourceGraphic">
<feFuncR type="discrete" tableValues=".65"/>
<feFuncG type="discrete" tableValues=".65"/>
<feFuncB type="discrete" tableValues=".65"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation=".5"/>
<feOffset dx="1" dy="1" result="shadow"/>
<feComposite in="SourceGraphic" in2="shadow" operator="over"/>
</filter>
</svg>
<svg class="icon is-x3 is-delay-8s" viewBox="0 0 34 34">
<g filter="url('#color-shadow-2')">
<use xlink:href="#clock-icon"></use>
</g>
</svg>
</div>
كود Css :
نفتح لوحة تحكم المدونة >> نختار القالب >> نضيف الكود قبل </b:skin>
body{
text-align: center;
}
.icon{
width: 32px;
height: 32px;
fill: #22A62B;
animation: anima 30s ease-out infinite;
}
.icon.is-check{
fill: #FE4365;
}
.icon.is-x10{
width: 320px;
height: 320px;
}
.icon.is-x2{
width: 64px;
height: 64px;
}
.icon.is-x3{
width: 96px;
height: 96px;
}
.icon.is-x4{
width: 128px;
height: 128px;
}
.icon.is-x5{
width: 160px;
height: 160px;
}
.icon.is-x6{
width: 192px;
height: 192px;
}
@keyframes anima {
0% {fill: #22A62B;color: #22A62B;}
10% {fill: #14E3E6;color: #14E3E6;}
20%{fill: #195BEF;color: #195BEF;}
30%{fill: #DF26D9;color: #DF26D9;}
40%{fill: #DF2688;color: #DF2688;}
50%{fill: #FEA903;color: #FEA903;}
60%{fill: #DF26DE;color: #DF26DE;}
70%{fill: #2C4AED;color: #2C4AED;}
80%{fill: #14E3F7;color: #14E3F7;}
90%{fill: #195BEF;color: #195BEF;}
100% {fill: #22A62B;}
}
.icon.is-delay-1s{
animation-delay: .5s;
}
.icon.is-delay-2s{
animation-delay: 1s;
}
.icon.is-delay-3s{
animation-delay: 1.5s;
}
.icon.is-delay-4s{
animation-delay: 2s;
}
.icon.is-delay-5s{
animation-delay: 2.5s;
}
.icon.is-delay-6s{
animation-delay: 3s;
}
.icon.is-delay-7s{
animation-delay: 3.5s;
}
.icon.is-delay-8s{
animation-delay: 4s;
}
.icon.is-delay-9s{
animation-delay: 4.5s;
}
.icon.is-delay-10s{
animation-delay: 5s;
}
.svg-time-b{
margin-top: 100px;
display: inline-block;
min-width: 1360px;
}
.svg-time-b .icon + .icon{
margin-left: 16px;
}
.svg-time-b > .text-be{
font-size: 32px;
color: white;
font-family: monospace;
margin-top: 32px;
display: block;
text-decoration: none;
animation: anima 30s ease-out infinite;
animation-delay: 2.5s;
color: #22A62B;
text-shadow: 4px 4px 3px rgba(0,0,0,.25);
font-weight: bold;
}
في هذا المثال نريد أن نجعل شعار الموقع عند المرور عليها يظهر بعض الحروف لاظهار كلمة معينة او تلميح بسيط
طريقة التركيب
كود الـ Html
<h2 class="cs-text"> <span>ر</span> <span>ط</span> <span>ي</span> <span>س</span> <span>ن</span> <span>لا</span> <span>ي</span> <span></span> </h2>
كود الـ css
نضعو قبل </b:skin>
.cs-text {
font-size: 50px;
text-transform: uppercase;
margin: 80px auto 0 auto;
width: 580px;
height: 100px;
padding-left: 20px;
font-family: 'McLaren', Arial;
font-weight: 400;
position: relative;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
content: " ";
display: table;
}
.cs-text:after {
clear: both;
}
/* end clearfix hack */
.cs-text span {
cursor: default;
display: block;
float: left;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 0 0 -20px;
color: rgba(255,255,255,0.95);
text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
.cs-text span:nth-child(odd) {
background: rgba(118,176,204, 0.8) url(../images/noise.png);
}
.cs-text span:nth-child(even) {
background: rgba(58,126,162, 0.8) url(../images/noise.png);
}
.cs-text span:nth-child(1) {
transform: translate(300%) translate(-60px);
}
.cs-text span:nth-child(2) {
transform: translate(200%) translate(-40px);
}
.cs-text span:nth-child(3) {
transform: translate(100%) translate(-20px);
}
.cs-text span:nth-child(5) {
transform: translate(-100%) translate(20px);
}
.cs-text span:nth-child(6) {
transform: translate(-200%) translate(40px);
}
.cs-text span:nth-child(7) {
transform: translate(-300%) translate(60px);
}
.cs-text span:not(:last-child) {
opacity: 0;
pointer-events: none;
}
.cs-text span:last-child{
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
z-index: 100;
background: url(http://i.imgur.com/K2nojG3.png) no-repeat center center #454545;
}
.cs-text:hover span:not(:last-child){
transform: translate(0%);
opacity: 1;
}
.cs-text:hover span:last-child {
opacity: 0;
transform: scale(1.4);
}