epsco: مايو 2012

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

الاثنين، 28 مايو 2012

Simplex Design blog : New customization Blogger threaded comment

Link to SimplexDesign - free premium blogspot template

New customization Blogger threaded comment

Posted: 28 May 2012 02:53 AM PDT

After reading some comments from you on Customize threaded comment system and check by myself ,there's an error when applying CSS in this post: the reply button and load more button are not work .
Now in this post ,I will show you how to customizing theaded comment system like Simplex Bigblue template .

New threaded comment system use more javascript than the old comment form . It's mean if we look into the template code ,we couldn't know what HTML tags will be used in comment form ,therefore hard to write CSS .
To know what HTML tags has been generated by javascript ,you can wait for page fully loaded ,and then save that page to your computer .
Check the downloaded page ,we can see what HTML tags in comment .
All of these HTML tags are decorated by CSS attributes in default Blogger CSS file . You can't download/edit/modify this CSS file . So the solution here is to write new CSS in template file to overwrite the defaults .

Here is the HTML code of threaded comment that I dumped in my blog :

<div class="comments-content">
     <div id="comment-holder">
         <div kind="x" id="xxx">
             <div id="xxx">
                 <div u="x" t="x" kind="x" class="comment-thread" id="xxx">
                     <ol id="xxx">
                         <li kind="x" class="comment" id="xxx">
                             <div class="avatar-image-container">
                                 <img src="avatar">
                           </div>
                             <div class="comment-block" id="xxx">
                                 <div kind="x" class="comment-header" id="xxx">
                                     <cite class="user"><a href="xxxx" rel="nofollow">Comment name</a></cite>
                                   <span class="icon user"></span>
                                   <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time</a></span>
                               </div>
                               <p class="comment-content" id="xxx">comment body</p>
                               <span kind="x" class="comment-actions secondary-text" id="xxx">
                                     <a o="r" target="_self" href="javascript:;" kind="i">Reply</a>
                                   <span class="xxxxxx">
                                         <a href="xxx" target="_self" o="x">Delete</a>
                                   </span>
                               </span>
                           </div>
                           <div class="comment-replies" id="xxx">
                                 <span kind="x" id="xxx">
                                     <div u="x" t="x" kind="x" class="comment-thread inline-thread" id="xxx">
                                         <span kind="x" class="thread-toggle thread-expanded" id="xxx">
                                             <span class="thread-arrow" id="xxx"></span>
                                           <span class="thread-count" id="xxx">
                                                 <span style="display: none;" id="xxx"></span>
                                               <span style="display: none;" id="xxx"></span>
                                               <a target="_self" href="javascript:;">Replies</a>
                                               <div class="thread-dropContainer thread-expanded" id="xxx">
                                                     <span class="thread-drop"></span>
                                               </div>
                                           </span>
                                       </span>
                                       <ol class="thread-chrome thread-expanded" id="xxx">
                                             <div>
                                                 <li kind="b" class="comment" id="xxx">
                                                     <div class="avatar-image-container">
                                                         <img src="avatar of people who reply comment above">
                                                   </div>
                                                   <div class="comment-block" id="xxx">
                                                         <div kind="m" class="comment-header" id="xxx">
                                                             <cite class="user blog-author"><a href="xxx" rel="nofollow">name of people who reply comment</a></cite>
                                                           <span class="icon user blog-author"></span>
                                                           <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time reply comment</a></span>
                                                       </div>
                                                       <p class="comment-content" id="xxx">comment body</p>
                                                         <span kind="m" class="comment-actions secondary-text" id="xxx">
                                                             <span class="item-control blog-admin pid-868019743"><a href="xxx" target="_self" o="d">Delete</a></span>
                                                         </span>
                                                   </div>
                                                   <div class="comment-replies" id="xxx"></div>
                                                   <div class="comment-replybox-single" id="xxx"></div>
                                               </li>
                                           </div>
                                           <div kind="ci" class="continue" id="xxx"><a target="_self" href="javascript:;">Reply</a></div>
                                       </ol>
                                         <div class="comment-replybox-thread" id="xxx"></div>
                                   </div>
                               </span>
                           </div>
                             <div class="comment-replybox-single" id="xxx"></div>
                       </li>



                   </ol>
                   <div kind="ci" class="continue" id="xxx" style="display: none;">
                         <a target="_self" href="javascript:;">Add comment</a>
                   </div>
                   <div class="comment-replybox-thread" id="xxx">
                         xxxxxxxxx
                   </div>
                   <div kind="rb" class="loadmore loaded" id="xxx"><a target="_self" href="javascript:;">Load more...</a></div>
               </div>
           </div>
       </div>
    </div>
</div>

Please take a look at the code above . I censored unnecessary information in the code above . What we need to know is HTML tags and class attribute of these class .
Base on the HTML markup above ,we can write CSS code to decorate them as we want .

