Modifikasi Tampilan Widget Label Blogger

Melanjutkan postingan terakhir saya tentangmodifikasi widget label blogger, InsyaAllah tutorialkali ini saya akan menyajikan style berbeda dariwidget label blogger dengan bantuan CSS3. Widget label blogger ini menggunakan penyeleksi extensively & cunningly untuk memanipulasi bentuk dengan CSS3 transform. Sedangkan gradien CSS3 digunakan sebagai background. Widget ini awalnya didesain oleh Jakob Cosoroaba, dan tutorial ini mencoba untuk mengkonversikannya agar dapat berfungsi untuk blogger.

Sebelum anda memodifikasi tampilan widget bloggerini, diblog anda harus sudah terpasang widget label dalam tampilan cloud dengan jumlah entri perlabel.

Baiklah berikut langkah-langkah modifikasi widget label blogger style 2.

1. Seperti biasa log ini ke akun anda

2. Pada dasbor klik template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatas kode tadi:

.label-size{
display: inline-block;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
}
.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}
.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}
.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}
.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}
#Label1 {height:210px !important;}

4. Simpan template dan lihat hasilnya pada blog anda!

Demikian tutorial modifikasi tampilan widget label style 2. Jangan lupa cek out modifikasi tampilan widget label blog style 1. Semoga bermanfaat!

Read More

Widget Popular Posts Dengan Multi Colored Style

Postingan kali ini masih seputar tutorial modifikasi widget popular posts, sebuah widget yang bertujuan untuk menampilkan postingan  yang sering dilihat/ popular posts berdasarkan page view. Popular posts kali ini akan kita modifikasi masih dengan penambahan CSS3 menjadi Popular Post dengan tampilan sembilan warna pada setiap title posts seperti tampilan screen shoot disamping ini:

Tertarik untuk menambahkan widget popular posts dengan tampilan multi color seperti diatas? Berikut tutorial pembuatannya:

Tahap Pertama:

1. Seperti biasa login ke akun anda.
2. Pilih edit HTML >> Cari kode ]]></b:skin>
3. Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan.

Tahap Kedua

1. Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
2. Simpan dan lihat hasilnya diblog anda!

Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.

Read More

Membuat Dua Kolom Elemen Halaman Tambah Gadget Dibawah Kolom Posting

Baiklah silahkan ikuti langkah-langkah berikut:

• Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML (Jangan ceklis Expand Widget Template).
• Kemudian cari kode berikut atau yang serupa:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>

• Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

Sampai pada point ini, Anda dapat melihat preview template atau pratinjau tapi kolom masih terletak disebelah kiri bukan pada posisi tengah. Untuk itu anda perlu menambahkan lagi kode CSS berikut untuk menjadikan kedua kolom berada pada posisi tengah.

• Carilah kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}

Anda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll, silahkan berkreatifitas!

• Jangan lupa klik preview atau save template untuk segera melihat hasilnya.

Jika anda berhasil mengikuti setiap langkah diatas maka pada bagian Tata letak anda akan melihat dibawah kolom posting seperti screen shoot berikut:

Demikian tutorial menambahkan elemen halaman tambah gadget dibawah kolom posting. Semoga bermanfaat!

Read More

7 Alasan penting mengonsumsi labu mulai dari sekarang!

Labu tidak hanya memiliki rasa yang enak. Namun buah yang kurang populer ini ternyata memiliki banyak nutrisi dan vitamin yang penting untuk kesehatan Anda. Satu porsi labu seminggu sekali dapat membantu Anda untuk menjaga kesehatan.

Berikut adalah 7 manfaat labu bagi kesehatan seperti dilansir dari magforwomen.com.

Menyehatkan pencernaan
Labu kaya akan serat yang dapat membantu menyehatkan pencernaan. Memasukkan labu sebagai salah satu menu dalam program diet Anda dapat menghindarkan Anda dari masalah pencernaan seperti sembelit.

Baik untuk kesehatan tulang
Kandungan kalsium di dalamnya baik untuk kesehatan tulang. Labu juga membantu untuk mengurangi rasa sakit pada tulang yang disebabkan oleh penyakit arthritis osteoporosis.

