Sunday, 22 September 2013

Assalamualaikum sobat.
Fuuh... akhirnya dapat inspirasi lagi nih untuk posting. Saya akan memberikan Tutorial Blog nih, ehheh seperti apa ya?? Yaitu Cara Membuat Heading Tag Menjadi Keren  Yuk langsung saja, saya akan memberikan CSSnya dan cara menggunakannya, Ada Berbagai macam Tags Heading jadi sobat tinggal pilih aja yang sobat suka.






Step:
  • Login Blogger
  • Masuk Ke Dashboard
  • Template → Edit Html
  • Cari Kode ]]></b:skin> Untuk mempermudah pencarian, sobat bisa tekan Ctrl+ F

Jika Sudah Ketemu, Sobat bisa pilih macam-macam Heading Tags Dibawah ini!!




 .post h4 {     background-attachment: scroll;     background-color:white;background-image: url("http://2.bp.blogspot.com/-GZCR82-F- bU/UTnAhdjJ9eI/AAAAAAAAbXI/Fy0CjGpYCMM/s1600/h2.png");     background-position: 4px 50%;     background-repeat: no-repeat no-repeat;     border: 3px solid;     border-radius: 60px 60px 60px 60px;     box-shadow: 0 1px 3px, 1px 1px 0 inset;     color: #333333;     font-family: inherit;     font-size: inherit;     font-size-adjust: inherit;     font-stretch: inherit;     font-style: inherit;     font-variant: inherit;     font-weight: inherit;     line-height: 1;     list-style: none outside none;     margin: 15px 3px;     outline: medium none;     padding: 3px 10px 3px 30px;     text-shadow: 0 1px 0;     text-transform: uppercase;     vertical-align: baseline; }





.post h4 {     background-attachment: scroll;     background-color: white;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUrLDwHY81epb5Rh4rWLYy4y6i89v83rlb4eqWu50cnh2uT3GSSzvQ-RnEM5vQXHmopLzVFSDOc6Mc4_Nygb25W6fwEeeHhgCFuBaJgCPBEGqA_3fmlNSqRKmcwXX9t72WXLSu1ZWcpE4q/s1600/h2.png");
    background-position: 0 50%;     background-repeat: no-repeat no-repeat;     border: 3px solid #0D7005;     border-radius: 14px 14px 14px 14px;     box-shadow: 3px 3px 3px #ABABAB;     color: #25991C;     font-family: Lobster,cursive;     font-size: 26px;     font-weight: normal;     margin: 0 0 1em;     padding: 0 1px 4px 34px;     position: relative;     text-shadow: 1px 1px 0 #000000;     text-transform: capitalize; }





.post h4 {border-bottom: 1px dotted #4E555A;border-top: 1px dotted #4E555A;color: #4E555A;padding: 3px;}






.post h4{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwiH1bYJXlZKNR4QqdYggvRgiv_hV1vCgm8_gAIEFof3b5a_a12E7eHnb9oTfSoc-q_TXhCLsgdMoAwUUYxSaogBnv4FXpBEg1HvK_VUD-LmT7QLjizoD9de3CYsUGSgbisyvGXWCcvqL/s1600/h2.png") no-repeat scroll 4px center transparent;border: 3px solid #C8C800;border-radius: 60px 60px 60px 60px;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;color: #A5A503;font-family: 'lobster',sans-serif;font-size: 19px;font-weight: bold;line-height: 1;margin: 15px 3px;padding: 3px 10px 3px 30px;text-shadow: 0 1px 0 #CCCCCC;text-transform: uppercase;}





.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmeZGdlmcBzYa4cA43BWOeLGy-XxWL9IjrNAyqQanJxjKXFs7MRTTBeVS8iPjKTxfSfxoo-14Kvc6ihO-jColPBRJZGyxXVn6BXYtHL45Lx88rfIlsQis9nUXOi6vJ9ERsc72LJZK6rZy/s1600/star.png") no-repeat scroll 5px center transparent;
clear: both;color: #662D2D;font-family: 'Oswald',sans-serif;font-size: 26px;font-weight: bold;line-height: 1.2;margin: 25px 5px;padding: 6px 10px 2px 40px;text-shadow: 0 1px 0 #CCCCCC;text-transform: uppercase; }



.post h4{color:#0080ff;border-top:1px dotted #0080ff;border-bottom:1px dotted #0080ff;padding:3px;}





.post h4{text-align: center;font-weight:bold;border:solid 5px #999c3b;font-size:14px;-moz-border-radius-topleft: 75px;-moz-border-radius-topright:75px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:75px;-webkit-border-top-right-radius:75px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:75px;border-top-right-radius:75px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:3px}





.post h4{text-align: center;font-weight:bold;border:solid 5px #0fc7ff;font-size:14px;-moz-border-radius-topleft: 75px;-moz-border-radius-topright:75px;-moz-border-radius-bottomleft:75px;-moz-border-radius-bottomright:75px;-webkit-border-top-left-radius:75px;-webkit-border-top-right-radius:75px;-webkit-border-bottom-left-radius:75px;-webkit-border-bottom-right-radius:75px;border-top-left-radius:75px;border-top-right-radius:75px;border-bottom-left-radius:75px;border-bottom-right-radius:75px;}





.post h4{line-height: 1em;color: #91b9ff;font-weight:bold;font-size: 17px;text-shadow:0px 0px 0 rgb(-365,-325,-255), 0px -1px 0 rgb(-620,-580,-510),0px -2px 1px rgba(0,0,0,1),0px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);}




.post h4{ font-size: 14px; font-weight: bold; text-shadow: 0px 0px 35px #000000;}




.post h4 {color:#0000ff;border-left:10px solid #0000ff;border-right:10px solid #0000ff;padding:3px 5px 3px 20px;border-radius:15px;-moz-border-radius:15px;box-shadow:0px 0px 13px #0000ff;-webkit-box-shadow:0px 0px 13px #0000ff;-moz-box-shadow:0px 0px 13px #0000ff;}.post h3, .post h4:hover {color:#f01a1a;border-left:10px solid #f01a1a;border-right:10px solid #f01a1a;box-shadow:0px 0px 13px #f01a1a;-webkit-box-shadow:0px 0px 13px #f01a1a;-moz-box-shadow:0px 0px 13px #f01a1a;}
Source Script

Keterangan:

Untuk Tulisan Berwarna Merah sobat bisa ganti dengan .post h2, .post h3, .post h5
sesuai selera sobat.

Cara Menerapkan Heading Tag
Sobat bisa lihat gambar dibawah ini

Atau Sobat bisa juga menggunakannya secara manual, caranya adalah berikut ini...
Klik Html didalam posting, Ingat!! Bukan Compose
kemudian, sobat tulis kode seperti ini 
<h2> Terserah sobat mau tulis apa </h2>
<h3> Terserah sobat mau tulis apa </h3>
<h4> Terserah sobat mau tulis apa </h4>
<h5> Terserah sobat mau tulis apa </h5>

Ingat!!
Heading Tag tidak akan terlihat disaat sobat menulis Artikel. Heading Tag akan muncul setelah Artikel telah di publikasikan.


Sepertinya sudah jelas Artikel hari ini yang dapat saya sampaikan.Jika kurang jelas, sobat bisa bertanya dikomentar!!

Jika Ingin Copas silahkan sertakan sumbernya!!

Share artikel ke: Facebook Twitter Google+ Linkedin Digg

31 comments

Tutorial yang bagus nie... Mantap gan..

Nice Share gan Di tunggu kunbal nya ppatz-garoet.blogspot.com :) ^_^

kenapa semua pada ikut" AHS ?
ckck..

- AHS - http://ah-shared.blogspot.com

Terima Kasih Sudah Share :3
Comment Back : http://uchiha-bunshin.blogspot.com/2013/09/cara-membuat-efek-kaca-pecah-dengan.html

Keren deh gan infonya.

thank gan informasinya sangat bermanfaat. :-d

Kalau saya lebih sering memakai tag h3 :)

hmm..
mangap saya udah bisa :p
tapi lumayan lah buat yang belum tahu.. b-(
Lanjutkan/.
Visit : www.anbi.us

Mangap gan , ane udah bisa :p
Tapi lumayanlah buat pembelajaran :)

Komenback ya :)
http://mora-official.blogspot.com/2013/09/jasa-dan-layanan.html

Thx Gan Infonyaa

Comment Back Yaa tuparev-cyber4rt.blogspot.com

kunbal sudah meluncur sob mksih ya!!

saya sih h3 h4 h5 sob :d

ya blh memang, masa gk boleh =))

Thanks semua atas kunjungannya cheer

Wah jadi keren ya mas tag headingnya :-D

Ini Yang Saya Cari cari Gan
comment http://info-sahabatku.blogspot.com/2013/09/cara-buat-random-post-dengan-scroll.html

wihhh, manteb nih gan,, ane coba dulu yah.. :d

Good!!
Ijin coba yaa!! :d :d

Bisa membuat blog kita lebih menarik lagi dan tentunya keren ya ? :D hehe

mantap sob tanks informasi nya

Info baru lagi nih sob... thanks

Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog

Copyright © 2013 - Ori By Djogz - All Rights Reserved

close