Tampilkan postingan dengan label Tutorial Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogging. Tampilkan semua postingan

Cara Modifikasi/Mempercantik Blockquote Dengan Kode CSS

Kita langsung aja ke inti Karena saya lagi males Basa basi

Berikut Cara mempercantik Blockquote :

  1. Login Ke Blog
  2. Lalu Ke Template >Edit HTML>Lanjutkan ,Centang Expand Template Widget
  3. Lalu Sobat Cari Kode Dibawah (Gunakan CTRL + F)
.post blockquote
.........  dst 
}
.post blockquote:hover
.........  dst 
}
.post blockquote p
.........  dst 
}
Atau
.post blockquote.........  dst 
 Dan
blockquote
.........  dst 
}
 Tergantung Template yang kamu gunakan
Lalu jika ketemu salah satunya hapus dan ganti dengan kode dibawah ini
.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }
.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}
.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}
Selesai ,Cukup Mudah kan ?

Selamat Mencoba dan Happy Blogging

 

Cara Modifikasi/Mempercantik Blockquote Dengan Kode CSS

Cara agar Komentar Sang admin berbeda Dengan Pengunjung

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung- versi saya
soalnya disini saya beri sedikit efek" Seperti Vikrimadz (blog sebelah)
ok check Lets this out
Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung
1. Login ke blogger >> Rancangan >> Edit HTML
2. Jangan lupa centang kotak "expand widget template"
3. Letakkan kode dibawah ini tepat diatasnya kode ]]></b:skin>
.comment-body-author {
background: #ffffff;border:2px Dashed #0080FF;margin:0;padding:0 0 0 30px;-moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px;font-size: 14px;font-family: kristen ITC;}
4. lalu cari kode <dd class='comment-body'>
5. lalu agar jadi seperti ini 
<data:commentPostedByMsg/>
<br/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<br/>
<span class='commentdate' style=''>
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/> </span>
</b:if>
</dd></b:if>
<dd class='comment-footer'>


</dd>

NB :

kode yang berwarna merah adalah kode yang harus di tambahkan.
6. Simpan dan lihat hasilnya.... 




Ok selamat mencoba dan happy BloggingCara agar Komentar Sang admin berbeda Dengan Pengunjung

Cara Mudah Hanya Judul Postingan yang tampil Pada HOMEPAGE

Siang Sobat CO pada Siang ini yang cerah saya ingin postingan artikel yang mungkin lagi dicari oleh sobat" yaitu Bagaiman Cara Menampilkan hanya judul postingan nya saja pada home page Mungkin artikel ini penting juga untuk menampilkan lebih banyak artikel yang ditampilkan lalu bagaimana caranya?

Caranya sebagai berikut :

  1. Login terlebih dahulu
  2. Masuk ke Template >Edit HTML >Lanjutkan ,Centang Expand Template Widget
  3. Lalu Cari kode CSS   <b:include data='post' name='post'/> Jika ada 2 pilih yang bawah
  4. Ganti kode tersebut dengan
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<a expr:href='data:post.url'> 
<div style='padding:6px 0 6px 5px;border-right:2px dotted #ccc;border-bottom:2px dotted #ccc;margin-bottom:2px;background:#EAE9E9;color:#ff0000;'>
<data:post.title/>
</div>
</a> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if>
Kode berwarna merah bisa anda utak atik Sendiri

Simpan dan selesai

Selamat mencoba dan Happy Blogging


Cara Mudah Hanya Judul Postingan yang tampil Pada HOMEPAGE

Cara Membuat Older dan Newers Dengan gambar Float (Melayang)

Bagi Sobat -sobat yang ingin mengengganti penampilan Posting lama dan posting baru saya punya cara untuk bisa melakukan itu dengan menggantinya menjadi gambar melayang

Berikut carannya:

  1. Loginterlebih dahulu ke blog anda
  2. Klik Template > Edit HTML > Lanjutkan ,Centang Expand Template Widget
  3. Lalu Cari Kode ]]></b:skin>
  4. Lalu Simpan Kode dibawah Tepat diatas Kode ]]></b:skin>
#blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:80px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:40%;width:80px;z-index:9;margin:0 0 0 5px}.blog-pager-older-link{background:url(http://4.bp.blogspot.com/-18bHuKvg5ao/TnGg6N1EtWI/AAAAAAAAA6A/ZhKPackZ4WQ/s400/Next.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}.blog-pager-newer-link{background:url(http://4.bp.blogspot.com/-QbeWH7P8OSE/TnGg_zIB6nI/AAAAAAAAA6I/TmNTauVcj3U/s400/Prev.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}#blog-pager a:hover{opacity:1}
Kode yang berwarna Merah dapat Diganti dengan url gambar Sobat tapi jika ingin menggunakan gambar ini monggoo....

Simpan/Save Selesai

