Semeton Sidakarya

Home » All posts

Cara menghapus tulisan Langganan Entri dan Diberdayakan oleh Blogger

Pada Tempelate blogger yang letaknya paling bawah sering kita jumpai link dengan tulisan “Langganan Entri : Atom” dan “Diberdayakan oleh : Blogger” Tulisan tersebut sebenarnya bisa dihilangkan/disembunyikan kalau tidak berkenan untuk menampilkannya. Apabila kita memakai blogger template, footer ini secara default akan memuat atribut Blogger sehingga tampil tulisan tersebut akan ditampilkan diblog kita. Itu semua karena template memang sudah di desain seperti itu. untuk menghilangkan ataupun menyembunyikan tulisan 'Diberdayakan oleh blogger' dibagian footer tempelate dapat dilakukan langkah-langkah sebagai berikut :

Sign in Ke blogger .
Klik Opsi lainnya.
Klik Tempelate
Klik Edit HTML.
Cari Kode ]]></b:skin> (biar lebih gampang gunakan tombol CTRL+F.)
Kemudian copy dan paste kode dibawah ini dan letakkan diatasnya.
Klik Simpan

/* Langganan Entri

----------------------------------------------- */

.feed-links{

display:none;

}

/* Diberdayakan oleh

----------------------------------------------- */

#Attribution1 {

height:0px

visibility:hidden;

display:none }

Demikian postingan kali ini dan kalau berkenan silahkan dicoba, mungkin dengan menyembunyikan atribut blogger sehingga bisa meminimalisir pengunjung yang iseng terhadap blognya kawan.

Selamat mencoba

Cara menghapus tulisan Beranda, Postingan Lama dan Postingan Baru diblog

Pada tempelate yang asli yang merupakan bawaan dari design itu sendiri pada bagian bawah blog sering kita jumpai tulisan Beranda (Home), Postingan Lama dan Postingan Baru, terkadang ada yang berpendapat tulisan tersebut membuat blog gagah dan keren, disamping itu kita merasa kurang nyaman untuk melihatnya, oleh karena itu pada postingan saya kali ini mencoba untuk membagi pengalaman cara menghilangkan tulisan tersebut. Caranyapun cukup mudah dengan langkah - langkah sebagai berikut :

Sign in Ke blogger .
Klik Opsi lainnya.
Klik Edit HTML.
Centang tulisan Expand Widget Templates
Cari Kode dibawah ini satu persatu (biar lebih gampang gunakan tombol CTRL+F.)
Untuk menghilangkan tulisan Beranda, Postingan Lama dan Postingan Baru pada tampilan blog Hapuslah Kode-kode dibawah ini
Tetapi bila ingin Mengganti dengan gambar, Silahkan hapus kode - kode dibawah ini dan ganti dengan URL gambar yang sudah diupload sebelumnya
Klik Pratinjau untuk melihat kesalahan
Apabila sudah terjadi perubahan yang diinginkan klik Simpan

Kode HTML	Tidak ditampilkan	URL gambar
<data:newerPageTitle/>	Hapus Kode ini	Ganti dgn URL gambar
<data:olderPageTitle/>	Hapus Kode ini	Ganti dgn URL gambar
<data:homeMsg/>	Hapus Kode ini	Ganti dgn URL gambar

NB: jika terdapat 2 code , hapus kode yang berada dibagian atas, dan ketiga kode tersebut diatas biasanya posisinya berdekatan

Demikian postingan saya kali ini semoga bermanfaat.

Cara membuat daftar isi bergerak diblog

Menu model ini akan bergerak berganti post dari atas ke bawah dan akan muncul postingan kita dari yang terdahulu sampai yang terbaru, dan cara pembuatannya pun sangat mudah, tinggal ikuti langkah berikut ini:

Sign In diblogger
Klik Opsi lainnya dan klik Tata Letak
Klik Tambahkan Gadget/Add Gadget
Cari dan klik HTML/JavaScript
Copy Paste kode di bawah ini
Klik Simpan

<div style="background-color: white; border: 1px solid rgb(0, 0, 0); height: 300px; width: 300px; overflow: auto;">
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div></div></div>

Contoh Gambar

Keterangan :

Warna Merah = Backround menu
Warna Hijau = tinggi dan lebar gambar dalam menu yang di tampilkan, ganti sesuai selera
warna Biru = adalah kecepatan untuk berpindahnya post ke post lain, ganti sesuai selera
warna Orange = jumlah post yang akan di tampilkan di recent post, ganti sesuai selera

Silahkan dicoba apabila berminat

Cara membuat 3 kolom gadget dibawah header

Pada postingan kali ini kita akan membahas cara menambah 3 kolom Gadget dibawah header, caranya sangat mudah sekali, ikuti langkah - langkah berikut ini :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>\

Setelah itu cari kode dibawah ini :

<div id='main-wrapper'> atau kode
<div id="main-outer"> atau kode
<div class='main-outer'> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

</div>

Kli Pritinjau, siapa tahu ada kesalahan
Klik Simpan

Selamat mencoba

Cara membagi header menjadi 2 kolom

Untuk membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini dan semoga tutorial saya kali ini bisa membantu keinginannya kawan :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode dibawah ini

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 160px;

}
#header {
width: 45%;
margin-right: 10px;float: left;

}
#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;

}

Keterangan

min-height: 160px; = Tinggi tampil di header anda adalah sebesar 160px, ganti sesuai selera
width: 47% = Lebar Header kanan atau yang baru ditambahkan dan ada 8% ruang antar header.
width: 45%;. = Lebar Header kiri