Mencegah kanker
Labu tinggi akan karotenoid dan seng yang dapat membantu tubuh untuk mencegah berbagai macam jenis penyakit kanker. Tingginya karotenoid dapat mengurangi resiko kanker prostat.

Membangkitkan semangat
Labuh baik untuk mengobati depresi karena benih labu kaya akan trytophan dan asam amino yang dapat meningkatkan mood Anda. Selain itu labu juga dapat meringankan rasa sakit di dalam tubuh.

Meningkatkan kekebalan tubuh
Labu dapat meningkatkan kekebalan tubuh karena kandungan vitamin C di dalamnya cukup tinggi. Labu juga dapat berfungsi untuk detoks di dalam tubuh.

Baik untuk kesehatan jantung
Labu dapat mengatur kadar kolesterol karena kandungan pitosterolnya.

Memperbaiki masalah pernapasan
Sebagai salah satu bahan makanan yang mengandung zat antioksidan, labu juga mampu untuk meredakan asma dan membantu Anda untuk memiliki pola pernapasan normal.

Labu ternyata memiliki banyak manfaat untuk kesehatan tubuh. oleh karena itu jangan ragu untuk menjadikan labu sebagai salah satu menu sehat Anda.

Read More

11 Makanan ini rata-rata hanya mengandung 100 kalori

Untuk menjaga kesehatan dan keindahan bentuk tubuh, sebagian besar dari Anda menghindari makanan berkalori tinggi dan menggantinya dengan makanan sehat dan alami yang lebih memiliki banyak nutrisi daripada kalori.

Tetapi memilih-milih makanan yang mengandung 100 kalori dapat menjadi hal yang sangat merepotkan. Berikut ini adalah makanan yang mengandung 100 kalori seperti dilansir dari indiatimes.com.

Salad buah
Semangkuk salad buah dengan berat sekitar 32 gram dapat mengandung 100 kalori. Salah satu hidangan penutup ini kaya akan vitamin, mineral, dan karbohidrat kompleks yang dapat memberikan suntikan energi secara instan.

Popcorn
Popcorn adalah salah satu contoh makanan yang rendah kalori. Popcorn juga mengandung serat yang dapat menghindarkan Anda dari penyakit sembelit. Sekitar 348 gram popcorn tanpa lemak mengandung 100 kalori.

Telur
Telur adalah sumber protein yang baik. Sebutir telur rebus mengandung 100 kalori.

Susu atau produk olahan susu
Jika Anda adalah seorang pecinta produk susu atau produk olahan susu Anda dapat bergembira. Sekitar 100ml susu skim mengandung 100 kalori dan sekitar 150ml buttermilk juga mengandung kalori yang sama.

Air kelapa
Air kelapa adalah salah satu minuman yang rendah karbohidrat dan gula. Air kelapa juga mengandung senyawa organik yang membantu kestabilan suhu tubuh dan dapat menghindarkan tubuh dari dehidrasi. Sekitar 175ml air kelapa mengandung 100 kalori.

Buah-buahan kering dan kacang
Ada begitu banyak nutrisi yang bisa Anda dapatkan dari mengonsumsi buah-buahan kering dan kacang. Apabila Anda mengonsumsi 5-6 buah kacang almond, maka hanya 100 kalori yang Anda dapatkan.

Sup
Sup adalah salah satu contoh makanan sehat. Sekitar 225ml sup tomat mengandung 100 kalori.

Bit
Bit mengandung banyak nutrisi yang dibutuhkan untuk kesehatan tubuh. Apabila Anda mengonsumsi sekitar 225 gram bit maka kalori yang Anda dapatkan adalah 100 kalori.

Wortel
Salah satu contoh sayuran yang baik utnuk kesehatan mata ini mengandung 100 kalori setiap 200 gramnya.

Apel
Sebutir apel sehari dapat menghindarkan Anda dari berbagai macam penyakit karena berbagai macam nutrisi yang dikandungnya. Mengonsumsi 175 gram apel mengandung 100 kalori.

Jeruk
Jeruk adalah salah satu buah terbaik karena mengandung banyak vitamin yang dapat melindungi tubuh dari berbagai macam penyakit berbahaya. Setiap 200 gram jeruk mengandung 100 kalori.

Memilah dan memilih makanan memang sesuatu yang merepotkan. Namun beberapa contoh makanan di atas dapat menjadi panduan bagi Anda yang sedang berdiet dan mencoba mengurangi kalori yang Anda konsumsi.

