Semeton Sidakarya

Home » All posts

Cara membuat 1, 2, 3 kolom gadget diatas atau dibawah header dan post

Cara membuat kolom gadget artinya menambah ataupun menciptakan kolom gadget yang letaknya bisa dimana saja sesuai keinginan dan kebutuhan blog dengan cara memasukan dan membuat kode-kode scrift HTML sendiri, biasanya para blogger menambah kolom gadget digunakan untuk memasang iklan atau menambah aksesoris diblog sehingga blog kelihatan menarik, caranya sebagai berikut :

A. Cara membuat 1 kolom gadget diatas post, caranya sebagai berikut :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Apabila sudah ketemu ganti tulisan showaddelement='no' menjadi showaddelement='yes'
Klik Simpan dan lihat hasilnya di tata letak diatas post

B. Cara membuat 1 kolom gadget diatas header, caranya sebagai berikut :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Tambahkan Kode scrift ini <b:section class="header" id="topheader" preferred="yes">
dibawah kode tersebut
Selanjutnya dibawah kode diatas akan melihat kode ini <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> ganti tulisan showaddelement='no' menjadi showaddelement='yes'
Klik Simpan dan lihat hasilnya di tata letak diatas post

Cara menempatkanya lihat gambar dibawah ini

C. Cara membuat 1 kolom gadget dibawah header, caranya sebagai berikut :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin>
Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

#under_header
{ float:left; width:100%;
}

Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Tambahkan Kode <b:section class="header" id="underheader" preferred="yes"> letakkan dibawah kode <div class="region-inner header-inner">
Klik Simpan dan lihat hasilnya di tata letak diatas post

D. Cara membuat 2 kolom gadget dibawah Header caranya sebagai berikut :

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>

#box-kolom-widget { clear:both;
}
.box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;
}

Setelah itu cari kode dibawah ini :

<div id="main-wrapper">
atau <div id="main-outer">
atau <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

Klik Pratinjau, siapa tahu ada kesalahan
Klik Simpan

E. Cara membuat 3 kolom gadget dibawah Header caranya sebagai berikut :

Caranya sama seperti membuat 2 kolom gadget tinggal mengganti kode CSS dan scrift HTMLnya, seperti Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

Setelah itu cari kode dibawah ini :

<div id="main-wrapper">
atau <div id="main-outer">
atau <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

Klik Simpan

Cara membuat tulisan berjalan diblog

Cara membuat tulisan berjalan diblog seperti tulisan yang bergerak kekiri atau kekanan, keatas atau kebawah dan sebagainya, untuk membuatnya tidaklah terlalu sulit yang penting teliti cara memasangnya dan penempatannya diblog, untuk menempatkannya bisa di post blog atau side bar sesuai keinginan dan kebutuhan, tertarik dengan tulisan berjalan coba ikuti cara dibawah ini :

Sign in diblogger
Klik Opsi lainnya (untuk memasang di Sidebar)
Klik Tata letak
Klik Tambah gadget dan cari HTML/Javascript
Masukkan kode marquee yang diinginkan
Klik Simpan
Untuk memasang di Postingan >> klik Entri baru >>Pasang kode Marquee>>Pratinjau>>Simpan

Contoh Tulisan Marquee

Tulisan yang bergerak dari kanan ke kiri

<marquee direction="left" scrollamount="4" align="center">Kekanan dan kekiri</marquee>

Kekanan dan kekiri

Tulisan yang bergerak dari kiri ke kanan

<marquee align="center" direction="left" scrollamount="4"> Kekiri dan kekanan </marquee>

Kekiri dan kekanan

Tulisan yang bergerak dari atas ke bawah

<marquee align="center" direction="down" scrollamount="4"> Atas - bawah </marquee>

Atas - bawah

Tulisan yang bergerak dari bawah ke atas

<marquee align="center" direction="up" scrollamount="4"> Contoh Tulisan Berjalan </marquee>

Contoh Tulisan Berjalan

Tulisan bergerak bolak balik atau mondar - mandir dari kiri ke kanan

<marquee align="center" behavior="alternate" direction="left" scrollamount="4"> Mondar - mandir</marquee>

Mondar - mandir

Tulisan yang bergerak bolak balik atau mondar - mandir dari kanan ke kiri

<marquee align="center" behavior="alternate" direction="right" scrollamount="4"> Mondar - mandir</marquee>

Mondar - mandir

Untuk menambah link pada marquee stop, gunakan kode berikut :

<marquee direction="left" onmouseout="this.start()"onmouseover="this.stop()" scrollamount="2"><a href="http://ketutjoel.blogspot.com/2012/07/cara-membuat-teks-berjalan-di-blog.html" target="_blank">Cara Membuat Tulisan Berjalan di Blog</a></marquee>

Cara Membuat Tulisan Berjalan di Blog

Menambah background, padding, border, color, memperbesar tulisan pada marquee bisa menggunakan kode sebagai berikut :

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 50px; font-weight: bold; height: 70px; letter-spacing: 0.5em; padding: 15px; width: 500px;"> <marquee align="center" direction="left" scrollamount="6">Contoh Tulisan Berjalan</marquee></div>

Contoh Tulisan Berjalan

Untuk Membuat menu menggunakan kode sebagai berikut:

<div style="background-color: white; border: 2px solid #FF0000; height: 100px; overflow: auto; padding: 10px; width: 90%;">
<marquee align="justipy" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
<li><a href="URL alamat Blog">Judul Blog </a></li>
</marquee></div>

Sumber Sejarah Dalem Sidakarya

Sejarah Dalem Sidakarya

Topeng Sidakarya

Pura Mutering Jagat Sidakarya

Pantangan di Desa Sidakarya

Sejarah Perisai Diri di Sidakarya

Sejarah ST Tunasmuda Sidakarya

Sejarah Panjer dan Sidakarya

Silsilah Dalem Sidakarya

Banten Nunas Tirta Sidakarya

Keterangan

Direction = Mengatur pola gerakan tulisan (left, right, up dan down)
Scrollamount = Mengatur kecepatan gerakan tulisan
Behavior ( scroll/slide/alternate ): Mengatur prilaku gerakan tulisan.
Warna Merah Ganti dengan URLnya kawan

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