Uji Coba Untuk Mengoptimalkan Blog

   

Uji Coba Untuk Mengoptimalkan Blog

Uji Coba Untuk Mengoptimalkan Blog. Beberapa tip dan trik belajar ngeblok dipraktekkan di blog ini, untuk itu diperlukan uji coba blog terlebih dahulu. Blog ini merupakan tempat menguji coba beberapa yang masih harus diujicoba sejalan dengan blog yang sedang dibuat. Misalnya tulisan / teks yang mondar - mandir di suatu blog. Kode perintah yang digunakan namanya marquee, fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news.

Cuma yang ini lebih mudah ngaturnya, terutama dalam mengatur gerakan / perilaku teks yang diinginkan. 

Cara Membuat Tulisan Berjalan di Blog

1. Tulisan bergerak dari kanan ke kiri

1. Kios Sepatu Sandal dll 
2. Bisnis Sepatu - Sandal dan Tas

  

Kunjungi Blog berikut:

1. Membuat Teks Berjalan (Marquee)
2. 
   

   Cara Membuat TeksBerjalan dengan Menggunakan Script HTML Marquee

Pada bagian berikut ini akan disajikan satu contoh   Membuat Gambar Membesar Saat disentuh Cursor agar blog menjadi semakin optimal. Langkah-langkahnya seperti berikut ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger
• Pilih Template > Edit HTML.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

• Terakhir klik Simpan Template. kemudian lihat hasilnya di blog. 

Dengan demikian apabila kursor (penunjuk mouse) melintasi gambar ketika blog diperlihatkan, maka gambar tersebut akan membesar (zoom). 

Berikut ini tersaji dafar isi blog yang bisa dijelajahi guna Uji Coba Untuk Mengoptimalkan Blog. Semoga banyak manfaatnya!!

Daftar Isi Blog

Read More

Cara Membuat Postingan Berkolom di Blogspot

Dokumen berkolom merupakan istilah yang sangat familiar dan tidak asing dalam variasi penulisan dokumen. Sebut saja penulis dokumen bergaya koran. Begitu juga dalam penulisan postingan dalam blog juga dikenal sebagai penulisan postingan berkolom (Baca: Cara Membuat Postingan Berkolom di Blogspot). Baiklah, contoh postingan berkolom saya tampilkan disini seperti berikut.

Seiring dengan berkembangnya ilmu pengetahuan dan teknologi (IPTEK) yang semakin pesat, dunia bisnis mulai dari kelas bawah hingga kelas atas terus berupaya meningkatkan kualitas sumber daya manusia (SDM). Peningkatan kualitas SDM bertujuan untuk mewujudkan aktivitas bisnis dapat berjalan dengan cepat, tepat dan akurat dalam pelayanan.

Salah satu factor yang cukup besar perannya dalam menunjang keberhasilan aktivitas bisnis adalah SDM yang menguasai ilmu pengetahuan dan teknologi. Sumber daya manusia (SDM) yang bermutu merupakan kunci kemajuan dalam dunia bisnis.

Untuk menulis postingan berkolom seperti tampak di atas, cara sangat mudah dan sederhana, bila kalian berminat bisa ikuti langkah-langkah Cara Membuat Postingan Berkolom di Blogspot sebagaimana berikut.
1. Login dulu di akun blog anda
2. Klik Entri Baru, atau buka Postingan artikel anda, dan pilih/klik HTML dan lanjutkan
3. Lakukan copy paste code di bawah ini pada mode HTML (bukan Compose)

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="300">
artikel di kolom kiri</td><td align="justify" valign="top" width="300">artikel di kolom kanan</td> </tr>
</tbody></table>

Ketentuan fungsi berikut bisa diubah sesuai dengan yang direncanakan:
cellpadding: atur jarak antara tepi kolom dengan tulisan
cellspacing: atur jarak antara dua kolom
width: ada dua width, pada kode di atas sama sama menggunakan angka 300. Jika ingin berbeda silahkan ganti saja.
align: perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah)
valign: perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah).

4. Klik pindah ke mode Compose, pada artikel di kolom kiri dan artikel di kolom kanan ganti dengan tulisan artikel yang diinginkan

Demikian tutorial Cara Membuat Postingan Berkolom di Blogspot sangat sederhana dan mudah untuk diikuti. Jangan lupa kunjungi juga Cara Mudah Memasang Drop Cap di Awal Paragraf Postingan. Selamat mencoba semoga bermanfaat.

Read More

Read More

Cara Mudah Memasang Drop Cap di Awal Paragraf Postingan

DropCap atau yang biasanya disebut sebagai huruf besar di awal kalimat / paragraf adalah sebuah text yang mempunyai ukuran lebih besar dari pada huruf lainnya, dan biasanya digunakan untuk memulai sebuah paragraf. Seperti yang sering kita jumpai ketika membaca koran / surat kabar. Pada kesempatan kali ini saya akan berbagi informasi tentang Tutorial Cara Mudah Memasang Drop Cap di Awal Paragraf  Postingan , dan cara membuatnya tidak terlalu sulit. Seperti yang ditampilkan diawal paragraph ini adalah salah satu tampilan postingan dengan teks drop cap.

Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Entri Baru, dan pilih/klik HTML dan lanjutkan
3. Lakukan copy paste code di bawah ini pada mode HTML (bukan Compose)

<span style="float: left; color: black; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-impact: century gothic;">D</span>ropCap, berikutnya bisa dilanjutkan di mode Compose.

4. Klik pindah ke mode Compose, maka efek fungsi kode tersebut sudah tampak drop cap.

Keterangan:

• huruf warna biru gantilah dengan huruf awal kalimat anda.
• huruf drop cap sebagaimana dimaksud diatas 'D' bisa dipasang/diganti lebih dari satu huruf (sesuai keinginan anda). 

