ebook readers

Tips utak atik template Minima blogger


Blogger/blogspot memang telah menyediakan layanan untuk editor template walaupun masih sedikit template yang disediakan untuk di edit.... tapi kita perlu tau juga dong gimana untuk membuat template jadi lebih manis... wkwkkw... nah setelah surfing sambil mengumpulin ilmu saya berniat untuk bagi bagi ilmu saya yang masih sedikit ini disini.

Kenapa pilih template minima? karena lebih gampang pengeditannya... hehhehe, selain itu hasilnya bisa jauh lebih bagus dari template classic lainnya... dark minima atau white minima mirip mirip juga kok... pilih aja mau yang mana... tapi berhubung saya juga blom jago jago amat, jadi kalau ada beberapa kesalahan mohon di kasih tau yah... biar ngga menjerumuskan gitu.. hehhhe

Ok mulai dari yang paling simpel dan sederhana dulu, yah
Asumsi saya dashboard temen temen pake bahasa inggris, dan saran saya jangan pake blog kesayangan, bikin aja blog baru buat latihan.


diharapkan temen temen mencentang expand widget.
1. Cara Merubah lebar sidebar, header dan konten blogger

Pertama untuk header, masuk ke layout, edit HTML, cari kode #header-wrapper bagi pengguna firefox tekan f3 aja, trus masukin kata yg dicari di sudut kiri bawah browser. setelah itu ganti width nya dengan ukuran yang temen inginkan. header wrapper adalah kotak yang mengelilingi header blog temen temen

kedua sidebar, dihalaman edit HTML cari kode #sidebar-wrapper,rubah widthnya sesuai kebutuhan, tapi sebelumnya sebaiknya rubah dulu width dari #outer-wrapper sesuaikan dengan kebutuhan (sebaiknya ukuran sama dengan header), outer wrapper adalah kotak yang mengelilingi header, sidebar dan konten blog temen temen,

ketiga untuk konten. masih di halaman edit HTML cari kode #main-wrapper, trus rubah widthnya... simpel kan.. (hehhehhe dah kayak guru aje).


berikutnya adalah


2. Cara merubah model border kotak table pada blogger

table memiliki border (bingkai) dengan berbagai macam model dalam html atau pun css.
pada template minima jika border tidak ditulis maka dianggap nol alias tidak ada border atau bingkai... sebagai contohnya silahkan temen temen cari kode #outer-wrapper pada halaman edit HTML kemudian tambahkan kode border: 1px solid $bordercolor; dibawah kode #outer-wrapper { kemudian preview, pasti disekililing blog temen temen akan muncul garis abu abu, cara merubah warna garis itu temen temen bisa mengganti $bordercolor dengan kode warna lain misalnya #000000 adalah hitam atau #FFFFFF adalah putih ada juga beberapa bahasa inggris warna yang diterima contoh, blue, red, black, cyan, white, dll.
untuk merubah ukuran border ganti saja 1px jadi berapapun misalnya 20px (hehehe).

beberapa model untuk border selain SOLID adalah:
- dashed
- thin
- dotted
- outset
- groove
- double

yang saya tau baru segitu hehehhe, lainnya bisa dilihat di macromedia dreamweaver, atau keluaran adobe juga boleh... silahkan di coba. selanjutnya kita bicarakan tentang.



3. Cara Custom background Template minima Blogger

