Menampilkan Code HTML Pada Posting Blog

 Assalamualaikum..! mungkin artikel ini sudah dianggap artikel yang sudah lama di ketahui.. oleh para blogger senior, namun artikel ini juga sangat di butuhkan oleh para blogger pemula. termasuk saya sendiri..! heheheh.. maklum blogger pemula.

Nah agar para blogger pemula tidak kebingungan maka kali ini saya akan membantu sobat untuk memPraise code Html sobat agar bisa di tampilkan pada posting atau pada badget sobat, biasanya akan di gunakan pada pembuatan code Banner. seperti yang nampak pada badget banner saya di samping.

ok.! mari kita langsung ke TKPnya.. namun sebelumnya sobat harus memahami beberapa simbol yang ada pada tabel di bawah ini, ini merupakan simbol-simbol yang menyertai sebuah kode html seperti <, >, ", &, spasi. Agar simbol-simbol tersebut dapat tampil. Lihat tabel di bawah.!

simbol kode html
	<	ubah menjadi -->	& lt;
	>	ubah menjadi -->	& gt;
	"	ubah menjadi -->	& quot;
	&	ubah menjadi -->	& amp;
	spasi	ubah menjadi -->	& nbsp;

Catatan:
* untuk menggunakan simbol kode yang ada disamping kanan pada tabel jangan diberi spasi tetpi disambung. Misal,antara simbol & disambung dengan simbol lt;

Contoh:

<a href="http://archcom.blogspot.com/" target="_blank"><br /><img border="0" alt="archcom" width="190" src="http://i954.photobucket.com/albums/ae22/izhal/image/animasi/Banner1.gif"  hight="50" /></a> 

Cara yang pertama yaitu:

Dengan merubah code atau simbol secara manual.

Sesuai dengan contoh di atas maka yang perlu di rubah adalah code yang berwarna yang sesuai dengan keterangan pada tabel simbol di atas.setelah andah merubah codenya dengan menggunakan simbol pada tabel di atas maka copy pastekan code tersebut pada halaman blog anda. maka code tersebut akan tampil seperti di bawah ini:

<a href="http://archcom.blogspot.com/" target="_blank"><br /><img border="0" alt="archcom" width="190" src="http://i954.photobucket.com/albums/ae22/izhal/image/animasi/Banner1.gif" hight="50" /></a>

Cara yang kedua yaitu:

Dengan mengguanakan fasilitas Text Area.

Text area ini mempunyai kelebihan dibanding cara yang pertama, yaitu mampu menampung banyak jumlah karakter text. Code untuk membuat Text area dapat anda lihat di bawah ini:

<form><textarea name="code" rows="13" cols="30">Code sobat tempatkan di sini</textarea></form>

Setelah sobat mengganti text yang berwarna mera dengan code sobat, maka code sobat dapat tampil seperti di bawah ini: 

</span><a href="http://archcom.blogspot.com/" target="_blank"><br /><img border="0" alt="archcom" width="190" src="http://i954.photobucket.com/albums/ae22/izhal/image/animasi/Banner1.gif" hight="50" /></a><span class="fullpost">

Namun ada cara yang sangat praktis bila di bandingkan dengan cara pertama dan kedua, yaitu dengan menggunakan fasilitas html praise. seperti milik saya ini, sobat dapat mengkosongkan text yang ada di dalam kotak praise tersebut, kemudian pastekan code html sobat yang ingin di praise kemudian tekan Convert maka hasil convert tersebut dapat sobat copy pastekan pada halaman blog sobat. maka hasilnya akan seperti pada cara petama di atas.

copy paste code sobat di kotak ini

Created By Archcom

Read More

Membuat Buku Tamu Yang Tersembunyi

Kalau sobat ga tau lagi mau taruh buku tamu di mana, buat aja buku tamu yang tersembunyi. dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Nah ga perlu panjang lebar lagi mari kita lihat cara membuatnya:

caranya :

1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

