Cara Membuat dan Mempercantik Blockquot

Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog.  
Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger. blogquote juga sebagai penanda tulisan yang memang penting pada blog agar tampil lebih berbeda dan lain dari tulisan lainnya. kali ini blogquote menggunakan background gambar yang bisa anda coba pasang dan tampilkan pada blog anda.
Blockquote Gambar
 
Sama seperti yang ada di blog ini, kode css-nya :

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_pzUUmLyWZNVk9Ro2YLVS9EZM37moed9tx861DAL3msTuhlT1jkv8N1V3YdCMAa19gU4UPTPLefskUKk41U_OWlrnH2vMPGM5NxxLk7YDc_T4yIBaQu_YXII98xsHfMOVo-S9xi0KGMM/s400/quotes_icon.gif) no-repeat scroll 0 0;
color:#3B0B0B;
border:1px outset #FFF;
margin:10px;
padding:10px 10px 10px 36px
}

Hasilnya :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Keterangan :

• #F9F9F9 adalah warna background.
• padding:10px 10px 10px 36px --->> perhatikan saja yang 36px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 36px-nya.
• Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas,
kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

Blockquote Border dan Warna

Kode css :

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

Hasilnya :



Blockquote Tulisan Besar Pada Baris Pertama

Kode css :

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;
}
.post blockquote p:first-line {
font-variant: small-caps;
}

Hasilnya :



Blockquote Warna dan Model Tulisan

Kode css :

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

Hasilnya :


Berikut cara pemasangannya :

• Login ke blogger.
• Tuju Tata Letak.
• Pilih Edit HTML.
• Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
• Jangan Lupa Simpan Template.

Mudah-mudahan bermanfaat ya.

Membuat Blog Bg 2 'CSS'

Sebelumnya saya telah menjelaskan apa itu variable dan berfungsi sebagai apa pada pertemuan pembuatan blog bg 1 sebelumnya.. 
Okeh sekarang kita masuk kedalam bagian CSS pada blogger, pada bagian ini saya hanya menyampaikan bagian mana sajakah yang harus kita edit agar mendapatkan hasil yang seperti kita inginkan, CSS sendiri diibaratkan sebagai pemercantik dalam mendisain blog.
   
Pada bagian body kita dapat mengatur jenis font secara default yang dapat kita gunakan dalam pemrograman di blogger, selain itu kita juga dapat mengatur background resolusi dsb.

body {
background: #dedede url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbOt5fGvHHTdMQPAebz5YKouwEvk7Xy5iaF3fXwioejWbSMwdQDJmhmiQbbCjSXfD2RqJ1soas1QIsh4F0u18EEPAAtk4NBKuE7j5u1uJA6jG1O5FQV3AAnfXc5eNLuLttw-ivAsvjofcw/s1600/6Untitled-1.png) repeat-y scroll 0 0;

Scrip diatas digunakan untuk mendisain background dengan warna latar dan gambar, pada postingan sebelumnya saya telah menjelaskan beberapa tutorial.

min-height: 700px;
min-width: 1024px; 
max-height: 700px;
max-width: 1280px;
background-width:100%;

Saya menambahkan scrip min dan max resolusi yang digunakan pada blog yang anda buat, apabila anda menghiraukanyapun tidak apa, karena padaumunya blogger memiliki resolusi 920.

text-shadow: 0.02em 0.02em 0.03em rgb(191, 191, 191);

Saya juga menambahkan shadow pada text agar terlihat lebih indah dengan scrip diatas.

color:#333333;
font-family:Ubuntu;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Nah kalo scrip diatas digunakan untuk pengaturan jenis ataupun warna dan model font yang kita gunakan.

margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-align:center;

Pada scrip diatas terdata margin, margin adalah jarak enter antara baris. Sedangakan outline adalah pengaturan outline pada tulisan itu sendiri dan yang terakhir adalah text-align adalah posisi text dimulai secara default.

}

Pada sub program link ini berguna untuk memberikan efek warna pada text yang berupa link

a:link {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link.

}

Visited adalah untuk memberikan efek perubahan pada text apabila kita telah mengclick link tersebut.

a:visited {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link.

}

hover adalah untuk memberikan efek pada text apabila kita mendekati sebuah link. dengan turunan a:

a:hover {
color:#CC0000;
text-decoration:none;

Diatas terdapat warna dan text-decoration, text-decoration berfungsi untuk merubah tampilan pada link apabila kita mengarahkan.

}

Fungsi img untuk memberikan efek pada image.

a img {
border-width:0;

border-widh adalah ukuran besarnya garis yang akan ditampilkan pada bagian sisi-sisi image.

}

Fungsi ini dugunakan untuk mengatur tata letak judul blog anda, disini saya menaru judul blog saya pada bagian kiri.

#header-wrapper {
left:15px;
position:relative;

Left adalah posisi tulisan blog saya

top:-60px;

Top adalah psosisi tulisan saya terhitung dari bagian atas.

width:286px;

Width adalah lebar atau luas tulisan judul blog saya.

text-shadow: 1em 1em 3em rgb(191, 191, 191);

Saya juga menambahkan shadow pada text agar terlihat lebih indah dengan scrip diatas.

}

Fungsi header berfungsi untuk mengatur posisi judul blog anda ataupun warna secara default

#header {
color:white;

Color adalah warna font judul blog anda secara default

margin:5px;

margin adalah jarak judul blog anda secara default

text-align:left;
text-align berfungsi untuk mengatur letak atau rata text pada judul blog anda secara default
}

Fungsi header berfungsi untuk mengatur ukuran, jenis margin dan judul blog anda

#header h1 {
color:#FFFFFF;
display:block;
font-family:Ubuntu;
font-size:67px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

letter-spacing:-4px;
line-height:normal;
margin-bottom:0;
margin-top:45px;

Diatas merupakan pengaturan format text yang digunakan pada judul blog.

}

Fungsi header berfungsi untuk mengatur perubahan judul blog ketika menjadi link

#header a {
color:white;
text-decoration:none;
}

Fungsi header berfungsi untuk mengatur perubahan judul blog ketika menjadi link dan mouse di dekatkan

#header a:hover {
color:white;
}

Fungsi header berfungsi untuk mengatur deskripsi pada blog kita

#header .description {
color:white;
font-family:Ubuntu;
font-size:15px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

margin:-5px 0 0;

Diatas merupakan pengaturan format text yang digunakan pada judul blog.

}

Fungsi header img berfungsi untuk pengaturan format posisi gambar pada heder.

#header img {
margin-left:auto;
margin-right:auto;
}

Fungsi outer-wrapper berfungsi untuk mengatur lebarnya halaman yang akan kita gunakan pada blog kita fungsi.

#outer-wrapper {
float:left;
font-family:Ubuntu;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

Diatas merupakan pengaturan warna, ukuran serta model dan jenis font yang digunakan pada blog anda.

margin:0 auto;
position:relative;
text-align:left;

Diatas merupakan pengaturan format text yang digunakan pada blog kita.

width:980px;

Diatas merupakan pengaturan luas pada blog kita standar blogger adalah 920.

}

Main wrapper digunakan untuk mengatur tata letak seperti posisi posting pada blog anda, selain digunakan untuk mengatur postingan biasanya juga dugunakan untuk penempatan widget, footer dsb.

#main-wrapper {
float:right;
margin-top:-100px;

Scrip diatas digunakan untuk pengaturan posisi pada main-wrapper

overflow:hidden;
width:630px;

Scrip diatas digunakan untuk pengaturan lebar dari main-wrapper

}

Fungsi sidebar-wrapper digunakan untuk pengaturan widget pada blog anda, selain itu bisa juga digunakan untuk posisi header apabila kita ingin menarunya pada bagian ini.

#sidebar-wrapper {
color:#000000;

Scrip diatas digunakan untuk pengaturan warna latar pada sidebar.

float:left;
margin-left:30px;

Scrip diatas digunakan untuk pengaturan posisi pada widget.

overflow:hidden;
width:270px;

Scrip diatas digunakan untuk pengaturan lebar pada widget yang akan kita gunakan nanti.

} 

Fungsi h2.date-header digunakan untuk pengaturan data tanggal pada postingan yang kita gunakan.

h2.date-header {
padding-top:150px;
margin:1.5em 0 0.5em;

Fungsi diatas digunakan untuk mepengaturan posisi atau furmat yang kita gunakan pada postingan.

}

Fungsi .post digunakan untuk pengaturan secara default pada bagian post.