Selamat mencoba and Happy Blogging



Cara Membuat Older dan Newers Dengan gambar Float (Melayang)

Thesis , Template Blog SEO Friendly

Mungkin banyaknya template membuat mu bingung manakajah yang ingin dipilih ? Tapi ingat template menentukan banyak sedikitnya pengunjung karena template yang gendut/berat tidak disukai banyak orang dan disni saya share Template yang Bernama Thesis Template SEO Friendly dengan loading nya kurus/Cepat mungkin bikin orang Betah berlama - lama dan dibawah ini adalah Screen Shot dari Templatenya

                                     Thesis for Blogger

Dan Mungkin anda akan Bertanya , Apa sajakah Fitur-fitur template ini ?
Nah Fitur-fiturnya adalah Sebagai berikut :
- SEO Friendly
- Visitor Friendly
- Dilengkapi dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
- Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi & keyword)
- Quicklink ke kotak komentar
- Sudah dipersenjatai Autoreadmore
- dilengkapi dengan tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog sobat.
- Loading yang cepat
- Konsep minimalis & simple
- dll.


Dan jka kamu ingin melihat demonya dan download Bisa klik link dibawah
Live Demo : Thesis for Blogger/Blogspot 
Download : Download via boxThesis , Template Blog SEO Friendly

Cara Mudah Agar Beadcrumbs Terindeks Search Engine

Beadcrumbs adalah menu navigasi tambahan yang biasanya terdapat diatas judul posting/artkel seperti yang ada di blog ini . Kegunaan breadcrumbs hanya untuk memudahkan pencarian artikel saja berdasarkan label atau arsip. Kalau di template anda belum ada breadcrumbs silahkan dibaca artikel terdahulu Cara Membuat Breadcrumbs di Blogspot. Pada tutorial blog kali ini saya hanya akan membahas bagaimana cara supaya breadcrumbs dapat terindeks oleh search engine atau Google. Tujuannya adalah untuk meningkatkan hasil SERP pencarian google terhadap keyword judul artikel yang dibuat. Menurut SEO maka akan menjadi nilai plus jika artikel anda terindeks di Google bukan hanya judul dan urlnya, tapi juga terindeks berikut label kategori yang ada pada breadcrumbs. Sudah paham toh maksudnya..?? Kalau begitu langsung saja tancap ke trik agar breadcrums terindek google ini.

Trik Agar Breadcrumbs Terindeks Oleh Google

1.   Login ke dashboard blogger anda, pilh Rancangan > Edit HTML. Jangan lupa centang Expand widget template.
2.   Cari kode <div class='breadcrumbs'>   dalam template anda. Pada template yang saya pakai ini susunan kodenya seperti dibawah ini. Kalau sobat ragu-ragu download dulu full template sebelum melakukan perubahan untuk jaga-jaga kalau gagal atau salah.
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
  <div class='post hentry'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

3.       Ganti/rubah kode yang saya tandai dengan warna merah diatas dengan kode dibawah ini.
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

4.      Save/Simpan template anda.
5.  Untuk mengetahui apakah breadcrumbs anda sudah dapat terindeks oleh google, sobat dapat menggunakan Rich Snippets Testing Tool dengan memasukkan url salah satu postingan anda yang sudah terindeks dan klik tombol Preview. Tapi yang perlu dipahami adalah hasil test ini tidak akan serta merta langsung muncul begitu anda melakukan perubahan pada breadcrumbs seperti diatas. Tapi hasilnya akan terlihat setelah google melakukan indeks terakhir pada blog atau crawling atau pada googlebot last acces berikutnya. Mudah-mudahan tidak membingungkan ya .. :D.

Selamat Mencoba dan Happy Blogging

Sumber :rayhanzhampiet.com
Cara Mudah Agar Beadcrumbs Terindeks Search Engine

Cara Mudah Membuat Beadcrumbs Di Blog


breadcrumb adalah menu navigasi yang biasanya terdapat diatas postingan. Tujuannya adalah untuk menunjukkan urutan isi halaman dari Home sampai ke posting artikel yang sedang dibaca. Kalau kita menilik asal muasalnya, menu navigasi breadcrumb ini berasal dari platform Wordpress yang secara default sudah disetting otomatis urutan navigasinya mulai dari Home > Parent Category (kategori utama) > Subcategory > Posting. Sedangkan untuk platform blogger, karena belum ada setting otomatisnya maka kita perlu melakukan sedikit  trik cara membuat breadcrumb di blogspot ini. Menu navigasi breadcrumb di blogspot ini kita buat berdasarkan urutan Home > Label > Posting.  Sama seperti di WP, breadcrumb di blogspot tidak akan terlihat pada halaman Homepage, tetapi dapat terlihat pada halaman posting, label dan juga arsip.

