bgsGR Tutorial

Create Floating Image Link using CSS3

2010-11-04T02:38:00.002-07:00

Floating Image Link can be placed in the bottom-right corner, lower-left corner, upper-right corner, upper-left corner or in any part of the blog page. Changes in position in the set with the code left, right, top or bottom.

To change the position of Floating Image Link, you can set with left, right, top or bottom code. If you add the value of left, right, top or bottom bigger and biggger, so the Floating Image Link will be move to the middle of page, opposite of the code (left, right, top or bottom).

You can use the image with .gif, .jpg or .png file extention. When using a flash file, so only DIV tag will be used. Put flash file between opening DIV tag and closing DIV tag.

In the lower-left corner you can see the floating image link created using CSS3 with image extensions ". Jpg"!

CSS Code

#pojok {
position:fixed;
left:2px;
bottom:2px;
}  
#pojok img {
height:167px;
width:20px; 
border:3px solid #888;
padding:1px;
background:#aaa;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
z-index:99;
background:#993300;
border-color:#FF0000;
-o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

xHTML

<div id="pojok">
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="http://3.bp.blogspot.com/_550XeJhg_o8/TNJ_XRkFxMI/AAAAAAAAArM/lRw4C6CPyXU/s200/gubhugreyot167.20.jpg" /></a>
</div>

Put CSS code above ]]></b:skin> and xHTML above </body>

Click the link below to open the tutorial!

Tutorial: Floating Image Link!

Original tutorial by gubhug reyot

Create Tooltip on Blogger Read More

2010-10-24T21:22:00.000-07:00

Tooltip not only be mounted on posts or in the widget. In many other places we could use it. For example, in read more (blogger or blogspot). To create a tooltip in the read more, we need to add some CSS code, javascript or jQuery. All depend on the type tooltip that will be used.

The most important thing to make a design like this is to try to make changes to HTML code in the template. Not much to be revamped. Only in the HTML code associated with the read more. The code is :

<div class='jump-link'>

If you've made ZigZagLap Tooltip.

Read the tutorial at:

ZigZagLap Tooltip

then you just follow the tutorial "how to create a tooltip in read more by visiting the link below"!

Click the link below to open the tutorial!

Tutorial: Tooltip on Blogger - Read More!

Original tutorial by gubhug reyot

Beautiful blockquote with animation built using CSS3 Transition-Transformation

2010-10-11T08:58:00.000-07:00

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!

Sorry for all the blogger friend! I've tried to give tutorials to the fullest. Unfortunately, difficulty in speaking English actually make headaches. It was like being beaten with a hammer. Only the tutorials with messy language that I can give to you! Really! I can not speak English at all. Google Translate is my M-16 to make English-language tutorial. Heh .... heh ... heh .... Why I was born in Indonesia, eh? If I was born in England, I do not need to write. I'll talk to you, heh ... heh ... heh .... heh ... heh ... heh .... heh ... heh ... heh ....

Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.

The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover.

In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.

Click the link below to open the tutorial!

Tutorial: Beautiful Blockquote Using CSS3

Original tutorial by gubhug reyot

DEMO: Search Form Using CSS3 Transition

2010-10-08T16:13:00.000-07:00

Search form was built using CSS3 code in order to obtain the best performance and can make the blog more beautiful. Some codes used by CSS3 border-radius, drop-shadow (box-shadow), text-shadow, background-gradient and CSS3 Transition.
There are 2 options I have provided, it's up to you want to choose the first or second.

Search Form-1

Search Form-2

Click the link below to open the tutorial!

Tutorial: Search Form Using CSS3

Original tutorial by gubhug reyot

How to Create Beautiful Textarea using CSS3

2010-10-08T11:59:00.000-07:00

Textarea Penuh Pesona

Textarea Biasa

Click the link below to open the tutorial!

Tutorial: Beautiful Textarea-Penuh Pesona

Original tutorial by gubhug reyot

Elastic Box using CSS3

2010-10-06T16:42:00.000-07:00

Melihat gambar seperti di sebelah, saya harap sampeyan semua tidak perlu kaget, jijik atau marah. Gambar ini hanyalah sebuah gambaran betapa manusia dan anjing mempunyai kedekatan hubungan yang luar biasa. Bukan hanya bisa dekat secara fisik, namun pada dasarnya beberapa sifat anjing bersarang dalam jiwa manusia. Nggak percaya? Coba renungkan dalam hati untuk melihat apa yang selama ini telah sampeyan atau tetangga, para pemimpin negeri dan banyak lagi orang lakukan dalam hidup. Mencuri adalah salah satunya! Bagi yang masih sekolah pasti pernah curi-curi hasil kerjaan temannya, yang sudah perjaka pasti pernah suka curi-curi hati lawan jenisnya dan yang kerja jadi pegawai pasti pernah curi waktu atau bahkan curi uang rakyat! He .... he ... itu baru salah satu sifat anjing. Masih ada lagi beberapa sifat jelek anjing, selain sifat baiknya yang dimiliki banyak manusia dan tak perlu di bahas satu persatu.