Untuk merubah warna background cari kode body { kemudian pada bagian background:$bgcolor; $bgcolor; ganti dengan kode warna seperti pada tutor no 2 tadi. ini bisa juga difungsikan dalam sidebar, konten, atau header... tinggal pastekan saja kode background:$bgcolor; dibawah #sidebar-wrapper{ atau #header-wrapper{ atau #main-wrapper{
Jika temen temen ingin memberikan gambar atau foto sendiri, upload gambar temen temen bisa pada photobucket.com atau bisa juga upload di blog. kemudian pada background hapus kode background:$bgcolor; lalu ganti dengan background:url(http://url_gambar_punya_temen_temen.gif); gambar akan otomatis di repeat sesuai dengan besar resolusi monitor... untuk menghindari pengulangan gambar tmbahkan saja kode no-repeat sebelum titik koma jadinya begini background:url(http://url_gambar_punya_temen_temen.gif) no-repeat; kalau maunya direpeat horizontal ganti no-repeat dengan repeat-x kalo vertikal yah repeat-y
Ok berikutnya



4. Mengatur teks judul postingan
  • Untuk rubah warnanya : bisa dari layout --> font and color.
  • Buat ganti warna background judul postingannya : masuk ke layout --> edit HTML kemudian cari kode .post h3 kemudian pastekan kode ini dibawahnya background:#red; silahkan temen temen ganti red dengan warna yang disukai.
  • Memasang image untuk background judul postingan : sama seperti diatas tapi kali ini pastekan kode ini background:url(http://url_gambar_punya_temen_temen.gif) no-repeat; sesuaikan dengan keinginan.
  • Merubah warna atau model teks judul ketika didekatkan dengan pointer: Masih dalam halaman edit HTML cari kode .post h3 strong, .post h3 a:hover { hapus kode yang berwarna biru kemudian pastekan kode ini diatas kode kode tadi:
.post h3 a:hover {
color:$textcolor;
}

Pastekan kode kode ini dibawah kode .post h3 a:hover { sesuai dengan yang temen inginkan :

Huruf tebal : font-weight:bold;
Huruf miring : font-style:italic;
Rubah jenis font : font-family:'Tahoma', times new roman; boleh ganti sesuka hati.

teknik ini juga bisa digunakan di kode .post h3 silahkan di coba.

Selanjutnya kita bahas tentang.



5. Cara Menghilangkan Navbar Blogger

Sebenar sudah pernah dibahas disini, tapi biar jadi paketan tipsnya dibahas ulang aja hehehe..
dihalaman edit HTML pada dibawah kode <body> langsung pastekan kode ini

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Kalau cuma mau hide doang kesini aja liatnya http://www.gudangrusak.com/2009/11/bisakah-menghilangkan-navbar-blogger.html



6. Cara menghilangkan atau mengganti teks older/newer post

Pada halaman edit HTML cari kode <data:newerPageTitle/> hapus untuk menghilangkan newer post atau ganti sesuka kamu,

kemudian cari kode <data:olderPageTitle/> hapus untuk menghilangkan older post atau ganti sesuka kamu,

untuk teks home cari kode <data:homeMsg/> kemudian hapus untuk menghilangkan older post atau ganti sesuka kamu,

jika ingin menggunakan gambar kode kode diatas ganti dengan <img src="http://url gambar kamu .jpg" />



7. Cara menghilangkan teks Subscribe to: Posts (Atom)

Dihalaman edit HTML cari kode <div class='feed-links'> kemudian hapus kode kode berikut.

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>



8. Cara membuat Kolom sidebar baru

Kali ini temen temen tolong jangan mencentang Expand Widget Templates, biar lebih gampang dalam pekerjaan ini, kalo nekad bisa bisa nongngol kode yang panjang dan ngga sesuai dengan tips yang ini, Jangan lupa perbesar dulu ukuran #outer-wrapper { dan
#header-wrapper { biar pas.

ok, pertama cari kode #sidebar-wrapper kemudian dibagian atasnya pastekan kode berikut.

#sidebardua-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

kemudian pastekan kode merah ini

<div id='sidebardua-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
dibawah kode biru ini (dicari dulu yah kode ini)

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

disini jadinya 1 content postingan dikiri dan 2 sidebar di kanan, jika ingin sidebarnya di kiri dan kanan trus postingannya ditengah, caranya adalah.
Pertama kode merah diatas di pastekan di atas kode <div id='main-wrapper'> kemudian lihat kode dibawah ini yang tadi dipastekan di atas kode #sidebar-wrapper

#sidebardua-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

yang warna hijau ganti dengan

float: left;
padding-right:10px

Maka jadilah template minima 3 kolom anda, kalau mau 4 kolom atau lebih lakukan lagi hal hal diatas sebanyak kenginan klian tapi jangan lupa ganti nama sidebardua dengan sidebartiga, empat atau berapapun yang pasti jangan ada yang sama namanya.



9. Cara membuat kolom baru dikanan header (Ala oentoe09.blogspot)

Pada halaman edit HTML tetap jangan mencontreng Expand widget template dulu, lalu cari kode kode berikut:

/* Header
---------------------------------
*/
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

lalu ganti semua kode tersebut dengan kode dibawah ini :
#header-wrapper {
width:860px;
margin:0 auto 0px;
background:$bgheadercolor url(LokasiImageHeaderAnda.googlepages.com) no-repeat top center;
height:140px;
}
#head-inner {
width:500px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
border-right:2px dashed $bordercolor;
}
#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}
#header-kanan{
width:300px;
text-align: justify;
float:left;
padding-top:10px;
}
Jangan lupa untuk mengatur width nya agar sesuai dengan besar #outer-wrapper .
Lalu cari lagi kode kode seperti berikut:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Setelah itu hapus dan ganti dengan kode kode berikut:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Setelah itu save, selesai sudah. Selanjutnya adalah



10. Cara membuat auto read more blogger (Ala O-om.com)

walau udah ada fasilitas dari blogger tapi saya masih suka menggunakan fungsi ini, Fungsi Read more kali ini akan menampilkan image dalam ukuran tumbnail dan ukurangambar, jumlah tulisannya bisa diatur semau teman teman dalam satu sentilan.. wkwkwkkwk


ok langsung mulai, contreng expand widget template, cari kode </head> dan langsung pastekan kode ini diatasnya.


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/

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>

Selanjutnya cari kode <data:post.body/> kemudian hapus dan gantikan dengan kode

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



keterangan lihat kode berwarna biru

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

selain read more kayak gini, ada juga yang modelnya pake spoiler kayak kaskus, tapi nanti aja di postingnya yah.....

11. Membuat widget dalam kotak kotak (ala Kang Rohman)

Cari kode ini

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


Hapus kemudian gantikan dengan kode berikut

.sidebar .widget{
background:#000000; border:1px dotted #6c6b6b;
margin:0 0 1.5em; padding:0.5em; } .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; }

Perhatikan kode berwarna biru, kode warna yang #000000 atau yang #6c6b6b silahkan ganti ganti sesuka temen seperti yang sudah dijelaskan pada nomer nomer sebelumnya. atau temen temen bisa juga mengedit kode lain yang berwarna merah dengan menambahkan kode css lain sesuai keinginan temen temen....

Untuk saat ini 11 dulu (capek ngetik hehehehe) untuk part dua nya nnti lebih fokus ke pernak pernik blogger, kalau ada salah mohon di maafkan.....

Artikel Terkait



Posted by Unknown

Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
 
 

lain lain

tips SEO