Pages

  • Image and video hosting by TinyPic
  • Image and video hosting by TinyPic
  • Image and video hosting by TinyPic
  • Image and video hosting by TinyPic

Selasa, 22 November 2011

Cara membuat menu drop down 1

 Cara membuat menu horizontal drop down


1.Silahkan login terlebih dahulu pada akun Blogspot pembaca
2.Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil    disamping tulisan Expand Template Widget  
3.Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4.Copy paste kode berikut di atas tag </head>

<script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>

5.Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>

chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}

6.Cari struktur seperti dibawah ini pada template pembaca

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>


7.Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6


  
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>


Hasilnya akan seperti ini :








8.Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>


9.Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10."URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11.Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.

Klik simpan template dan selesai....silahkan lihat hasilnya     
 


Baca Selengkapnya....

Macam - macam Font HTML

Di bawah ini adalah macam-macam font HTML


NORMALBOLDITALIC
Agency FBAgency FBAgency FB
ArialArialArial
Arial BlackArial BlackArial Black
Arial NarrowArial NarrowArial Narrow
Arial Rounded MT BoldArial Rounded MT BoldArial Rounded MT Bold
Blackadder ITCBlackadder ITCBlackadder ITC
Bodoni MTBodoni MTBodoni MT
Book AntiquaBook AntiquaBook Antiqua
Bookman Old StyleBookman Old StyleBookman Old Style
Bradley Hand ITCBradley Hand ITCBradley Hand ITC
Calisto MTCalisto MTCalisto MT
CastellarCastellarCastellar
CenturyCenturyCentury
Century GothicCentury GothicCentury Gothic
Century SchoolbookCentury SchoolbookCentury Schoolbook
Comic Sans MSComic Sans MSComic Sans MS
Copperplate Gothic BoldCopperplate Gothic BoldCopperplate Gothic Bold
Copperplate Gothic LightCopperplate Gothic LightCopperplate Gothic Light
Courier NewCourier NewCourier New
Curlz MTCurlz MTCurlz MT
Edwardian Script ITCEdwardian Script ITCEdwardian Script ITC
ElephantElephantElephant
Engravers MTEngravers MTEngravers MT
Eras Bold ITCEras Bold ITCEras Bold ITC
Eras Demi ITCEras Demi ITCEras Demi ITC
Eras Light ITCEras Light ITCEras Light ITC
Eras Medium ITCEras Medium ITCEras Medium ITC
Estrangelo EdessaEstrangelo EdessaEstrangelo Edessa
Felix TitlingFelix TitlingFelix Titling
FixedsysFixedsysFixedsys
Forte MTForte MTForte MT
Franklin Gothic BookFranklin Gothic BookFranklin Gothic Book
Franklin Gothic DemiFranklin Gothic DemiFranklin Gothic Demi
Franklin Gothic Demi condFranklin Gothic Demi condFranklin Gothic Demi cond
Franklin Gothic HeavyFranklin Gothic HeavyFranklin Gothic Heavy
Franklin Gothic MediumFranklin Gothic MediumFranklin Gothic Medium
Franklin Gothic Medium condFranklin Gothic Medium condFranklin Gothic Medium cond
French Script MTFrench Script MTFrench Script MT
GaramondGaramondGaramond
GautamiGautamiGautami
GeorgiaGeorgiaGeorgia
GigiGigiGigi
Gill Sans MTGill Sans MTGill Sans MT
Gill Sans MT CondensedGill Sans MT CondensedGill Sans MT Condensed
Gill Sans MT Ext Condensed BoldGill Sans MT Ext Condensed BoldGill Sans MT Ext Condensed Bold
Goudy Old StyleGoudy Old StyleGoudy Old Style
Goudy StoutGoudy StoutGoudy Stout
HaettenschweilerHaettenschweilerHaettenschweiler
ImpactImpactImpact
Imprint MT ShadowImprint MT ShadowImprint MT Shadow
LathaLathaLatha
Lucida ConsoleLucida ConsoleLucida Console
Lucida SansLucida SansLucida Sans
Lucida Sans TypewriterLucida Sans TypewriterLucida Sans Typewriter
Monotype CorsivaMonotype CorsivaMonotype Corsiva
MS Reference Sans SerifMS Reference Sans SerifMS Reference Sans Serif
MS Sans SerifMS Sans SerifMS Sans Serif
MS SerifMS SerifMS Serif
MV BoliMV BoliMV Boli
Maiandra GDMaiandra GDMaiandra GD
MangalMangalMangal
OCR A ExtendedOCR A ExtendedOCR A Extended
Palace Script MTPalace Script MTPalace Script MT
Palatino LinotypePalatino LinotypePalatino Linotype
PapyrusPapyrusPapyrus
PerpetuaPerpetuaPerpetua
Perpetua Titling MTPerpetua Titling MTPerpetua Titling MT
Photoshop LargePhotoshop LargePhotoshop Large
Photoshop SmallPhotoshop SmallPhotoshop Small
Placard MT CondensedPlacard MT CondensedPlacard MT Condensed
PristinaPristinaPristina
RaaviRaaviRaavi
Rage ItalicRage ItalicRage Italic
RockwellRockwellRockwell
Rockwell CondensedRockwell CondensedRockwell Condensed
Script MT BoldScript MT BoldScript MT Bold
ShrutiShrutiShruti
Small FontsSmall FontsSmall Fonts
SylfaenSylfaenSylfaen
SystemSystemSystem
TahomaTahomaTahoma
TerminalTerminalTerminal
Times New RomanTimes New RomanTimes New Roman
Trebuchet MSTrebuchet MSTrebuchet MS
TungaTungaTunga
Tw Cen MTTw Cen MTTw Cen MT
Tw Cen MT CondensedTw Cen MT CondensedTw Cen MT Condensed
Tw Cen MT Conden Extra BoldTw Cen MT Conden Extra BoldTw Cen MT Conden Extra Bold
VerdanaVerdanaVerdana
Vietnamese fontVietnamese fontVietnamese font
WST_EnglWST_EnglWST_Engl
Baca Selengkapnya....

