صندوق التنبيهات أو للإعلان

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

مواقع التواصل الاجتماعى مع تأثير التلميحات الاحترافى

أضف تعليق6:07 م, مرسلة بواسطة Hady store
اليوم وبعد طول غياب عن التدوين فى مجال البلوجر فى مدونة مدون 
أقدم لكم موضوع جديد فى قسم اضافات البلوجر الحصرية كما عودتكم من مدونة مدون 
وهى اضافة مواقع التواصل الاجتماعى مع تأثير التلميحات الاحترافى 
ولأن اضافة مواقع التواصل الاجتماعية تبدو تقليدية فى معظم المدونات العربية على الخصوص 
فلذلك ستكون هذه الاضافة هى الأفضل لمواقع التواصل الاجتماعى ان شاء الله 
مميزات الاضافة
(1) سريعة وخفيفة جدا وستعجبك 
(2) تأثير تلميحات جميل واحترفى 
(3) مواقع التواصل الاجتماعى الأشهر 
( الفيس بوك ، تويتر ، جوجل ، الخلاصة ) 
(4) تحتوى على اضافة للاتصال يمكنها ربطها 
بصفحة اتصل بنا فى مدونتك 


طريقة التركيب 
اذهب للتخطيط >> اضافة أداة >> Html/Javascript 
ضع بها الكود التالى 
 <style type="text/css" >