.post {
border-bottom:1px solid #CCCCCC;

Border-bottom adalah fungsi dimana kita akan membuat suatu garis pada bagian akhir post

margin:0.5em 0 1.5em;
padding-bottom:1.5em;

Fungsi diatas digunakan untuk pengaturan format post secara default.

}

Fungsi .post h3 adalah fungsi dimana kita mengatur warna, posisi serta model yang akan kita tampilkan pada bagian judul postingan.

.post h3 {
color:#CC0000;
font-size:22px;
font-weight:bold;
line-height:1.4em;
margin:0.25em 0 0;
padding-top:10px;
padding-bottom:20px;

Fungsi datas digunakan untuk pengaturan warna, ukuran, jenis serta format font yang akan tampil.

text-shadow: 0.1em 0.1em 0.2em rgb(204, 204, 204);

Adalah fungsi yang digunakan untuk memepercantik judul postingan berupa shadow.

background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDo0jxDTrGd8cBY94h5OJvjBKy0zcUu6qNabxHHyCM5OxOijqSeUhw2WipIOYQHbkPVGL3vY4uIRD6Dfnq3AeNuzfQhp6I75y9180DxqaVqZlqypaAaqg8J_2uzvgtfuRx47UZOoDVcxnf/s650/Untitled-1.png) right top no-repeat;

Fungsi diatas digunakan untuk menambahkan gambar pada judul postingan yang akan kita gunakan.

} 

Fungsi post-body adalah fungsi yang digunakan untuk menampilkan isi dari postingan.

.post-body {
color:#333333;
font-size:13px;
line-height:18px;
margin:0 0 0.75em;
}

Fungsi .post-body blockquote dan .post blockquot adalah fungsi yang digunakan untuk pengaturan blockquot pada postingan

.post-body blockquote {
line-height:1.3em;
}
.post blockquote {
background:#EEEEEE none repeat scroll 0 0;
font-family:georgia;
font-style:italic;
margin:1em 20px;
padding:10px;
}

Fungsi .post-footer adalah fungsi yang digunakan untuk pengaturan footer, footer sendiri ialah suatu fungsi yang mngatur tampilan pada bagian bawah blog anda, biasa digunakan untuk pengaturan widget, serta definisi si web itu sendiri.

.post-footer {
color:#999999;
font-family:Ubuntu;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-bottom:10px;
margin-top:5px;
text-transform:none;
}

Fungsi footerb merupan optional yang saya tambahkan pada pembuatan blog ini, footerb sendiri bersifat flexibel, dan footerb sendiri digunakan untuk pengaturan pada widget.

#footerb {
margin-top:50px;
}

Fungsi .post img adalah untuk pengaturan latar gambar yang akan tampil pada postingan blog

.post img {
border:1px solid #CCCCCC;

Fugnsi border adalah untuk memberikan garis yang mengelilingi gambar.

padding:2px;
}

Fugnsi .sidebar adalah fungsi yang digunakan untuk pengaturan wdoget secara default baik dalam segi ukuran font, warna dan format.

.sidebar {
color:#999999;
font-size:14px;
line-height:1.5em;
}

Fungsi .sidebar h2 adalah fungsi yang diguanakan untuk pengaturan judul postingan yang digunakan pada widget.

.sidebar h2 {
color:white;
font-family:Ubuntu;
font-size:21px;
font-weight:bold;
letter-spacing:0;
margin-bottom:5px;
text-transform:none;

Fugnsi diatas adalah fungsi yang berfugnsi untuk pengaturan warna font, jenis, model dan format pada widget.

}

Fungsi .sidebar a adalah untuk pengaturan format link pada widget

.sidebar a {
color:#999999;
}

Fugnsi .sidebar a adalah untuk pengaturan format link pada widget ketika mouse didekatkan.

.sidebar a:hover {
color:white;
}

Fungi yang digunakan untuk pengaturan widget yang digunakan

.sidebar .widget, .main .widget {
border-bottom:1px solid #666666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Fungsi navigation adalah fungsi yang digunakan untuk pengaturan latar pada navigasi atau menu pada blog kita.

#navigation {
background:#e4e4e4 none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan warna pada menu blog

height:35px;
line-height:35px;
margin-left:335px;
text-align:left;

Fungsi diatas digunakan untuk pengaturan format pada menu yang digunakan pada blog.

}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home