Ada yang lebih penting dari pada hal tersebut di atas. Dimasa ke depan haruslah sifat-sifat yang seperti milik si anjing itu harus kita buang. Kita harus jauh lebih baik dari anjing (anjing kadang lebih baik dari manusia, lho! Dia nggak pernah mengumpat sesama anjing dengan kata kasar "manusia, loe!", tapi manusia sering melakukannya dengan teriakan keras, "anjing, loe!", dibarengi dengan air liur yang mengalir nerocos disela-sela gigi ompongnya!).

Ada lagi yang lebih baik untuk kita lakukan sambil berupaya menghilangkan sifat-sifat buruk yang seperti binatang. Marilah bersama-sama kita nyanyikan "lagu bang Rhoma" yang syairnya seperti ini "Ada Sunda , .... Ada Jawa .....dan masih banyak lagi yang lainnya , ha .... ha ... ha .... ha ....

Sebelum saya menuliskan apa yang menjadi pemikiran saya ini, aku harap rekan rekan tidak langsung menanggapinya dengan emosional. Sebenarnya antara manusia dan hewan diciptakan dalam keadaan dan bentuk yang sama sekali berbeda. Bahkan kalau kita pernah belajar tentang sejarah penciptaan manusia (moga-moga jangan nggak pernah), sangat jelas sekali perbedaan proses penciptaan antara keduanya. Disebutkan dengan jelas bahwa manusia diciptakan sebagai satu-satunya makhuk ciptaan Tuhan yang paling sempurna, yang dibuat tidak hanya dengan kata-kata Tuhan tetapi harus melalui proses yang rumit. Sangat berbeda jauh jika dibandingkan dengan penciptaan hewan atau bahkanalam semesta yang luar biasa dahyatnya ini.

Sesungguhnya,harusnya manusia memang harus berbeda jauh dengan binatang, karena manusia diciptakan dengan keunggulan yang jauh dfari binatang. Kita sebagai manusia dikaruniai dengan akal budi yang hebat, yang membuat manusia mampu melakukan hal-hal yang luar biasa. Sangat jauh jika dibandingkan dengan hewa. Hewan yang paling pintar sekalipun! Tetapi sayangnya, kelebihan itu tidak bisa dimanfaatkan manusia dengan sebaik-baiknya. Yang lebih menyedihkan, manusia, baik dimasa sebelum kita lahir hingga deti ini cenderung meniru sifat-sifat binatang. Tidak hanya seperti kancil yang dikatakan suka menipu, manusia juga seperti kucing yang suka mencuri. Ada yang lebih dari itu. Manusia banyak yang doyan membunuh sesamanya. Salahkah kalau dikatakan tak ada bedanya manusia dan binatang. Banyak sekali contoh yang ada dalam kehidupan di sekitar kita. Dari yang sederhana ngomongin tetangga sampai tega-tegannya membunuh tetangga atau teman hidupnya hanya karena masalah yang sederhana. dst .....

DEMO: Creating animation with CSS3 Transition on Blogger Profile Image

2010-10-02T06:45:00.001-07:00

Click here and then open the "About Me" and move the cursor on it.

Click the link below to open the tutorial!

Tutorial: Creating animation on Blogger Profile

Original tutorial by gubhug reyot

Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3

2010-10-01T17:12:00.000-07:00

To modify the appearance of the profile bloggers like "the title above" must be conducted by the page "edit HTML". Some of the css code in the template must be changed so that a background-image can be displayed. CSS code in the form of syntax .profile {margin: 3px 0 15px 0; .... etc ; } and other syntax related to the syntax .p {...) should be deleted and replaced with the new CSS code. Below is a sample of CSS code that must be removed and replaced with new CSS code

.profile-datablock {
      margin-top: 3px;
      ....
      ....
}
.profile-textblock {
      ....
}
.profile-img {
      ...
}

Delete all the CSS code that looks like the above and other syntax that uses the code ".profile { .....}"
Copy-paste CSS code below to replace the CSS code above.