Langkah 1 s.d. 4 bisa dilakukan ulang di paragraf yang berbeda jika memang diperlukan.
Demikian tutorial Cara Mudah Memasang Drop Cap di Awal Paragraf Postingan sangat sederhana dan mudah untuk diikuti. Selamat mencoba.

Read More

Cara Membuat Teks Berbingkai Dalam Postingan Blog

Cara Membuat Teks Berbingkai Dalam Postingan Blog 

Kadangkala di dalam postingan kita ingin membuat sekelompok teks berbingkai (teks dalam kotak). Bukan hanya teks saja namun bisa saja link maupun gambar berbingkai, dan lain-lain. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks atau teks berbingkai (text box) tersebut. Di bawah ini merupakan salah satu cara membuat kotak teks (text box).


Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Entri Baru, dan pilih/klik HTML dan lanjutkan
3. Lakukan copy paste code di bawah ini pada mode HTML (bukan Compose)

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;">
ISI TEKS DI DALAM KOTAK
</p>

( Gantilah tulisan berwarna biru sesuai dengan kalimat teks Anda ) 

Keterangan:

• Teks rata tengah = text-align: center; center bisa diganti dengan left, right, justify
• Background warna = background-color: #cf32f3 bisa Anda ubah sesuai warna yang di inginkan
• Border = border: 1px solid, bisa Anda atur ketebalan garis luarnya

4. Klik Simpan (Save) postingan anda
5. Lihat hasilnya.


Sehingga akan tampak seperti berikut:

ISI TEKS DI DALAM KOTAK

Dalam mode Compose anda bisa mengedit atau mengganti  teks (teks yang berbingkai) di atas dengan teks lain yang anda inginkan. Langkah 1 s.d. 5 tersebut di atas bisa anda terapkan pada postingan lama (tidak harus postingan baru).
Begitulah Cara Membuat Teks Berbingkai Dalam Postingan Blog, semoga bermanfaat.

Read More

Cara Membuat Breadcrumb Tampil di Blogspot

Breadcrumbmerupakan sebuah fitur navigasi yang biasanya terletak di atas atau di bawah judul postingan. Fitur yang biasa dikenal dengan nama breadcrumbini berisikan kategori atau label dari postingan dan bisanya selalu diawali dengan tombol menuju home (halaman depan blog), seperti tampak berikut. 

Breadcrumb disebut sebagai navigasi seo sebaris dengan tautan internal sehingga memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Oleh sebab itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

• Login dulu ke Blogger.
• Klik Template, kemudian  Edit HTML.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin> 

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

• Setelah itu, cari kode seperti ini :

<div class='post hentry'>

• Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Simpan Template.

Segera lihat hasilnya

CARA LAIN

Langkah-langkahnya:

• Login ke Blogger.
• Klik Expand Template, Edit HTML.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin> 

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Selanjutnya cari kode ini <b:includable id='main' var='top'> jika sudah ketemu gantilah dengan kode berikut:

 <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

Save Template (selesai).

Namun demikian untuk melihat penggunaan kode tersebut ada error atau tidak kunjungi alamat ini Testing Tool - Google Developers.

Ikuti langkah-langkahnya sehingga hasilnya sperti berikut, 

Berarti sudah benar dan segera lihat hasilnya, namun jika belum perbaiki kesalahan yang ditunjukkan.

Read More

Cara Merubah Ukuran, Jenis Font dan Warna pada Judul Postingan

Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan,  untuk melakukannya membutuhkan ketelatenan, ketekunan terutama ketelitian dalam mencemati beberapa kode HTML pada template blog yang dihadapi. Apabila telah memiliki ketelatenan, ketekunan terutama ketelitian mari melanjutkan bagaimana Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan.

 

Langkah-langkahnya:

• Login di Blogger
• Di menu drop down, klik template - Edit HTML
• Lakukan backup template lebih dahulu (untuk menghindari error sebaiknya backup terlebih dahulu template blog, dan jika ada kesalahan maka template bisa dikembalikan seperti semula.)
• Cari kode beikut ini :

.post h3 {text-shadow: 1px 1px 3px #fff;
margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
padding:1px 0px 4px;
font:normal normal 24px Oswald;
font-weight:normal;
line-height:1.4em;
color:#333;
font:$titlefont;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font:normal normal 24px Oswald;color:#333;
}
.post h3 strong, .post h3 a:hover {
color:#c22400;
}

Ada kemungkinannya kode dalam template blog tidak sama persis dengan di atas, karena itu bisa dicari saja yang mirip, secara default biasanya kode .post h3 akan selalu ada, jadi kalau tidak ketemu cari caja kode .post h3 {........sampai tanda terakhirnya }.
 Jika sudah ketemu kode tersebut, maka hapuslah kode tersebut dan ganti dengan kode berikut :

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; } .post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; } .post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

Berikutnya cari lagi kode /* Variable definitions dan letakan kode berikut tepat dibawah kode /* Variable definitions.

<Variable name="titlecolor" description="Post Title Color"type="color" default="#c60" value="#cc6600"><Variable name="titlehovercolor" description="Post Title Hover Color"type="color" default="#c60" value="#cc6600"><Variable name="posttitlefont" description="Post Title Font"type="font" default="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Lakukan save template terlebih dahulu, berikutnya siap melakukan  Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan dengan cara berikut.

• Selanjutnya Pilih Template >> Sesuaikan >> Tindak Lanjut

•  Silahkan atur sendiri Ukuran dan Warna Font sesuai dengan keinginan.

Nah itulah Cara Merubah Ukuran Dan Warna Font Judul Postingan yang bisa saya sharekan, bila ada kekurangan silahkan untuk diperbaiki. terimakasih

Read More