Ni codenya:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSNsdVaEQ0reJ9CQeT9ibyN-KWULK80XKgDu7i7geejWlNxHZpaiIfi8aXpm3fkzSx7uH24R2v2xmoKRlpvJmqP0syElOI1cFGeF-2hxdT8nYNR-D9GVz0pvWjsb0LEY42LkX79jaQxEy/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Paste kode buku tamu sobat di sini -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://Archcom.blogspot.com/2010/09/membuat-buku-tamu-yang-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Pada kode di atas, Tulisan yang berwarna merah di atas ganti dengan kode buku tamu yang kamu dapatkan dari situsnya,

5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu. 

6. Selamat mencoba!

Terima Kasih Atas Kunjungan Anda..!

Read More

Memasang Tombol Reply Komentar

Askum.. dan salam Nusantara..!!!

Syukur Alhamdulillah.. kali ini saya punya waktu untuk Updete Blog ini setelah beberapa bulan yang sangat padat agendanya. ok sobat kali ini saya akan memosting artikel yang mungkin sudah tak asing lagi bahkan sudah basi kali ya.?

Artikel kali ini menyangkut bagaimana kita membuat tombol Reply Pada kotak komentar. sehingga kotak komentar kita terlihat lebih menarik. misalkan punya saya yang sederhana ini seperti yang nampak pada gamabar di bawah ini :

Ok sobat kita tidak perlu mengulur-mengulur waktu lagi mari kita bahas cara membuatnya :

Caranya yaitu:

1. Seperti biasanya Login dulu ke blog sobat

2. Setelah login sobat masuk ke Perancangan

3. Lalu pilih Edit HTML

4. Berilah tanda Centang pada Expand Template Widget

5. Kemudian cari code di bawah ini :

    <data:commentPostedByMsg/>

6. Setelah dapat code di atas, selanjutnya sobat copy code di bawah ini kemudian letakan atau paste di bawah code yang sobat cari tadi.

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG SOBAT&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #900;  Background:#FFCC00;'>Reply</a></span>

7. Selanjutnya ganti Tulisan ID BLOG SOBAT pada code diatas dengan No ID blog sobat sendiri, kemudian Save Template sobat dan lihat hasilnya.

Catatan:

Untuk merubah warna kotak dari tombol reply tersebut sobat bisa mengedit Style code di atas.

style='padding:0px 5px; border:1px solid #900;  Background:#FFCC00;'>Reply</a></span>

Terima Kasih Atas Kunjungan Anda..!

Read More

Cara Pasang Tombol Read More Otomatis

Kali ini saya akan bahas sedikit mengenai cara pasang read more otomatis pada posting blogger, pada umumnya artikel semacam ini uda kian banyak di internet tapi saya mencoba memostingnya lagi karena dalam read more otomatis ini terdapat beberapa masalah yang sering di bicarakan para blogger. nah kali ini saya memberikan solusinya namun di kemas dalam dua posting. posting yang pertama yah ini dia yang lagi sobat baca.

Mari kita lihat cara memasang read more otomatisnya:

1. Pertama Login ke blog anda

2. Masuk ke menu Perancangan

3. Pilih Edit HTML dan jangan lupa beri tanda centang pada Expand Template Widget

4. Setelah itu cari code </html>

Setelah Ketemu kodenya maka Letakkan kode javascipt dibawah tepat diatas kode tadi

<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>

5. kemudian cari kode <data:post.body/>

 Kalo sudah ketemu ganti kode tersebut dengan kode di bawah ini

&lt;b:if cond=&#039;data:blog.pageType != &quot;item&quot;&#039;&gt;
&lt;div expr:id=&#039;&quot;summary&quot; + data:post.id&#039;&gt;&lt;data:post.body/&gt;&lt;/div&gt;
&lt;script type=&#039;text/javascript&#039;&gt;createSummaryAndThumb(&quot;summary&lt;data:post.id/&gt;&quot;);&lt;/script&gt;
&lt;span class=&#039;rmlink&#039; style=&#039;float:left&#039;&gt;&lt;a expr:href=&#039;data:post.url&#039; target=&#039;_blank&#039;&gt;READ MORE - &lt;data:post.title/&gt;&lt;/a&gt;&lt;/span&gt;
&lt;/b:if&gt;
&lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;

