Rouftracal Dot Blogs Post
Tampilkan postingan dengan label Belajar M'percantik blog. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar M'percantik blog. Tampilkan semua postingan

Senin, 11 November 2013

Membuat Slide Widget Blog itu Mudah

Jujur Gue g sebisa Blogger-blogger keren, bisanya hanya copas dari temen-temen sejawat, yang gue pas butuhkan. misal saja ni Cara Mudah Widget Membuat Slide Show Keren di Blog, ini judul asli sama yang punya temen blog namanya "cukuppas" memang cukup deh, trus gue ganti Membuat Slide Widget Blog itu Mudah.
Oke langsung aja. ni kopiannya. nanti kalau kurang pas bisa langsung klik LINK ini. Thanks ya. gambarnya gue ganti brow...klik gambar lansung contoh


http://www.dickybor.com/

What is meaning of slide show ? embo aku yo gak ngerti , Hehe saya cuman bercanda slide show adalah gambar sing isok mlaku (Jarene wong Jowo) Ancene aku wong jowo -_-
Maaf saya bercanda lagi hehe , Slide show adalah sebuah tampilan beberapa gambar yang setiap waktu detik, menit, jam, hari, bulan, tahun dan abad *(lebay) Apa itu lebay ? Lele di jablay . Aduh maaf saya bercanda lagi yuk serius nih langsung simak aja artikel berikut :

APA ITU SLIDE SHOW ?

Slideshow adalah cara terbaik untuk memamerkan foto Anda, posting fitur, gambar dan materi lain seperti Anda wish. Kami mencari sebuah tutorial tentang menambahkan nivo slider ke blogger tapi banyak dari Anda mendapatkan masalah saat menambahkannya ke blogger blog . Itulah mengapa saya dianggap berbagi gambar penuh dan mudah disesuaikan slider / gallery.

PENDAPAT SAYA TENTANG WIDGET SLIDE SHOW.

Ini adalah slider sederhana gambar dengan banyak pilihan seperti dimensi menyesuaikan, play, pause, interval antara berikutnya dan sebelumnya slide dan beberapa naskah options.The lain galeri ini diambil dari dynamicdrive dan saya telah membuat beberapa perubahan sehingga Anda dapat dengan mudah menambahkannya ke instalasi blog. Anda adalah salah satu langkah instalasi, Anda hanya perlu copy dan paste kode dalam bagian isi HTML / JavaScript widget yaitu Anda dapat menambahkan sebagai HTML / JavaScript widget.

Cara Mudah Widget Membuat Slide Show Keren di Blog :

1. Go to Blogger Dashboard > Layout
2. Add a Gagdet > HTML/JavaScript
3. Paste kode berikut.

<style type="text/css">
#simplegallery2 {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}

#simplegallery2 .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>

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

