Tampilkan postingan dengan label Info Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Info Blog. Tampilkan semua postingan
Pada kesempatan kali ini saya akan membuat artikel mengenai cara membuat Back Sound di Blog. Sebenarnya membuat back sound di blog kurang bagus untuk blog kita "bisa membuat loading blog jadi lama", tapi kalau masalah style blog itu adalah masalah selera masing-masing blogger, jadi tidak ada salahnya kalau blog kita, kita pasang widget back sound.
Jika anda tertarik memasang back sound di blog anda maka silahkan ikuti langkah-langkahnya di bawah ini:
READ MORE
Jika anda tertarik memasang back sound di blog anda maka silahkan ikuti langkah-langkahnya di bawah ini:
- Masuk ke situs ini http://www.mixpod.com
- Sign Up (daftar ke situs di atas)
- Jika sudah mengisi form dan submit maka anda akan di minta verifikasi akun
- Masuk ke email anda, di situ ada email pemberitahuan dari MixPod.com yang isinya "Follow the link below to verify your MixPod account." Klik link dan anda sudah terverifikasi.
- Langkah selanjutnya, klik menu "My Plylist" dropdown dan pilih "New plylist"
- Nanti akan keluar halaman gambar background plylist, pilih gambar sesuai selera anda.
- Setelah anda pilih gambar background, nanti akan muncul halaman
- Pilih music yang anda suka
- Kemudian klik menu "save"
- Setelah anda klik tombol save maka akan keluar halaman seperti ini:
Playlist Title: *required (isi judul sesuai selera anda)
Playlist Description: (Isikan deskripsi anda)
Select up to 3 categories from the lists below:
Genres: (Pilih genre dari dari musik yang anda pilih, maks 3 kategori) - Setelah selesai, klik "SAVE (get code)"
- Setelah anda mendapatkan kodenya, sekarang kita menuju blog kita
- Di blog, kita plih "add widget" pilih "add HTML/JavaScript"
- Masukan kode yang kita dapat tadi ke "add HTML/JavaScript" dan klik Save
- Selamat..backsound blog anda sudah jadi.
Membuat atau menambah widget 2 kolom sejajar kanan dan kiri biasanya digunakan apabila kita menempatkan iklan supaya terlihat lebih tertata atau memang tempat widget kita sudah penuh sehingga ingin menambah kolom widget baru.
Sebenarnya cara membuat widget rata kanan dan kiri di bawah header atau dibawah menu tidaklah sulit, cukup menambahkan script di menu HTML. Tutorial ini khusus untuk blog blogspot kalau yang lain saya kurang tau karena saya mempraktekan cara ini di blogspot.
Adapun tata cara penambahan Widget Rata Kanan dan Kiri dibawah header atau Menu atau bisa juga di atas Header:
 |
