coin

Menampilkan widget pada halaman tertentu

Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>


Menampilkan Widget Hanya di Archieve
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................
</b:if>


Menampilkan Widget Hanya di Item
<b:if cond='data:blog.pageType == &quot;item&quot;'>
............................................
</b:if>


Menampilkan Widget Hanya di Laman
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
..................................
</b:if>


Menampilkan Widget Hanya di URL tertentu
<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
.........................................
</b:if>


Sebagai tambahannya, anda juga bisa mengatur widget untuk tampil SELAIN dari halaman-halaman diatas. caranya dengan mengganti Tanda == diganti dengan tanda !=
sebagai contoh:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
..........................
</b:if>
Maka widget tersebut akan tampil pada halaman SELAIN Homepage. tanda tersebut juga dapat digunakan untuk Halaman-halaman lainya yang telah disebutkan diatas.
[READ MORE]

jquery featured content slider

Inilah hasil rekayasa Jquery, mungkin anda pernah berkunjung sebuah situs dan melihat sebuah tampilan Headline News yang dapat berganti secara lembut. Contohnya silakan lihat disini.
Nau itu adalah hasil rekayasa Jquery yang biasanya digunakan untuk menampilkan beberapa konten dari situs, supaya pengunjung tertarik untuk membacanya.

Widget ini terdiri dari dua bagian, bagian sebelah kiri merupakan tempilan utama berupa gambar besar dilengkapi judul dan ringkasan artikel. Bagian sebelah kanan merupakan list konten yang berisi gambar kecil dan judul artikel.

Itu tadi sedikit review tentant Jquery featured contente slider, oke sekarang kita langsung pada pemasangannya, jangan lupa backup dulu template anda

letakkan kode warna biru ini sebelum ]]></b:skin>
#featured{
width:565px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
position:relative;
height:280px;
background:#fff;
border:0px solid #fff;
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;display:none
}

#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}

#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:565px; height:280px;
background:#999; position:relative;
overflow:hidden;
}

#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}

#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}

#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}

#featured .ui-tabs-panel .info{
position:absolute;
top:215px; left:0;
height:70px; width: 565px;
background: url('transparent-bg.png');
}

#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}

#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}

#featured .info a{
text-decoration:none;
color:#fff;
}

#featured .info a:hover{
text-decoration:underline;
}



Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>



tambahkan kode berikut pada elemen laman
<div id="featured">

<ul class="ui-tabs-nav">

<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg" /><span>15+ Excellent High Speed</span></a></li>

<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg" /><span>20 Beautiful Long Exposure</span></a></li>

<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg" /><span>35 Amazing Logo Designs</span></a></li>

<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg" /><span>Create a Vintage</span></a></li>

</ul>

<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://gambar1.jpg" />
<div class="info">
<h2><a href="#">Fresh and Convinience</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar2.jpg" />
<div class="info">
<h2><a href="#">Perfect Taste</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar3.jpg" />
<div class="info">
<h2><a href="#">Home-made and Delicious Food</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="http://contoh">read more</a></p>
</div>
</div>


<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://gambar4.jpg" />
<div class="info">
<h2><a href="#">Our Favorite Menu</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="http://contoh">read more</a></p>
</div></div></div>
[READ MORE]

jqurey simple featured content

Melihat widget ini memang sudah tak asing lagi dengan. Tampilan content dengan bergeser kekanan (right slider) dan kekiri (left slider). Tampilan blog akan lebih elegan dan pengunjung lebih terterik untuk dapat membaca artikel pada konten yang ditampilkan.

letakkan kode warna biru ini sebelum ]]></b:skin>
#contentSlide {
background : #ddd;
height : 228px;
padding : 10px 0;
}
#slideshow {
margin : 0 auto;
width : 945px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px;
}



Selanjutnya, letakkan kode warna merah di bawah ini setelah ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat script JQuery maka langkah kedua abaikan saja.
3. Tambahkan juga script berikut setelah script JQuery tadi

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=845;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>