Trik Cara Membuat Breadcrumb di Blogspot adalah sebagai berikut :
  • Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.
  • Cari kode ini ]]></b:skin> pada template anda. Copy kode CSS dibawah ini dan paste-kan kode CSS tepat diatas kode ]]></b:skin>  

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
  • Lanjutkan dengan mencari kode ini <b:include data='top' name='status-message'/>  pada template anda. Letakkan kode dibawah ini dibawahnya.

<b:include data='posts' name='breadcrumb'/>
  • Kemudian cari lagi kode  <b:includable id='main' var='top'> . Copy script dibawah ini dan letakkan tepat diatas kode tadi.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop> <b:else/> »Unlabelled </b:if> » <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>
  • Cek sekali lagi apakah anda sudah meletakkan kode CSS/script yang diberikan pada tempat yang dimaksud pada langkah 2-4 diatas. Sebaiknya download dulu template anda sebelum dimodifikasi.
  • Jika sudah yakin semua langkah diatas sudah dilakukan dengan benar, Save template anda.
Good luck sahabat CO(Sebutan kecil bagi yang suka blog ini (fans))
Cara Mudah Membuat Beadcrumbs Di Blog

Cara Mudah Membuat Permalink di Blog


Permalink atau permanen link tag adalah link permanen yang menuju halaman tertentu (Wikipedia). Sedangkan tujuan membuat permanen link  atau permalink tag di postingan adalah untuk menambah internal link pada artikel dan diharapkan mampu memperkuat target pencarian keyword di search engine. Banyak pula yang mengatakan bahwa permalink juga merupakan penerapan teknik optimasi seo on page, sehingga permalink yang kita buat bisa juga disebut permalink tag seo friendly. Cara membuat permalink sebenarnya tak beda jauh dengan cara membuat kotak admin di bawah postingan , karena permalink ini pun juga diletakkan dibawah artikel / postingan nantinya.

Screenshot Contoh Permalink

Cara Membuat Permalink Tag Di Blogspot

1.       Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.
2.       Cari kode ]]></b:skin>  pada template anda.
3.       Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>.