| Contoh gambar hasil menambah Kolom widget rata kanan dan kiri |
Adapun tata cara penambahan Widget Rata Kanan dan Kiri dibawah header atau Menu atau bisa juga di atas Header:
- Masuk ke akun Blogspot anda
- Setelah anda berada pada halaman Panel Blog, kemudian anda Pilih " Template dan edit HTML". Sedang untuk antar muka blogger lama, anda masuk ke "Rancangan kemudian edit HTML"
- Setelah itu pilih Menu "edit HTML" kemudian centang "Expand Template Widget".
- Untuk berjaga-jaga, anda download terlebih dahulu template Blog anda.
- Setelah itu anda cari kode: ]]></b:skin>
- Letakan kode dibawah ini tepat di atas kode ]]></b:skin>#kolom-bawah-header-container { border: .3px dotted #cccccc;}
.kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.kolom-bawah-header h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.kolom-bawah-header ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;} - Kemudian cari kode seperti ini:<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='cadangan (Header)' type='Header'>
<b:includable id='title'>
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
</b:includable>
</b:widget>
</b:section>
</div> - Jika sudah ketemu, letakan kode dibawah ini tepat dibawah kode di atas kodenya script nya seperti ini:<div id='kolom-bawah-header-container'>
<div id='kolom-bawah-header1' style='width: 480px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='kolom-bawah-header2' style='width: 480px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div> - Lalu simpan dan Lihat hasilnya.
- Jika anda menginginkan Element Widget berada dibawah menu maka, letakan kode NO. 8 tepat di bawah kode menu. Biasanya kode menu akan terlihat seperti ini:<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'>Home</a></li>
. . . . . . . . .
. . . . . . . . .
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> - Sesuaikan lebarnya dengan lebar blog anda, untuk lebar saya beri tanda tulisan yang berwarna merah, misal blog anda mempunyai lebar 900px maka tinggal dibagi dua.
- Lalu Simpan dan lihat hasilnya
Recent post atau sering disebut dengan postingan artikel terbaru. Recent Post sangat penting bagi blog kita, dengan recent post maka pengunjung blog dapat mengetahui artikel-artikel terbaru di blog kita. Maksimalkan tampilan blog anda untuk mendapatkan pengunjung yang banyak.
Recent Post bisa ditampilkan dengan banyak ragam, salah satunya dengan Recent Post Slide Show. Recent Post Slide Show ini menggunakan tampilan thumbnail atau gambar, sehingga pengunjung blog kita bisa tertarik dengan artikel terbaru di blog kita.
Saya sertakan gambar Recent Post Slide Show.
Lihat contoh gambar Recent Post tampilan Slide Show dibawah ini:
Tutorial untuk membuat Recent Post Slide Show dapat anda lihat dibawah ini:
- Login ke akun Blogger anda
- Klik Rancangan kemudian klik Elemen halaman
- Klik Tambah Gadget
- Pilih tamabah HTML/Javascript
- Terakhir masukan kode dibawah ini dan simpan. Lihat hasilnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://maramarasaja.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://maramarasaja.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
Tambahan:
- Ganti tulisan yang berwarna merah sesuai selera anda, kode merah itu merupakan lebar dan tinggi kolom.
- Ganti tulisan yang berwarna biru dengan Url Blog anda.
- Untuk tulisan yang berwarna hijau adalah jumlah artikel yang muncul dalam Slide Show, anda bisamengantinya dengan keinginan anda.
Semoga tutorial cara membuat recent post slide show ini bisa membantu anda..!
Sedikit Ulasan tentang Program PPC/Pay Per Click.
Sebenarnya apa yang dimaksud dengan PPC atau "Pay Per Click". PPC (Pay Per Click) adalah "Suatu program bisnis internet yang memberi kesempatan kepada para pemilik Web/ Blog yang ingin mendapatkan passive income dari program PPC. Sedang PPC sendiri berasal dari Situs-situs penyedia jasa PPC. Situs Penyedia Jasa PPC Bisa digambarkan sebagai Distributor dunia maya dan kita para pemilik blog/web penerbit iklan dari Situs Penyedia Jasa PPC atau "Publisher" adalah Sales Marketing dari sang Distirbutor. Banyak keuntungan bagi para Publisher, di antaranya kita bisa mendapatkan imbalan uang pada setiap iklan yang di klik, besarnya Rp 300 per uniq klik untuk AdsenseCAMP
Tentunya anda tau apa itu Distirbutor. Distributor sendiri mendapatkan mendapatkan barang dagangan dari Produsen untuk dijual kembali, yang dimaksud dengan Produsen disini adalah Para pemasang Iklan/Advertiser.
 |
| Klik Untuk Daftar AdsenseCAMP |
Banyak sekali stus-situs penyedia jasa PPC di dunia ini, adapun Penyedia Jasa PPC yang paling terkenal, paling terpercaya, paling diminati serta paling sulit untuk daftar menjadi karyawannya adalah Google Adsense. Blog saya ini adalah salah satu contoh blog yang di tolak sama Google Adsanse.
Sebenarnya banyak situs Penyedia Jasa PPC selain Google Adsense, salah satunya yaitu AdsenseCAMP. AdsanseCAMP adalah Situs Penyedia Jasa PPC alsi Indonesia, cara dafatar sebagai Publisher di AdsenseCMAP pun sangatlah mudah cukup klik daftar terus pasang Script iklan di Blog/Web anda setelah anda pasang Scriptnya maka Iklan langsung muncul di Blog/Web anda. Situs Penyedia Jasa PPC yang satu ini sudah terbukti membayar para Publishernya. Jika anda berminat menjadikan Blog/Web anda sebagai penghasil uang untuk anda maka silahkan daftarkan Blog/Web anda ke situs-situs penyedia layanan PPC.
Saya sarankan Daftarkan Blog/Web anda ke AdsenseCAMP karena banyak Web/Blog terkenal yang juga daftar sebagi Publisher di Situs tersebut dan juga cara daftar AdsenseCAMP sangatlah mudah serta AdsenseCAMP sudah terbukti membayar para Publishernya. Anda berminat untuk menjadi Publisher AdsenseCAMP? KLIK DI SINI UNTUK DAFTAR AdsenseCAMP atau Klik Gambar di Samping.
Jika kita menggunakan cara manual maka setiap kita menulis artikel, kita harus menggunakan "Insert jump break" untuk memotong artikel kita atau sering disebut juga "men-split artikel", dan kita harus menentukan sendiri sampai mana tulisan kita harus dipotong.
Beda ceritanya kalau kita menggunakan Script Auto Read More, saat kita memasang Script Auto Read More dalam blog maka secara otomatis artikel kita akan terpotong dengan sendirinya dan panjang tulisan artikel kita yang terpotong bisa sama.
Di bawah ini adalah langkah-langkah Membuat Auto Read More :
Pertama, silahkan masuk ke halaman EDIT HTML, Cari kode </head>
Letakkan kode dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kedua ,Kalau sudah, ganti kode <data:post.body/> ,ganti dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Langkah terakhir Klik Simpan dan lihat hasilnya.
Catatan : Untuk Anda yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh di bawah ini :
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