tambahkan kode berikut pada elemen laman
<!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>Featured Content Slider Using JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDyRDRuORJ_1L2F7j_GNVPW4wdGNMjMN7bWyQsnxaHFMotg2ryzeJIh8JKswybchl8QBY6bzoNdfbOAgEzCOoqf2jLdFjcB_gDhnP4pvm-caXnp98hy5awA8Y4p3ZLXQ2v4fg2pE_uNep/?imgmax=800' width='215'/></a> Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much &#8220;out of the box&#8221;. Sure the design was heavily altered to fit the job, but the actual functionality wasn&#8217;t altered in any way. I recently had the calling to build a &#8220;featured content area&#8221;.</p>
<p>All you need to try it here you wont be sorry ! go try it GUMGUM :) <a href='http://amatullah83.blogspot.com/2010/02/featured-content-slider-using-jquery.html' target='_blank'>visit my another explained post</a> about this tutorial</p>
</div>
<div class='slide'>
<h2>Thumbnail With Caption Using Simple JQuery</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZfHdbnSQkTYCcMD7fIwSsSX0-4fN6doFEZSqQ0QF6Opb_4_h59zuMvKNo_6OOzckO4FKAz_p8Qb2kyzKYIJPMnR6cKLhmwFR-EVcHqe730kl7UjIWshErtbKEjzDT7X0tSOm4B6uIsY/?imgmax=800' width='215'/></a> This tutorial will show how to add heading and caption to your thumbnail and display it with jQuery cool transition effect. It&#39;s an elegant way to put content in your website, and only display it when users want to see it. It keeps your website clean!..</p>
<h3>How to Create a Thumbnail With Caption Using Simple JQuery? <a href='http://amatullah83.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html' target='_blank'>GO HERE AND READ HOW</a> :)</h3>
</div>
<div class='slide'>
<h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html'><img alt='External links - Jquery' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrFiQdYAfz8-pLzFZTjqH-kByQvwgLx8-Wm8hxo8oLsDFHzevbQzFAzhqAqExGPfPBNrVjIRsXXdb2yxIqAfnDfvoFFuLvj2yxpfaUPLtZMP04Gf3A670aGYSplJvnARq2JqzWzHJ4-0/?imgmax=800' width='215'/></a> This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window&#39;s right edge. If you want to create it in your blogger blog, here&#39;s what you should do ! (these instructions refer to the &quot;new&quot; Blogger layouts templates) <a href='http://amatullah83.blogspot.com/2010/02/multi-level-drop-down-menu-dengan-css.html' target='_blank'>GO GET IT GUMGUM:)</a></p>
</div>
<div class='slide'>
<h2>Super Sexy Bookmarks Widget for Blogger !</h2>
<p><a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html'><img alt='Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.' height='115' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmy6BXQjbEG6usdtelmlgwOf1BdLjUfKrZgu4NZYHX8NEviUVQJji-okxQEXf-mp8XwERh73rMbz7FwHLbW4kwDE7xVE1pfUaa07te0gA5oVyMGC4U-su5U9cSBKinTlIQYVO7CH_Ol70/?imgmax=800' width='215'/></a> Looking for professional Social Bookmark Buttons for your blog ! me too :) however, while i was searching the net too, I came across a post by Naeemnur, that had instructions for Blogger (BlogSpot.com) based blogs which was really good.If you have a blog on blogger you can definitely give this a try. </p>
<p>Its very attractive social bookmarking widget ! it can help you to let your visitors bookmark your page effectively .</p>
<p>for instructions about the use of this SEXY Social bookmarking widget ! <a href='http://amatullah83.blogspot.com/2010/02/cara-memasang-widget-sexy-sosial.html' target='_blank'>you can go here and get it GUMGUM:)</a></p>
</div>
</div>
</div></div>
<!-- Slideshow HTML -->
<div class='clear'/>
[READ MORE]

jquery disable right click

