SWEDISH WEB DESIGN BLOG

Ta bort "Startsida" länk under inlägg

Remove “Home” link under the post in Blogger
In the Add Custom CSS paste following CSS code:

#blog-pager {
display:none;
}

Remove dotted line under the post in Blogger
In the Add Custom CSS paste following CSS code:

.footer-outer {
    border: none !important;
}
< Press enter after character above - do not include this text in the code when you do this - this is just a tip>

CENTER YOUR PAGE TABS IN BLOGGER

Ta bort Prenumerera på: Inlägg (Atom)

Ta bort eller kommentera bort följande mening på rad c:a 1240 med <!--   -->  :

<b:include data='feedLinks' name='feedLinksBody'/>

Remove "Home" link under the post

Customize Contact Form of Blogger

Customize Contact Form of Blogger

1. Add Contact Form in Blogger
    2. Add Contact Form in Static Page
    3. Customize Contact Form in New Look


Part 1. Add Contact Form in Blogger

    Login to Blogger > Dashborad
    Click on Drop Down Menu and select Layout
    Add Gadget
    Click on More Gadget
    Select Contact Form



    Now Give a Name to your Contact Form as we recommend you should give Contact Form


    Finally your Contact Form Saved.




Part 2. Add Contact Form in Static Page

    Login to Blogger > Dashborad
    Click on Drop Down Menu and select Pages
    Click on New Page
    Select Blank Page


    Now Click on HTML an Paste below code in it.


--------------------------------------------------------

     <div class='form'>
    <!-- Custom Contact Form By WG Starts -->
    <form name='contact-form'>
    <!-- Name Field -->
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <!-- Email ID Field -->
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>
    <!-- Message Field -->
    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <!-- Clear Button -->
    <input class='WG-btnLogin' type='reset' value='Clear'/>
    <!-- Send Button -->
    <input class='WG-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
    <p></p>
    <!-- Validation -->
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    <!-- Custom Contact Form By WG Ends -->
    </div>

---------------------------------------------------------



    Finally Publish that Page



Part 3. Customize Contact Form in New Look

    Login to Blogger > Dashborad
    Click on Drop Down Menu and select Template
    Backup your Template before making any changes to your blog
    Press Ctrl + F and search the code shown below.
----------------------------------------------

    ]]></b:skin>


----------------------------------------------
    Paste Below code just above it.
----------------------------------------------

    #ContactForm1
    {
    display: none ! important;
    }


----------------------------------------------
    Now Search for </head>
    Paste below code just before </head>