.homebtn {
display:inline;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link

.homebtn a {
background:#CC0000 none repeat scroll 0 0;
color:#F2F2F1;

Fungsi diatas digunakan untuk pengaturan warna font dan background

font-family:Ubuntu;
font-size:12px;
font-weight:bold;
letter-spacing:0;
padding:11px 50px 9px;

Fungsi diatas digunakan untuk pengaturan format, model dan jenis font yang digunakan

}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link pada saat mouse didekatkan.

.homebtn a:hover {
background:#CC0000 none repeat scroll 0 0;
color:#F2F2F1;
text-decoration:none;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu link.

.navitem a {
color:#191919;
font-family:Ubuntu;
font-size:12px;
font-weight:bold;
letter-spacing:0;
padding:11px 30px 9px;
}

Homebtn adalah fungsi yang digunakan pada menu navigation sebagai menu home link pada saat mouse didekatkan.

.navitem a:hover {
background:#757575 none repeat scroll 0 0;
color:#F2F2F1;
text-decoration:none;
}

Fungsi yang digunakan untuk pengaturan tata letak menu search

#search-wrapper {
margin-left:20px;
margin-top:-32px;
width:300px;
}

Fungsi Search input digunakan untuk pengaturan pada saat input pada seachbox

#search input {
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}

Fungsi yang digunakan untuk pengaturan menu search

margin:0;
padding:0;
position:relative;
}

Fungsi search-box digunakan untuk pengaturan dalam membuat search box pada blog anda.

#search-box {
background:#4B4B4B none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan background, maksud dari no-reparat scrol adlaah tidak terdapatnya scroolbar.

border:medium none;

Fungsi border adalah untuk menmpilkan garis yang mengelilingi box.

color:#939393;
display:block;
height:22px;
padding:6px 10px 5px;
width:236px;

Fungsi diatas adalah fungsi yang digunakan dalam pemberian warna, posisi dan ukuran lebar dan tingginya search box.

}

Fungsi search-button digunakan untuk pengaturan dalam membuat tombol search pada blog anda. Akan tetapi tombol seach tidak digunakan pada blog ini.

#search-button {
background:transparent url() no-repeat scroll 0 0;
border:medium none;
display:block;
height:35px;
left:256px;
margin:0;
position:absolute;
top:13px;
width:39px;
}
#search-button:hover {
background:transparent url() no-repeat scroll 0 0;
}

Footer-wrapper adalah fungsi yang digunakan untuk pengaturan background pada menu setelah postingan dan berada paling bawah pada blog yang kita buat ini.

#footer-wrapper {
background:#191919 none repeat scroll 0 0;

Fungsi diatas digunakan untuk pengaturan warna background yang digunakan pada footer.

clear:both;
height:110px;
line-height:50px;
margin-left:335px;
padding-left:20px;
text-align:left;

Fungsi diatas digunakan untuk pengaturan format latar pada footer.

}

Sebenarnya masih banyak lagi fugnsi dari CSS yang belum dielaskan, akan tetapi saya hanya menjelaskan bagian-bagian dari CSS yang pada umunya digunkan dalam pengeditan Blogger.

Semoga bermanfaat..

Read More Otomatis Blogger

Pertama anda masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.

Jangan lupa centang Expand Template Widget.

Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.

Masukan kode berikut tepat ditas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>

Belum selesai, cari lagi kode :  <data:post.body/>

Ganti kode  <data:post.body/>, dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Sampai disini lalu save template anda.

Selesai deh, untuk memastikannya coba lihat hasilnya.

Like Page Facebook Melayang Pada Blogger

Kawan blogger mungkin bingung bagaimana membuat like page facebook yang cocok buat blog anda..

Facebook merupakan pilihan utama yang paling mudah dalam saling berbagi informasi baik itu informasi sesama blogger, komunitas dan lain sebagainya..

Caranya mudah ko, kl kawan-kawan blogger menginginkan like page facebook melayang di blog anda, dan agar terlihat lebih indah dari pada sebelumnya.

Langkah pertama yang harus sahabat blogger lakukan hanya mengcopy pastekan kode dibawah ini..