Saya telah melihat membagikan posting di forum tentang cara menonaktifkan klik kanan di acara JavaScript. Yah solusinya sangat lurus ke depan jika Anda menggunakan jQuery! Caranya adalah dengan mengikat ke acara ContextMenu. Kode di bawah ini adalah contoh dari cara melakukannya.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery disable right click easily</title>
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>
</head>
<body>
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum vel, tempor at,
varius non, purus. Mauris vitae nisl nec consectetuer.
Donec ipsum. Proin imperdiet est. Phasellus dapibus semper
urna. Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifend nunc, ut consectetuer nisl felis ac diam.
Etiam non felis. Donec ut ante. In id eros.
</body>
</html>
[READ MORE]

css link

dasdasdsadas

Warna Border


border-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….









dsadsadsad
[READ MORE]

css float

dasdasdas

Float


float: value;
Contoh value yang digunakan:
Kanan: right
Kiri: left

Konten1 tanpa menggunakan pengaturan Float.
Konten2 tanpa menggunakan pengaturan Float.


Konten1 menggunakan pengaturan Float Left.
Konten2 menggunakan pengauran Float Left.


Konten1 menggunakan pengaturan Float Right.
Konten2 menggunakan pengaturan Float Right.


Konten1 menggunakan pengaturan Float Left.
Konten2 menggunakan pengaturan Float Right.



dasdasdas
[READ MORE]

css margin padding

dfdfdfsdfsdfs

Margin Padding


margin: value;
padding: value;
Contoh value yang digunakan:
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.


Margin Padding (atas)



margin-top: value;
padding-top: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (kanan)


margin-right: value;
padding-right: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (bawah)


margin-bottom: value;
padding-bottom: value;
Contoh value yang digunakan:
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.

Margin Padding (kiri)


margin-left: value;
padding-left: value;
Contoh value yang digunakan
pixel: 1px, 3px, 5px, 8px,...
Percentage: 5%, 10%, 15%,...

pengaturan text menggunakan padding 10px. pengaturan menggunakan padding 10px. pengaturan text menggunakan padding 10px.
pengaturan menggunakan margin 10px pengaturan menggunakan margin 10px. pengaturan menggunakan margin 10px.
pengaturan menggunakan margin 10px dan padding 10px pengaturan menggunakan margin 10px. dan padding 10px. pengaturan menggunakan margin 10px dan padding 10px.





dasdasdsa
[READ MORE]

css border

sdasdasdas

Warna Border


border-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….



Warna Border #ff00ff

Warna Border #0000ff

Warna Border #ff0000

Warna Border #ff00ff




Gaya Border


border-style: value;
Contoh value yang digunakan
Garis penuh : solid
Garis putus : dashed
Garis titik : dotted
Garis ganda : double
Garis Alur : Groove
Garis 3D Timbul: ridge
Garis 3D kedalam: inset
Garis 3D keluar: outset


A dotted border.


A dashed border.


A solid border.


A double border.


A groove border.


A ridge border.


An inset border.


An outset border.




Tebal Border


border-style: value;
Contoh value yang digunakan
General: Thin, medium, thick
Pixel: 1px, 3px, 6px, 10px,...




Tebal border thin

Tebal border medium

Tebal border thick

Tebal border 2px

Tebal border 4px



dasdasdas
[READ MORE]

css background

dsdsadasds




warna background


background-color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background warna biru
background warna merah





Background Gambar


background-image: value;
Contoh value yang digunakan


background gambar






Posisi background


background-position: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background gambar kanan atas

background gambar kiri atas

background gambar kiri bawah

background gambar kanan bawah






Pengulang background


background-Repeat: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

background gambar






asas
[READ MORE]

css font

jkjkjkjkjkj




Ukuran Font


font-size: value;
Contoh value yang digunakan
General : large, medium,
Percent : 10%, 13%, 19%, 25%,
Pixel : 3px, 7px, 10px, 15px,

Ukuran font 100%

Ukuran font 200%

Ukuran font 15px

Ukuran font 30px

Ukuran font 0.875em

Ukuran font 1.875em


Jenis Font


font-family: value;
Contoh value yang digunakan
General font family : verdana, sans-serif, arial,

Kalimat ini menggunakan Times New Roman font.

Kalimat ini menggunakan Arial font.

Kalimat ini menggunakan verdana

Kalimat ini menggunakan Georgia

Gaya Font


