المتواجدون بالمدونة الان

السبت، 1 ديسمبر 2012

اضافة اداة الاستماع الى القران الكريم


اليوم

 نشرح لكم كيفية

اضافة اداة الاستماع الى القران الكريم

في مدونات بلوجر Blogger


صورة الاضافة
تعتبر  الاداة من الادوات المميزة التى يجب اضافتها بجميع المدونات

وذلك لانة بسيطة وممتعة بجانب ان ثوابها كبير جداجدا


لاضافة الاداة
توجة الى لوحة التحكم ثم تخطيط

ثم اضافة اداة ثم اختيار


HTML/JavaScript


ثم اضافة هذا الكود بالصندوق

<center><iframe align="center" allowtransparency="1" frameborder="0" height="334" id="IW_frame_1438" scrolling="no" src="http://www.tvquran.com/add/index.htm" width="302"></iframe></center>

ثم قم بالحفظ ثم عرض المدونة

وشاهد الاضافة

ارجوان اكون قد وفقت فى شرحى

ولكم منى خالص التحية

اضافة اخر الموضعات بطريقة مميزة متحركة عموديا

اليوم

 نشرح لكم كيفية

اضافة اخر الموضعات بطريقة  مميزة متحركة عموديا

في مدونات بلوجر Blogger


صورة الاضافة


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

ثم اضافة اداة ثم اختيار


HTML/JavaScript


ثم اضافة هذا الكود بالصندوق

<style type="text/css"> 
 #rp_plus_img{height:212px;overflow:hidden;border:solid 1px  #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}  #rp_plus_img ul{list-style-type:none;margin:0;padding:0} #rp_plus_img  li{border:0; margin:0; padding:0; list-style:none;} #rp_plus_img  li{height:60px;padding:5px;list-style:none;} #rp_plus_img a{color:#FFF;}  #rp_plus_img .news-title{display:block;font-weight:bold  !important;margin-bottom:4px;font-size:11px;} #rp_plus_img  .news-text{display:block;font-size:11px;font-weight:normal  !important;color:#DEDEDE;text-align:justify;} #rp_plus_img  img{float:left;margin-right:14px;padding:4px;border:solid 1px  #585858;width:55px;height:55px;}
</style>
<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript"  src="http://blogspacetech.googlecode.com/files/News-Ticker-Recent-Post.js"></script> 
<script type="text/javascript"> var speed = 400; var pause =  2500; window.onload = (function(){ rpnewsticker(); interval =  setInterval(rpnewsticker, pause); }); </script> <ul  id="rp_plus_img"> <script style="text/javascript"> var numposts  = 10; var numchars = 125; </script> <script  src="http://ahmadalgoker.blogspot.com//feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

قم باستبدال الرابط الاحمر برابط مدونتك 

ثم قم بالحفظ ثم عرض المدونة

وشاهد الاضافة

ارجوان اكون قد وفقت فى شرحى

ولكم منى خالص التحية

اضافة شريط متحرك باخر المواضيع في مدونات بلوجر Blogger

اليوم
 نشرح لكم كيفية

اضافة شريط متحرك باخر المواضيع في مدونات بلوجر Blogger

صورة الاضافة

الميزة الاساسية لهذه الاضافة أنها تجدد نفسها تلقائيا أي عند

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

بالاضافة الى اطلاع زوارك علي جديد مواضيعك بسهولة.

توجة الى لوحة التحكم ثم تخطيط

ثم اضافة اداة ثم اختيار


HTML/JavaScript


ثم اضافة هذا الكود بالصندوق


<script type="text/javascript">

    var w2bWidth="100";
    var w2bScrollAmount="7";
    var w2bScrollDelay="50";
    var w2bDirection="right";
    var w2btargetlink="yes";
    var w2bnumPosts="5";
    var w2bBulletchar =">>>";
    var w2bimagebullet="yes";
    var w2bimgurl="http://4.bp.blogspot.com/-3X1QyNEPWBo/Tr7XQH3r0uI/AAAAAAAACdY/lubXd3j1aLA/s1600/new.gif";
    var w2bfontsize="13";
    var w2bbgcolor="FFFFFF";
    var w2blinkcolor="000000";
    var w2blinkhovercolor="FF0303";
</script>
<script src="http://sites.google.com/site/egymodernblog/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
<script type="text/javascript" src="
http://ahmadalgoker.blogspot.com

/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>


قم باستبدال الرابط الاحمر برابط مدونتك 

