MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Cara mengganti background blog dengan gambar sebenarnya sangat mudah. Saudara bisa memilih apakah gambar latar itu nantinya diam/fixed atau bergerak dengan scroll. Untuk mengetahui cara melakukan ini silahkan baca penjelasan berikut ini….


KODE CSS DASAR BACKGROUND BLOG

Saudara perlu mengetahui bahwa kode untuk mengubah gambar latar ini biasanya ada pada CSS BODY pada atribut BACKGROUND….

Seo Master present to you: This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

You can see a demo in this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:


Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

 /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Step 3. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And just above it, add this code:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://www.matrixar.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://www.matrixar.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://www.matrixar.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='http://www.matrixar.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5. Finally, Save the Template to apply the changes.

The effect is done with CSS3, so this effect will not work in older browsers.2013, By: Seo Master

Seo Master present to you: This post is part of the Who's @ Google I/O, a series of blog posts that give a closer look at developers who'll be speaking or demoing at Google I/O. Today's post is a guest post written by Jesse Lorenz from Salesforce.com.

Many companies are storing their data in the cloud, and they are looking for ways to gain insight to this data. The Google Visualization API is a great way to do just that, which is why salesforce.com has built a set of Google Visualization components for Force.com. These components enable Force.com customers and partners to quickly embed sophisticated reporting and analysis functionality in to their Force.com applications. You can even use the Annotated Time Line visualization to visualize your sales progress:


The Google Visualization component project is one of the most popular projects on developer.force.com/codeshare. Force.com partners have already begun to leverage the components to build new business intelligence apps so that Force.com users can quickly generate reports and dashboards that provide them with new insight to their data.

If you’d like to learn more about embedding Google Visualizations into your Force.com applications, this tutorial is the best place to start. It contains a walk-through of how to get started as well as links to sample code for all of the supported components. The project is open source and everyone is encouraged to contribute!

Salesforce.com will be co-presenting a session at Google I/O that will discuss how to embed the power of the Google Visualization API in Force.com business applications, and how to turn a Force.com application in to a Google Visualization data source. We hope to see you there! To learn more about developing applications on Force.com, go to developer.force.com.

Guest By Jesse Lorenz from Salesforce.com.2013, By: Seo Master