font-Style: value;
Contoh value yang digunakan
General font style : normal, italic, oblique,..

Kalimat ini menggunakan Normal font

Kalimat ini menggunakan Italic font

Kalimat ini menggunakan Oblique font

Variasi Font


font-variant: value;
Contoh value yang digunakan
General font weight : normal, small-caps

Kalimat ini menggunakan normal font

Kalimat ini menggunakan small-caps font

Berat Font


font-weight: value;
Contoh value yang digunakan
General font weight : lighter, normal, bold
Number font weight : 100, 200, 300, 400,…

Kalimat ini menggunakan normal font

Kalimat ini menggunakan lighter font

Kalimat ini menggunakan bolder font

Kalimat ini menggunakan bold font

Kalimat ini menggunakan 900



SDSADSADAS
[READ MORE]

css text

pembuksdsdjnasjdas

Warna Text


color: value;
Contoh value yang digunakan
Color name: red, green, blue,…
Hexadecimal number: #ff0000, #d4d4d4,...
RGB color code: rgb(255,0,0), rgb(0,0,0),….

warna text biru
warna text orange
warna text hijau

warna text merah

warna text ungu

Perataan Text


text-align: value;
Contoh value yang digunakan:
Rata kiri : left
Rata kanan : right
Rata tengah : center
Rata penuh : justify

Contoh text dengan menggunakan pengaturan rata kiri. Text dengan menggunakan pengaturan
rata kiri Pengaturan rata kiri.


Contoh text dengan menggunakan pengaturan rata tengah.Contoh text dengan menggunakan pengaturan rata tengah.

Contoh text dengan menggunakan pengaturan rata penuh. Contoh text dengan menggunakan pengaturan rata penuh. Pengaturan rata penuh.

Spasi Huruf


letter-spacing: value;
Contoh value yang digunakan:
Pixel letter spacing : 5px, 13px, 20px,..
General letter spacing : normal, length.

Contoh text dengan spasi huruf normal

Text menggunakan spasi huruf 5px spasi huruf 5px

Contoh spasi huruf 15px

Dekorasi Text


text-decoration: value;
Contoh value yang digunakan:
Tanpa dekorasi : none
Garis bawah : underline
Garis atas : overline
Berkedip : Blink

Contoh tanpa dekorasi

Contoh dekorasi text garis bawah

Contoh dekorasi text garis atas

Contoh dekorasi text berkedip

Perubahan Text


text-transform: value;
Contoh value yang digunakan:
Tanpa perubahan : none
Huruf besar tiap kata : capitalize
Huruf besar semua : uppercase
Huruf kecil semua : lowecase

Contoh tanpa dekorasi

Capitalize Huruf Besar Tiap Kata

uppercase huruf besar semua

Lowercase huruf kecil semua

zzasasa
[READ MORE]

macam widget facebook untuk blog

Social Networking ini memang selalu menempatkan diri pada


1. Like Button
Like Button (tombol suka) ini memungkinkan pengguna Facebook berbagi halaman dari Blog Anda. dengan menggunakan tombol ini maka pengunjung Blog akan terhubung dengan Facebook, dan selanjutnya pengunjung akan berbagi kesukaan mereka dengan pengguna Facebook lainya.

2. Recommendation
Rekomendasi plugin memberikan pengguna pribadi saran untuk halaman di situs Anda yang mungkin mereka sukai. pengguna facebook dapat merekomendasikan/menyarankan halaman situs anda pada orang lain.

3. Login with faces
Login dengan plugin Wajah menunjukkan gambar profil dari teman-teman pengguna yang telah mendaftar untuk situs Anda di samping tombol login. memudahkan pengguna facebook untuk dapat login saat berada di situs anda.

4. Comments
Kotak Komentar Facebook memungkinkan pengguna Fecebook berkomentar pada setiap bagian dari konten di situs Anda. kotak komentar dapat dipasang pada setiap halaman situs anda, fungsinya seperti kotak komentar posting, untuk memberikan komentarnya, pengunjung harus menggunakan ID Facebook.