Kamis, 17 November 2011

Kode HTML Warna

   Di bawah ini adalah macam-macam warna beserta kode HTML warna


Aqua : #00FFFFBlack : #000000Blue : #0000FFFuchsia : #FF00FFGray : #808080
Green : #008000Lime : #00FF00Maroon : #800000Navy : #000080Olive : #808000
Purple : #800080Red : #FF0000 Silver :#C0C0C0Teal : #008080White : #FFFFFF
Yellow : #FFFF00Aquamarine : #7FFFD4Blueviolet : #8A2BE2Brown : #A52A2ABurlywood : #DEB887
Cadetblue : #5F9EA0Chocolate : #02691ECoral : #FF7F50Cornflowerblue : #6495EDCrimson : #DC143C
Cyan : #00FFFFDarkcyan : #008686Darkgoldenrod : #688606Darkgray : #A9A9A9Darkgreen : #006400
Darkkhaki : #606766Darkmagenta : #860086Darkolivegreen : #55662FDarkorange : #FF8C00Darkorchid : #9932CC
Darkred : #860000Darksalmon : #E9967ADarkslateblue : #483086Darkslategray : #2F4F4FDarkturquoise : #00CED1
Darkviolet : #940003Deeppink : #FF1493Deepskyblue : #00BFFFDimgray : #696969Dodgerblue : #1E90FF
Firebrick : #622222Floralwhite : #FFFAF0Forestgreen : #228622Gainsboro : #DCDCDCGold : #FFD700
Goldenrod : #DAA520Greenyellow : #ADFF2FHotpink : #FF69B4Indianred : #CD5C5CIndigo : #460082
Khaki : #F0E68CLavender : #E6E6FALavenderblush : #FFF0F5Lawngreen : #7CFC00Lightblue : #ADD8E6
Lightcoral : #F08080Lightcyan : #E0FFFFLightgreen : #90EE90Lightgrey : #D3D3D3Lightpink : #FFB6C1
Lightsalmon : #FFA07ALightseagreen : #20B2AALightskyblue : #87CEFALightslategray : #778899Lightsteelblue : #B0C4DE
Limegreen : #32CD32Linen : #FAF0E6Magenta : #FF00FFMediumorchid : #BA55D3Mediumpurple : #9370DB
Mediumseagreen : #3CB371Mediumslateblue : #7B68EEMediumturquoise : #4801CCMediumvioletred : #071585Midnightblue : #191970
Mintcream : #F5FFFAMistyrose : #FFE4E1Moccasin : #FFE4B5Navajowhite : #FFDEADOld lace : #FDF5E6
Olivedrab : #6B8E23Orange : #FFA500Orangered : #FF4500Orchid : #DA70D6Palegoldenrod : #EEE8AA
Palegreen : #98F698Paleturquoise : #AFEEEEPalevioletred : #DB7093Peachpuff : #FFDAB9Peru : #CD853F
Pink : #FFCOC8Plum : #DDA0DDPowderblue : #B0E0E6Rosybrown : #BC8F8FRoyalblue : #4169E1
Saddlebrown : #864513Salmon : #FA8072Sandybrown : #F4A460Seagreen : #2E8B57Sienna : #A0522D
Skyblue : #87CEEBSlateblue : #6A5ACDSlategray : #708090Springgreen : #00FF7FSteelblue : #468264
Tan : #D2B48CThistle : #D8BFD8Tomato : #FF6347Turquoise : #40E0D0Violet : #EE82EE
Wheat : #F5DEB3Yellowgreen : #9ACD32
Baca Selengkapnya....

Kamis, 29 September 2011

Cara Pasang Auto Read More (2)

       Postingan ini meneruskan postingan yang lalu mengenai cara pasang Read More otomatis.Oke lansung aja langkahnya Login ke Blogger ,lalu menuju Rancangan terus EDIT HTML,centang Expand Widget,kemudian cari kode </head>,jika kesulitan tekan Ctrl+F lalu tulis </head>.Jika sudah ketemu,letakkan / Copy Paste kode script di bawah ini tepat 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>

