Have
a blog with cool and unsightly look naturally into its own kembanggaan to the
blog owner. However, the process to beautify the look of the blog I admit is
not an easy job, especially for a beginner blogger notabenya still lay with the
language of HTML and CSS. Though both languages that the basis/framework in
designing the look of the blog.
Top reasons that, through
this article I want to share how to beautify
your blog, especially
for blogger friends who
still have not mastered web
programming languagesHTML and CSS. Because
with the widget and the
source code that I have prepared, then
I'm sure anyone can easily beautify
your blog,
because the live copy and pasteonly.
I would like to explain in advance about the template which is the core of the design a blog stored/written. Broadly speaking, there are three basic components of the template we need to edit/add to get beautiful blog designs, attractive and cool. The third component of the template I mean are:
·
Background
·
Efek
·
Widget
Of these three components is still broken down again to produce the sub components as follows:
Background :
·
Background
Image
·
Background
Color
Efek :
·
Hover
·
Animasi
Bergerak
Widget :
·
Social Button
·
Widget
Twitter Follower
·
Widget
Facebook Fanpage Like
Next let's edit one
by one of the above templates so that the subcomponent seventh produces chic blog look beautiful.
* This
Tutorial tells You How to beautify your blogspot blog, if you don't have any
you could make it in blogger.com and for a guide to create a blog please read
the tutorial here how to create a blog.
1. Enhance your Blog with Background Image
Add a background image on
the <body> blog template is actually not very I
recommend because of the potential to make our blog
site load becomes heavy/slow. The solution is to use a background image repeat,
namely a CSS code for menduplicateimages repeatedly.
So here we will
be using an image with a very small size and then copy the
image tomeet the 1 page. It should be noted that this is
actually just a way suitable for the image-pattern/pattern line
as square/segita. To apply it in the blog to prepare in
advance the image which we will use as background, for
example I will use the image with the pattern box.
And to apply the background image in the body of the template, please use CSS code below:
CSS
body {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKaYIsxvVsqvLsSQ4sO3GJvYZuW9PrIJg13bmnhMQy0RFcT_K3GdWNOfxOT-ptAWfUbDvBJsFXiwjcq-fUqmNZ1ulASMlPp3Lkg8ilqDrHNhU21OvNrCnNCqvmq5VezABZQHNNkdA038/s1600/noisy_grid.jpg) repeat scroll top left;
}
Copy and then paste the code right above code]] > </b: skin > (for bloggers). Nextsave and see the results, guaranteed your blog will appear more beautiful with the background grid of the city.
2. Enhance your Blog with Background Color
How to beautify your blog the second is with how to change the background color of the blog, which I am sure most of the colors of the blog template, in every his divusing only one color. Well, here I will exemplify how to make two color in 1 div. two colors I would merge here is the color of cream and cream white.
CSS
.gradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
}
Furthermore please enter text/picture/video/widgets into a div with class gradient, for example, you can see below.
HTML
<div class="gradient"><img src="url gambar" style="float:left"> anda bisa memasukkan teks atau bahkan kode html disini</div>
Div diatas bisa Anda masukkan dibagian 'tata leat'
atau bisa juga langsung menuju template editor Blogger.
3. How to beautify your blog with Hover Effect
What is a Hover effect? In short,
the hover is the effect that will appear when
the cursor is above the selector. For more details you
can see examples of hover I apply button ' press
' below.
Button
To create such an effect, there are two codes that we prepare, the first is the div HTML code, CSS code and the hover selector.
CSS
.tombol {
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}
.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}
HTML
<div class="tombol">Tekan</div>
>
Please save and you see the results. In addition to adding a hover effect, we can also create animation effects button rotates, with animation effects, please read the instruction below.
4. How to beautify your Blog with Moving animation effects
Animation
effects move here there are two kinds, there are to
be touched (hover) used to be the
new animation effects work and there is
also a direct move automatically. And second I
will explain the effects of secar detail.
Moving animation
effects with Hover
We will
continue the css code button ' press ' above, to make
it move or rather spinwhen the cursor touches
the button, then we need to add the
following css rotate effect.
CSS
.tombol {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}
And the result will be like button below
Tekan
the css animation effects rotate, is not just a
cooler, but also will make your blog more interesting and attractive, and
ultimately will make the visitors welcome.
Moving Animation effect
with Marquee
If you want to beautify your blog by moving animation but
without the need to be touched, then the css code Marquee is the answer. But
here I will explain again how to use the running marquee effect, as in the
previous article I have explained in detail and how to modify the marquee code.
In short to create a marquee effect / effect running, then we
should be flanked by marquee html code as below.
HTML
<marquee>letakkan teks / gambr / video disini</marquee>
Both effects above could be combined by adding a
property to the selector marquee, then just to add a hover effect.
5. How
to Beautify Blog Display with Social Share Button
Besides functioning to
enhance the appearance of blogs, social widget button is also very useful to
boost traffic and SEO (as a social signal), so no reason not to put social
widget button on your blog. To weave is actually quite easy, we could make it
automatically at the site ShareThis.
Sharethis page if it is open, please continue by
choosing a blog platform you are using, in this example I'm using Blogger, for
the use of Wordpress please select platform or CMS Wordpress.
2. Choice model Social Share Button
Please select a model social button which you
think is best to enhance your blog. I myself love social button model 1 because
it is more minimalist.
3. Click the 'Get Code' to get the code Widget
Before You need to register and create an
account on the site to take the ShareThis code. If you don't want to bother
please take my code here.
To add the button, social widgets you can
install it via the menu ' layout ' with how to choose HTML/JavaScript and then
copy the code above and paste it in the column content.
6. how to Beautify the look of blogs with Widget of Twitter
Follow
Not only is able to beautify your blog, the
widget embedded twitter follower will also add You to. How to set it up is
quite easy as well, where the task You just need to put the embed code twitter
below in the section on the template that you want, for example, could be in
the sidebar or the footer
<a class="twitter-timeline" href="https://twitter.com/twitterdev" data-widget-id="ID-TWITTER">Tweets by @twitterdev</a> <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
Change the first "TWITTER-ID" with your
Twitter ID. If it is please save and if the results are as shown below then you
managed to embed twitter timeline in Blog.
If the size of the widget is considered too
large, then you can meresizenya with css how to add widht and heigt in class
"twitter-timeline".
7. How to beautify your Blog with Widget Box Facebook Page Like
One more widget will beautify your blog, Yep widget I mean
the Facebook Like Box. To add this widget into a blog we can use the plugin
provided by Facebook officially, so later we just enter the code ID Fanpage
then click Create, or more details you can check out the trick below.
1. Create a Facebook Fanpage
Before adding a Facebook Like Box, of course at
least you already must have at least 1 Fanpage of Facebook, if not please
create new fanpage in advance, complete tutorial of making fanpage you can read
here how to make facebook pages fanpage.
Furthermore, Visit Facebook Developer site
above, and then enter the ID or URL into the column Fanpage Facebook Page URL,
also set the width or length of the widget.
3. Klik 'Get Code
Click ' get code ' button to get the code of the widget Box Facebook Page, then copy the code and insert it into the layout.
That's how the seventh beautifying blog that
will make Your blog look more beautiful, it should be noted here, I absolutely
do not recommend to you to apply the seven above, because if all the widgets
are installed, then it will greatly impact on load time blog site will become
more heavy and slow, the edges instead of happy visitors even so lazy to visit
your blog, so the message I think twice before adding the widget into your Blog.