5. Activity Feed
Kotak Aktifitas Feed dapat menunjukkan kepada pengunjung situs tentang berbagai aktifitas teman-teman Facebook anda, dan mengikuti aktifitasnya tersebut.

6. Like Box
Seperti kotak ini memungkinkan pengguna untuk seperti Anda Facebook Page dan melihat aliran secara langsung dari website Anda.

7. Facepile
Plugin Facepile menunjukkan gambar profil dari teman-teman pengguna yang telah mendaftar untuk situs Anda.

8. Live Stream
Live Streaming plugin memungkinkan pengguna berbagi aktivitas dan komentar Anda secara real-time saat mereka berinteraksi selama acara live.


[READ MORE]

macam widget dasar pada blogger

Blogger menyediakan berbagai macam widget untuk digunakan pada blog anda. widget yang disediakan ini merupakan widget dasar yang biasanya di gunakan untuk melengkapi sebuah blog. selama ini Blogger.com terus mengembangkan layanan tentang ini. pada artikel ini saya akan membicarakan tentang 20 widget dasar yang disediakan Blogger.com. salah satu keuntungan memasang widget yang disediakan Blogger adalah dapat diload bersamaan dengan konten stantar Blogger lainnya di blog anda.

1. Header
pada template standar blogger widget ini otomatis sudah terpasang. header mamang sangat penting, karena sebagai brand awal pada blog anda

2. Arsip Blog
widget ini berfungsi untu menampilkan link untuk menuju pada kumpulan posting anda pada waktu tertentu.

3.Profil
ini merupakan identitas pemilik blog. bila anda berbagi profil anda maka pengunjung dapat langsung mengetahui profil anda.

4. Logo
merupakan logo blogger yang dapat anda pasang pada blog anda. logo ini merupakan link untuk menuju pada situs blogger

5. Tautan berlangganan
ini merupakan link pada suatu berita tertentu, jadi pengunjung dapat mengetahui berita terkini dan mengukutinya dari blog anda. widget tautan ini juga otomatis ter-update dari situs sumbernya

6. Label
widget ini berfungsi untuk menampilkan kategori/kelompok posting tertentu yang terdapat di blog anda. supaya posting anda dapat ditampilkan pada widget ini, anda harus memberi Label terlebih dahulu pada posting anda.

7.Newsrell
ini merupakan sebuah tautan yang berisi sebagian konten dari suatu berita populer tertentu yang terindex pada google

8. Feed
ini merupaka widget untuk menampilkan umpan balik berupa judul posting dari situs tertentu, syarat agar bisa ditampilkan adalahsuatu situs tersebut telah membuka feed situsnya.

9. Daftar
anda bisa membuat suatu daftar dari widget ini, contohnya daftar menu pada blog anda, daftar teman anda, daftar film, atau daftar cewek anda kalau anda mau :). widget ini masih cenderung membuat daftar secara umum, jadi apapun yang anda suka bisa dibuatkan daftarnya dengan widget ini.

10. Daftar Link
widget ini merupakan lebih khusus lagi yaitu daftar link menuju halaman situs tertentu. anda juga bisa menambahkan link pada posting-posting anda menggunakan widget ini.

11. Daftar blog
nah yang ini lebih khusus lagi yaitu membuat daftar dari blog-blog yang anda buat. jadi pengunjung bisa mengikuti blog-blog anda.

12. polling
Lakukan survei terhadap pengunjung Anda dengan menambahkan polling ke blog Anda. disini anda bisa berinteraksi dengan pengunjung dengan media Polling.

13. Baris Video
Klip tampilan dari YouTube dan Google Video untuk disaksikan oleh pembaca Anda tanpa meninggalkan halaman. Blogger dan YouTube sudah menjadi anak perusahaan Google, jadi untuk urusan akses video jadi lebih mudah tentunya. dengan memasukkan kata kunci tertentu maka secara otomatis akan beberapa video yang terkait dalam index YouTube. jika anda punya video yang disimpan di YouTube maka coba saja tampilkan Video tersebut dengan Widget ini.

