Menambah lebar postingan blog

2014-01-24T02:01:00.001-08:00

kali ini saya akan membahas cara memperluas halaman postingan blog kita, terkadang halaman postingan yang telah ada, ini tidak sesuai dengan lebar yang kita inginkan. maka itu, timbul lah ide untuk mengganti lebar tersebut untuk bisa lebih lebar lagi. karna kemungkinan tidak cocok dengan kebutuhan artikel yang anda postkan. sehingga kelihatan sempit atau barangkali tidak bisa berleluasa untuk menambah gambar di samping kanan, atau kiri artikel tersebut. apa solusinya? tentu anda harus menambah lebar halaman post tersebut.

Untuk menambah lebar postingan tersebut tidak lah se-susah seperti yang anda bayangkan. kita hanya mengubah atau menambah lebar tersebut selebar mungkin yang cocok dengan keinginan kita. dan tentunya kita harus memikirkan juga apakah lebar yang akan ditambahkan tersebut, pas pada resolusi monitor yang kita gunakan. karna setiap monitor pasti berbeda. pada Umumnya resolusi monitor yang digunakan adalah 800 x 600, 1024 x 768, atau 1152 x 864 pixel. sekarang terserah anda menentukannya. tapi sedikit saya berikan gambaran terlebih dahulu tentang resolusi monitor tersebut.

Jika anda membuat lebar pada blog dengan resolusi monitor 1024 x 768 pixel misalnya, maka tampilannya bisa jadi kurang bagus ketika dibuka dengan resolusi 800 x 600 pixel. jadi sebaiknya lebih baik memakai resolusi 800 x 600 pixel saja. Besarnya resolusi monitor juga tergantung pada lebar blog yang kita buat. untuk blog nya sedikit, menggunakan resolusi besar bisa menyebabkan ketidaknyamanan pada saat melihat, karena akan banyak terdapat ruang yang kosong. Nah ada baiknya anda memikirkannya terlebih dahulu. dan ini juga tergantung pada diri anda sendiri.untuk menambah lebar postingan tersebut berikut ini langkah-langkah nya.

Login ke blogger
Klik Rancangan
Edit HTML
Nah untuk menambah lebar postingan, yang pertama anda harus menambah lebar dari halaman content blog tersebut. ini agar halaman postingan dengan sidebar bisa saling berdampingan. cari kode #content-wrapper {
Kalau sudah ketemu ganti ukuran content-wrapper tersebut minsalnya lebar content wrapper anda sebelumnya adalah 600px silah kan di tambah 200px sehingga menjadi800px, sebagai contoh lebih kurang seperti ini
#content-wrapper {
background:#ffffff;
width:800px;
........
}
Setelah langkah di atas sudah selesai, langkah berikutnya anda tinggal menambah lebar pada postingan blog anda. silahkan cari kode #main-wrapper {
Kalau sudah ketemu tambahkan juga 200px pada width yang terdapat disana. jika tadinya lebar #main-wrapper anda 400px, setelah ditambahkan akan menjadi 600px. sebagai contoh lebih kurang seperti di bawah ini
#main-wrapper {
width:600px;
word-wrap:break-word;
.........
}
Sekarang simpan template anda
Selesai....

Membuat menu tab view pada blogger

2014-01-24T01:12:00.000-08:00

anda bisa ikuti langkah2 berikut:

Login ke blog dengan ID anda
Pilih menu Rancangan » masuk ke Edit HTML
Cari kode ini ]]></b:skin>
Copy lalu paste kode berikut ini diatas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas*/
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000080; /* Warna Font Menu Utama Atas */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD; /* Warna background Menu Utama Atas */
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; /* Warna background Kotak Utama */
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian pasang kode berikut diatas kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
Kemudian klik Save Template
Masuk ke menu Page Elements
Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
Selesai

Sebagai catatan:

Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
Kode yang berwarn KUNING adalah teks pada menu utama di bagian atas.
Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.

Strip

Menambah lebar postingan blog

Membuat menu tab view pada blogger