<script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [

["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"],

["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<div id="simplegallery2"></div>

KETERANGAN
  1. Pertama mengubah ukuran semua gambar Anda ke dimensi tetap.
  2. Untuk mengubah dimensi geser hanya kode ini dalam kode di atas 400 dan 365 di mana 400 adalah lebar dan 265 adalah tinggi.
  3. Ganti IMAGE LINK DISINI dengan gambar Anda sendiri
  4. Ganti # dengan link yang ingin Anda tambahkan dengan gambar tertentu.
  5. Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Gambar ini decription akan muncul di bagian atas ketika user melayang kursor mouse di atasnya. Jika Anda tidak ingin menambahkan keterangan apapun maka hanya menghapus KETERANGAN GAMBAR DI SINI
  6. Jika Anda ingin mengubah bermain auto gambar kemudian hanya mengubah true menjadi false
  7. Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya kemudian edit 2500
  8. Untuk mengubah font deskripsi kemudian mengubah Calibri dengan nama font sendiri.
  9. Jika sudah selesai silakan simpan template anda .

Itu semua galeri gambar sederhana, saya harap Anda pasti akan seperti ini gadget. Jika kecil Anda membutuhkan bantuan tentang kustomisasi maka jangan ragu untuk bertanya .Saya akan membalas kembali secepat waktu memungkinkan.
Ok. Thanks, untuk semua

Jumat, 29 Juni 2012

Cara Membuat Tulisan Berkedip

Artikel dibawah ini sengaja kami copy dari Kang Roes, untuk pengingat cara membuat tulisan berkedip.
Cara membuat tulisan berkedip di blog sangat mudah sekali, anda hanya menambahkan Blink di awal dan di akhir sebuah tulisan yang akan anda di buat kelap-kelip. contohnya tulisan berkedip seperti di-bawah ini:


TULISAN BERKEDIP


Jadi ketika anda menulis sebuah artikel dan slah satu tulisan anda akan dijadikan berkedip maka tambahkan kode <blink> diawal tulisan yang akan dibuat berkedip dan tambahkan kode </blink> di akhir tulisan tersebut. lengkapnya adalah:
TULISAN BERKEDIP
Yang perlu anda perhatikan:
  • Pada saat menulisakan kode tersebut, posisi penulisan harus berada pada bagian Edit HTML yang letaknya di sebelah tulisan compose.
  • Silahkan ganti TULISAN BERKEDIP sesuai dengan tulisan yang akan dibuat berkedip.
Nah selesai sudah artikel singkat ini.
Semoga Bermanfaat
Makasih.

Senin, 26 Maret 2012

Cara Membuat Text Area Dengan Scroll Pada Posting(an)

Pingin membuat halaman yang menggunakan scroll....????
gampang saja.

Sebenarnya sama saja, cuma scroll pada postingan ini bisa menghemat halaman blog, biar tidak terkesan puwanjang, dan pembaca malas untuk menghabiskannya.
cara ini sangat bisa digunakan untuk postingan novel, cerpen, ato yang lainnya, pokoknya menyingkat yang panjang-panjang. :)

Artikel ini saya dapatkan dari bootingskoblog "teman ngeblog", sebenarnya tutorialnya berbentuk contoh untuk wordpress, namu setelah aku coba kok bisa.

Bisa lihat contohnya DISINI

Silahkan coba...
berikut caranya:

Langsung letakkan kode HTML berikut pada postingan anda.



<div style="border: 2px solid #999999; overflow: auto; height: 80px; text-align: justify; padding: 5px;">
Tulisan Anda...
</div>


dan letakkan tulisan anda pada teks yang berwarna MERAH

kemudian diSAVE, eit,,, sebelum di-save liat dulu pake PRATINJU ato PREVIEW dulu, biar ndak bolak-balik KEBELAKANG :)
Makasih, selamat mencoba.

. :)

sumber: Kopast linkabove


Selasa, 20 Maret 2012

Cara Menambah Icon Smile Emotion Di Blog



Dalam blogspot tidak dikenal Icon Smile Emotion sebagaiman pada wordpress. tapi dibalik ketiadaan itu ada pula cara orang utuk lebih kreatif, yaitu dengan memasang Icon Smile Emotion secara manual, yaitu dengan cara otak-atik html.

Berikut saya temukan dari teman zm-share cara manambahkan Icon Smile Emotion pada blog, sehingga ketika ditulis kode unik smile, maka secara otomatis akan muncul gambar.

Berikut adalah langgah-langkahnya:

1. Masuk ke template > edit HTML > Expand Widget Templates dan cari kode dibawah ini:

    ]]></b:skin>

2. Jika sudah ketemu copy code javascript di bawah, dan letakan dibawah kode ini ]]></b:skin>

    <script src='http://louislim2.googlepages.com/addSmiley.js ' type='     text/javascript'/>

3. Simpan dan lihat hasilnya.
Icon smile ini akan tampil secara otomatis pada blog kita setiap kali kita mengetikan standar kode dari icon tersebut.


Standar kode smile yang bisa digunakan :

:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p
;) or ;-)
:k or :-k
:@ or :-@
:# or :-#
:x or :-x
:o or :-o