14. Tampilan Silde
Tambahkan tampilan slide foto ke blog Anda. dengan memilih sumber foto yang anda inginkan maka anda dapat menampilkan Fotoslide di blogg anda. atau anda juga bisa memasukkan URL tertentu untuk menampilkannya.

15. Gambar
Tambahkan gambar dari komputer Anda atau dari tempat lain di web. anda bisa mengupload gambar atau memasukan URL gambar tertentu dan langsung memasangnya widget ini.

16.Text
Tambahkan beberapa kata ke blog Anda, seperti sebuah pesan selamat datang. Tuliskan apapun yang anda perlukan untuk ditampilkan dan dibaca oleh pengunjung. dalam widget ini anda dapat menuliskan dengan Mode HTML atau Mode Rich Text.

17. HTML java Script
Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. pada widget ini anda dapat menambahkan berbagai java script ataupun kode HTML.

18. Kotak penelusuran
Telusuri blog blog, blogroll, dan apapun yang pernah Anda tauti. widget ini akan memudahkan pengunjung untuk mencari suatu artikel baik dari blog anda maupun dari situs lainnya.

19. Pengikut
Menampilkan daftar pengguna yang mengikuti blog Anda. Pengguna dalam hal ini adalah orang-orang yang menggunakan/memiliki Google Account yang mengikuti Blog anda. Widget ini merupakan sebuah layanan Social Networking milik Google yaitu Google Friend Connect. dengan widget ini anda dapat mengetahui orang-orang (Google Account) yang mengikuti Blog anda.

20. Laman
Menampilkan laman mandiri di blog Anda. Laman mirip dengan posting, yang membedakannya yaitu laman tidak memiliki kotak komentar dan juga URL Laman juga berbeda dengan posting. jadi Laman disini yaitu Halaman tersendiri pada blog.

Demikian tadi tentang 20 widget dasar Blogger yang siap di pasang pada blog anda, silakan anda memasangnya sesuai dengan kebutuhan anda...
[READ MORE]

cara pasang related post (posting terkait) hoctro

Related post (posting terkait) ini termasuk mudah dalam pemasangannya, cukup beberpa langkah maka Related Post ini sudah terpasang pada Blog. Hoctro merupakan pembuat dari Related Post yang cukup simpel ini. Untuk jenis dan ukuran Font yang ditampilkan pada Related Post ini menyesuaikan dengan pengaturan jenis dan ukuran Font yang ada pada template.

itu tadi sedikit review tentang Related Post ini, selanjutnya mari kita pasangkan pada Template, tapi sebelum mengedit template sebaiknya anda sudah membackup lengkap templete dan menggunakan menu Find untuk mempermudah pencarian kode. Oke kita langsung pada pemasagannya...

PEMASANGAN
Langkah1.
Masuk menu RANCANGAN, pilih EDIT HTML. Beri tanda centang pada EXPAND WIDGET.

Langkah 2. cari kode seperti ini:
<data:post.body/>

Langkah 3. Copy-paste kode berikut ini di bawah kode langkah 2.
<div class='clear-block;'/><b:if cond='data:blog.pageType == "item"'><div class="similiar"><!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --><!-- *****************Related Articles by Labels - Take Two****************** --><!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> <u><a href='http://www.jackbook.com/' title='Related Posts on <strong style="color: black; background-color: rgb(153, 255, 153);">Blogger</strong> Modified by JackBook.Com. Read More?'>Jack Book</a>
</u></div>
<script type="text/javascript">
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Langkah 4. Simpan perubahan.

Bagaimana mudah bukan, saya yakin anda pasti bisa. semoga yang saya sampaikan bermanfaat. terima kasih.
[READ MORE]

cara pasang related post (posting terkait) blogger

Saat saya mengunjungi sebuah situs dan membaca salah satu postingnya sampai selesai, di bagian akhir terdapat beberapa link yang menghubungkan artikel lainnya yang berkaitan, ya itulah Related Post.

Related Post (posting Terkait) kali ini tak kalah bagusnya, dengan menggunakan Style yang ada maka Related Post ini dapat terlihat lebih menarik, dari pada sebuah tulisan yang bertautan biasa.