#followq {
clear: both;width: 300px;
font-family: 'Droid Arabic Kufi';
height: 40px;margin-top:200px 0px 11px 10px;}
#followq ul { margin-top:50px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font-size:12px;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left:42%;}
.ikonz:hover .ikonz-tooltip {visibility:visible;width: 76px;opacity:1;margin:16px 12px 6px -28px;
z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcVkdJtk0WUy7KgAjO6nKBPqGG_ArghoN-GsmJEg28HlcNMTxwybRscVo9Lz5X0nJU4-fgRjzh8lfWyNdqITaXtPhWgPjO5MuJC1sjtWnV0IlHhZs7d45uY28OImgcp-yktqgbaNxECs/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height:20px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
   
</style><div id="followq">
<ul>
<li><a href=" رابط الفيس بوك " class="ikonz fb"><span class="ikonz-tooltip"> فيس بوك </span></a></li>
  
<li><a href=" رابط تويتر " class="ikonz twitter"><span class="ikonz-tooltip"> تويتر</span></a></li>
  
<li><a href=" رابط جوجل " class="ikonz google"><span class="ikonz-tooltip"> جوجل </span></a></li>
  
<li><a href="رابط صفحة التواصل" class="ikonz mail"><span class="ikonz-tooltip"> البريد</span></a></li>
  
<li><a href=" رابط الخلاصات " class="ikonz rss"><span class="ikonz-tooltip"> الخلاصة </span></a></li>
</ul>
</div>
غير الكلمات المحددة بالروابط المناسبة 

√ دمتم فى رعاية الله متتبعى مدونة مدون الكرام √
إقرأ المزيد... Résumé3efrit blogger

4 أشكال مختلفة للمشاركات الشائعة بشكل إحترافى

تعليقان8:20 م, مرسلة بواسطة Hady store
إضافة المشاركات الشائعة بـ 4 أشكال مختلفة إحترافية ونحن نعلم تماما أن المشاركة الشائعة فى مدونتك شئ ضرورى لانه يظهر التدوينات الأكثر شعبه فى مدونتك مما يتيح للزائر معرفتها وزيارتها بسهولة والآن مدونة مدون توفرها لك [اشكال مختلفة تناسب جميع المدونات والأزواق والآن مع شرح تركيب الإضافة.
  1. إختر تخطيط وإضافة "المشاركات الشائعة" من قائمة الأدوات التى ستظهر لك 
  2. إعدادات الأداة ستظهر العناوين فقط الإعدادات ستكون مثل الصورة التالية 
3. بعد تكوين القطعة كما بالصورة أعلاه الآن إحفظ الأداة 
الآن عليك إختيار الشكل الذى سيظهر به ومثل ما ذكرت 4 أشكال إختر واحدة منهم 
ملحوظة || عليك البحث عن هذا الكود فى قالبك ]]></b:skin> وضع الكود قبلة مباشرة والآن إختر كود واحد من الأكواد التالية لكى تضعه وإحفظ قالبك .
الشكل الأول
        #PopularPosts1 h2{

        padding:7px 0 3px 0;

        width:100%;

        margin-bottom:10px;

        font-size:1.3em;

        text-indent:-12px;

        font-size:18px;

        text-align:center;

        color: #757575; /* Color of the widget's title */

        }

        #PopularPosts1 ul{

        list-style:none;

        counter-reset:li;

        padding:8px 0px 1px;

        left:-7px;

        width:290px;

        }

        #PopularPosts1 li{

        position:relative;

        margin:0 0 10px 0;

        padding: 3px 2px 0 17px;

        left:-5px;

        width:285px;

        }

        #PopularPosts1 ul li{

        background: #eee;

        position: relative;

        display: block;

        padding: .4em .2em .4em 2em;

        *padding: .2em;

        margin: .5em 0;

        background: #ddd;

        text-decoration: none;

        border-radius: .3em;

        transition: all .3s ease-out; 

        }

        #PopularPosts1 ul li:before{

        content: counter(li);

        counter-increment: li;

        position: absolute;

        top: 50%;

        margin: -1.3em;

        height: 2em;

        width: 2em;

        line-height: 2em;

        font-size: 15px;

        color: #fff; /* text color of numbers */

        background: #FB8835; /* background color of numbers */

        border: .2em solid #fff; /* border color */

        -webkit-box-shadow: 0 8px 5px -7px #888;

        -moz-box-shadow: 0 8px 5px -7px #888;

        box-shadow: 0 8px 5px -7px #888;

        text-align: center;

        font-weight: bold;

        border-radius: 2em;

        position: absolute; 

        left: 0;

        transition: all .3s ease-out;

        }

        #PopularPosts1 ul li:hover{

        background: #eee;

        }

        #PopularPosts1 ul li:hover:before{

        transform: rotate(360deg); 
        }
        #PopularPosts1 ul li a{

        font: 14px Georgia, serif; /* font size of post titles */

        text-shadow: 0 -1px 2px #fff;

        color: #444;

        display:block;

        min-height:25px;

        text-decoration:none;

        text-transform: uppercase;
        }
        #PopularPosts1 ul li a:hover{

        color: #444;
        }
 الشكل الثانى
        #PopularPosts1 h2{
        position:relative;

        padding:8px 10px 6px 10px;

        width:100%;

        margin-bottom: 5px;

        font-size:17px;

        color:#757575; /* Color of the widget's title */

        text-align:left;

        }

        #PopularPosts1 ul{

        list-style:none;

        counter-reset:li;

        padding:10px;

        left:-8px;

        width:100%;

        }

        #PopularPosts1 li{ /* Styles of each element */

        width:100%;

        position:relative;

        left:0;

        margin:0 0 1px 12px;

        padding:4px 5px;

        }

        #PopularPosts1 ul li:before{

        content: counter(li);

        counter-increment: li;

        position: absolute;

        left: -30px;

        top: 50%;

        margin-top: -13px;

        background: #8E8E8E; /* background color of the numbers */

        height: 1.9em;

        width: 2em;

        line-height: 2em;

        text-align: center;

        font-weight: bold;

        color: #fff;

        font-size: 14px;

        }

        #PopularPosts1 ul li:after{

        position: absolute;

        content: '';

        left: -2px;

        margin-top: -.7em;

        top: 50%;

        width: 0;

        height: 0;

        border-top: 8px solid transparent;

        border-bottom: 8px solid transparent;

        border-left:10px solid #8E8E8E; /* background color of the right arrow*/

        }

        #PopularPosts1 ul li a{

        color: #444;

        text-decoration: none; 

        font-size:15px;

        }

        #PopularPosts1 ul li {

        position: relative;

        display: block;

        padding: .4em .4em .4em .8em;

        *padding: .4em;

        margin: .5em 0 .5em 0.4em;

        background: #ddd;

        transition: all .3s ease-out;

        text-decoration:none;

        transition: all .1s ease-in-out;
        }
        #PopularPosts1 ul li:hover{

        background: #eee; /* Background color on mouseover */
        } 
        #PopularPosts1 ul li a:hover{

        color:#444; /* Link color on mouseover */

        margin-left:3px;
        }
الشكل الثالث
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}
#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}
الشكل الرابع
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}
السلام عليكم ورحمة الله وبركاتة | أى إستفسار أترك تعليقك 
إقرأ المزيد... Résumé3efrit blogger

ترقيم صفحات مدونة مدون الحالى

6 تعليق12:18 م, مرسلة بواسطة Hady store

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

                                          شرح التركيــــــب                                 
اذهب للوحة التحكم >> القالب >> تحرير HTM: 