semoga berhasil...
trimakasih.

Minggu, 11 Maret 2012

Cara Membuat Dan Mengatasi Masalah ReadMore Otomatis

Cara Membuat Readmore Otomatis. Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog 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 dan menarik.

Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.
PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :




cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
<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 html berikut ini :

<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 : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> 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 save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Dan jika Sobat Sukses Menggunakan Readmore Otomatis Pada Blog Sobat dan Jika Bermasalah di Halaman Static Blog (Page Menu) Readmore tidak berfungsi, sobat bisa mengatasi masalah tersebut dengan cara Berikut:

1. Cari kode yang mirip seperti kode dibawah 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>

Selanjutnya tambahkan kode dibawah ini diatas kode berwarna merah


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

Kemudian tambah kode dibawah ini di bawah kode yang berwarna biru

</b:if>

Simpan, selesai.

Slamat mencoba, Semoga berhasil,
Trimakasih.

Sumber Kopas From zona-klik



Cara Membuat Gambar SlideShow di Blogspot

Mungkin ketika anda melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir. kali ini anda juga bisa membuatnya. Caranya adalah sebagai berikut :

Masuk ke edit html blog...

Cari Kode </head>

Copy kode di bawah ini dan pastekan sebelum kode </head>

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




Setelah itu buat gadget baru (HTML/JavaScript) dengan kode di bawah ini..


<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilnk9xwgJQSx9S2XATvawW9JCB8k71SR-b81vGew5cPCJeYl8UUwQalfj0E_Q1dCU2_0Ej_zQKGpkti1QsrcAguw5bIGief2TkreLtfXgBkY8Rv-yJIfbtk3hIK883hoMy8fwt4e2D5vE/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMWkIuF6rwGMtnuZPQSM1s4dYgiTMOiavkUZEix_6YOsZ4rgU4tzTruymqleiLYcHWZ3UodXZoKNRRYsqRNmEFZ2qWO2oQ7LKENdFeCND6A8Lm4o6NaDMiF_fxTV3ZPbUXOc71gl-5jY/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjIf1fXXdan0NbDFp0K0S3NtTjau85YJixMxqzViH1HItcZ18PvUzkcwHunp8nHsjRaKaSxHbzkClpGe6ZP7AW0EoOh4_nvfxM4jdxQ8gooc3EfNpp1SOWA21laIhFfmlRVU7VXeID3Y/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BFZJHj3Bqa1DfDT0me3vgRri-OOcpdZm748IdMkSrz7ietgfnbwxvfvQxPZ8ufthatYTPW6c0M91ds-G6efkMENDJL0ETxZNvbDcPUa4pG9RBXKtIBY5B4pN2StYXEC6DlWrW-EH7XI/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

Catatan : Ganti Tulisan Tebal dengan URL gambar anda.. !!!. Ganti title dan alt sesuai keinginan anda..!!!

Selamat Mencoba, smoga berhasil
Trimakasih.

Sumber Kopast From Khoirullukman

Cara Membuat Contact Me dengan Foxyform

Apa itu Contact Me? Contact Me atau dalam bahasa Indonesianya adalah Hubungi Saya, adalah sebuah fitur yang memungkinkan adanya interaksi antara pengunjung blog dengan admin blog tersebut. Namun ini berbeda dengan Buku Tamu yang ada di blog, komentar anda bisa juga di baca oleh orang/pengunjung yang lain, fitur Contact Me lebih bersifat rahasia atau private. Jadi hanya bisa di ketahui oleh admin dan pengunjung blog yang mengirimkan pesan itu saja.

Form Contact ini juga bisa digunakan apabila pengunjung ingin menghubungi Admin blog, maka akan terjadi komunikasi baik berupa pertanyaan, kritik, maupun saran. Sebenarnya, ada banyak sekali penyedia Form Contact untuk membuat Contact Me, yaitu semacam:

Wufoo.com
EmailMeForm.com
Kontactr.com