1. Pertama sahaabat blogger pastinya login dulu, terus masuk ke tata letah
2. Tambah widget lalu pilih HTML / Java Script, terserah sahabat blogger ingin taru dimana widgetnya, oya kosongin aja judul widgetnya
3. Nah langkah terkhir sahaabt blogger hanya kopi pastekan kode dibawah ini..

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hXMYQKwEsn58IoRXEz5qPnJ18cWt8EZdRK1vi2N2-03jHsSYBolOyNo2it3Msdanxyb-6T0Pty8jCPxZDC-iRY6xnROw7CBneGx6HPAs_AX4b90d7kyBGRp62sUpC-VMCvNsTKpOxPRW/h120/Untitled-1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:30%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/adhielikepage&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://belajarintoday.blogspot.com/2013/02/like-page-facebook-melayang-pada-blogger.html" target="_blank">Blogger Widget</a></span></div></div>

Rubah kode yang berwarna biru menjadi alamat likepage facebook anda..

Membuat Blog Bg 1 'Variable'

Nah pada bagian ini kita dapat mengatur berbagai variable yang akan kita gunakan pada pemrograman blog blogger terutama pada bagian CSS nanti, setiap variable memiliki fungsi dan mana yang berbeda-beda dan tidak boleh menggunakan nama yang sama dengan bahasa pemrograman di blogger.

Disini saya telah membuat bebrapa variable dengan fungsi yang berbeda-beda sebagai berikut.

Fungsi navbar-iframe adalah untuk meampilkan pesan search secara default bawaan Blogger, disini biasanya pengguna blogger

tidak menginginkan untuk menapilkan menu tersebut, oleh karena itu kita akan menonaktifkannya dengan menggukan display:none;

#navbar-iframe {

display: none !important;

}

Variable bgcolor adalah set default warna yang nantinya kita dapat gunakan

<Variable name="nama variable" description="penjelasan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#ffffff">

Pada bagina ini anda akan membuat variable untuk mengatur baground pada blog anda baik dari segi ukuran dan model tampilan background blogger anda

<Variable name="nama variable" description="penjelasan" type="background"

color="$(body.background.color)" default="warna url(#) repeat-y fixed top center" value="warna url(#) repeat-y fixed top center"/>

Pada bagian atas terdapat repeat-y fixed top center maksudnya adalah mengatur tata letak posisi gambar yang akan ditampilkan

Contoh:

<Variable name="body.background" description="Body Background" type="background"

color="$(body.background.color)" default="#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OBk159vGeLuE0niiMtvOVwGzlzbaMcdQ0wKVgqvxHefN4RNzvkKQDMEgXMD7nhOaBGLjrxSXIn9Tvox_qcexKC7h8Gy5BDqGsMcoiysIBMnW_7vvYgx6skLM2fh5XHPMPQ0szUs7JmVT/s1600/5Untitled-1.png) repeat-y fixed top center" value="#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OBk159vGeLuE0niiMtvOVwGzlzbaMcdQ0wKVgqvxHefN4RNzvkKQDMEgXMD7nhOaBGLjrxSXIn9Tvox_qcexKC7h8Gy5BDqGsMcoiysIBMnW_7vvYgx6skLM2fh5XHPMPQ0szUs7JmVT/s1600/5Untitled-1.png) repeat-y fixed top center"/>

Fungsi tersebut digunakan untuk mengatur warna textcolor biasa digunakan dalam postingan blogger

<Variable name="nama variable" description="keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#333333">

Fungsi tersebut digunakan untuk mengatur warna link biasa digunakan dalam postingan blogger

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#5588aa">

Contoh:

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#5588aa">

Fungsi pagetitlecolor digunakan untuk memberikan warna pada judul postingan

<Variable name="nama variable" description="keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#fff" value="#ffffff">

Fungsi pagetitlecolor digunakan untuk memberikan warna deskripsi postingan

<Variable name="nama variable" description="Keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#cc6600">

Fungsi fariable border color digunakan untuk memberikan warna pada garis yang bebentuk table

<Variable name="nama varibale" description="Keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#cccccc">

Fungsi sidebarcolor adalah fungsi yang kita gunakan untuk memberikan warna title sidebar, atau gadget title yang kita gunakan

<Variable name="nama variable" description="keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#999999">

 Fungsi sidebartextcolor adalah fungsi yang kita gunakan untuk memberikan warna tulisan yang tampil pada sidebar, atau gadget yang kita gunakan