Setelah mengatur kode CSS tersebut diatas selanjutnya cari kode dibawah ini:

Setelah anda temukan kode <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut diatas

<b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>

Setelah selesai, simpan dan tutup template

Selamat mencoba

Cara membuat tabel diblog

Dalam membuat table/kolom dipostingan blog diperlukan untuk memasukan data agar tertata rapi dan data tersebut berurutan sesuai dengan kelompok data yang diinginkan. Pada pembuatan tabel harus berada dalam mode HTML (berdampingan dengan Compose) disaat melakukan postingan, untuk membuatnya ada beberapa hal yang harus kita ketahui tentang perintah tabel tersebut diantaranya :

Keterangan:

<table> = perintah untuk membuat table
<border> = perintah untuk mengatur tebal garis pinggir
<tr> = perintah untuk membuat baris pada table
<td> = perintah untuk membuat kolom pada table

Cara membuat tabel :

Sign in di Blog
Klik Pos
Klik HTML
Copy kode dibawah ini dan paste ditempat postingan yang diinginkan
Klik Pratinjau
Klik Simpan

Contoh 1 tabel,

<tr>

<td>Masukan data</td>

</tr>

</table>

Masukan data

Keterangan :

Border = ketebalan garis
Masukan data = Ganti dengan data nya kawan

Contoh 2 tabel.

<td>Masukan data</td><td>Masukan data</td>

</tr>
</table>

Masukan data

Keterangan :

Border = ketebalan garis
Width = lebar kolom
Masukan data = Ganti dengan data nya kawan

Contoh penambahan tabel kesamping dan kebawah

<table border="1">
<tbody>
<tr>
<td align="center">No</td> <td align="center" width="300">Uraian</td> <td align="center">Debet</td> <td align="center">Kredit</td>
</tr>
<tr>
<td align="center">1</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>
<tr>
<td align="center">2</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>

No	Uraian	Debet	Kredit
1	Masukan data	Masukan data	Masukan data
2	Masukan data	Masukan data	Masukan data

Keterangan :

Border = ketebalan garis
Width = lebar kolom
Masukan data = Ganti dengan data nya kawan
<td align="center"> = bentuk tulisan ditengah ganti sesuai selera

Contoh memisahkan tabel yang satu dengan yg lainnya :

<table border="1">
<tr>
<td align="center" colspan="3">Masukan data</td>
</tr>
<tr>
<td>Masukan data</td> <td>Masukan data</td> <td>Masukan data</td>

</tr>

</table>

Masukan data
Masukan data	Masukan data	Masukan data

Keterangan :

Border = ketebalan garis
Masukan data = Ganti dengan data nya kawan
<td align="center" colspan="3"> = bentuk tulisan ditengah ganti sesuai selera dan pemisah

Membuat Susunan Pengurus :

<table border="0">
<tr>
<td>Ketua</td> <td>:</td> <td>Angga Saputra</td>

</tr>
<tr>
<td>Anggota</td> <td>:</td> <td>Novi Marta</td><tr>

<tr><td> </td> <td>:</td> <td>Desi Ratnawati</td></tr>

<tr><td> </td> <td>:</td> <td>Oktarini</td></tr>

<tr><td> </td> <td>:</td> <td>Mei Artalita</td></tr>

</tr>

</table>

Keterangan :

Border "0" = tidak garis
Masukan data = Ganti dengan data nya kawan

Cara membuat menu horizontal dibawah header blog

Dalam membuat Menu Horizontal diblog ada yang ditempatkan dibawah atau diatas header blog, dalam pembuatannya ada yang jenis dropdown dan tanpa dropdown tergantung kebutuhan. Cara Membuat Menu Dropdown Horizontal dibawah header blog dapat dilakukan dengan langkah-langkah sebagai berikut:

Sign in diblog
Klik Edit HTML
Centang Expand Template Widget
Cari kode ]]> </ b: skin> (gunakan ctrl + F untuk memudahkan pencarian)
Copy dan pastekan Kode CSS dibawah ini dan tempatkan diatas kode ]]> </ b: skin>
Klik Pratinjau untuk melihat kesalahan
Klik Simpan

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:red;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:red;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: red;

text-decoration:none;

}

.menu li ul{

background:red;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:1;

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:red;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:red;

border:0px;

color:red;

text-decoration:none;

}

Keterangan

Kode warna red = Ganti warna sesuai dengan selera

Memasang kode html drop down menu di tata letak blog dibawah Header

Klik Tata letak dibawah header
Klik HTML/Java Script
Copy dan pastekan Kode CSS dibawah ini di kolom konten HTML/Java Script
Klik Simpan dan lihat hasilnya

<li><a href="URL alamat blog">PROPIL</a></li>

<li><a href="URL alamat blog">FACEBOOK</a></li>

<li><a href=""> JUDUL 1</a>

<ul>

<li><a href=" URL alamat blog "> JUDUL 1</a></li>

</ul>

</li>

<li><a href=""> JUDUL 2</a>

<ul>

<li><a href=" URL alamat blog "> JUDUL 2</a></li>

</ul>

</li>

<li><a href=" URL alamat blog”>JUDUL </a>

<li><a href=" URL alamat blog "> JUDUL </a>

<li>

</li>

</ul>

</div>

Keterangan

Kode warna MERAH = Ganti dengan alamat dan judul postingan nya kawan

Silahkan berkarya