kemudian Silahkan langsung Simpan Template atau Pratinjau terlebih dahulu
Selamat blog anda sudah memiliki fitur Auto Read More 

Tambahan:

var thumbnail_mode = "float"; ( letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))

summary_noimg = 250; (Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Tinggi thumbnail dalam piksel)
img_thumb_width = 120; (Tinggi thumbnail dalam piksel)

pada  kode yang dibawah

target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.

 Nah selamat mencoba dan semoga berhasil

Read More

Menampilkan Avatar Komentar Pada Blog

Hai sobat kita ketemu lagi..! 
Setelah dilihat-lihat ternyata blog saya tidak ada avatar para komentar sehingga saya mencoba untuk membuatnya dan ternyata berhasil. dan sekalian saja saya postingkan sebagai artikelnya, mungkin artikel ini udah terlalu banyak di postingkan oleh para blogger lainnya, tapi dari pada tangan jari-jari saya diam saja lebih baik saya ketik saja ni artikelnya.. hehehehe...

Artikel semacam ini juga terdapat pada beberapa blog yang sempat saya baca-baca kemudian saya simpulkan mana yang lebih mudah dan tidak menyusahkan dalam prosesnya, bahkan di jamin 100% berhasil.

Pada awalnya tampilan kotak komentar saya seperti pada gambar di bawah ini:

Sehingga setelah di rubah maka avatar komentar saya dapat terlihat seperti pada gambar di bawah ini:

Jika sobat tertarik dan ingin membuatnya..? agar kotak komentar sobat terlihat lebih menarik, Nah mari kita membahas cara menampilkan avatarnya:

1. Login dulu ke blog sobat.

2. Kemudian Setelah berada di Dasbor blog sobat, pilih menu Perancangan.

3. Lalu ke Edit Html dan jangan lupa beri tanda centang pada "Expand Widget Templates"

4. Kemudian carilah code di bawah ini, untuk mempermuda pencarian gunakan CTRL+F

 <dl id='comments-block'>

  

5. Setelah dapat codenya gantikan code tadi dengan code di bawah ini

 <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Setelah itu cari code berikut ini

<a expr:name='data:comment.anchorName'/>

7. Selanjutnya ganti code tersebut dangan code di bawah ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

8. Kemudian copy paste code CSS di bawah ini dan letakan tepat di atas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}

9. Save template sobat dan lihat hasilnya.

Sumber:  hermanblog dan o-om terima kasih atas artikel-artikel menariknya

Terimakasi atas kunjungan anda..!

Read More

Membuat Tab View Menu Pada Blog

Untuk menghemat tempat pada blog anda, tab view menu sangat efisien dan Ukuran yang relatif kecil tapi bisa memuat banyak space atau winget di dalamnya. dalam proses pembuatan Tab View Menu ini menggunakan code HTML yang cukup panjang dan sedikit menyusahkan. namun tidak jadi masalah sebab kali ini code HTMLnya suda di sediakan di posting kali ini.

Untuk itu di anjurkan agar sobat sebaiknya simak code-code HTML secara baik-baik cara membuatnya, dan yang paling penting adalah Backup Template sobat terlebih dahulu.

Mari kita lihat cara membuatnya:

1. Login dulu ke blog sobat

2. Masuk ke menu Perancangan

3. Pilih Edit HTML dan jangan lupa beri tanda centang pada Expand Template Widget

4. Cari code </head>

5. Kemudian letakkan kode javascript berikut ini sebelum kode </head>

===================================================================================

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
//]]>
</script>
 

===================================================================================

6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

===================================================================================

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

===================================================================================