Lalu, kenapa saya lebih memilih Foxyform.com untuk membuat Contact me? Jawabannya jelas di Foxyform lebih mudah dan cepat, serta tidak perlu daftar lagi. berbeda dengan ketiga situs penyedia form seperti diatas yang mengharuskan untuk mendaftar terlebih dahulu. Anda termasuk orang yang tidak mau ribet kan? Saya juga sama.

#Bagaimana cara membuat Contact Form?
Langkah-langkahnya adalah seperti berikut:

Kunjungi situs Foxyform.com
Lalu, pada YOUR OPTIONS, silahkan centang seperti gambar dibawah, (atau sesuai keinginan anda sendiri)

contact me
Kemudian, ubah warna background serta warna tulisannya. (jika tidak ingin ribet, abaikan opsi saja yang ini)

contact form
Nah, hampir selesai, pada kolom ini, silahkan isi alamat email anda. (karena pesan yang dikirim akan masuk ke Inbox email anda ini)
Jika sudah, klik Create Formular.

foxyform
Maka akan muncul kode html nya, silahkan di Copy & Paste.


#Meletakkan kode Html form Contact pada blog
Setelah anda Copy kode yang tadi, silahkan ikuti cara-cara berikut:

Login pada akun Blogger anda.
klik Entry Baru. atau anda bisa juga membuat pada Static Page, klik Edit Pages. (sebelah kiri Edit Posts) kemudian klik tambah baru/new.
Jika sudah, isikan judulnya, misal Hubungi Saya.
klik pada tab Edit HTML, paste-kan kode html yang tadi.
Done! selesai, klik Publish/Terbitkan.


Sekian dulu Tutorial dari saya, selamat mencoba.
Semoga bermanfaat.
Trimakasih.

Sr: Kopast From  nova13

Cara Merubah Huruf Header KAPITAL jadi SeSuAi KeInGiNaN KiTa

Untuk merubah huruf judul widget dalam template kita (heading) ini,tidak begitu sulit.Bahkan dalam hitungan detik keinginan sobat untuk merubah huruf ini sudah bisa terwujud.Ini  langkah-langkahnya  yang masih saya ingat dan masih tersimpan di inbox facebook,karena pasilitas komunikasi saya dulu dengan Kang Pepep Archice69 adalah facebook.Insya Alloh masih sesuai dengan arahan beliau,ikuti saja caranya;
1.Masuk ke www.blogger.com dengan account sobat.
2.Pilih rancangan (tata letak)
3.Klik Edit HTML
4.Cari kode h2 {  (untuk memudahkan pencarian, gunakan Ctrl+F)
   
/* Sidebar Content */
#sidebar-wrapper h2 {
font:14px arial,verdana,trebuchet ms;
font-weight:600;
text-align:left;
font-style:normal;
text-transform:uppercase;
line-height:1.3em;
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
margin:-5px -5px 10px -5px;
padding:10px;
}

Atau cari kode berikut ini,karena semua ini tergantung dari template yg sobat pakai:

/* Headings
--------------------------------------
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
text-transform:uppercase;
letter-spacing: .2em

color:$sidebarcolor;
}
5.Hapus kode  text-transform:uppercase;
6.Jangan lupa Simpan Template.
7.Selesai.
Keterangan:
Kode text-transform:uppercase; ini memberikan perintah bahwa tulisan dalam div Heading semua hurufnya harus besar.Dengan menghilangkan kode ini, maka besar kecilnya huruf terserah kita.
 
Selamat mencoba, semoga berhasil, bermanfaat.
Trimakasih. 

Sr: Kopast Dari raihanrn 
 

Cara Membuat Slide Post(ingan)

Apa itu slide post ??? Slide Post adalah widget yang menampilkan isi postingan dalam bentuk slide. Biasanya kita temui slide ini berupa gambar atau video, tapi saya akan buat isinya menjadi postingan diblogmu, hahahahaha. Mau liat contohnya ??? Klik DISINI , ada slide postnya dibawah Daftar Pelajaran.

Berikut langkah-langkah membuat slide post:

1. Login ke www.blogger.com

2. Klik Tata Letak dan pilih tab Elemen Laman


3. klik Tambah Widget

4. Pilih yang HTML/JavaScript

5. Pastekan script dibawah ini kedalam blogmu !!!



 <style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #FFFFFF;
background-color: #000000;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}


/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}


/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}


/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}


/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}


/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 500px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://bloganda.blogspot.com" target="_blank">Nama Blong Kamu</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://bloganda.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Nama Title Post Kamu"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://bloganda.blogspot.com" target="_blank">Nama Blong Kamu</a></noscript>
<div id="feedGadget">Masih Proses, Mohon Sabar :D</div>
<div id="feedGadget"><a href="http://bloganda.blogspot.com" target="_blank"></a></div>




Ganti yang tulisan yang bercetak tebal dengan blogmu
*Jika http://bloganda.blogspot.com diganti dengan URL blogmu
*Jika
Nama Blong Kamu diganti dengan nama blogmu
*Jika
Nama Title Post Kamu diganti dengan judul slide postmu
*Jika
http://bloganda.blogspot.com/atom.xml diganti dengan URL atommu atau langsung ganti "bloganda" dengan nama blog kamu.

6. Klik Simpan





Ato bisa dimodif seperti ini.
(Skrip dalam perbaikan)

Cara Mengganti Ikon Blogger

Postingan hari ini kita bahas mengenai cara mengganti icon blogger dengan gambar2 ataupun foto anda sendiri di addressbar seperti icon diblog saya yang cantik itu,,hehe,,sebelumnya anda harus membuat dulu image atau mengedit gambar yang sudah ada menjadi berukuran 24 x 24 pixel up to 32 x 32 pixel,kemudian silakan upload gambar tersebut di photobucket.com, kenapa harus upload kesana? karena untuk mendapatkan kode URL image kita, masih bingung ya,,ya udah ikuti langkah- langkah berikut aja ya,,


1. Pilih gambar yang akan anda masukkan dengan ukuran yang saya sebutkan diatas
2. Silakan upload gambarnya diphotobucket.com, jika belum terdaftar di photobucket.com silakan register disini
3.Setelah login silakan upload gambarnya di menu Upload File & Video dengan pilih tombol choose file
4.Setelah selesai upload akan muncul gambar anda dan ambil kode URL gambar anda seperti contoh kode URL image saya


http://i383.photobucket.com/albums/oo276/0512_photo/enny-1.jpg


5.Untuk memasukkan ke blog anda silakan kembali ke Dasboard blogger anda,silakan ke menu Layout->Edit HTML->jangan lupa klik Expand Widget kemudian temukan kode berikut



6. Setelah itu letakkan kode dibawah ini sebelum kode diatas



silakan ganti kode yang berwarna merah dengan URL gambar yang anda dapatkan di photobucket.com tadi

7.Kemudian Save Setting,,Selesai,,

Selamat mencoba Smoga Berhasil

Sr: Kopast From tutorialbikinblog

Cara Modifikasi Widget Feedburner

Salam dari kami.
Salah satu yang membuat tampilan blog semakin menarik adalah dengan ditambahnya widget feed untuk artikel lewat e-mail.
Banyak cara, yang digunakan untuk membuat widget tersebut, salah satunya adalah dibawah ini. Berikut adalah modifikasi dari tampilan widget feed yang pertama.
Mari kita mulai.
1. masuk ke blog sobat.
2. pilih rancangan kemudian tambah widget / halaman / add page
3. copy paste code dibawah ini :

   (Tanpa Reader's)

<form style="background:url(http://i621.photobucket.com/albums/tt292/lolids/feedLOL1ds.jpg) no-repeat right bottom; border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=rouftracal', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Untuk berlangganan update artikel GRATIS, masukkan email anda dan anda akan mendapatkan artikel terbaru lewat email anda:</p><p><input type="text" style="width:168px; background:#ffd373" name="email" /></p><input type="hidden" value="rouftracal" name="uri" /><input type="hidden" name="loc" value="en_US" /><input style="margin: 0px; padding: 0px; width: 72px;background:#73ccff;" type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>


keterangan :
1. untuk warna merah : sobat bisa ganti dengan URL image lainnya. atau bisa cari image di google dengan keyword : feed. terus upload biar punya URL image-nya.
2. untuk warna merah dengan text  “rouftracal” , sobat bisa ganti dengan ID / nama pada feedburner. misalnya : http://feeds.feedburner.com/rouftracal

Atau bisa juga menggunakan Reader's dengan widget milik artich

<form style="background:url(http://i621.photobucket.com/albums/tt292/lolids/feedLOL1ds.jpg) no-repeat right bottom; border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=rouftracal', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Untuk berlangganan update artikel GRATIS, masukkan email anda dan anda akan mendapatkan artikel terbaru lewat email anda:</p><p><input type="text" style="width:168px; background:#ffd373" name="email" /></p><input type="hidden" value="rouftracal" name="uri" /><input type="hidden" name="loc" value="en_US" /><input style="margin: 0px; padding: 0px; width: 72px;background:#73ccff;" type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p><p><a href="http://feeds.feedburner.com/ArtichOnline"><img src="http://feeds.feedburner.com/~fc/ArtichOnline?bg=CCFFFF&amp;fg=CC0000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p><p><a href="http://lolidsonline.blogspot.com/2011/02/cara-membuat-atau-modifikasi-widget.html">widget by artich</a></p></form>


Untuk warna “KODE BIRU” , sobat bisa ganti dengan widget dari feedburner. tentunya teman-teman harus sudah terdaftar dulu di feedburner.com
Hasilnya akan seperti ini : ( tinggal di EDIT sesuka Hati )

Untuk berlangganan update artikel GRATIS, masukkan email anda dan anda akan mendapatkan artikel terbaru lewat email anda:


Delivered by FeedBurner

widget by artich
EDIT 1 :




Like This Blog's Posts? Get the Latest of It Directly from your Inbox for Free and No SPAM!!:


widget by artich
EDIT 2:







Subscribe by E-mail & receive free updates of these cool Tips N Tricks straight to your inbox!




Enter your email address:
EDIT 3 :




Remain updated by subscribing to my

Regular Feed Updates





Silahkan Masukkan e-mail anda atau klik feeds untuk dapatkan UPDATE artikel menarik lainnya tips and tricks nge-Blog!, semoga bermanfaat Sobat.


Trimakasih.

Sumber Kopast From lolidsonline

Sabtu, 10 Maret 2012

Cara Menampilkan Kode HTML Pada Postingan

        Berawal dari kebingungan, jujur ketika saya mengkopi artikel yang ada kode HTMLnya, tapi tidak bisa muncul.
maka setelah saya cari-cari, ternyata ada program untuk mem-parse kode-kode tersebut, sehingga bisa ditampilkan pada halaman postingan.
       Berikut adalah cara cara menampilkan kode HTML pada postingan.
       Ada 2 cara untuk hal ini yaitu :
       Pertama menggunakan layanan Tools online untuk Parse kode HTML, ini alamatnya :

    Caranya sangat gampang, sobat tinggal memasukkan kode yang ingin di parse kedalam kotak yang telah disediakan dari salah satu alamat diatas, kemudian klik PARSE

            Kedua ini menggunakan cara manual yaitu kita memasukkan kode-kodenya secara manual didalam postingan blog, berikut kodenya :
    • < cara menulisnya <
    • > cara menulisnya >
    • " cara menulisnya "
    • & cara menulisnya &

    Bagaimana, mudah kan ?

    Semoga berhasil, trimakasih

    Sumber Kopast dari wafariq 

    Jumat, 09 Maret 2012

    Cara Membuat Formulir Berlangganan Email Melalui Feedburner

    Banyak cara untuk membuat pembaca bisa selalu mengetahui postingan terbaru atau artikel-artikel terbaru, salah satunya adalahdengan meletakkan form kontak berlangganan.

    Ada banyak model dari form tersebut salah satunya adalah seperti dibawah ini.




    Itu newsletter atau milis (mailing list) dibuat dengan kode javascript yang diambil dari Feedburner.

    Apa tujuannya?

    Membangun jaringan atau komunitas yang loyal. Supaya pengunjung yang datang ke situs kita--dan berlangganan dengan memasukkan emailnya ke kotak yang tersedia-- dapat membaca tulisan terbaru kita via email.

    Bagaimana cara buatnya?

    Pertama, buat akun Feedburner. Klik di sini untuk panduan cara buat akun Feedburner.
    Kedua, integrasikan RSS Feed blog/situs Anda dengan Feedburner..

    Saya sudah punya akun Feedburner dan RSS Feed blog saya sudah diintegrasikan dengan Feedburner

    Kalau begitu, ikuti langkah-langkah berikut:

    1. Masuk ke Feedburner.google.com
    2. Klik link feed Anda -> Publicize -> Email Subscription -> Activate (paling bawah)




    3. Copy kode yang ada dan masukkan ke Rancangan -> Tambah Elemen -> Javascript/HTML di blogger.com Anda.


    4. Klik Simpan. Selesai.



    1. Di bawah Email Subscription -> klik Communication Preferences
    2. Pada Confirmation Email Body -> ganti pesan di situ dengan bahasa Indonesia.
    3. Klik Save.

    Oh ya, hati-hati waktu merubah bahasa jangan sampai membuang kode ${confirmlink}

    Kenapa?

    Itu kode untuk konfirmasi bagi yang hendak berlangganan udpate blog kita via email.




    Trimakasih...
    slamat mencoba semoga berhasil


    Sumber Kopast From alKhoirot

    Cara Menampilkan Judul Saja Pada Postingan Di Halaman Depan

               Menampilkan judul jasa pada halaman depan sangat mengasikkan dan membuat pengunjung jadi betah, ini dikarenakan pengunjung tidak disuguhi postingan yang banyak dan menjemukan.
               Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
               Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.

    Contoh bisa dilihat di halaman depan "rouftracal dot blogs"

    OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
    1. Login ke blogger dengan ID anda.
    2. Klik Rancangan.
    3. Dan KLik tab Edit HTML.


    4. Cari kode di bawah ini atau yang mirip dengan kode ini : </head>


    5. Copy kode css di bawah ini dan taruh sebelum kode : </head>



    6. Simpan Template.

    Selamat mencoba ya... Semoga bermanfaat....
    Terima kasih.

    Sumber Kopast From CaraBuatWebGratis

    Cara Membuat Link Senggol Sederhana Pada Blog

    Tutorial ini saya dapatkan dari "carabuatwebgratis" pertama kali saya liat, langsung saja tertarik, lalu saya coba dan hasilnya bisa dilihat disamping.
    Link senggol ini bisa jadi alternatif untuk menambah tampilan blog anda. Saya sebut link senggol sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergeser seperti disenggol....hehehee....., dan akan terlihat bergoyang bila diarea link pointer mouse diarahkan keatas dan kebawah.
    Berikut bentuk Link senggol yang saya maksud :


    • Cara buat web
    • Cara buat blog
    • HTML
    • CSS
    • JavaScript

    Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
    1. Login ke blogger dengan ID anda.
    2. Klik Rancangan.
    3. Dan KLik tab Edit HTML.

    4. Cari kode di bawah ini atau yang mirip dengan kode ini :

    5. Copy kode di bawah ini dan taruh sebelum kode :

    Langkah selanjutnya anda tinggal menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda tinggal menambah gadget. Perhatikan langkah berikut :
    1. Klik Rancangan dan pilih Elemen Laman

    2. Tambah Gadget


    3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript


    4. Copy dan paste kode dibawah ini pada gadget tersebut :

    Ok...., Selamat mencoba dan Semoga bermanfaat....
    Trimakasih.
    Sumber Kopast From CaraBuatWebGratis