Here is the code that I applied in Simplex Bigblue template .You can consider it an example .

.comment {
    list-style-type: none;
    width: 100%;
}
.comment .avatar-image-container img {
    width: 35x;
    height:35px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 0;
    padding: 3px;
    vertical-align: middle;
}
.comment .avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: visible;
    width: 36px;
}
.comment .comment-block {
    margin-left: 70px;
    position: relative;
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    padding: 15px 20px 5px;
}
.comment .comments-content .datetime {
    font-size: 11px;
    font-style: italic;
    margin-left: 6px;
    float:right;
}
.comment .comments-content .datetime a{
    color:#999;
}
.comment .comments-content .user {
    font-style: normal;
    font-weight: bold;
}
.comment .comments-content .user a {
    color:#333;
}
.comment .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;

}
.comment .continue a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;
}
.comment .comments-content .loadmore.loaded {
    background: none repeat scroll 0 0 #4488DD !important;
    color: #FFFFFF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    text-align: center;
}

You can copy this CSS code if you want threaded comment like Simplex Bigblue template ,or write more CSS code if you want to make it as you want .
Hope this post helpful to you .

الجمعة، 25 مايو 2012

Simplex Design blog : Some Basic Principles and Techniques for Web Site Design

Some Basic Principles and Techniques for Web Site Design

Posted: 25 May 2012 02:05 AM PDT

This is guest post by Brianne Walter on basic principles and techniques for web design . It's also helpful for you who want to make a custom template for blog .
The principles and the techniques are essential for any design. Therefore, in this case, the website design is no exception. For a good website designing, you will need to apply the principles and techniques in a wise manner. Therefore, you will need to know about these elements and its functions. Therefore, some principles and techniques are discussed for your need.

Layout

The layout of a website can create its aesthetic meaning to the visitors. Therefore, it is very much important to use the composition of the page in the subtle manner. How you will design, the website's page is a vital concern for making the stunning layout. Therefore, for achieving the success of the layout, you have to apply the grid technique in the layout segment. Particularly, the rules of third should be used to make a stunning composition for the website layout. For good layout, you have to consider putting some surprises in the design, so that the visitors can stay on the website page for a long time.

Color

The color for any website design is an important element. So, the color should be used in the website design in intelligent way. Remember color can make or break the consistency of the website layout. Before using color in the website page, you have to study the color harmony in deeply. So, that there will be no scope for error for color placing on the website layout.

Typography

Before using the typography on the website, you have to know the aesthetic sense of the fonts. The reason is that if you use the right font for the website design, then you will make it more user-friendly for the visitors. The exact typography for the website design is vital for the eyes, because, the wrong fonts can damage the viewing angle of the monitor screen.

Navigation

When you are going to design the website, you should remember that navigation in the website should be user-friendly which means the visitors can access the website without any trouble. Moreover, you have to use your intuition in advance, about where the movement of the visitors' eyes will be on the web page.

Usability

When you are designing the website, you should think about the visitor's mind. In advance, you have to realize that what the visitors will do when they make a visit on the website and you have to think about what the visitors will do on the website.

Clarity

The clarity of the website design depends on the pixel usage. So, how you will use the pixels in the website layout which will determine the crisp and the sharpness of it on the monitor screen. Moreover, the edges of the pictures or fonts should be clear as well as looking great on the monitor screen also.

Consistency

Always, remember that the website design should have consistency in all segments of the layout, because, the consistency in every aspect of the website will determine its success. Generally, consistency means making everything match like font, spacing, heading sizes .Etc.

Therefore, the website design requires the principles and techniques to build a good-looking website for the visitors.

About guest blogger

Brianne Walter is a freelance blogger who is passionate about writing. She frequently writes on SEO, marketing, design and social media related topics. Her favorite sites are ecofriend and style guru, which she also happens to work for.

الثلاثاء، 22 مايو 2012

Simplex Design blog : New blogger interface and error when installing new template

New blogger interface and error when installing new template

Posted: 21 May 2012 09:05 PM PDT

The new blogger interface will be applied to all blog in next month .
Some of you updated to new blogger interface and error message suddenly appear when installing a new template .
The reason is very simple . The error is on widgets in template and widgets inside template .

For example ,you added a Popular post widget to blogger when using old template . But in new template ,there's no Popular post widget in template itself . So error occurred.
What to do in this situation is to remove Popular post widget in Blogger and re-install later .
This is very different to old Blogger interface . The old one will show a dialog for all widget that not exist in new template and asking for keep these widgets or delete . We can still keep the old widget with all the code added in widget content .
So I recomment you to :
- Do backup before installing any template .
- Copy widget content .
- Remove all widgets
- Install new template
- Add widget back to template .