.permalink
{border: 2px dashed #424242;
padding: 5px;
background: #fbfbef;-moz-border-radius:5px;}

.permalink-antigalau a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

4.   Kemudian cari kode <data:post.body/> pada template anda. Letakkan kode permalink dibawah ini dibawah kode <data:post.body/>. Jika template anda sudah menggunakan Read More, maka letakkan kode permalink dibawah kode<data:post.body/>  yang ke-2.

<div class='permalink' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>
<small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>. Anda boleh menyebarluaskan atau mengcopy artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.</small></div>

 5.       Preview dulu untuk melihat tampilan hasilnya.
6.   Jika anda ingin membuat url postingan pada permalink menjadi link aktif, sobat dapat mengganti kode <data:post.url/>  dengan kode  <a expr:href='data:post.url'><data:post.url/></a>.
7.   Silahkan melakukan modifikasi pada jenis style border atau background warna sesuai keinginan anda. Mencoba membuat dengan kreasi sendiri tentunya akan lebih memuaskan hasilnya.
8.       Save/Simpan template anda.Selesai

Selamat Mencoba and Happy Blogging
Cara Mudah Membuat Permalink di Blog

Cara Mudah Membuat Semua Link Pada Blog Terbuka di tab baru

Membuat Semua link terbuka di tab baru
 Membuat semua link terbuka di tab baru, Link pada suatu blog atau website sangat penting gunanya,yaitu agar pembaca tetap memiliki akses terhadap page referral di mana dia menemukan link baru untuk di-klik. Selain itu, bagi pemilik blog/website hal ini juga menguntungkan karena visitor tidak segera meninggalkan halaman blog/website karena adanya window baru yang harus dibuka. 

Selain itu,link terbuka di tab baru pada artikel yang sedang dibaca juga tidak menghilang tergantikan oleh halaman baru dari link yg di-klik oleh visitor. pembaca tetap dapat membaca artikel hingga selesai sambil melihat referensi link yg terdapat di dalam posting.

Nah,kali ini saya akan memberikan, tips tentang bagaimana cara membuat semua link terbuka di tab baru secara otomatis, jadi jika kamu pasang script ini,kamu tidak perlu menambahkan embel-embel "target" pada link-link yang ada di blog kamu.

Membuat Semua link terbuka di tab baru caranya sebagai berikut:

  1. Login ke menu bloger
  2. klik Dashboard
  3. Pilih Rancangan
  4. Pilih Edit Laman
  5. Tambahkan Gadget/Add Gadget => HTML/JavaScript
  6. Lalu Copy Script berikut
    <!-- code for turning all non-blog links to new page links -->
    <script type="text/javascript" language="javascript">
    var arr = document.getElementsByTagName("a"); //get all links inthe page
    for(var i = 0; i < arr.length; i++)
    {
    if(arr[i].href.indexOf(" http://bacabac-a.blogspot.com/ ") < 0 //not links that are 'inside' blog
    && arr[i].href.indexOf("javascript:") < 0) //not javascript links
    arr[i].target = "_blank";
    }
    </script>
  7. Ganti Tulisan berwarna Biru tersebut dengan URL blog kamu lalu Jangan Lupa di Save

Selamat Dicobi heheh Dicoaba maksudnya dan happy blogging
Cara Mudah Membuat Semua Link Pada Blog Terbuka di tab baru

Cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3 Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3 adalah salah satu cara mepercantik menu navigasi pada blog kamu, dengan memasang jQuery ini maka akan mempermudah juga bagi para pengunjungmu untuk bisa memilih menu yang diinginkan. saya juga  sebenarnya suka dengan menu ini,hanya saya widget ini terlalu Gemuk/berat 
maka saya tidak memakai wiget ini bagi yang ingin memakai saya persilahkan 

Dan bagaimana Cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ? ikuti langkah-langkah dibawah ini:

  1. Letakkan kode berikut diatas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    Tapi jika dalam template kamu sudah terpasang script ini,maka kamu tinggalkan langkah ini.
  2. Kemudian letakkan juga kode dibawah ini tepat dibawah kode JQuery 1.3.2 tadi.<kode pada no.2>
    <script src='http://infonetmu.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

    <script src='http://sabarmuanas.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>
  3. Cari kode ]]></b:skin> dan letakkan kode diawah ini diatas kode ]]></b:skin>
    #rocking-rolling{
    width:auto;
    height:52px;
    text-align:left;
    font-family:"Trebuchet MS",sans-serif;
    font-size:16px;
    font-style:normal;
    font-weight:bold;
    text-transform:uppercase;
    }
    #rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
    /* netralisasi tampilan elemen heading, paragraf dan formulir */
    margin:0 0 0 0;
    pading:0 0 0 0;
    border:none;
    background:transparent;
    }
    #rocking-rolling .item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px; height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
    }
    #rocking-rolling .link{
    left:2px; top:2px;
    position:absolute;
    width:48px;
    height:48px;
    }
    #rocking-rolling .icon_home{
    background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
    }
    #rocking-rolling .icon_mail{
    background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
    }
    #rocking-rolling .icon_help{
    background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
    }
    #rocking-rolling .icon_find{
    background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
    }
    #rocking-rolling .icon_photos{
    background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
    }
    #rocking-rolling .item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px; background:transparent; display:none;
    }
    #rocking-rolling .item_content h2{
    color:#aaa;
    text-shadow:1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
    }
    #rocking-rolling .item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow:1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
    }
    #rocking-rolling .item_content a:hover{
    color:#0b965b;
    }

    #rocking-rolling .item_content p{
    background-color:transparent;
    text-transform:none;
    font-weight:normal !important;
    display:none;
    }
    #rocking-rolling .item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px; float:left;
    margin-right:5px;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    }
  4. Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan sesuai tempat menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'> Letakkan kode ini dibawah kode <div id='header-wrapper'>
    <div id='rocking-rolling'>
    <div class='item'>
    <a class='link icon_mail'></a>
    <div class='item_content'>
    <h2>
    KONTAK SAYA</h2>
    <p>
    <a href='#'>
    Email</a>
    <a href='#'>Twitter</a>
    <a href='#'>Facebook</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_help'></a>
    <div class='item_content'>
    <h2>
    BANTUAN</h2>
    <p>
    <a href='#'>
    Buku Tamu</a>
    <a href='#'>Lapor</a>
    <a href='#'>Kritik dan Saran</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_find'></a>
    <div class='item_content'>
    <h2>
    TELUSURI</h2>
    <p>
    <form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_photos'></a>
    <div class='item_content'>
    <h2
    >GALERI FOTO</h2>
    <p>
    <a href='#'>
    Kategori</a>
    <a href='#'>Arsip</a>
    <a href='#'>Daftar Isi</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_home'></a>
    <div class='item_content'>
    <h2>
    MULAI DARI SINI</h2>
    <p>
    <a href='#'>
    Pelayanan</a>
    <a href='#'>Portfolio</a>
    <a href='#'>Pembayaran</a>
    </p>
    </div>
    </div>

    <div style='clear:both;'></div>
    </div>

    <script type='text/javascript'> function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}) </script>
  5. Klik Pratinjau jika sudah pantas Simpan 

Good Luck sahabat baca-baca Dan Happy Blogging
Cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Cara mudah membuat Spoiler

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum seperti kaskus. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
1. Login ke Blogger 
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:


<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.
Cara mudah membuat Spoiler
 

Followers

Subscribe via email

Enter your email address:

Delivered by FeedBurner

Labels

Flash Labels by Way2Blogging