<Variable name="nama variable" description="keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#666666">

Fungsi visitedlinkcolor adalah fungsi yang kita gunakan untuk memberikan tanda berupa warna bagi pengunjung web yang telah membuka link tersebut

<Variable name="nama varibable" description="keterangan"

type="color" default="warna" value="warna">

Contoh:

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#999999">

Fungsi variable bodyfont adalah mengatur jenis font yang kita gunakan

<Variable name="nama variable" description="keterangan"

type="font" default="ukuran persen model, jenis" value="ukuran persen model, jenis">

Contoh:

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Fungsi variable headerfont adalah untuk pengaturan font pada judul judul web

<Variable name="variable name" description="keterangan"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Ubuntu,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Ubuntu,Verdana,Sans-serif">

Contoh:

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Ubuntu,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Ubuntu,Verdana,Sans-serif">

Fungsi variable pagetitlefont adalah untuk pengaturan font pada page title

<Variable name="nama variable" description="keterangan"

type="font"

default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

Contoh:

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

Fungsi variable deskcriptionfont adalah untuk mengatur jenis model dsb pada deskripsi blog

<Variable name="nama variable" description="keterangan"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif">

Contoh:

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif">

Fungsi postfooterfont adalah untuk mengatur font pada bagian bawah blog

<Variable name="nama variable" description="Keterangan"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif">

Contoh:

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Ubuntu, Verdana, Sans-serif">

Menghilangkan Tulisan 'Tidak Ada Posting'

Pernah menjumpai peringatan / pesan peringatan 'tidak ada posting yang sesuai dengan query anda,tampilkan semua posting' yang menjelaskan bahwa anda belum melakukan posting atau belum ada posting sama sekali?
Atau peringatan menunjukkan label yang sedang anda pilih seperti pesan 'Menampilkan entri terbaru dengan label Blogging. Tampilkan entri lawas / No posts match your query. Show all posts'? apakah anda Ingin merubah atau menghapusnya?

Perhatikan gambar dibawah ini:

---

---

Pesan seperti idiatas pasti akan muncul jika anda dalam membuat blog dan belum melakukan posting sama sekali,nah apakah anda ingin menghilangkannya meskipun belum melakukan posting?

Nah,satu lagi,jika anda menemukan pesan seperti gambar yang dibawah ini:

---

---

adalah sebuah pesan yang memberitahu anda bahwa anda sedang memilih salah satu label suatu blog,dan apakah anda ingin menghilangkannya juga?

Seklera blogger memang masing-masing ya,tapi saya disini akan menyampaikan sedikit info menarik bagaimana menghilangkan / menghapus / mengubah tulisan pesan 'Tidak Ada Posting Yang Sesuai Query Anda. No posts match your query. Show all posts.' sesuai penjelasan diatas.

Pertama,pilih Dashboard blog anda,kemudian pilih Tata Letak,selanjutnya pilih tab Edit Html,lalu contreng tulisan 'Expand Widget Template'.

Setelah itu,dengan bantuan Ctrl+F paa keyboard anda cari kode berikut:

<b:includable id='status-message'>

Sudah ketemu belum? klo sudah ketemu,lihat persis barisan kode-kode dibawah kode tersebut,dan pasti kode yang anda nanti akan jumpai akan seperti ini:

---

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>

---

Tinggal hapus kode tersebut dan ganti dengan kode:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Tulisan 'Tidak Ada Posting Yang Sesuai Query Anda' yang menjengkelkan sudah tidak tampil lagi pada blog anda.

Pengaturan Resolusi Background

 
Setelah beberapa lama mencoba mengatur background, tadinya sempat merasa berhasil karena telah mengaturnya dengan tepat dan baik, akan tetapi ketika suatu background pada suatu blog dihadapkan pada suatu resolusi yang berbeda, ternyata dapat mempengaruhinya.

Misalnya:

Anda menggunakan mode repeat scroll top center dan background-width:100%

dan anda memiliki resolusi background layar anda dengan 1024*768 maka backround ada akan pas bila resolusi monitor yang anda pakai 1024*768

 

dan apabila resolusi layar kita rubah menjadi 1280*800 akan memberikan efek gambar yang kurang baik dan memjadi melebar kesamping pada background blog dan mungkin gambar terlihat tidak sesempurna sebelumnya.