----------------------------------------------

    <b:if cond='data:blog.pageType == "static_page"'>
      <style>
    #ContactForm1{ display:none!important;}
      </style>
    </b:if>

    <style>
    /*---- Compatible contact Form by WG -----*/
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: 220px;
    width: 100%;
    font-weight:bold;
    }
        
    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iUn5PfouHYzsSPQZfKahztf2bCtAR735MUSJQGuJaSXJXOsX4cuFtS2mOhGHtNu278yT_hpbRVOFmqf2WiRBXJphBYAcGd585dukeHqnVgETN8HvnI4tfeqXV6TuIT1A1-kQbihWB28/s320/name.png) no-repeat 7px 8px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
       
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3FGKmhsUUCB5VaUPDcJvT7HLyYr0sh1BEi8ZI-H7H52prZFDPxyJaVBaJVyEXkfQZK8gB5gx0eF1Gr6HZXDUhNtzrcrU_aAd7rSSgtw61hT-8SbqMKeoxl2_Y-UcX2ELqdS-qKVhuHc/s320/email.png) no-repeat 7px 10px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }

    .contact-form-email:hover, .contact-form-name:hover{
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

    padding: 5px 15px 5px 28px;
    }
    .contact-form-email-message:hover {
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 10px;
    }
    .contact-form-email-message {
    background: #FFF;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    vertical-align: top;
    max-width: 350px!important;
    height: 150px;
    border-radius:4px;
    }

    .contact-form-button {
    cursor:pointer;
    height: 32px;
    line-height: 28px;
    font-weight:bold;
    border:none;
    }

    .contact-form-button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .contact-form-button:hover {
    text-decoration: none;
    }
    .contact-form-button:active {
    position: relative;
    top: 1px;
    }

    .WG-btnLogin
    {
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:15px;
        background:#a1d8f0;
        background:-moz-linear-gradient(top, #badff3, #7acbed);
        background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
        border:1px solid #7db0cc !important;
        cursor: pointer;
        padding:11px 16px;
        font:bold 11px/14px Verdana, Tahomma, Geneva;
        text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
        color:#fff;
        -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        margin-center:12px;
        float:center;
        padding:7px 21px;
    }

    .WG-btnLogin:hover,
    .btnLogin:focus,
    .btnLogin:active{
        background:#a1d8f0;
        background:-moz-linear-gradient(top, #7acbed, #badff3);
        background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
    }
    .WG-btnLogin:active
    {
        text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
    }
    </style>

          <!--[if IE 9]>
        <style>
      
    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iUn5PfouHYzsSPQZfKahztf2bCtAR735MUSJQGuJaSXJXOsX4cuFtS2mOhGHtNu278yT_hpbRVOFmqf2WiRBXJphBYAcGd585dukeHqnVgETN8HvnI4tfeqXV6TuIT1A1-kQbihWB28/s320/name.png) no-repeat 7px 0px;
    }
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3FGKmhsUUCB5VaUPDcJvT7HLyYr0sh1BEi8ZI-H7H52prZFDPxyJaVBaJVyEXkfQZK8gB5gx0eF1Gr6HZXDUhNtzrcrU_aAd7rSSgtw61hT-8SbqMKeoxl2_Y-UcX2ELqdS-qKVhuHc/s320/email.png) no-repeat 7px 6px;
    }
        </style>
        <![endif]-->
      
        <style>
    @media screen and (-webkit-min-device-pixel-ratio:0) {

    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iUn5PfouHYzsSPQZfKahztf2bCtAR735MUSJQGuJaSXJXOsX4cuFtS2mOhGHtNu278yT_hpbRVOFmqf2WiRBXJphBYAcGd585dukeHqnVgETN8HvnI4tfeqXV6TuIT1A1-kQbihWB28/s320/name.png) no-repeat 7px 6px;
    padding: 15px 15px 15px 28px;

    }
    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3FGKmhsUUCB5VaUPDcJvT7HLyYr0sh1BEi8ZI-H7H52prZFDPxyJaVBaJVyEXkfQZK8gB5gx0eF1Gr6HZXDUhNtzrcrU_aAd7rSSgtw61hT-8SbqMKeoxl2_Y-UcX2ELqdS-qKVhuHc/s320/email.png) no-repeat 7px 8px;
    padding: 15px 15px 15px 28px;
    }

    .contact-form-email:hover, .contact-form-name:hover{
    padding: 15px 15px 15px 28px;
    }

    .contact-form-button {
    height: 28px;
    }
    }
    </style>

----------------------------------------------

    Finally Save your Template and Say Bingo be'coz you are done with it.
    Enjoy with Professional look of your own personal contact form :)

Remove the Title From Blogger Pages

Ad to CSS

.post h3 {display: none !important;}

Add the Recent Blogger Posts

From your Blogger Dashboard, go to Layout > click on Add a Gadget link
From the pop-up window, scroll down and choose HTML/JavaScript
Inside the empty box, add the following code:

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjCcnJn1a7D_Vg8Y9vx_X_nUoVXhqzD8q2NcXIR-kkm6GP7PsF1OxmGjnq_juG5V6RchxFUqYwJXk_SE7OmURISVlNyGQJN9YJ-z02xys2GWY6hrIBxDOhpgwuIXJiNFj_lYhI3JS7qU/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>


! Replace YOUR-BLOG with the url of your site/blog (ex: http://helplogger.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of your url, otherwise it won't function properly.

• To disable the scroll bar, remove the number 500
• By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
• if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10
• Share on Facebook
• Share on Twitter

CSS for SWEDISH WEB DESIGN

#blog-pager {
display:none;
}

html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcMQiW44lvYhJwjNRRAspRE4ph4WGAErzJq9vk4mEfpnjVreJ5GvHAIIfbvhrtKl8kfuVqFp4YKD8D5u8m8kFqABoBY75Go_bUM6diiO_sqmoTLqReWysSNeEJIipzKw7ma_z-GTl5bKA/s1600/Nunnor---Copy2.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.footer-outer {
    border: none !important;
}

.post-title.entry-title{
display: none;
}

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img
{
-webkit-box-shadow:none;
box-shadow:none;
}