7. Kemudian Save Template sobat

8. Kemudian langkah selanjutnya sobat klik Tata Letak

9. Tambahkan sebuah Badged

10. Pilih  HTML / Javascript, dan tambahkan kode berikut kedalamnya.

===================================================================================

 

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Winget 1</a>
<a>Judul Winget 2</a>
<a>Judul Winget 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad"> 

code winget 1 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad"> 

code winget 2 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad">
code winget 3 sobat di sini <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

===================================================================================

11. Save Winget/badged Sobat

Keterangan :

• Untuk kode yang berwarna BIRU adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
• Kode yang berwarna HITAM silahkan sobat isi dengan judul - judul dari menu.
• Dan yang berwarna HIJAU, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll. 

Semoga berhasil.!

Read More

Cara Menambahkan 3 Kolom Footer

Blog saya terasa sempit Sepertinya jika ditambahkan footer akan cukup memberikan tempat. Sebelumnya saya sempat bingung, bagaimana sih cara untuk membuat kolom dibagian bawah  footer ? setelah saya cari akhirnya kudapatkan juga cara tersebut, nah begini caranya :

1. Login ke blooger.com
2. Kemudian masuk ke Layout => Edit HTML
3. klik “Expand Widget Template”
4. Cari kod

    <div id='footer-wrapper'>

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

    </div>
    Ket: pada beberapa template kodenya: footer atau footer-section

5. ganti kode yang berwarna merah dengan script berikut :

 <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>

Nah gampang kan.. selamat mencoba dan semoga sukses...!!!

Read More

Pasang Widget Sms Gratis

Sobat informasi saya dapat saat saya tidak punya pulsa lagi di Hp ku, hehehehe... karena pengen sms tapi tidak punya pulsa kemudian saya tanyakan ke paman google akhirnya dapat fasilitas sms gratis ini. nah kalo sobat kepengen punya widget sms gratis seperti punya saya ini silakan ikuti petunjuk yang saya suda sediakan di buwah.

Ga usah banyak cerita mari kita buat widgetnya, yang jelas dengan widget ini kamu bisa kirim-kirim sms secara gratis lewat blog kamu. dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendulang traffik. mendulang traffik tambahan buat blog kamu. namun masih ada kekurang dari widget ini yaitu tidak bisa menerima sms balasan. sehingga bila ada yang membalas kita tidak bisa membacanya. namun walaupun seperti itu gedget ini sangat bermanfaat terutama baut kita yang suka sms-an.

Layanan SMS sms ini gratis tak terbatas (Unlimited Free SMS). Bisa digunakan sms kemana saja. Ke semua operator di Indonesia yang pastinya dong.. dan Script tersebut bisa di simpan di sidebar maupun di dalam postingan anda.

1. Silakan login ke blog anda
2. Pilih tata letak
3. Tambah widget baru
4. Setelah itu tambahakan HTML/Javascript
5. Lalu copy/pastekan code di bawah ini

Code widget sms gratis

<iframe name="I2" src="http://sms-online.web.id/widget"<br>width="270" height="350"> not support<br></iframe><br><a href='http://archcom.blogspot.com/2010/06/pasang-widget-sms-gratis.html' rel='nofollow'>Pesang Widget ini ?</a>

Sekarang blog sobat sudah bisa melayani sms gratis buat para pengunjung. lumayan kan, buat nambah-nambah traffik. Ok sobat cara di atas sangat mudahkan bagi anda..? semoga bermanfaat dan Good Luck..!

Read More

Mengubah Auto Read More Pada Laman Tertentu

Ok posting kali ini telah saya janjikan saat membuat posting mengenai cara pasang read more otomatis, kali ini saya akan bahas permasalahan yang timbul pada auto read more itu sendiri, nah dalam auto read more yang kita gunakan pada umumnya di gunakan sebagai penyingkat posting pada halaman depan blog atau dikenal dengan Home, namun ada juga rean more tersebut tampil pada elemen laman lainnya misalkan pada laman Tentang Saya atau Profil, Tukar Link, My Award dan apa saja elemen laman anda.!