Read More

Cara Memasang Jam Digital SpongBob Yang Lucu Dan Imut Di Blog

SpongBob adalah salah satu tokoh kartun yang banyak di sukai oleh anak-anak dan orang dewasa. SpongeBob diciptakan dan dirancang oleh seorang kartunis yang bernama "Stephen Hillenburg" pada tahun 1996. SpongBob adalah tokoh kartun yang sangat na'if dan konyol yang bekerja sebagai seorang juru masak di sebuah kota di bawah laut. Kota tersebut bernama "Bikini Bottom". Untuk lebih jelasnya tentang siapa dan bagaimana SpongBob, silahkan kunjungi URL berikut : http://en.wikipedia.org

Buat sobat blogger yang suka sama SpongBob, hari ini saya akan membagikan sobat blogger sebuah widget SpongBob yang sangat lucu. Widget ini tidak hanya menampilkan lucunya SpongBob, tetapi juga menampilkan sebuah jam digital yang dipegang oleh SpongBob. Widget ini sering disebut dengan nama SpongeBob Clock Widget.

Cara Memasang SpongeBob Clock Widget

1. Log In di www.blogger.com
2. tata letak >> tambahkan gadget >> html/javascript
3.  copy code berikut dan klik simpan 

<a href="http://www.tutorialblogspot.com/"></a>

<center> <embed src=http://www.swfcabin.com/swf-files/1305682786.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=150 height=127 wmode=transparent></embed><noembed><a href=http://www.tutorialblogspot.com/></a></noembed></center>

Read More

Mengedit Label Dengan Tampilan Cloud

sekarang akan saya bahas. Mau tahu bagaimana uniknya? Silakan simak lebih lanjut dan bila perlu coba pada Blog sobat.
Sedikit penjelasan tentang hasil dari modifikasi widget Label kali ini. Setiap nama label akan dilingkari dengan border berwarna. Dan ketika cursor disentuhkan pada salah satu nama label, maka warna border akan berubah serta nama dengan border akan berputar kurang lebih seperempat lingkaran.
Perhatikan screenchot hasil modifikasi-nya di bawah ini.

Bagaimana? dengan sobat melihat screenshot diatas, apakah tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah berikut ini:

Pertama yang harus dilakukan adalah sobat memasang dulu widget Label pada Blog sobat, tentunya dengan tampilan cloud.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih Widget Label dan silakan sobat bisa atur sendiri tampilanya. Namun jangan lupa, sobat harus memilih tampilan cloud.

5. Klik simpan, sobat telah berhasil memasang widget Label Cloud pada Blog sobat.
Kini sobat mulai untuk mengedit tampilanya agar lebih unik dan menarik.
6. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #ADFF2F; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix(                     M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a  { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover  { text-decoration: none;

   

Ubahlah kode berwarna merah dengan kode warna yang sobat inginkan. Kode ini merupakan warna awal border yang melingkari nama Label.
Ubahlah kode berwarna biru dengan kode warna yang sobat inginkan. Kode ini merupakan warna pada nama Label yang sedang disentuh kursor.

Read More

Cara Membuat Laman Navigasi di Blog

1. Login ke Blogger.
2. Pilih Templete untuk mengakses halaman Edit HTML,
     dan centang tulisan expand template widget.
3.  Carilah Kode ]]></b:skin> menggunakan CTRL+F.
4.  Letakkan kode berikut tepat diatas kode ]]></b:skin>.  