Pemasangan Related Post ini, juga cukup mudah yaitu dengan edit template anda, sebelum mengedit template sebaiknya anda sudah membackup lengkap template dan menggunakan menu Find untuk mempermudah pencarian kode. Oke kita langsung pada pemasagannya...

Langkah 1. Cari kode seperti ini:
]]></b:skin>

Langkah 2. Copy-paste kode berikut ini diatas kode Langkah 1.
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://i624.photobucket.com/albums/tt327/digitalstatement/10mreom.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Langkah 3. Cari kode seperti ini:
</head>

Langkah 4. Copy-paste kode berikut ini diatas kode Langkah 3.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Langkah 5. Cari kode seperti ini:
</body>

Langkah 6. Copy-paste kode berikut ini dibawah kode Langkah 6.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Langkah 7. Simpan Perubahan.
[READ MORE]

cara pasang dan pengaturan related post with thumbnail (posting terkait dengan gambar) bloggerpluggins

Related Post ini terlihat sangat menarik, pasti anda tahu sebabnya. ya, karena related post yang dibuat oleh Bloggerpluggins ini selain menampilkan judul, juga menampilkan gambar kecil (thumbnail) dari posting yang berkaitan. Dengan dilengkapi thumbnail maka related post ini dapat menarik penngunjung untuk membaca artikel lainnya. pada artikel ini saya akan membahas cara pemasangan dan sedikit pengaturan untuk dapat disesuaikan pada Blog anda.

Baiklah kita menuju pada pemasangan kode related post ini, namun sebelum mengedit template sebaiknya anda sudah membackup lengkap templete dan menggunakan menu Find untuk memudahkan pencarian kode yang dimaksud.

PEMASANGAN
Langkah 1, Masuk pada menu TATA LETAK > EDIT HTML. Beri tanda centang pada EXPAND WIDGET.

Langkah 2, Cari kode berikut ini
</head>

Langkah 3, Copy-paste kode dibawah ini
diatas kode Langkah 2.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; }
#related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; }
#related-posts a{ color:black;}
#related-posts a:hover{ color:black;}
#related-posts a:hover { background-color:#d4eaf2; }
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Langkah 4, carilah kode berikut ini:
<div class='post-footer-line post-footer-line-1'>

Langkah 5, Copy-paste kode berikut ini, dibawah kode langkah 4.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Langkah 6, simpan perubahan dan lihat blog anda.


PENGATURAN POSTING
Pengaturan yang saya maksudkan disini adalah jumlah posting terkait yang ditampilkan. Anda dapat mengaturnya jumlahnya sesuai dengan kebutuhan denngan mengganti angka warna merah pada kode langkah 5 diatas, dengan catatan sebagai berikut:
jumlah 'max-results' berselisih satu lebih banyak dari jumlah 'var maxresults'
contoh:
jika 'max-result=6', maka 'var maxresult=5'
jika 'max-result=7', maka 'var maxresult=6'
jika 'max-result=8', maka 'var maxresult=7'


knj
[READ MORE]

cara pasang manual read more dan penggunaannya

Maksud dari judul diatas yaitu Read more ini dapat digunakan memenggal posting tertentu dan juga bagian posting yang dipenggal bisa disesuaikan.

Intinya anda dapat memenggal posting tertentu diantara posting lainnya dan konten yang ditampilkan pada posting yang dipenggal banyaknya bisa saja berbeda dengan posting yang lainnya.

Itu tadi sedikit review tentang Read More ini, selanjutnya kita langsung menuju pokok bahasan sesuai judul diatas. Namun, sebelum mengedit template sebaiknya anda sudah membackup templete lengkap dan menggunakan menu Find (control F) untuk mempermudah pencarian kode.

PEMASANGAN
Langkah 1.
Masuk pada halaman RACANGAN, lalu pilih EDIT HTML, dan beri tanda centang EXPAND WIDGET.

Langkah 2. Cari kode berikut ini:
<data:post.body/>

Langkah 3.
Hapus kode diatas lalu ganti dengan kode dibawah ini:
<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
<!-- End Read More Code -->