Permasalahan tersebut adalah halaman statis tidak dapat dibuka sepenuhnya atau tidak tampil utuh, melainkan hanya tampil sebagian yang diikuti dengan link atau tobol “read more” atau yang sejenisnya, walau pun sebenarnya pengunjung sudah berada pada alamat/URL static page itu (bukan lagi berada pada halaman/URL awal atau Home Page yang memang pantas kalau di Homepage ada link “read more”). 

Sebagai catatan, cara ini sangat tergantung pada template yang digunakan, jadi kemungkinan kode yang harus diubah berlainan untuk setiap template.

1. Login ke akun Blogger, lalu masuk ke tab Layout, selanjutnya masuk ke mode Edit HTML.

2. BACKUP TEMPALTE ANDA!

3. Kalau biasanya cuma disarankan, kali ini rasanya wajib untuk backup template anda karena mungkin akan terdapat masalah dimana kode yang diubah bisa berlainan untuk setiap template. Cara backup template adalah klik link bertuliskan “Download Full Template” pada mode Edit HTML. Kalau nanti bermasalah, template awal tersebut bisa dikembalikan dengan cara upload.

4. Centang pilihan “Expand Widget Templates”.

5. Pada form Edit HTML, carilah (tekan Ctrl+F di keyboard) kode “read more” atau yang sejenisnya (bisa bertuliskan “lanjutkan…” atau “continue” atau yang lainnya).

6. Jika ketemu maka codenya seperti di bawah ini.

Ini merupakan script read more otomatis sebelum diubah

<b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
   <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> READ MORE</a></span>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Setelah itu tambahkan code di bawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Maka codenya akan jadi seperti di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
   <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> READ MORE</a></span>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

8. Selanjutnya Save template sobat.!

Catatan:
Code Yang berwarna hijau di atas adalah code yang sobat tambahkan tadi maka jika di gabung terlihat seperti di atas.

Sekedar Informasi :
Mungkin ini bisa membantu, seperti terlihat pada contoh di atas, pada template Blogger ada beberapa syntax yang maksudnya merujuk ke jenis halaman tertentu, misalnya:

1. item <== merujuk ke halaman posting/artikel. 
2. static_page <== merujuk ke halaman statis (static pages). 
3. index <== merujuk ke halaman index. misalnya homepage, archive, dan search label.

Semoga bermanfaat dan good luck..!

Read More

Tips Membuat Slide Photo Di Blog Anda

Pengen blog anda tambah menarik..? nah.. skarang ada tips dari saya untuk membuat slide photo or gambar pada blog anda. ok ga perlu banyak ngoce kita langsung aja yach.
 
Pertama-tama anda harus mempunyai koleksi photo or gambar pada PC anda, kemudian bualah account baru di Photobucket, setelah terdaftar maka anda dapat menggunakan berbagai fitur yang ada pada situs tersebut. nah....!!! gampang kan..? untuk informasi lebih lanjut anda dapat kunjungi ke situs tersebut http://www.photobucket.com

nahh.... skarang anda dapat mencobanya.. tampilanya akan seperti yang ada lihat pada blog saya
thenks.... by Archcom

Read More

Memasang HeadLine News Pada Blog

Kali ini saya akan melanjutkan artikel milik sobat yang membahas tentang membuat headline news untuk blog. Sesuai namanya, widget headline news ini menampilkan judul serta link artikel-artikel terbaru dari blog ksobat di bagian atas atau bawah blog sobat.

Kamu bisa lihat contoh gambarnya di bawah:

