[OOT] How to Make Blockquote + Blockquote Freebies

Source
Hello! One of our friends ask how to create a blockquote like mine. Karena saya dapat ilmunya dari orang lain, dan orang lainnya tidak keberatan ilmunya dibagikan, saya akan memberi tahu steps by steps :D Cukup gampang, asal kamu punya koneksi internet yang stabil, dalam satu menit kamu sudah akan selesai. Sebagai bonus, saya juga akan beri tutorial untuk membuat blockquote yang lain ;)



Firstly I want to say thank you to anugerahsalsa yang sudah memposting tutorial cara buat blockquote dan freebiesnya. Dia hebat banget, lebih muda dari aku tapi udah jago edit HTML dan pakai photoshop :’) Anyway dia pintar banget buat GIF, blog dia penuh freebies kamu pasti ketagihan edit blog kalau cek blog dia.

Tutorial Blockquote #1

tidak kena kursor
kena kursor

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>

Codes:

blockquote{ background:url(http://i.imgur.com/2qzVi.png); padding:10px; border-left:20px solid #E4F2C7; border-right:0px solid #E4F2C7; -webkit-transition: all 0.5s ease-in-out; -moz-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; color:#555; } blockquote:hover{ border-left:0px solid #F2EAC7; border-right:20px solid #F2EAC7; color:#555; }

How to Adjust code :
Merah: Kode warna border blockquote, gantikan dengan kode warna kesukaan-mu :)
Biru: Kode warna border blockquote hover, gantikan dengan kode warna kesukaanmu.


Tutorial Blockquote #2
tidak kena kursor
kena kursor

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>

blockquote{

background:url(http://25.media.tumblr.com/tumblr_mbamchIsvG1qhhbndo1_500.jpg);
padding:10px;
color:#000;
letter-spacing:1px;
border-radius:10px;
border:2px solid #ccc;
-webkit-transition: all 0.5s ease-in-out;
-moz-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;
text-shadow: -1px 0 fff, 0 1px fff,
1px 0 fff, 0 -1px fff;
}

blockquote:hover{
background:url(http://25.media.tumblr.com/tumblr_mbamchIsvG1qhhbndo1_500.jpg);
background-position:50% 50%;
}

How to Adjust code: 
Merah: URL background blockquote.

Hijau: kode warna border blockquote.

Tutorial Blockquote #3
tidak kena kursor
kena kursor (glowing)

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>


Codes:

blockquote{ background:url(http://3.bp.blogspot.com/-2A0D4wY8Rww/TzuO_pTu-zI/AAAAAAAACpQ/B9EkXNZ9C48/s1600/grey.png ); padding:10px; border-radius:10px; border-left:10px solid #CCC4FB; border-right:10px solid#CCC4FB; border-top:2px solid #DED9FC; border-bottom:2px solid #DED9FC; color:#808080; -webkit-transition: 1.0s; -moz-transition: 1.0s; font-family:calibri } blockquote:hover{ border-radius:20px; -webkit-transition: 1.0s; -moz-transition: 1.0s; -webkit-box-shadow: 0px 0px 8px #B0AAFF; -moz-box-shadow: 0px 0px 8px #B0AAFF; box-shadow: 0px 0px 8px #B0AAFF; }

How to Adjust code:
Merah : kode warna border kanan & kiri blockquote.
Biru : kode warna border atas & bawah blockquote.
Ungu : kode warna shadow blockquote.

Tutorial Blockquote #4
tidak kena kursor
kena kursor

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>


Codes:

blockquote{
background:#fff;
padding:10px;
color:#808080;
border-top:3px solid #ffd5d5;
border-bottom:0px solid #FF8D8D;
-webkit-transition: all 0.5s ease-in-out;
-moz-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;
}
blockquote:hover{
border-top:0px solid #ffd5d5;
border-bottom:3px solid #FF8D8D;
}


How to Adjust code: 
Merah: URL background blockquote.
Biru dan Hijau: kode warna border blockquote.

Tutorial Blockquote #5

tidak kena kursor
kena kursor

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>

Codes:

blockquote{
padding:10px;
display:block;
font:11px arial;
color:#ccc;
letter-spacing:1px;
border-radius:10px;
border:2px solid #FFE2E2;
-webkit-transition: all 0.5s ease-in-out;
-moz-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;
background-position:0% 0%;
background:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-size:0px;
}
blockquote:hover{
background:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-position:100% 100%;
background-size:80px;
color:#777;
}

How to Adjust code :
Merah : kode warna border blockquote.
Biru : Url emoticon blockquote. Bisa dapatkan disini  dan disini :)

Tutorial Blockquote #6 (like mine)

Blogskin/Classic Template: Copy kode-nya lalu, paste-kan di atas kode </style>
Template designer: Copy kode-nya lalu, paste-kan di atas kode ]]></b:skin>

Codes:

blockquote{ background:url(http://3.bp.blogspot.com/-2A0D4wY8Rww/TzuO_pTu-zI/AAAAAAAACpQ/B9EkXNZ9C48/s1600/grey.png); padding:10px; border:3px solid#ffd5d5; color:#808080; -webkit-transition: 1.0s; -moz-transition: 1.0s; } blockquote:hover{ border-radius:20px; -webkit-transition: 1.0s; -moz-transition: 1.0s; -webkit-box-shadow: 0px 0px 8px #ffd5d5; -moz-box-shadow: 0px 0px 8px #ffd5d5; box-shadow: 0px 0px 8px #ffd5d5; }

How to Adjust code:
Merah : kode warna border blockquote.
Biru : kode warna shadow blockquote.


See? Easy, right? Have fun editing, brosis! If you want to share this, please put credit ;)


5 komentar:

  1. Boomark ah, nanti mau nyobaaa, makasih udah sharing beginian ya :D hhe

    BalasHapus
  2. Sayangnya saya ngeblog ga di blogspot.

    BalasHapus
  3. Saya ijin ambil tutorial ya Mba :) maaf anonim saya males login...

    BalasHapus

Hello there my friends! Feel free to give your :
¤ Opinion
¤ Suggestion
¤ Critic
¤ Story link (so that we can give comment to each other stories!)
¤ Request (if you want me to write something, just ask!)
Remember, I’m also a struggling writer, so I’m perfectly imperfect. Your feedback are pleased =)