Langkah 4, Simpan perubahan.

Sampai dengan langkah 3, script read more sudah terpasang pada template anda. selanjutnya cara untuk mempermudah anda melakukan pemenggalan artikel adalah sebagai berikut :

Langkah 5. Masuk menu PENGATURAN, lalu pilih FORMAT.

Langkah 6. Copy paste kode berikut ini, pada form TEMPLATE ENTRY.
<span id="fullpost">

</span>

Langkah 7,
Simpan pengaturan. Fungsi Manual Read More sudah terpasang.

Sampai dengan langkah 7 diatas, maka setiap anda membuat ENTRY BARU, kode tersebut akan muncul pada form Entry Baru anda (pada mode Edit HTML).


PENGGUNAAN
Untuk menggunakan fungsi Read More ini, anda harus menempatkan kode pemenggalan pada Editing Entry anda (Mode Edit HTML), Selanjutnya berikut ini adalah contoh cara memenggal artikel pada Editing Entry:
dasdsadas dsadsa gkfkgf kj kfkdmfkd gsdg djfksdmkfmsd fdksggk gdsmkgmdkf mfkdm gtunvkmfv mgfjv n dfmd fmdjfjd vjfnvjfnv gjfjng dfkmsdkfmd dfmkdmfkd fdfnjd jngfjgnf djfnjdnjfn fjdnfjndjnfd fndjfndj ggoerpokfkodmkfo forenfjsd
<span id="fullpost">
dsadsa kdmksamds dkmskdmksad sdmkasmdks dsnjdnsj dsjndjsna sjdnjsnds dnsjnd frformfkormg dfmrnf dfndjnf dfndsjfn djfnjdnf rjfnjrnf rfjrnf fjdfjdnfjdsfd fdkfd dfdknfjenfuirfnf dfjdjnf djfnrjfn frgmfkkgflkgfikhjg
</span>

Keterangan dari contoh diatas adalah:
1. Tulisan berwarna Hijau, merupakan Artikel yang akan ditampilkan.
2. Tulisan berwarna Merah, merupakan Kode Pemenggalan.
3. Tulisan Berwarna Biru, merupakan Artikel Selengkapnya

Sesuai dengan namanya Fungsi Manual Read More ini memang dalam penggunaanya kita harus mengatur posting satu-persatu untuk dapat memenggal artikel. Demikian tadi artikel cara memasang dan penggunaan Manual Read More pada Blog semoga bermanfaat...
[READ MORE]

cara pasang auto read more dan pengaturannya pada blog

Read more kali ini sudah berfungsi secara otomatis memenggal semua artikel sebelum ditampilkan pada halaman posting. pada posting kali ini saya akan menyampaikan dua pokok penting yaitu pemasangan auto read more dan pengaturan variabelnya.

Untuk pemasangannya cukup mudah, yaitu melalui halaman edit HTML. Demikian juga pengaturannya, anda cukup memasukkan value yang telah tersedia.

Langsung saja pada pokok bahasan kita, namaun sebelum mengedit template sebaiknya Anda sudah membackup templete lengkap, dan menyimpannya di komputer anda. serta menggunakan menu Find (control F) untuk mempermudah pencarian kode yang dimaksudkan.

PEMASANGAN
Langkah 1. Masuk kehalaman 'EDIT HTML', dan beri tanda centang pada 'EXPAND WIDGET TEMPLATE'.

Langkah 2. Cari kode berikut ini:
</head>

Langkah 3. Letakan script dibawah ini di atas 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>

Langkah 4. Selanjutnya cari kode berikut ini:
<data:post.body>

Langkah 5. Hapus kode <data:post.body> lalu 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 == &quot;item&quot;'><data:post.body/></b:if>

Langkah 6. simpan perubahan dan lihat Blog anda.


PENGATURAN
Anda dapat mengatur variabel yang ada pada Auto read more ini sesuai dengan kebutuhan anda, contohnya sebagai berikut:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)


Demikian cara memasang Auto read more dan pengaturan variabelnya, selamat mencoba dan semoga berhasil.... happy blogging.
[READ MORE]