Judul-judul artikel pada headline news tersebut bergerak, sehingga lebih menarik perhatian pembaca.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
2. Klik "Add a Gadget" dan pilih "HTML/JavaScript",
3. Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:
   
   

   
   <script type="text/javascript">
   
   var hn_url_blog = "http://BLOGSOBAT.blogspot.com";
   
   var hn_jumlah_post = 5;
   
   var hn_warna_latar = "#EEEEEE";
   
   var hn_warna_garis = "#000000";
   
   var hn_posisi = "top";
   
   var hn_tampilkan_judul = true;
   
   </script>
   
   <script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
   
   </script>
   

4. Berikut adalah penjelasan tentang variabel-variabel di atas:
   
   
   • hn_url_blog adalah URL blog kamu (widget ini hanya untuk pengguna blogger).
   • hn_jumlah_post adalah jumlah judul artikel yang ingin kamu tampilkan pada headline news.
   • hn_warna_latar adalah kode warna untuk latar belakang headline news.
   • hn_warna_garis adalah kode warna untuk garis bingkai/border headline news
   • hn_posisi menentukan posisi headline news kamu apakah di atas ("top") atau di bawah ("bottom"),
   • hn_tampilkan_judul bernilai true kalau kamu ingin menampilkan tulisan "Headline news of BLOGSOBAT" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
   Dan yang terakhir Lalu Save Widget dan lihat hasilnya, Bagaimana.? sangat mudahkan.. good luck dan semuga bermanfaat.
   
   
   
   Sumber : http://infotentangblog.blogspot.com

Read More

Cara Mudah Mengganti Template Menghebohkan

Good Night Everybody :D Mimin mau share cara mengganti template blog yang mudah, ga ribet, terus  sangat efisien. Ini bagi yang pengen blognya keren loh.. Hehehe :D Oke Oke check this out ya!

Pada saat pertama kali mendaftar untuk membuat blog, kita diharuskan untuk memilih template awal yang akan kita pakai. Mengapa harus menggunakan template??? Jawabannya adalah karena template adalah gabungan dari script kode HTML 5 dan CSS. Selain itu, untuk template web 2.0 saat ini sudah digabung dengan fasilitas Javascript, JQuery, AJAX, dan lain-lain. Tidak seperti website dengan platform berbasis Codeignitier, membuat, mengolah, dan mengganti template akan membutuhkan waktu yang lama karena memakai berbagai macam bahasa pemrograman disertai dengan Teknik MVC (Model, View, Controller). Kalau dengan platform dari blogger, kita hanya perlu mencari template gratis. Ini nih yang bikin template keren dan super cool, Mimin sendiri juga pakai salah satunya dari sini Blogger Template.

Oke oke ini nih caranya:

1. Pertama tama download salah satu template yang kalian sukai dari  Blogger Template.
2. Setelah didownload, kalian akan mendapatkan file dalam bentuk .rar atau .zip. Extrack dulu ya guys.
3. Abis itu, pilih file yang berekstensi .xml. Untuk template yang Mimin pake bernama DiaryNotebook.xml.
4. Nah tahap selanjutnya baru buka Blogger.
5. Setelah itu klik nama blog kalian, kemudian pilih template.
6. Sebelum mengganti template, Mimin saranin nih buat kalian untuk membackup template kalian ya.      
7. Untuk penjelasan saja nih guys,  no 1 digunakan untuk membackup template kalian yah, Terus yang no 2 itu buat pilih file .xml yang kalian tadi download.
8. Abis itu baru deh pilih file ekstensi kalian tadi yang akan dijadikan template.
9. And then klik upload ya, terus pertahankan widget agar kalian ga susah susah lagi bikin widget.
10. Selesai deh.

Nah nah, jika kalian dapat ekstensi berupa .txt, malah justru itu lebih mudah kok. Tinggal masuk ke template, pilih edit HTML. Centang Expand Widget Template terus Ctrl+A lalu delete.

Kemudian tinggal copy script kode yang kalian dapatkan, terus paste. Untuk melihat hasilnya pilih pratinjau ya guys. Kalau udah selesai baru save template.

Selesai sudah tugas Mimin menjelaskan bagaimana cara mudah mengganti templatenya. See you next time guys :D

