Bagaimana CARA BUAT BLOG ? yupzzss dalam postingan kali ini saya akan membahas bagaimana Cara buat blog di blogspot. sebelum Membuat Blog tentunya kamu sudah tau apa itu blog kan ? jika belum tau saya akan menerangkan sedikit apa itu blog,blog sebetulnya adalah merupakan salah satu bentuk website yang bisa dibuka melalui web browser .sebelum kita praktek Bikin Blog Di Blogspot saya akan menjelaskan knapa harus Buat Blog Di Blogspot ? jawabanya adalah karena blogspot/blogger adalah penyedia blog gratisan satu-satunya yang menyediakan fasilitas berbasis GUI (Graphicai User Interface) atau antar muka grafis untuk menambah aksesoris didalam blog .dan fasilitas ini tidak dimiliki penyedia blog gratisan lainya. Silakan ikuti langkah-langkah CARA BUAT BLOG Berikut ini :
1.Silakan Klik http://www.blogger.com
2.Setelah halaman blogger terbuka silakan klik tanda panah yang ada tulisan Ciptakan Blog Anda
3.Setelah itu isi formulir pendaftaran pembuatan blog seperti :
-Alamat Email isikan dengan alamat email.
-Ketik ulang alamat email isi lagi dengan alamat email yang tadi kamu masukkan.
-Masukan sebuah password Isikan dengan password email kamu.
-Ketik ulang sandi Isi lagi dengan password yang tadi.
-Nama TampilanIni adalah nama tampilan blog kamu .isikan dengan apa saja bisa juga dengan nama kamu .
-Verifikasi kata ketikan huruf-huruf yang ada pada gambar.
-kemudian beri tanda centang pada gambar.
4.Kemudian klik "Lanjutkan"
5.Pada langkah ke 2 ini adalah langkah untuk pemberian nama dan link URL atau alamat blog kamu.
6.Isikan kotak teks Judul Blog dengan judul blog yang kamu inginkan.
7.Isikan Blog ULR dengan alamat blog yang kamu inginkan, misalnya aja http://ajisgagap.blogspot.com
8.Kemudian klik "lanjutkan"
9.Langkah selanjutnya adalah memilih template. setelah kamu memilih template silakan klik "lanjutkan"
10.Langkah terakhir adalah akan muncul pemberitahuan bahwa blog kamu sudah jadi.
11.Klik tanda panah "Mulai Blogging" Untuk memulai mengisi artikel blog kamu.
12.selesai............
CARA BIKIN TULISAN BERGERAK!!
1. Membuat teks bergerak secara horizontal dari kiri ke kanan
Misalnya kalimat "WELCOME TO MY BLOG" ingin diberikan efek marque yang membuatnya bergerak dari kanan ke kiri, maka perintahnya seperti ini :
<em><marquee>WELCOME TO MY BLOG</marquee></em>
Untuk membuat teks bergerak bolak balik dari kiri ke kanan atau sebaliknya, maka perintahnya adalah sebagai berikut :
<marquee behavior="alternate">WELCOME TO MY BLOG</marquee>
2. Membuat teks bergerak secara vertikal dari bawah ke atas
Perintah marquee untuk membuat teks bergerak dari bawah ke atas adalah sebagai berikut :
<marquee direction="up">WELCOME TO MY BLOG</marquee>
Untuk mebuat teks tersebut bergerak bolak balik secara vertikal, maka perintahnya seperti ini :
<marquee direction="down" behavior="alternate">WELCOME TO MY BLOG</marquee>
3. Membuat kalimat berkedip-kedip
Untuk membuat teks, baik itu kata atau kalimat berkedip kedip, perintahnya seperti ini :
<blink>teks yang akan dibuat berkedip</blink>
hasilnya akan menjadi seperti ini :
WELCOME TO MY BLOG
mudah bukan dan selamat mencoba kalo gak bisa silakan coment ja ^_
1. Membuat teks bergerak secara horizontal dari kiri ke kanan
Misalnya kalimat "WELCOME TO MY BLOG" ingin diberikan efek marque yang membuatnya bergerak dari kanan ke kiri, maka perintahnya seperti ini :
<em><marquee>WELCOME TO MY BLOG</marquee></em>
Untuk membuat teks bergerak bolak balik dari kiri ke kanan atau sebaliknya, maka perintahnya adalah sebagai berikut :
<marquee behavior="alternate">WELCOME TO MY BLOG</marquee>
2. Membuat teks bergerak secara vertikal dari bawah ke atas
Perintah marquee untuk membuat teks bergerak dari bawah ke atas adalah sebagai berikut :
<marquee direction="up">WELCOME TO MY BLOG</marquee>
Untuk mebuat teks tersebut bergerak bolak balik secara vertikal, maka perintahnya seperti ini :
<marquee direction="down" behavior="alternate">WELCOME TO MY BLOG</marquee>
3. Membuat kalimat berkedip-kedip
Untuk membuat teks, baik itu kata atau kalimat berkedip kedip, perintahnya seperti ini :
<blink>teks yang akan dibuat berkedip</blink>
hasilnya akan menjadi seperti ini :
WELCOME TO MY BLOG
mudah bukan dan selamat mencoba kalo gak bisa silakan coment ja ^_
buat teks berkedip
Trik Blogger | Membuat Tab View
Mungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali. OB tidak mengatakan trik blogger membuat tab view dalam postingan ini berbeda dengan lainnya. Mungkin sama, namun berbeda dari segi aplikasinya dalam blog. Trik ini OB dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal), sampai OB mendapatkan sebuah situs Javascript Kit. Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung OB pajang di Optimasi Blog. Demo version dengan kode original utuharies.blogspot.comSekarang kita mulai trik blogger membuat tab view dalam blog :
- Login dulu ke account blogger kamu
- Pilih tab Tata Letak --> Edit HTML.
- Copy kode berikut dan pastekan di atas kode ]]></b:skin>
div.TabView div.Tabs {
width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
Catatan :width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
- Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
- Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.
- Untuk pemilihan warna, kamu dapat melihatnya di kode warna ini.
- Copy kembali kode berikut di atas 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>
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>
- Simpan template kamu.
- Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
- Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
- Copy dan paste kode di bawah ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<div class="Page">
<div class="Pad">
<ul>
<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
Kamu bisa memasukkan script<br />
Kamu bisa memasukkan image<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />
</div>
</div>
<div class="Page">
<div class="Pad">
View 3.1<br />
View 3.2<br />
View 3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<div class="Page">
<div class="Pad">
<ul>
<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
Kamu bisa memasukkan script<br />
Kamu bisa memasukkan image<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />
</div>
</div>
<div class="Page">
<div class="Pad">
View 3.1<br />
View 3.2<br />
View 3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
- Sekarang lihat tab view dalam blog kamu
Catatan :
- Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
- Kode yang berwarna biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.
Selamat membuat tab view...
2 komentar:
Poskan Komentar
Silakan Berkomentar Blogspot Tutorial