Tips Memilih Template Blog
Dalam memilih dan menentuken template untuk blog anda. Dalam pembuatan blog, salah satu hal utama yang harus diperhatikan adalah memasang template. Berikut adalah poin poin yang harus diperhitungkan oleh seorang blogger :
1. Pilih lah template yang ringan, simple. --> Karena hal ini akan mempercepat orang lain dalam mengakses blog anda. Dengan begitu pengunjung tidak bosan dan merasa jengkel. Hal yang perlu diketahui adalah orang berkunjung ke blog anda pertama kali bukan karena tampilan blog anda, dll. Tetapi orang lain tersebut mencari informasi yang mereka butuhkan.
2. Gunakan template blog minimal terdiri dari 3 kolom --> Dengan begitu anda bisa memaksimalkan informasi yang tampil pada halaman blog.
1. Pilih lah template yang ringan, simple. --> Karena hal ini akan mempercepat orang lain dalam mengakses blog anda. Dengan begitu pengunjung tidak bosan dan merasa jengkel. Hal yang perlu diketahui adalah orang berkunjung ke blog anda pertama kali bukan karena tampilan blog anda, dll. Tetapi orang lain tersebut mencari informasi yang mereka butuhkan.
2. Gunakan template blog minimal terdiri dari 3 kolom --> Dengan begitu anda bisa memaksimalkan informasi yang tampil pada halaman blog.
3. Pilihlah template yang warnanya tidak mencolok --> warna yang mencolok akan membuat pengunjung blog anda pusing dan menyakitkan mata. lihat FACEBOOK. desainnya tidak rumit, simple dan enak dipandang.
4. Gunakan template yang struktur tata letak gadgetnya teratur --> Dengan demikian anda dapat dengan mudah melakukan modifikasi terhadap template tersebut.
5. Informasi yang di kedepankan --> Hal yang perlu diingat adalah : template bukan yang paling utama dalam blogspot. Yang paling utama adalah INFORMASI yang di sajikan dalam template tersebut. untuk itu pikirlah dahulu INFORMASI apa yang ingin anda sajikan.
4. Gunakan template yang struktur tata letak gadgetnya teratur --> Dengan demikian anda dapat dengan mudah melakukan modifikasi terhadap template tersebut.
5. Informasi yang di kedepankan --> Hal yang perlu diingat adalah : template bukan yang paling utama dalam blogspot. Yang paling utama adalah INFORMASI yang di sajikan dalam template tersebut. untuk itu pikirlah dahulu INFORMASI apa yang ingin anda sajikan.
Tips Membuat Menu Cantik Di Blogspot
cara membuat menu cantik pilihan kita sendiri pada blogspot. nah.. kali ini kita akan menggunakan layanan yang diberikan secara gratis oleh flashvortex.com. Penyedia layanan animasi flash yang diperuntukkan bagi pengelola website. Baiklah langsung saja ke inti judul postingan ini.. Bagaimana cara membuat nya?? ikuti langkah-langkah berikut ini :
1. Buka situs flashvortex.com http://www.flashvortex.com
2. Pilih/Klik "Menus" pada bagian atas situs tersebut.
3. Setelah itu akan tampil berbagai macam bentuk menu yang siap anda pilih sesuai selera anda. Di bagian bawah pada masing masing menu tersebut ada tulisan "Cick here to edit this" nah.. klik tulisan tersebut untuk memilih menu yang anda suka
4. Kemudian anda bebas membuat menu sesuai selera anda berikut dengan link tujuannya. mau ditujukan ke facebook, website nenek, website tante.. terserah anda. Jika selesai mengedit. Klik GENERATE ANIMATION di bagian bawah.
5. Nah. Tinggal kopi aja kode nya dan paste kan di html blog.
Selesai
1. Buka situs flashvortex.com http://www.flashvortex.com
2. Pilih/Klik "Menus" pada bagian atas situs tersebut.
3. Setelah itu akan tampil berbagai macam bentuk menu yang siap anda pilih sesuai selera anda. Di bagian bawah pada masing masing menu tersebut ada tulisan "Cick here to edit this" nah.. klik tulisan tersebut untuk memilih menu yang anda suka
4. Kemudian anda bebas membuat menu sesuai selera anda berikut dengan link tujuannya. mau ditujukan ke facebook, website nenek, website tante.. terserah anda. Jika selesai mengedit. Klik GENERATE ANIMATION di bagian bawah.
5. Nah. Tinggal kopi aja kode nya dan paste kan di html blog.
Selesai
Membuat Related Post / Artiket Terkait Scroll Down dibawah Postingan Blog
1. Masuk ke account blogger anda
2. Pilih tata letak kemudian edit HTML
3. Jangan lupa untuk memberi tanda centang pada Expand Widget Templates
4. Kemudian cari “ agar lebih mudah gunakan ‘ ctrl+f”
<data:post.body>
kalau sudah ketemu silahkan copy kode dibawah ini kemudian copy kan dibawah kode tadi
<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>bagi sobat yang menggunakan readmore akan menemukan 2 buah kode <data:post.body/> ini, pilihlan yang pertama.
Trus kalau sudah selesai silahkan dicari lagi kode dibawah ini:
]]></b:skin>
Kalau sudah ketemu copy kode dibawah ini kemudian paste diatas kode tersebut
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
Bagi sobat yang sebelumnya telah menggunakan related post, sebaiknya yang lama dihapus dulu deh, trus baru masang yang ini, biar gak berantakan.
Cara Membuat Title Blog Berjalan
- seperti biasa kawan harus login dulu ke blogger
- kemudian klik design
- lalu pilih edit HTML " jangan lupa centang dulu expand widget nya "
- selanjutnya cari code ini <b:skin><
Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :
- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama
5. Silahkan masukkan kode dibawah ini sebelum kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
6. Kemudian Save
Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript
Silahkan masukkan script menu multi kolom dibawah ini:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda
Subscribe to:
Posts (Atom)