<a href="http://www.tutorialblogspot.com/"></a>

  /* Horyzontal Droupdown menu<br /> ----------------------------------------------- */<br /> #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3BnTZFn_Ey668hAyKdkPJyYbAXv-d6enaRKJHVVcRYLT76onKh9werHgk1indfOpRpA637XmGtLoBwA30bVvVnCDecm6uGgJCvu2q-_kB01BRtNXvsjPCpH7Q9TOGEqW4Z1TgiRU_g8/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}<br /> #topbar{width:980px;height:40px;margin:0 auto}<br /> #top{width:100%}<br /> #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}<br /> #top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}<br /> #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwh7Z6aCG7R2t2N1V_RiOfjElcBDPiiqtlFiVtl9KQMq5ORSrd7iHKKWxEKnzKgPA50Dd_XlAs_iRJ8zmxjdmz_w3Otmuq_7QJYQRscyN5PIT-IH2TJTV1CgbQ08xrmiJVrD3T9r3ksg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}<br /> #top li{float:left;position:static;width:auto}<br /> #top li ul,#top ul li{width:170px}<br /> #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}<br /> #top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}<br /> #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}<br /> #top li:hover ul,#top li.hvr ul{display:block}<br /> #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}<br /> #top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}<br /> #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}<br /> #top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}<br /> #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}<br /> <br /> .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}<br /> .clearfix{display:inline-block}<br /> #inner{padding-top:40px;}<br /> #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}<br /> #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}<br /> * html, * html body{overflow-y:hidden;height:100%;}<br /> * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }<br /> * html #fixedinner{margin-right:17px;}<br /> * html #fixed {position:absolute;}  <br /> <br />  
5. Angka warna merah pada kode diatas adalah ukuran panjang menu pada blog anda.

6. Tata letak >> tambah gadget (dimana saja) >> Html/JavaScript

7.  Letakkan kode berikut

<div id='fixed'> <div id='fixedinner'> <div id='top-wrapper'> <div id='topbar'> <ul id='top'> <li><a href='/'><span>Welcome</span>Homepage</a></li> <li><a href='#'><span>This is</span>About Us</a></li> <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> </ul> </li> <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> </ul> </li> <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a><br /> <ul> <li><a href='#'>Sub menu 1</a></li> <li class='hr'/><br /> <li><a href='#'>Sub menu 2</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 3</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 4</a></li> <br /> <li class='hr'/><br /> <li><a href='#'>Sub menu 5</a></li> <br /> </ul> </li> </ul> <br class='clearit'/><br /> </div> <div style='clear:both;'/> </div> </div> </div> <br>                     

8. Untuk memasukan url pada submenu diatas,ganti kode '#' dan selipkan url anda pada tanda pagar
     tersebut.
9.  Sekarang simpan template anda.

Read More

Cara Membuat Menu Navigasi Dengan Animasi

JQuery - Tampaknya menu navigasi ini sangat keren, dengan animasi pastinya nambah keren lagi. Kamu bisa menerapkan ini di blog dengan mudah, namun Anda tidak boleh edit CSS kode nya agar berhasil. Menu ini Blazer Blog dapatkan dari www.devirtuoso.com.

LIHAT DEMO

Cara Pertama:

1. Login ke blog kamu.

2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/* Div Wrapper */
#menuBar{
    /* Hide text that goes beyond
       the bottom of the wrapper */
    overflow:hidden;
 
    /* Give wrapper background image */
    width:503px;
    height:102px;
    background: transparent url(https://lh5.googleusercontent.com/-35weoKqLCtI/UGLffqVYtiI/AAAAAAAAFnU/UBy-L4-5kuM/s503/bar.jpg) no-repeat scroll left top;
 
    /* Center menu on page and give it a border */
    margin:0 auto;
    border:10px solid #111;
}
#menuBar ul{
    /* Center menu inside wrapper */
    width:380px;
    margin:0 auto;
 
    /* Get rid of bullets */
    list-style-type: none;
}
#menuBar ul li{
    /* Make menu horizontal */
    float:left;
 
    /* Add spacing between menu items */
    padding-right:40px;
 
}
#menuBar a{
 
    /* Give each menu item a background image */
    width:55px;
    height:102px;
    display:block;
    background: transparent url(https://lh5.googleusercontent.com/-YQA8S8-VJGo/UGLfktfY-UI/AAAAAAAAFnc/kslfGZTu63s/s503/logos.jpg) no-repeat scroll left top;
    /* Push text down below bottom of wrapper*/
    padding-top:100px;
 
    /* Beautify Text*/
    color:#ddd;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    font-size:10pt;
    font-weight:bold;
    outline:none;
}

#menuBar a:hover{
    /* change background image for rollover state */
    background-image:url(https://lh6.googleusercontent.com/-J3e-zxNABXQ/UGLfpr_RZkI/AAAAAAAAFnk/4DORq-4EOHw/s503/logos-over.jpg);
}

/* Position each background image accordingly
   to display icons */
