Blogspot Corner

Cara Menambah atau Membuat 3 Kolom di Atas Footer

Cara Menambah atau Membuat 3 Kolom di Atas Footer - Masih tentang tutorial blogspot. Kali ini tentang cara menambah atau membuat 3 kolom di atas footer. Caranya gimana?

1. Masuk layout, edit html, centang expand widget template

2. Cari kode ]]></b:skin>

3. Tambahkan kode ini di atasnya:
#footer-bottom {
width: auto;background:#231C2A;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: center;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

4. Cari kode <div id='footer'>

5. Tambahkan kode ini di atasnya:
<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>
6. Save dan lihat hasilnya di ‘Layout/Rancangan’. Jika di atas footer muncul 3 kolom ‘Tambah Gadget’ berarti sukses.

Image and video hosting by TinyPic

Cara Membuat Semua Link di Blog Terbuka di Tab Baru

Cara Membuat Semua Link di Blog Terbuka di Tab Baru – Kemudahan mengakses merupakan salah satu faktor blog disukai pengunjung. Tak terkecuali saat mengklik link terbuka di tab baru.

Cara setting link blog agar secara otomatis terbuka di tab baru sangat mudah:

1. Masuk Layout, Edit HTML, centang expand widget template
2. Cari kode </head>
3. Tambahkan kode <base target='_blank'/> di atasnya
4. Simpan dan lihat hasilnya

Image and video hosting by TinyPic

Cara Menambah atau Membuat Dua Kolom di Bawah Header Blog

Cara Menambah atau Membuat Dua Kolom di Bawah Header Blog - Ingin menambah dua kolom di bawah header blog yang biasanya untuk space iklan? Cara membuatnya cukup mudah. Ikuti step-step berikut ini.

Dua kolom yang saya maksud lihat gambar di bawah ini (ditandai centang merah).

Cara membuatnya:

1. Masuk Layout, Edit HTML, centang expand widget template

2. Cari kode ]]></b:skin>

3. Tambahkan kode ini di atasnya:
#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;

4. Cari kode <div id='main-wrapper'>

5. Tambahkan kode ini di atasnya:
</div>
<div id='box-kolom-widget'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>

6. Simpan template

Image and video hosting by TinyPic

Cara Mematikan Tombol Ctrl A Ctr C dan Disable Klik Kanan | Anti Copas

Cara Mematikan Tombol Ctrl A Ctr C dan Disable Klik Kanan | Anti Copas - Melindungi konten blog dari plagiator memang tak mudah. Selalu saja ada cara untuk membobol artikel blog yang sudah diprotek dengan script tertentu. Nah, ini ada cara terbaru mematikan tombol Ctrl A, Ctr C dan Disable Klik Kanan sehingga blog aman dari aksi copas.

Caranya seperti biasa:
- Login ke blog
- Masuk rancangan, edit HTML, centang expand widget template
- Cari kode <body> atau yang mirip itu
- Ganti dengan <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
- Simpan
- Selesai

Image and video hosting by TinyPic

Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog

Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog - Author box atau kotak berisi tulisan atau keterangan di bawah postingan blog lagi ngetren. Bagaimana cara membuatnya?

1. Login ke blog anda
2. Masuk Layout, Edit HTML, centang Expand widget template.
3. Cari kode ]]></b:skin>
4. Masukkan kode di bawah ini sebelum kode ]]></b:skin>; tadi

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-

webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Cari kode <div class='post-footer-line post-footer-line-1'>
6. Masukkan kode di bawah ini setelah kode <div class='post-footer-line post-footer-line-1'> tadi.

<!—Author Box-->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Blogspotcorner</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UToEu5aH-r6Zk75ky9a5cMeylRapH3SvgDWzshM0GvqxRO7ZNyIMp2ZefDZi0ZYWkq8znWE-mZ4tkxOpOmQnEaYhrxJW7wbUH3-AAOL5T3qzpmQG66Y0qRaFBBaoTA80xuutV7LbZN2m/s400/banner.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini

diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>.

Jika artikel <a expr:href='data:post.url'><data:post.title/></a> ini dirasa menarik, anda bisa sebarluaskan lewat blog anda, tapi mohon mencantumkan sumbernya. Terimakasih. Happy blogging.

<p><span style='float:right;font:italic 10px Arial, Sans- Serif;'/></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!—Author Box -->

7. Simpan, selesai.

NB:
- Ganti Blogspotcorner dengan nama blog anda
- Anda bisa mengganti kalimat ‘Jika artikel ini dst…’ sesuai selera
- Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UToEu5aH-r6Zk75ky9a5cMeylRapH3SvgDWzshM0GvqxRO7ZNyIMp2ZefDZi0ZYWkq8znWE-mZ4tkxOpOmQnEaYhrxJW7wbUH3-AAOL5T3qzpmQG66Y0qRaFBBaoTA80xuutV7LbZN2m/s400/banner.jpg dengan URL foto/banner anda

Image and video hosting by TinyPic

Cara Membuat Banner Animasi Online

Cara Membuat Banner Animasi Online - Sering lihat banner animasi dengan ekstensi gif? Banner seperti itu bisa dibikin secara online, gratis lagi. Cara membuat banner animasi sangat mudah.
Sebenarnya banyak website penyedia layanan pembuatan banner animasi. Tapi saya merekomendasikan Picasion.

Cara membuatnya:

1. Buat 2 atau 3 banner dengan Photoshop atau sejenisnya

2. Buka http://picasion.com

3. Klik ‘Pilih Berkas’ untuk mengupload gambar
.
4. Ulangi cara no.3 untuk upload gambar yang lain.

5. Pilih size dan tingkat kecepatan geraknya.

6. Klik ‘Create animation’.

7. Akan muncul kode HTML yang siap dipasang di blog.

Contoh: Saya bikin dua banner iklan keripik Mr. Bean

Setelah diupload dengan Picasion, hasilnya seperti ini:

Cara Merubah Tampilan Dashboard Blogger Baru ke Lama

Cara Merubah Tampilan Dashboard Blogger Baru ke Lama - Terhitung per 1 April 2012 tampilan dashboard atau interface Blogger berganti versi baru. Jika merasa tak nyaman dengan itu, bagaimana cara mengembalikan ke dashboard lama?

Caranya gampang.

1. Log in ke Blogger

2. Klik tombol Opsi Blogger berbentuk seperti gear (letak di kanan atas)