Cara membuat 3 kolom dibawah footer pada blog

Tutorial Blog - Sepertinya Saya sudah lama tidak posting mengenai tutorial blog. Akhir - akhir ini memang Saya sedikit melenceng dari topik,,hehe... Sekarang mulai lagi kembali ke topik. Tutorial Blog kali ini akan membahas mengenai cara membuat 3 kolom dibawah footer pada blog. Terkadang ada beberapa template yang tidak menyediakan 3 kolom dibawah footer. Nah bagi yang ingin membuat 3 kolom footer pada blog. anda bisa mengikuti cara dibawah ini.

Cara membuat 3 kolom dibawah footer pada blog :

1. Login Kedalam account Blogger anda.
2. Masuk Design, Edit Html, sebelumnya download template blog anda dulu.
3. Setelah itu tekan Ctrl + F cari kode dibawah ini :

 <div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

intinya anda cari kode ini

4. Setelah menemukan kode diatas, kemudian ganti kode yang berwarna merah dengan kode dibawah ini : 

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

5.Setalah selesai di ganti, kemudian cari kode ini ]]></b:skin>

6. Kemudian tambahkan kode berwarna merah dibawah ini, diatas kode  ]]></b:skin>

 #footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

7.Setelah semua selesai Pilih Save. 

Sekarang lihat hasilnya..apakah berhasil atau tidak.. jika berhasil akan ada penambahan 3 kolom add widget dibawah footer.. sekarang anda bisa lebih banyak lagi menambahakan widget.Semoga bermanfaat ya kawan... jangan lupa tingglkan coment sobat

Read more »

Membuat effect horor pada photoshop

Kali ini kita akan belajar bagaimana mengganti efek photo kamu menjadi efek photo horror.

1. Kamu buka Image yang akan kamu olah efeknya.

 

2. Pertama kali kita pasang Hue/Saturation. Maka kamu ke menu Image> Adjustments> Hue/Saturation atau press Ctrl+U.
Lalu pasang setingan berikut. INGAT tandai kotak Colorize.

3. Sekarang kamu duplikatkan layer dgn pres Ctrl+J di keyboard.
Lalu ke menu Filter> Blur> Gaussian Blur dan pasang setingan ini.

4. Kamu seting Blending Mode Layer menjadi 'Overlay'. Lihat gambar elip merah di bawah.

5. Kamu Merge/gabung layer bersama-sama dgn press Ctrl+E di keyboard. Kamu duplikatkan lagi layer dgn pres Ctrl+J di keyboard.
Lalu ke menu Filter> Blur> Motion Blur dan pasang setingan berikut ini.

6. Kamu seting Blending Mode layer ini menjadi 'Overlay'. Lalu kamu Merge/gabung lagi bersama-sama dgn cara pres Ctrl+E di keyboard.
Setelah itu Image kamu akan nampak seperti ini.

 

7. Sekarang kamu ciptakan layer baru dan isi dengan warna putih menggunakan Paint Bucket Tool.
Lalu kamu seting layer mode ini menjadi 'Overlay' dan jangan kamu Merge.

 