ابحث عن 
<b:includable id='mobile-index-post' var='post'>
اضف اسفله هذا الكود 
<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: &quot;الأولى&quot;,lastText: &quot;الأخيرة&quot;,nextText: &quot;&#187;&quot;,prevText: &quot;&#171;&quot;}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable> 

ملاحظات 
perPage: 7 >> عدد المواضيع التى ستظهر فى كل صفحة
numPages: 5 >> عدد الصفحات التى ستظهر

ثم ابحث عن 
<b:include name='nextprev'/>
ثم استبدله بهذا الكود 
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nextprev'/></b:if></b:if>

ثم ابحث عن وسم ]]></b:skin>
وضع قبلـــــــــــــــه كود السى اس اس التالى
#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {background-color: #3BB3E0;padding: 5px 10px;position: relative;margin: 2px;font-size: 12px;text-decoration: none;color: white;border: solid 1px #186F8F;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#blog-pager a:hover, .pagenavi a:hover {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}
ثم قم بحفظ القالب ومبروك عليك الترقيم

إقرأ المزيد... Résumé3efrit blogger
,

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

تعليقان1:12 ص, مرسلة بواسطة Hady store
اليوم وفى موضوع جديد وحصرى كالعادة من مدونة مدون أقدم لكم تأثير جميل جدا بجوار شريط التمرير فى مدونات البلوجر وهو عبارة عن اضافة النسبة المئوية بجانب شريط التمرير ، وهذا يضفى على المدونة بعض من الرونق والجمال ، وهذا الموضوع لم تتناوله المدونات العربية لذلك قررت تناول الموضوع بعين من الرعاية وقررت تقديمه لكم فى هذه التدوينة ، ولكى لا أطيل عليكم فهيا بنا للمعاينة والشرح 
♫  قبل أى شيء أريد أن أقول لك  ♫
اذا كانت هذه أول زيارة لك لمدونة مدون >> فتفضل بالضغط هنا
♦ شاهد المعاينة الحية ♦ 
شرح التركيب 
اذهب للوحة التحكم >> القالب >> تحرير HTML 

 أولا : ابحث عن ]]></b:skin>  وضع فوقه هذا الكود 
#scroll {
display: none;
position: fixed;
top: 0;
left: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
left: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
◄  لتجعل النسبة المئوية على يمين المدونة غير كلمة left  بـــ right 

ثانيا : ابحث عن  </head>  وضع اسفله هذا الكود
<div id='scroll'></div>

ثالثا : ابحث عن </body> وضع فوقه هذا الكود 
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

ثم قم بحفظ القالب ومبروك عليك الاضافة 
إقرأ المزيد... Résumé3efrit blogger

اضافة الاشتراك فى القايمة البريدية فى شكلها المميز

تعليق واحد4:43 ص, مرسلة بواسطة Hady store

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


شرح تركيب الاضافة 
اذهب للوحة التحكم >> التخطيط >> اضافة أداة جافا سكربت 
ضع بها الكود التالى ثم قم بالحفظ 
<style type="text/css">
#cat{background:#fff;width:220px;color:#222;font-family: "DroidKufi-regular";display:inline;margin:3px;padding:3px 2px 2px;}
#subscribe{overflow:hidden;margin:0;padding:0 0 5px}
#subbox{-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOVtbMRcqY_coijFyLV-f59nViWTGLb4EnqbOGt-2RpMu1mUf2q2d7wKdmGQrowm_EU327OOT9BNQiaE-MeRAI0A8_odNfQrcqYkAwfEmlpZCe4Fq93XsX8oKPdUMWNpXn4_nzSrd71U/s1600/email-icon.png) no-repeat scroll 4px center;font-family: "DroidKufi-regular";color:#666;text-align:right;padding-right:6px;text-decoration:none;border:1px solid #aaa;height:36px;width:215px;margin:0;}
#subbutton{cursor: pointer;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;background:#999;color:#FFF;font-family: "DroidKufi-regular";font-weight:700;text-decoration:none;border:1px solid #666;margin-left:5px;padding:3px 5px;float:right;}
</style>

<div id='searchbarleft'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;أدخل بريدك&apos;;}' onfocus='if (this.value == &apos;أدخل بريدك&apos;) {this.value = &apos;&apos;;}' type='text' value='أدخل بريدك'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='ar-eg'/><input id='subbutton' type='submit' value='سجل'/></form></div>
كلمة شكر من الأعضاء تجعلنى أزداد فى العطاء 
إقرأ المزيد... Résumé3efrit blogger