ثم قم بالحفظ ثم عرض المدونة

وشاهد الاضافة
ارجوان اكون قد وفقت فى شرحى
ولكم منى خالص التحية

اضافة اداة المتابعة للمواقع الاجتماعية

اضافة اداة المتابعة للمواقع الاجتماعية

ليس هنالك افضل من المواقع الاجتماعية الكبيرة 

مثل

 facebook  -  google   -   twitter
  
لزايدة شهرة مدونتك على الأنترنيت 

وزيادة المعجبين على صفحاتك على تلك المواقع


 فعند التأشير عليها يخرج لك صندوق 

معجبيك على تويتر او الفيس بوك او جوجل

طريقة التركيب الاداة

توجة الى مدونتك ثم لوحة التحكم

ثم قالب ثم  ثم تحريرhtml ثم متابعة

ثم توسيع القالب

 ثم ابحث عن الكود التالي :بالضغط على       alt+f

</head>

ثم اضافة هذا الكود 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ثم حفظ

ثم توجة الى لوحة التحكم ثم تخطيط

ثم اضافة اداة ثم اختيار


HTML/JavaScript


ثم اضافة هذا الكود بالصندوق

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/3in1/3.css" /><script src='http://latesthack.googlecode.com/svn/mywidgets/2in1/twitter.js'></script><script src="http://googleplus-activity-widget.googlecode.com/files/jquery.googleplus-activity-1.0.min.js"></script>
<script type="text/javascript">
 //<![CDATA[ 
   jQuery(document).ready(function($) {
      $('#gpaw').googlePlusActivity({
         api_key : 'AIzaSyDsd2KGlVuN5dEwas5G3TsOVX17oRCCTFM'          ,user:'107977330206603402697'          ,image_width:75          ,image_height:75          ,body_height:230       });    }); //]]> </script> <script type="text/javascript"> jQuery(document).ready(function(){  jQuery("#facebook_right").hover(function(){   jQuery(this).stop(true,false).animate({right:  0}, 600); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 600); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -280}, 500); });  }); </script><p style="display:none;"> 3 in 1 social sharing by<a href="http://www.latesthack.com">Latest Hack</a></p> <div id="on"> <div id="facebook_right" style="top: 10%;"> <div id="facebook_div"> <img src="http://2.bp.blogspot.com/-_dnsiNFVH7Y/T5v9OyB2hyI/AAAAAAAABJY/kYBXSYPVyMU/s1600/facebook.chamelcool.blogspot.com.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhttps://www.facebook.com/ahmadalgoker10&amp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   scrolling="no"> </iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 27%;"><div id="twitter_div"><img id="twitter_right_img" src="http://4.bp.blogspot.com/-HiKAgFrvtWo/T5v9SpwrpQI/AAAAAAAABJo/CrR6vcjjAsA/s1600/twitter.chamelcool.blogspot.com.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("رابط صفحتك على تويتر");</script> </div></div></div><div id="on"><div id="google_plus_right" style="top: 44%;"><div id="google_plus_div"><img id="google_plus_right_img" src="http://3.bp.blogspot.com/-kasz28FXcaM/T5v9PucBaKI/AAAAAAAABJc/GEWbPTfsCt4/s1600/google+1.chamelcool.blogspot.com.png" /><div style="float:left;margin:0px 0px 4px 4px;"><div id="gpaw">  </div></div></div></div></div>

قم بتغيير 107977330206603402697
 بالارقام التي ستجدها في جانب الرابط في صفحتك على جوجل 

وتغيير https://www.facebook.com/ahmadalgoker10

برابط صفحتك على الفيس بوك

ثم اخير تغيير عبارة رابط صفحتك على تويتر برابطك

ثم قم بالحفظ ثم عرض المدونة

وشاهد الاضافة
ارجوان اكون قد وفقت فى شرحى
ولكم منى خالص التحية

الخميس، 29 نوفمبر 2012

اضافة زر الصعود بمدونة بلوجر


اضافة زر الصعود بمدونة بلوجر

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

او تخطيط ثم اضافة اداة تم اختار اداة

HTML/JavaScript



ثم ألصق هذ الكود في النافذة التي ستظهر لك

الكود

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" > 
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.m5tar.blogspot.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/ 
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="رابط الصورة" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'إصعد إلى الأعلى !'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
scrolltotop.init() 
</script>

 ثم قم بحفظ الإضافة ثم عرض المدونة


لتشاهد الاضافة