lalu bagaimana agar kita mendapatkan kualitas gambar yang baik dengan resolusi layar yang berbeda?

Disini kita kita bisa menggunakan mode repeat-y fixed top center

Tetapi akan memberikan sebuah raung kosong bila kita menggunkan kualitas gambar yang sama dengan sebelumnya.

Disini kita dapat menggunakan sesolusi gambar 1280*800 kemudian tambahkan perintah dibawah ini untuk memperbaikinya:

repeat-y scroll 0 0;
min-height: 768px;
min-width: 1024px;
max-height: 800px;
max-width: 1280px;

background-width:100%

bagai mana cara menggunakanya?

Masuk kedalam Template -> Edit HTML kemudian tekan CTRL+F pada browser, kemudian cari kode body {

Lalu ganti scrip background dengan:  

background: "kode warna background" url("link gambar") repeat-y scroll 0 0;

Dan Tambahkan:

min-height: 768px;
min-width: 1024px;
max-height: 800px;
max-width: 1280px;
background-weight:100%

Sehingga terlihat seperti ini:

body{
background: "kode warna background" url("link gambar") repeat-y scroll 0 0;
min-height: 700px;
min-width: 1024px;
max-height: 700px;
max-width: 1280px;
background-weight:100%
}

Jangan lupa juga untuk menambah ini pada bagian main-wrapper dan sidebar-wrapper

main-wapper

float: $startSide; 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

 sidebar-wapper

float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

Mengganti Background Blog

Untuk mengganti background blog dengan gambar sangatlah mudah. Tidak rumit dan cukup mengikuti langkah-langkahnya saja. Nah yang mau coba-coba untuk mengganti background blog kalian dengan gambar, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger kalian

2. Masuk ke Template lalu klik Edit HTML

3. Lalu klik Lanjutkan dan centang "Expand Widget Template"

4. Cari kode body {

5. Biasanya kodenya seperti ini:

body{

background: #ffffff;

color:#28261A;

font:12px verdana,arial,Sans-erif;

text-align:center;

}

6. Nah untuk mengganti warna background dengan gambar tinggal tambahkan url gambarnya, misalnya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4sZbKQTZqPcpZ_jHV16gjyyqvzs1Tz5vIe43Ruaaoy6BMTOE1LaacBfnsnkYQrrrQee3_EzhyrYgwKaLanjiYwqHKcQmD6qBqGDcDaxAoYO9cFR19Hf7jHipaCkDdpcc29eK2ubQ7WQ/s1600/484109_3522467269431_1325647375_n.jpg

Maka kalian cukup menambahkan url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4sZbKQTZqPcpZ_jHV16gjyyqvzs1Tz5vIe43Ruaaoy6BMTOE1LaacBfnsnkYQrrrQee3_EzhyrYgwKaLanjiYwqHKcQmD6qBqGDcDaxAoYO9cFR19Hf7jHipaCkDdpcc29eK2ubQ7WQ/s1600/484109_3522467269431_1325647375_n.jpg); repeat-x; pada background tersebut.

Paling tidak hasilnya seperti di bawah ini:

 

body{

background: #ffffff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4sZbKQTZqPcpZ_jHV16gjyyqvzs1Tz5vIe43Ruaaoy6BMTOE1LaacBfnsnkYQrrrQee3_EzhyrYgwKaLanjiYwqHKcQmD6qBqGDcDaxAoYO9cFR19Hf7jHipaCkDdpcc29eK2ubQ7WQ/s1600/484109_3522467269431_1325647375_n.jpg); repeat-x;

color:#28261A;

font:12px verdana,arial,Sans-erif;

text-align:center;;

}

7. Ada sedikit tips jika kalian ingin gambar background yang kalian pilih akan tetap walaupun sudah di scroll ke atas atau ke bawah asalkan gambar kalian termasuk gambar yang besar. Tinggal ganti repeat-x; menjadi repeat-x top left fixed;

Ataupun kalau gambar kecil ukurannya, bisa juga dijadikan penuh / besar dan tetap untuk background blog kalian. Caranya tinggal kamu rubah repeat-x; menjadi repeat scroll 0 0;

 

Sumber: http://fandimin.blogspot.com/2012/08/cara-mengganti-background-blog-dengan.html