Read More

Cara Membuat Blog yang Mudah Di Blogspot

Hei hei hei Mimin back.. Karena blog Mimin baru nih, makanya Mimin mau ngasih paparan sedikit mengenai apa itu blog dan bagaimana cara membuatnya yah. Oke langsung aja, check this out! :D



Mungkin anda pernah mendengar istilah website, ya blog merupakan sebuah website namun dalam bentuk yang lebih sederhana dan mudah di atur oleh pemula. Menurut Wikipedia blog adalah aplikasi web yang bisa memuat tulisan gambar maupun video.

Apakah yang dimaksud dengan blog itu ? Berikut beberapa pengertian tentang blog:

1. Weblog atau blog merupakan teks dokumen, gambar, objek media dan data yang tersusun secara hierarkis dan menurut kronologi tertentu yang dapat dilihat melalui browser internet (misalnya internet explorer, firefox, Google chrome, opera, dan lain-lain)
2. Blog merupakan publikasi secara periodik dan tetap mengenai pemikiran personal seseorang dan juga link web
3. Blog adalah jurnal yang disediakan pada sebuah web. Kegiatan menulis sebuah blog dinamakan “blogging”. Adapun orang yang mengelola blog disebut “blogger.
4. Blog adalah suatu perjalanan yang berkesinambungan, dengan panduan logika yang berkelanjutan dan konsisten. Pembahasan di dalam sebuah blog biasanya konsisten pada topik utama, misalnya politik, sastra, musik, berita, tutorial blogspot dan sebagainya. Adapula yang campuran dua atau beberapa tema tulisan. Tetapi hal ini tidak bisa di jadikan patokan, yaa menurut kemauan si pemilik blog sendiri laah.
5. Blog website adalah jurnal yang disediakan pada web. Blog dapat di-update secara berkala, setiap jam, hari, perminggu dengan suatu aplikasi yang disediakan oleh penyedia. Tidak dibutuhkan suatu keahlian khusus untuk melakukan update atau mengelola blog. artikel dalam blog dapat disusun secara teratur sesuai kriteria  atau kategori tertentu.

MANFAAT, FUNGSI DAN KEGUNAAN BLOG.

Blog rata-rata tersedia secara gratis yang disediakan oleh situs tertentu seperti blogger.com, worpdress.com, tumblr.com, blogdetik, kompasiana, kampus besar dan lainnya, sehingga siapapun bisa mengaksesnya baik individu, kelompok dan institusi tertentu. Karena gratis inilah maka kemudian orang yang banyak  ngeblog.

Ada beberapa manfaat dan fungsi blog yaitu;

1. Sebagai sarana ekspresi diri.

Biasanya ini dipergunakan individu yang ingin mencurahkan segala uneg-uneg, ide dan gagasan yang mungkin tidak bisa tersalurkan secara nyata. Maka dari itu dengan ngeblog, segala macam dan gagasan tersebut bisa dicurahkan dalam sebuah tulisan di blog.

2. Sebagai media dan wahana berlatih menulis.

Sesorang yang terbiasa mebuat sebuah artikel di blog, tentu akan mereview kembali hasil postingannya. Dari situ dia bisa mengedit tulisannya yang barangkali ada kekurangan dalam hal tata bahasa dan lainnya. Seseorang yang terbiasa menulis tentunya juga pada proses selanjutnya akan dengan mudah membuat tulisan yang lebih berkualitas.

3. Sebagai sarana promosi.

Berbagai macam cara ditempuh seseorang dalam memperkenalkan suatu produk barang atau jasa, tidak terkecuali dengan media internet dan membuat blog. Tidak sedikit pula artis dan selebritis juga membuat blog agar lebih tenar. Dan trend saat ini berkenaan dengan masalah politik, yaitu dalam upaya kampanye calon-calon kepala daerah, partai politik amaupun calon anggota legislatif.

4. Blog sebagai sumber penghasilan utama dan tambahan.

