Membuat Auto Readmore (Summary Post) Sederhana

Membuat Auto Readmore (Summary Post) Sederhana - Pada kesempatan kali ini akan saya share tutorial mengenai cara membuat auto readmore (summary post) sederhana. Tampilannya memang sangat sederhana dan biasa-biasa saja, namun sangat bermanfaat sekali bagi kerapian struktur tampilan dari setiap postingan yang berada di halaman awal (beranda) blog kita.

Oke, langsung saja bagi yang berminat untuk membuat auto readmore (summary post) sederhana ini silahkan ikuti langkah-langkah seperti berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode </head> dan letakkan script kode berikut ini di atasnya :

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://u-sup.googlecode.com/files/summarypost.js' type='text/javascript'/> 

5. Setelah itu, cari kode <data:post.body/> dan hapus atau ganti kode tersebut dengan kode berikut 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:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

6. Klik save/simpan template, dan lihat hasilnya...

Note :
summary_noimg = 300 adalah panjang ringkasan tulisan dari setiap postingan yang tidak memiliki gambar.
summary_img = 300 adalah panjang ringkasan tulisan dari setiap postingan yang memiliki gambar.
img_thumb_height = 150 merupakan ukuran tinggi gambar thumbnail dari postingan tersebut.
img_thumb_width = 150 merupakan ukuran lebar gambar thumbnail dari postingan tersebut.
Anda bisa menyesuaikannya sesuai dengan selera anda.

Selamat moncoba ya... Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat auto readmore (summary post) sederhana. Semoga postingan ini bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kesalahan yang ada. Special thanks to u-sup. Salam sejahtera by ngeposta...

Membuat Menu Navigasi Horizontal Dropdown Style

Membuat Menu Navigasi Horizontal Dropdown Style - Menu navigasi hoizontal merupakan sederet menu yang berisikan berbagai halaman tertentu dalam blog itu sendiri. Semisal mengenai profil admin, halaman contact, link exchange, advertise, dan sebagainya. Nah, pada kesempatan kali ini saya akan share tentang cara membuat menu navigasi horizontal dropdown style.

Oke, langsung saja simak baik-baik dan ikuti langkah-langkah berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> dan letakkan script kode berikut ini di atasnya :

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo24CF0oJjescUpYBbVeS_WAoAItYnmD_QHfmwmjDXh_3uP9rQhizvqsYrqS8ru76Ve1T9PCfsKpOC8d1wSzGivHyykv_I1cn8jizrxr26n9C4z3cI21xAN6S87jXoHgzy0p3cYxVbuQvZ/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

5. Selanjutnya cari kode </head> dan letakkan script kode berikut ini tepat di atasnya :

<!-- Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[ function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}} //]]> </script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;}
</style>

6. Langkah selanjutnya adalah cari kode <body> dan letakkan script kode berikut ini di bawahnya :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'> <li class='selected'>
<a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a> <ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>

7. Klik save/simpan template, dan selesai...

Note :
Ganti tanda # dengan link-link artikel atau halaman static blog anda dan sesuaikan tulisan yang ada di sampingnya agar sesuai dengan selera dan kebutuhan anda.

Cukup sekian postingan pada kesempatan kali ini tentang cara membuat menu navigasi horizontal dropdown style. Semoga bermanfaat bagi anda, dan selebiya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...

Membuat Cursor Blog di Ikuti Oleh Teks atau Tulisan Tertentu

Membuat Cursor Blog di Ikuti Oleh Teks atau Tulisan Tertentu - Agar tampilan blog kita menjadi lebih unik dan lebih menarik lagi, maka kita bisa membuat cursor blog kita di ikuti oleh suatu teks atau tulisan tertentu. Dimana ketika cursor tersebut kita gerakkan kemana saja, maka teks atau tulisan tersebut akan mengikutinya secara otomatis.

Jika anda suka dan berminat untuk membuat cursor blog anda di ikuti oleh teks atau tulisan tertentu, maka perhatikan langkah-langkah pembuatannya seperti berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Masukkan script kode berikut ini :

<script language="javascript">
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='http://ngeposta.blogspot.com';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

6. Kemudian klik save/simpan, dan lihat hasilnya...

Note :
Ganti tulisan yang berwarna orange dengan teks yang anda inginkan, Teks tersebut merupakan teks yang akan tampil dan mengikuti cursor blog anda.

Untuk previewnya bisa anda lihat pada gambar yang ada di atas. Dan cukup sekian postingan pada kesempatan kali ini tentang cara membuat cursor blog di ikuti oleh teks atau tulisan tertentu. Semoga apa yang sudah saya publikasikan di blog ini bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...

Cara Membuat Konten Artikel (Postingan) Blog Kita Menjadi Anti Copy Paste

Cara Membuat Konten Artikel (Postingan) Blog Kita Menjadi Anti Copy Paste - Terkadang ada seorang blogger yang tidak rela dan tidak ingin jika konten artikel (postingan) blog miliknya di copy paste saja oleh blogger lainnya. Untuk itu, mereka kerap kali melakukan hal-hal yang pada intinya adalah agar konten artikel (postingan) blognya tidak bisa di copy paste (anti copy paste). Sehingga setiap konten yang ada pada artikel (postingan) miliknya tersebut mulai dari gambar sampai tulisan/teksnya dibuatnya menjadi anti copy paste.

Namun, untuk blog saya ini (Ngeposta) sama sekali tidak saya pasang script anti copy paste seperti itu. Karena biasanya dengan adanya hal semacam itu, akan membuat pengunjung blog kita menjadi kesal dan kemungkinan tidak akan berkunjung lagi ke blog kita. Dan berikut merupakan salah satu cara yang bisa kita gunakan untuk membuat konten artikel (postingan) blog kita menjadi anti copy paste, silahkan bagi yang berminat bisa di simak dengan baik tutorial berikut ini :

1. Masuk/login ke blogger.com menggunakan akun anda.
2. Menuju ke halaman Template � Edit HTML � Lanjutkan, centang Expand Template Widget.

3. Kemudian cari kode </head> (agar lebih mudah dalam mencari kode tersebut, tekan ctrl+f untu mencarinya) dan letakkan script kode berikut tepat dibawahnya :

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script>

4. Klik save/simpan template, dan selesai...

Bagaimana? Mudah sekali kan tutorial cara membuat konten artikel (postingan) blog kita menjadi anti copy paste tersebut...? Kalau begitu selamat mencoba ya... Semoga postingan tentang cara membuat konten artikel (postingan) blog kita menjadi anti copy paste ini bisa bermanfaat bagi anda. Cukup sekian dulu, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Special thanks to boytriks. Salam sejahtera by ngeposta...