8. Press 'D' di keyboard untuk mereset Pallet warna kamu. Kamu seting warna foreground menjadi #000099 dan background putih.,
Sekarang kamu ciptakan layer baru, dan isi dengan warna . (#000099).

9. Lalu ke menu Filter> Render> Clouds. Set Blending Mode 'Overlay'. dan Opacity Layer ini menjadi 57%.

10. Dalam langkah ini, Ciptakan lagi layer baru dan isi dgn warna putih.
Kamu seting Blending Mode Layer ini menjadi 'Difference'.

11. Dalam langkah akhir, duplikatkan layer background kamu, setelah terduplikat,
pindahkan layer ini ke urutan ke 2 dari atas di bawah layer putih.
dan kamu seting blending mode layer ini menjadi 'Darken'. Lihat gambar bawah.

Akhirnya kamu menghasilkan gambar seperti ini. Menyeramkan !!!

 

Selamat mencoba semoga bermanfaat amien.... jangan lupa tinggalkan coment anda terima kasih atas kunjungannya salam.... Riezky 

Read more »

Memasang widget tab view pada blog

Beberapa waktu yang lalu ada yang menanyakan kepada saya bagaimana cara untuk membuat menu tab view seperti pada blog ini. Tetapi karena penjelasannya lumayan rumit jadinya sampai sekarang baru sempat saya posting.

Nah bagi anda yang belum tahu apa itu tab view. Tab view adalah sebuah widget yang mempunyai fungi tab dimana setiap tab bisa mewakili satu widget atau konten sehingga bisa menghemat ruangan pada blog anda. Contoh tampilannya seperti gambar dibawah ini.

Ok tanpa panjang lebar bagi anda yang tertarik untuk memasang widget tab view ini di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color: #ffffff">Tab 1</span></a>
<a><span style="color: #ffffff">Tab 2</span></a>
<a><span style="color: #ffffff">Tab 3</span></a>
</div>
<div style="width: 300 px; height: 180 px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Keterangan:
Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna orange merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 180 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

4. Kalau sudah, klik Save. Selesai

Read more »

Cara memasang related post dan artikel yang berkaitan

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.


Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel yang berkaitan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..  salam Riezky... jangan lupa tinggalkan coment anda 

Read more »

Cara membuat email dengan domain sendiri

Cara Membuat Email Dengan Domain Sendiri – Apabila kita mempunyai sebuah blog dengan domain sendiri misalnya http://bagollum.com dan mengelolah sebuah bisnis di internet maka akan kelihatan lebih profesional apabila kita menggunkan akun email dengan domain sendiri. Untuk mewujudkan hal ini kita tidak perlu bingung karena google telah menyediakan fasilitas gratis untuk membuat email dengan domain sendiri. Jadi syaratnya yang penting anda mempunyai domain sendiri seperi .com, .net, .org. biz dan lain-lain. Caranya setting email dengan domain sendiri cukup mudah untuk diterapkan yang penting kita tekun untuk mencoba.

Pertama silahkan buka alamat ini http://www.google.com/a/cpanel/domain/new
Setelah muncul tampilan seperti gambar dibawah ini ;

Pada tahap selanjutnya anda akan diminta untuk mengisikan data-data pada form yang tersedia dan akhiri dengan "Lanjut",, 

Saya langsung pada bagian dimana anda diharuskan untuk melakukan verifikasi kepemilikan domain anda.

tampilannya seperti ini :

Tujuan verifikasi ini adalah untuk membuktikan bahwa anda adalah pemilik domain yang sebenarnya.
Caranya adalah login ke dpanel domain anda dan tambahkan CNAME record dengan kode yang saya tandai dengan lingkaran merah diatas (kode setiap akun berbeda).
Untuk Point isi dengan google.com.
Hasilnya seperti pada gambar berikut :

Setelah verifikasi akun selanjutnya proses aktivasi email.
Klik pada bagian Activate Email seperti pada tampilan berikut (berhubung akun email saya sudah aktif maka kata activate email berganti dengan url email saya)

Setelah klik activate email silahkan scroll ke bawah kemudian anda akan menemukan data TTL yang harus anda masukkan ke DNS Setting domain anda, urutannya sudah disesuakian oleh Google, berikut contoh data-datanya:

Masukkan data TTL diatas pada bagian MXrecords domain anda.
tampilannya seperti ini :

Apabila sudah selesai silahkan kembali pengaturan google apps dan klik I have completed these steps.
Sekarang prosesnya sudah selesai, dan anda dapat menciptakan beberapa akun email dengan domain sendiri.

Read more »

Menyisipkan text/image disebelah judul widget

akhirnya Kembali update Postingan lagi. Blog ini mencoba ramah untuk menjawab setiap permasalahan, baik yang sedang hangat atau permasalahan lama yang tidak ditemukan di blog lain. Beberapa hari membahas tips dan tools, sekarang saatnya kita utik template kita. Pertanyaan dari sobat blogger adalah, "bagaimana menambahkan menu di sebelah kanan judul, seperti gadget submit artikel di blog ini?"

Mari kita langsung mencobanya...
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Carilah kode widget Anda, misal seperti ini

<b:widget id='HTML3' locked='false' title='Guest Book' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget> 

Yang berwarna merah adalah kode judul gadget Anda pada sidebar. Nah untuk menambahkan teks ke samping kanan judul sidebar, Anda cukup tambahkan ke sebelah kode berwarna merah tersebut. Misalkan menjadi kode seperti ini...

<b:widget id='HTML3' locked='false' title='Guest Book' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/> | <a href='http://alamatlinksatu' target='_blank'>namalinksatu</a> | <a href='http://alamatlinkdua'>namalinkdua</a></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

simpan Templatenya dan lihat hasilnya

Read more »