Masih pada halaman EDIT HTML,cari kode <data:post.body/>
Kalau sudah ketemu,ganti kode <data:post.body/> dengan kode di bawah 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>

Klik Simpan Template dan silahkan lihat hasilnya....  
Baca Selengkapnya....

Selasa, 27 September 2011

Cara membuat gambar Slide pada Blogger

    Kali ini aku akan mencoba tips cara membuat gambar slide show pada blogger,oke langsung aja sobat lihat contohnya pada gambar slide bagian Header blog ini.....bagus nggak.... ?,oke,kalau masih penasaran langsung aja
    Langkahnya sangat sederhana kok,sobat Login ke Blogger lalu pilih Dasbor lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu jangan lupa centang tulisan Expand Widget Templates(3).
Lihat Gambar ya :D




Slide Show Gambar Gadget Untuk Blogger.
(1)



membuat gambar slideshow di blog.
(2)



Membuat Slideshow Foto.
(3)


Nah,selanjutnya cari kode </head> (gunakan Ctrl+F di keyboard sobat),setelah ketemu tinggal letakkan kode CSS di bawah ini tepat diatas kode </head> tersebut.

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>



Lalu KLIK simpan templates.

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)





Cara membuat Slideshow Gambar (with jQuery).
(4)

Cara membuat slide show widget foto gallery di blog.
(5)


Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<ul class="slideshow">

<li><a href="#"><img src="http://i51.tinypic.com/14mb1b4.jpg" alt="Image and video hosting by TinyPic" border="0" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://i51.tinypic.com/14mb1b4.jpg" alt="Image and video hosting by TinyPic" border="0" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://i51.tinypic.com/14mb1b4.jpg" alt="Image and video hosting by TinyPic" border="0" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="http://i51.tinypic.com/14mb1b4.jpg" alt="Image and video hosting by TinyPic" border="0" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

Lalu simpan dan kini sobat sudah memiliki slideshow widget blogspot yang tak kalah menarik jika dibandingkan slideshow instant widget seperti yang sudah banyak beredar.
Selamat mencoba dan semoga berhasil :
 

Ket:

  • Anda hanya merubah kode yang bercetak tebal berwarna biru diatas.
  • Untuk tanda '#' gantilah dengan url tujuan kemana link gambar akan diarahkan,misal:
    http://triks-iseng.blogspot.com
  • Untuk gambar sobat bisa memilih gambar sendiri baik dari komputer maupun dari web dengan mengambil ur,misalnya upload gambar dari tinypic.com dll, seperti : src=http://i51.tinypic.com/14mb1b4.jpg" alt="Image and video hosting by TinyPic" 

Baca Selengkapnya....

Minggu, 25 September 2011

Cara Membuat Gambar Pratinjau

     Efek mouse Pratinjau pada Gambar yang akan membesar jika kursor mouse berada pada gambar.Kalau belum mengerti silahkan lihat contoh gambar pada bagian bawah postingan ini.Seperti biasa langkah-langkahnya adalah
Cara membuatnya sebagai berikut:
1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih ke Edit HTML 
4. Centang
5. Copy paste dibawah ini tepatnya di atas Kode ]]></b:skin>


/* ---------------
Easiest Tooltip and Image Preview with jQuery
---------------------------------- */
#Imagetip{
margin:0;
padding:0;
}
#Imagetip li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

6. Copy paste kode dibawah ini dan letakkan diatas Kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://kangdadang.googlecode.com/files/main2.js" type="text/javascript">
</script>

7.Klik Simpan Template.

Untuk memanggilnya Copy paste kode dibawah ini anda bisa menaruhnya di Sidebar ataupun di Postingan

<a class="preview" href="URL GAMBAR ANDA%20" title="Lake and a mountain"> <img alt="gallery thumbnail" height="75px" src="URL GAMBAR ANDA" width="100px" /></a>



Gantilah tulisan yang berwarna Biru dengan URL Image milik Anda,
 

Oke....silahkan mencoba
Contoh gambar (arahkan kursor mouse pada gambar )

Baca Selengkapnya....

Cara Membuat Read More / Baca Selengkapnya secara Otomatis

        Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi.
Membuat Read More atau Baca Selengkapnya pada postingan blog yang muncul secara otomatis tidak membutuhkan langkah yang rumit kok,anda tinggal copy paste kode HTML di bawah ini.

Pertama,anda login ke Blogger lalu klik Rancangan klik Edit HTML centang Expand Widget Template
lalu cari kode </head> letakkan kode HTML di bawah ini tepat di bawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Kedua ,cari kode <data:post.body/> atau  <p><data:post.body/></p>

Ganti kode tersebut dengan kode di bawah ini


<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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan :

- Summary noimg 430 = tinggi artikel terpenggal tanpa image
- Summar img 430 = tinggi artikel terpenggal dengan image
- Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

 Ketiga, klik simpan Template...dan lihat hasilnya  
  
Baca Selengkapnya....