All About Information and Technology: Tutorial Blog dan Tumblr

Showing posts with label Tutorial Blog dan Tumblr. Show all posts

Thursday, July 24, 2014

Tutorial Hover Link Pada Blog

Tutorial Hover Link Pada Blog
1.Dashboard > Design > Edit HTML > Tick Expand Widget 2.Tekan Ctrl + F Secara Serentak Dan Cari Code

a img {

3.Jumpe? Copy code dibawah ini dan pastekan dibawah code yang kalian cari diatas

a:active { text-decoration:none; color: #FEA3A8; text-transform:none; } a:visited { text-decoration:none; color: #000000; text-transform:none; } a:hover { text-decoration:none; color: #000000; border-bottom: #FEA3A8 dashed 1px; }

4.Preview , Then Save Easy Right?

Tutorial Border Pada Postingan Blog

Contoh :

Sebelum

Selepas

1.Dashboard > Design > Edit HTML > Tick Expand Widget Template

2.tekan Ctrl+F [serentak!] , cari code ini :

.post h3 {

ATAU

.post-title {

ATAU

h3.post-title {

3.Kalau Sudah Ketemu copy code bawah ini dan pastekan dibawah kode yg kalian cari tadi

text-align: center;

border-right: 5px solid #BDBDBD;

border-left: 5px solid #BDBDBD;

border-top: 1px dashed #BDBDBD;

border-bottom: 1px dashed #BDBDBD;

padding: 5px;

}

.post h3:hover{

border-radius: 5px;

border-right: 1px dashed #BDBDBD;

border-left: 1px dashed #BDBDBD;

background: url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic000demoji_406651decoojp.gif);

background-position:bottom right;

background-repeat:no-repeat;

-webkit-transition-duration: 3.5s;

}

4.Sila preview dulu.Kalau sudah benar.Terus SAVE!

Note

ABC - Code colour

ABC - Url Image Cute Icon

Tutorial Underline Hover Pada Blog

Tutorial untuk :
Underline hover , garisan akan bertukar warna apabila cursor menyentuh.

Ikut step ni :

1.Dashboard > Design > Edit HTML > Tick Expand Widget Templates

2.then tekan Ctrl + F [tekan serentak!] , Cari code ni

/* Header

3.Kemudian , copy code bawah ni..dan paste kan di ATAS code yang kalian cari diatas

u {

text-decoration:none;

border-bottom: 4px solid #F6358A;

padding: -3px;

}

u:hover {

border-bottom: 4px solid #F9A7B0;

padding: -3px;

}

PERHATIAN!
4px-tebal garisan
#F9A7B0-code warna

4.preview , kalau sudah benar kemudian SAVE.

Cara Menambah Background Pada Judul Postingan Pada Blog

yang warna pink itu background post entry i..

1. Login ke dashbord > Klik design > Klik edit HTML

2. Sila cari code di bawah..guna Ctrl F

.post-title {

Atau

.post h3 {

3. Kalau sudah dapat paste kan code yang dibawah ini

background: #000000 ! important;

Note : #000000 = Disi dengan kode warna, bisa dilihat DISINI

Selain itu kalian juga bisa menambahkan background didalamnya dengan code dibawah ini

background: url(URL GAMBAR ANDA) repeat;

Atau kalian bisa menambahkan code yang dibawah ini untuk border.

border: 1px solid #F21515;

Keterangan :
1px untuk ketebalan garis
solid boleh diganti dengan dotted atau dashed
#F21515 code warna

Bentuk Bentuk Border Dalam Blog

** Bentuk Bentuk Border Dalam Blog

Untuk Post Title : seacrh >> h3.post-title {

Untuk Sidebar Title : search >> h2 {

#Example_A {

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

#Example_B {

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

#Example_C {

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

#Example_D {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

#Example_E {

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

#Example_F {

-moz-border-radius: 35px;

border-radius: 35px;

Selamat mencoba :)

Tuesday, July 22, 2014

Tutorial Blockquote efek hover

Bentuk blockquote ini termasuk kesukaanku dan kodenya ingin aku simpan disini dan untuk berbagi dengan teman-teman kalau mau. Icon nya seperti yang ada pada gambar di atas. Oke deh mending kodenya segera aku tuliskan saja, tapi kalau sebelumnya sudah memasang blockquote harus di remove dulu.

Blockquote efek hover dengan icon bergerak:

1.Masuk Dashboard > template > edit HTML

2.Tick expand template widget dan tekan F3/CTRL +F dan cari kode:

.post-body blockquote { (letakkan di bawahnya)

atau

body { (letakkan di atasnya)

3.Copy paste kode di bawah ini:

.post blockquote {
background:#FCFCFC;
border-top: 1px dotted #4F4F4F;
border-bottom: 1px dotted #4F4F4F;
colour:#FFFFFF;
}
blockquote:hover{
background-image:url(URL ICON);background-position:bottom right;
background-repeat:no-repeat;
display:block;
padding:5px;
color:#CECEFF;
border-left:12px double #FF9797;
border-top:2px dotted #000000;
border-bottom:2px solid #FF95CA;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

Sunday, May 11, 2014

Tutorial Memasang widget twitter di tumblr

Memasang widget twitter di tumblr

Ini adalah alternatif untuk teman-teman yang ingin menampilkan tweet terbaru di tumblelog-nya, terutama untuk yang pakai theme yang tidak bisa menampilkan tweet terbaru.
1. Ke Twitter —> log in —> klik “About” —> klik “Resources” —> klik “Widget”. Atau kalau mau, setelah log in, langsung saja ke: http://twitter.com/about/resources/widgets.
2. Klik “My Website” —> pilih “Profile Widget”
3. Isikan username Twitter kita.
4. Klik “Preferences”, “Appearance”, dan “Dimensions” untuk mengatur bentuk widget yang kita mau (misal ukurannya, warnanya, dll.).
5. Scroll down, klik “Finish & Grab Code”.
6. Blok dan copy kodenya.
7. Ke Tumblr —> Customize —> Klik “Info”
8. Paste kodenya ke bagian “Description”.
9. Save. Selesai.
Catatan:
Pastikan theme yang dipilih sesuai untuk kita pasangi widgetnya, misal pilih theme yang ada sidebarnya alias yang description-nya ada di bagian sidebar, bukan di header. :)

Tuesday, May 6, 2014

Tutorial Animated Recent Post Widget Pada Blog

Berikut adalah cara-cara untuk menggunakan widget ini.
Tutorial Animated Recent Post Widget Pasa Blog

1. Dari dashboard > design > add a gadget > HTML/javascript

2. copy code berikut dan paste di ruangan HTML/javascript

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here<

Note: gantikan URL BLOG dengan url blog anda..

3. Save dan lihat hasilnya.

Friday, April 25, 2014

Kumpulan Background Blog Keren