#menuBar a#Home{
    background-position:-67px top;
}
#menuBar a#About{
    background-position:-166px top;
}
#menuBar a#Gallery{
    background-position:-266px top;
}
#menuBar a#Contact{
    background-position:-373px top;
}
</style>
<div id="menuBar">
        <ul>
            <li><a href="ADD URL BLOG KAMU" id="Home">Home</a></li>
            <li><a href="ADD URL" id="About">About</a></li>
            <li><a href="ADD URL" id="Gallery">Gallery</a></li>
            <li><a href="ADD URL" id="Contact">Contact</a></li>
        </ul>
    </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("a").mouseover(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"78px"}, 100);
    }).mouseout(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"100px"}, 100);
    });
});
</script>

3. Simpan.

Cara Kedua (Gunakan cara ini jika cara pertama gagal atau ada kekacauan):
1. Login ke blog kamu.
2. Pilih Template > Edit HTML.
3. Dan sekarang jika kamu ingin meletakannya di bawah header, kamu cari kode bagian header blog kamu, biasanya kaya gini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Untuk mempermudah mencari nya cukup cari kode <div id='header-wrapper'>
Dan kode yang berwarna biru adalah akhir kode bagian header suatu blog.

4. Setelah sobat menemukan kode di atas letakan kode nomor 2 pada Cara Pertama tepat di bawah kode yang berwarna biru. Jangan langsung disimpan, klik dulu pertinjauan apakah berhasil tidak, kalau berhasil baru simpan.

Read More

Kumpulan-Kumpulan Icon Keren

Kumpulan-Kumpulan Icon - Kamu mau icon menarik yang cantik dan keren, jika mau saya akan berikan nih, berbagai jenis icon dan berbagai ukuran nya, tapi sebelumnya kamu harus tau dulu sesuatu yang penting yah
Icon ini berfungsi untuk mengganti Favicon Blog kamu, Memberi Background pada widget, memberi gambar pada widget, nah jika kamu ingin memiliki Icon yang keren saya disini kasih contoh tinggal kamu salin URL Gambar nya, atau bisa lihat langsung sumbernya  http://www.iconarchive.com

Icon 16x16

Icon 32x32

Icon By http://www.iconarchive.com

Silahkan kamu pilih Semaumu

Dan kalau pingin lengkap silahkan lihat situs nya.

Read More

Kode Warna

Read More

Cara Mengganti Tulisan "Poskan Komentar" Dengan Gambar di Blog

Tutorial blog - Kali ini saya akan membahas cara mengganti tulisan poskan komentar dengan gambar di blog. Bagi Anda yang bosan dengan tulisan tersebut dan berniat untuk menggantinya, disini Blazer Blog akan kasih tutorial nya.

1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Tempalte.
3. Cari kode

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

4. Setelah ketemu ganti kode di atas dengan kode di bawah ini (pilih salah satu saja).

GAMABAR 1

<img src="http://4.bp.blogspot.com/-VKsbM1fOKhw/UAq8e1KZ78I/AAAAAAAAEVI/19WqON5j5AM/s1600/comment+cloud.png" />

GAMBAR 2

<img src="http://3.bp.blogspot.com/-9LeIWFl6Zvk/UAq8qnQRnpI/AAAAAAAAEVQ/tlDwriE0gnw/s1600/comment+here+flowers.png" />

GAMBAR 3

<img src="http://4.bp.blogspot.com/-Ww7olREOYY4/UAq8r1NfT1I/AAAAAAAAEVY/KJUYYyMyxAA/s1600/PostAComment+(6).png" />

GAMBAR 4

<img src="http://1.bp.blogspot.com/-ENIB9bgeb8A/UAq8ttCqf_I/AAAAAAAAEVg/SCQzdU8ta-s/s1600/PostAComment+(2).png" />

GAMBAR 5

<img src="http://3.bp.blogspot.com/--xW4OujM2JE/UAq8w-MIvwI/AAAAAAAAEVo/dVZSRSV46UE/s1600/PostAComment.png" />

GAMBAR 6

<img src="http://3.bp.blogspot.com/-iKEIa-EBGoc/UAq8y3XdcOI/AAAAAAAAEVw/yZUbjVljfeA/s1600/PostAComment4.png" />

Read More