#Profile1 .widget-content {
      position: relative;
      margin: 20px auto;
      width: 200px;
      height: 245px;
      padding: 5px;
      background: #666666;
      background: -moz-linear-gradient(top, #111, #eee);
      background: -webkit-gradient(linear, left top, right bottom, from(#111), to(#eee));
      text-align: center;
      border: 2px solid #888;
      text-shadow: 1px 1px 1px #000;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
}
#Profile1 .widget-content img.profile-img {
      display: block;
      float: none;
      margin: 10px auto;
      opacity: 1.0;
      -o-transition: 2s ease-out;
      -moz-transition: 2s ease-out;
      -webkit-transition: 2s ease-out;
}
#Profile1 .widget-content span {
      position: absolute;
      top: 15px;
      left: 0px;
      width: 210px;
      height: 265px;
      background: url(http://2.bp.blogspot.com/_550XeJhg_o8/TKYkWLX5u4I/AAAAAAAAApk/qkCpyyHx7ME/s400/Pemandangan-3.jpg) center center no-repeat;
      opacity: 0.4;
      -o-transition: all 0.7s ease-in 1s;
      -moz-transition: all 0.7s ease-in 1s;
      -webkit-transition: all 0.7s ease-in 1s;
}
#Profile1 .widget-content:hover span {
      opacity: 1.0;
      height: 1px;
      border-bottom: 6px solid #888;
      -o-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
      -moz-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
      -webkit-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
}
#Profile1 .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
#Profile1 .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
#Profile1 .widget-content a.profile-link {color: #99CCFF; font-size: 14px;}
#Profile1 .widget-content a.profile-link:hover {color: red;}

D E M O

Move your cursor on "si gubhug reyot" in the right sidebar.

How to save the CSS code :

Login to Blogger
Dasboard : Click "Design".
Design : Click "Edit HTML".
Edit HTML : Find css code like the sample above and replace with new CSS code!.
SAVE Templates
Open your blog and see the results.

Click the link below to open the tutorial!

Tutorial: How to Change Blogger Profiles

Original tutorial by gubhug reyot

How to add animation to the blogger "READ MORE" using CSS3 Transition-Transformation

2010-10-01T00:41:00.000-07:00

This is a simple way to make blogger (blogspot) "read more" become more attractive. We will only use the CSS code to create some animation on "read more" by using CSS3-Transisition-Transformation. Makes it very easy because you only save the CSS code above the code ]]> and then "click"-SAVE-Template.

CSS Code

.jump-link {
      padding: 10px 0;
      height: 40px; 
}
.jump-link a {
      padding: 0px 10px;
      border: 2px outset #993300;
      background: #888;
      text-decoration: blink;
      text-align: center;
      float: right;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px; 
      font: 16px Times;
      font-weight: bold;
      color: #99FFFF;
      text-shadow: 1px 1px 1px #000;
      -o-transition: all 1.2s ease-in;
      -moz-transition: all 1.2s ease-in;
      -webkit-transition: all 1.2s ease-in;
}
.jump-link:hover a {
      color: red; 
      background: #66CCFF;
      font-size: 18px;
      -o-transform: translate(-40px) scale(1.1) rotate(-10deg);
      -moz-transform: translate(-40px) scale(1.1) rotate(-10deg);
      -webkit-transform: translate(-40px) scale(1.1) rotate(-10deg);
      text-decoration: none;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px; 
}
.jump-link a:active {
      color: #0000CC;
      background: #aaa;
      border:2px outset #333;
      -o-transition: all 0.2s ease-out; 
      -moz-transition: all 0.2s ease-out; 
      -webkit-transition: all 0.2s ease-out; 
}

How to save the CSS code :

Login to Blogger
Dasboard : Click "Design".
Design : Click "Edit HTML".
Edit HTML : find code below
]]></b:skin>.
Copy-Paste : Copy the CSS code and place it above the ]]></b:skin>.
SAVE Templates
Open your blog and see the results.

Click the link below to open the tutorial!

Tutorial: Animated Read More

Original tutorial by gubhug reyot

DEMO CSS3: Text Resizer Using CSS3 Transition

2010-09-26T15:29:00.000-07:00

Text Resizer: Click here!

This is a very simple text resizer. Built from the CSS code and short scripts. CSS3 also used with function to create an animated effect during the process of changing the size of the text. Text Resizer will convert the text in the scale of 90%, 100%, 105% and 110%. You can change this scale in different sizes by changing the scale values contained in the CSS code. The code looks like this:

font-size: ....%;

To read the tutorial and get the CSS code, javascript and XHTML Text Resizer, please click the link below:

Click the link below to open the tutorial!

Tutorial: CSS3 Text Resizer

Original tutorial by gubhug reyot

How to Make Image Post on Center of Position (Buat Gambar di Tengah-Center)

2010-09-24T16:08:00.000-07:00

The simplest way to make center position of the image

Use the following HTML code on the page post and widgets:

<img style="display: block; margin: 0 auto; text-align: center; width: 200px; height: 300px;" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />

Adjust the position and size of the image with CSS:

The second way will make the code more compact html. We can add some CSS code to make the image look more beautiful. CSS code that can be added such as border, border-radius, padding, drop-shadow (shadow box), background, hover and some CSS3 code to give the animation. CSS3 code that can be exploited mainly in the form of CSS3 transition-transformation.

Example-1 : img class="centerimg-1"
margin: 0 auto;

<style type="text/css">.centerimg-1 {
 display: block;
 margin: 0 auto;
 text-align: center;
}
</style>
<img class="centerimg-1" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)