Tidak sedikit blogger (sebutan untuk seorang yang menekuni dunia blog) yang sukses yang mampu mendapatkan keuntungan finansial hanya dengan nge blog. Ratusan bahkan ribuan dollar mengalir ke kantong mereka tiap bulannya. Tak sedikit pula orang yang mengandalkan blog sebagai gantungan hidup. Banyak cara mendapatkan uang dengan ngeblog. Misalnya Google adsense, iklan PPC pay per click, maupun penayangan iklan produk dan jasa di blog. 

Situs layanan penyedia blog gratis saat ini begitu banyak diantaranya: blogger.com, wordpress.com, friendster.com, xanga.com, blogdrive.com, blogsome.com, hubpages, wordpress.com, multiply.com dan lain-lain.

Ada juga penyedia blog gratis lokal seperti blogdetik.com kompasiana.com dan lain. Diantara sekian banyak penyedia layanan blog, blogger.com merupakan penyedia layanan blog yang  saya paling populer, populer karena cukup mudah apalagi buat para pemula yang baru belajar bikin blog. Lihat Kelebihan Blogspot dibanding Blog Gratisan lain. Jika Anda membuat blog di blogger.com maka alamat url blog Anda nantinya adalah: http://akun-blogger.blogspot.com.

Pada tutorial kali ini saya akan memberikan langkah-langkah pembuatan blog dengan blogger.com. Yang nantinya bernama seperti "namablog.blogspot.com".

Yuk kita simak sama-sama tutorial bergambar langkah dan cara membuat akun dan blog di blogger.

• Pertama, pastikan Anda memiliki akun google mail (ex: julak@gmail.com), karena untuk bikin blog di blogger harus memakai email google. Jika belum punya akun email Google silakan buka artikelcara membuat email di google mail

• Jika sudah punya email di google, sekarang masuk ke blogger.com, Maka akan muncul seperti gambar di bawah ini, Masukkan alamat email gmail dan password sandi akun gmail anda ke kotak yg ada. Klik Masuk

• Jangan lupa buka email untuk konfirmasi akun gmail blogger

• Klik Lanjutkan ke Blogger

• Proses selanjutnya membuat blog klik Buat blog baru

LANGKAH AWAL MEMBUAT BLOG BARU;

• Pada judul masukkan nama blog, misalnya kalo milik saya adalah Cara Membuat Blog ala Super gaptek

• alamat adalah URL blog sobat nantinya misalnya akubelajarblog.blogspot.com

• pilih dulu tampilan / template yang sederhana dan ringan saja, pilih yang simple/mudah

• Klik Buat blog

• Blog kita sudah selesai dibuat akan muncul nama blog kita tadi, Klik mulai mengeposkan artinya kita mulai membuat artikel atau tulisan terbaru di blog kita.

Langkah-langkah dan tahapan membuat postingan terbaru

• Hal pertama yang harus dilakukan setiap mmembuat tulisan baru adalah membuat judul di entri. Buatlah judul yang baik, jelas dan bisa menarik perhatian pengunjung

• Yang kedua tentunya menuliskan kata dan kalimat di form yang ada

gambar 6 membuat judul dan tulisan blog

• Selanjutnya adalah menentukan label atau kategori tulisan, silahkan isi dengan kategori yang dikehendaki sobat. Jika dirasa sudah cocok klik Selesai.

membuat label atau kategori tulisan

• Bisa juga sobat blogger menjadwal kapan publikasi artikel, bisa ya bisa tidak atau otomatis. Jika pilih otomatis, maka begitu kita publikasi akan langsung muncul postingan kita, namun jika kita jadwal tidak langsung muncul tap sesuai dengan yang sudah dijadwalkan. Klik selesai

• Jika sudah klik publikasikan (lihat gbr 6)

menjadwal publikasi posting

Nah, blog sudah selesai dibuat dan artikel pertama telah diposting. Silakan buat blog gratis anda di blogger.com

Read More