Blood Spark: BELAJAR BLOGGER

Tampilkan postingan dengan label BELAJAR BLOGGER. Tampilkan semua postingan

Rabu, 17 April 2013

14 Blockquote Cantik Dan Indah

Blockquote atau Kutipan....
Memperindah tulisan yang kita buat akan menjadi indah bila diberi Kutipan atau Blockquote.Tentunya orang yang melihatpun menjadi segan untuk membacanya,sehingga orang pun menjadi tertarik setiapa apa yang kita tulis.

Disini saya ingin memberikan sedikit Tutorial Cara Membuat Blockquote Indah Dan Cantik.Saya akan memberikan 14 Contoh dengan Blockquote Terindah.

Mungkin sebenarnya masih banyak lagi tapi gak apalah saya kasih 14 saja.Lihat caranya dibawah ini

Login Ke Blogger
Elemen Laman => Edit HTML
Download Template Lengkap (Untuk berjaga - jaga)
Cari Kode . post blockquote hapus kode tersebut. Pada sebagian template kode terlihat seperti ini,

.post-body blockquote { line-height:1.3em; }
Atau
.post blockquote{ ..............}

Ingat setiap kode berbeda beda jadi carilah kode yang mirip mirip gituan!!!

Kemudian cari kode ]]</b:skin>.Paste Kode Blockquote tepat di atas ]]></ b: skin>, paste kode salah satu Blockquote favorit Anda. Saya memberikan contoh kode seperti kode kode dibawah ini.

Kode Blockquote

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIl6C5Ia1nLlAA9DZkkaBj-FVdBJc3uVCf7d6xGBVNcuzS5PS4RGZA2ri2jhezYnyrTXjtdaMlNCTGFIYX3pHzzKx5sp2r659TcPMrp7nX0Jdzi04GXEl4qWDWV-uU_bwx68bKmULagq0/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVm2WhUFM8Y6QDa2lDMMEmltsPe1rWwmI6Gy7xa1aSNAZwSe5_8QUfN3xeBfH1Ec5zvDAY3YalVpcPNdFXeZcI-wQ0LpOQd8R5-ovigUGL1oz-PMG_zpoge5wi59vX_9GQqjTKiKgywa8/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw63p7GAkYxStpwxfNk2TAUuWhOmNwoOicR_c8mQtPZ5kXJWxcbyI0Sm72T5fWVGpb5fRgTScOEqi2BlZyuVVxItIakp2QK6zsgb0148WGuuC1R90vovKlCxRouliMt0GrwCiTiVxaROg/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JqhOd6XsH8ImvogKF_-ptTxHNxr4pVGXmZPC1w6RKSJ4tDQFr7_jRmpKAx9z0ntc5EhR-zKur6RqNDJRmMyU7LefW5dDwClvrXvbfzDTRoFlKvFhLhr-XaqhGaMIIJN5HkBjEC3Olkg/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Kode Blockquote

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTALHEaXKzXd36X433Yd7UpkAU0FvVDexam4Pb-gO8Oz09dIkTjUtD_vzzgJPJ3_rbP71ptgGMzKPqZ4ZX1gi0W9t34SZILwWi1Idzn7Pkgzg-sEavDhUsf9dfyDatjNNBNPYYNjkPRo/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Kode Blockquote

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuJKb5_Kryn5vaoaad3UpL023xhioI2J3J-IuLSXz8PQO5-htnyfBlGqAxyD9VHqe3506G9TbkPm8NARWHyQC4uKx33ec4mJTxdTaiX37-j8eTUKd3JbSTE1Yt5EtcccWtLByqqWyaKw/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62MPIJ1fF-1wnS2g2WEIV14HJ6_nLWGYWiNyDlqcqeKzYfXCuyuK5fAirNLW1yyfztAe_oa1993o5Hmd-NM-FuCC_rrU2fsmq7gnaNaVo5OXqcIFzAVubq9UfMFuJuJCGd009AGGx9ds/s400/comma-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDIwXNLQ2QwGPFtiMryMQaVY0Or5KOzz9NZ7Xj4MvVgmS5E8EvcUBIkfm1AZLhY3njK8XwlCtAqykrnuYi7TelHjUJ5ujg0Tv9InojQ9d5y-ictnkgcmJPTn9aP08JfJJOBisXMcI_jY/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQrZdl-S_B0Go4GTDbya9BBOLgJUW6kFNd5oKHeQpBHFKXzqVgq6zTE-ZKx8V6ftsRYzf1lviNQxXCaAooYT3IkeHjZpFbFwRdL4VNZH7MtxROLaGf-XSEZBBS3132sGToyUjnv8tbdg/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlpxRNBYE2_sJw5S-8JA0_mleiG_S1g2BGxTPyqY3MAjiPoirI4Xh-0SDr-UlPVIgb8MqefynBp06BRaUYyqlAZHO87uXz7UhhhrIU-QKbWAG3AVi62WvW84vDBg0WZjyyXs1BOIMBm4/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
font:bold italic .9em "comic sans ms", Tahoma, sans-serif;
padding-top: 25px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_gL8wTbb-lvauu3ArL5uAzO4BfhARTETk-TRWNxuGKGQ2Ti4cO6h84H2xo_HSEtzSXBy0hYFB1EVB4qqzpcN3JOLAXesxV51iYT6QwQNULzz1LtJC45izg1cwS_QveVvKJJKYO9KsqA/s400/left.gif) no-repeat top left;
text-indent: 65px;
color:#6299E4;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6TkamUGXLhCP2Rtb1ZD41GrUoJCWPJIgybvEaa_uaYUam9vvOwxrZ12xfB49JY7NqIyw87jk-2rgRKqiuGxc_4UEjsSaLHF1ylx1M0c6eUMSmuSFa-QFAl0We7mh-MpsUk-Cgr4mrJFU/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Kode Blockquote

.post blockquote {
font: italic 1em "comic sans ms", Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6-tzR93k2b-i9o4MCwffgDnll_v6fdwiB3TanwaxxAcsng5gJ96sqP_d_md0GJ9qjG2O6QyEU6dF3lGO4OTYiaipK_rmrWNU3x9rd3z9pJZZmpC7CnLU8n4SzUZPNU7N2CqWqPLsRko/s400/comma2-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqXGo2D8_n53en-O0itr0n06-Yc5wdTzvff7VM48Z2kfFkjs_fd55MB6m8OVCp-HlYvqmfISfIYgkUn0TmmCObpQxG55qEKVH5AKa8X4M6G8xKuY4pLS-P2W-uiaygeyvKLcM1W6FDhg/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

11.

Kode Blockquote

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6FS-FsBPa2kqmq1lqawdgp47Dm6rrxt2KFkdGUngMAZjgJPdstsbQQXPdzCosQ78nPuYjwuOVHfl-QoefT02aAripFhAaNJu9FPTfq457-drovybUUCEpDpGdwjTMoaoeVr9PJCCntM/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

12.

Kode Blockquote

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSX7f8FPQsrjmP59HMA2NiO6sJCrpfW_rfVaHCAWpWSfVvDGf1UWUnlt02cwq_FdLXKmVFhbhkzvOfBfYJ7kbI_QjSpXLpicZjt1Q7xVinC1_fk2fSQN2ErOsJB15OePwIJeVgHU2_JkQ/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}
.post blockquote div{
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxF5Wq6SIYvt1AVEuOQauz9EGLqOwsnuAaulXMZIDhhMNb-yWBpuNWZCzdReaEVdjpUlI6OEbBa1rU9tGlhVsU1SLSVgiU-hwGkuroZEAwWH5qXOLYdu_1eQdZFhIRDW_Cn-hoD4iSAQ/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

13.

Kode Blockquote

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCdXaQydPsYk_mUlEsnlE0X6lc90zEKDa9lon-08l0nW0Ohx9hQVNp-67Le9hTjlVxO09HHMeiUl_qXnMz5N1zWGwWYaNWhJyJU_Dj3LsbhYO34LnpBs3DwqeZQ6wJ1dBI66MXaY7QHE/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

14.

Kode Blockquote

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzISAsmTkdJRFrE5k6fnGxxHbjgjtlqjGCPaDvCbNIrfUHIIx47DH6kTVBa0oKTFsoJgS_87STEvSwVlIBvcRTcyMamYUIUvt9wZdISopiAiz0RHuqpXyow0lTLOOh2zfBI8EgAdta3vc/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMSmu7Vuw4K0zPGi8FjVBDTlZq67DQ3h0CpJdOjwp9_LO-NPSivh2JKr-pPJbZoBpQnf_P3iG8dGOoGvAL0paMERLIbDrtuqbbPqY8j5D1eAQQpCmLulxBf5zvmmYbuF4fVzTSTHsXBE/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

Cara Membuat menu Slide Info di Blog

Tutorial Blog | Tips dan Trik Blog | Belajar Blog - Pada kesempatan ini Tutorial Belajar Blog akan berbagi tips Blog dengan judul Cara Membuat menu slide info di blog. Pada sebelumnya saya sudah berbagi tutorial Cara Membuat Vertical Sliding Info Panel With jQuery, dimana pada sebelumnya apabila ingin membuka info Menu slide pada blog kita harus klik terlebih dahulu ,nah pada pada tutorial ini kita tanpa harus klik dan hanya menyorot atau mendekatakan kursor kita.! Contoh Demo SIlahkan Klik Disini

Berikut Ini Langkah - Langkah Membuat nya :

Login Ke Akun Blog Sobat
Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
Copas KOde Berikut Tepat Di Bawh Kode

4.Ubah Kata Atau Judu Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya.

cara Membuat Navigasi Menu Melayang

Tutorial Belajar Blog - Cara Membuat Navigasi Menu Melayang ,Kali Ini Oktri ingin berbagi Tentang membuat menu melayang, Tutorial Ini merupakan Tutorial atau Tips tentang Blog lanjutan dari Cara Membuat Menu Social Button Melayang Sekedar Berbagi Informasi membuat menu di sebelah kiri pada blog, Contoh ataupun demo Saat Anda mengunjungi situs Nettuts+, atau Tuts+ pasti Anda akan melihat sebuah menu melayang kecil di sebelah kiri layar. Kali ini Saya akan membuat versi yang mirip dengan itu.

DEMO

Kerangka Navigasi

Kerangka navigasi terdiri dari elemen biasa yaitu <nav>, <ul> dan <li>:

 <nav id='sidenav'>
    <ul>
        <li><a class='main home' href='/'>Home</a></li>
        <li><a class='main about' href='#'>About</a>
            <ul class='fallback'>
                <li><a class='social blogger' href='#'>Me on Blogger</a></li>
                <li><a class='social facebook' href='#'>Me on Facebook</a></li>
                <li><a class='social twitter' href='#'>Me on Twitter</a></li>
                <li><a class='social googleplus' href='#'>Me on Google+</a></li>
            </ul>
        </li>
        <li><a class='main archive' href='#'>Archives</a>
            <ul class='fallback'>
                <li><a href='#'>Table of Contents</a></li>
                <li><a href='#'>Recent Articles</a></li>
                <li><a href='#'>Recent Comments</a></li>
            </ul>
        </li>
        <li><a class='main share' href='#'>Share</a>
            <ul class='fallback'>
                <li><a class='social blogger' href='#'>Blogger</a></li>
                <li><a class='social facebook' href='#'>Facebook</a></li>
                <li><a class='social twitter' href='#'>Twitter</a></li>
                <li><a class='social googleplus' href='#'>Google+</a></li>
                <li><a class='social flickr' href='#'>Flickr</a></li>
                <li><a class='social rss' href='#'>RSS</a></li>
                <li><a class='social mail' href='#'>Mail</a></li>
            </ul>
        </li>
        <li><a class='main photos' href='#'>Screencast</a></li>
        <li><a class='main contact' href='#'>Contact</a>
            <ul class='fallback' style='font-weight:bold;'>
                <li><a class='social facebook' href='#'>Facebook</a></li>
                <li><a class='social twitter' href='#'>Twitter</a></li>
                <li><a class='social mail' href='#'>Mail</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

 #sidenav {
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  top:60px;
  left:0px;
  z-index:999;
  background-color:#eee;
  border:1px solid #ccc;
  width:auto;
  height:auto;
  text-indent:-99999px;
  font:normal 12px Arial,Sans-Serif !important;
  -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
}

#sidenav ul {
  margin:0px 0px;
  padding:0px 0px;
}

#sidenav li {
  margin:0px 0px;
  padding:0px 0px;
  list-style:none;
  display:block;
  position:relative;
}

#sidenav a {
  display:block;
  width:20px;
  border-bottom:1px solid #ccc;
  color:#666;
  text-decoration:none;
  -webkit-box-shadow:inset 0px 0px 0px 1px white;
  -moz-box-shadow:inset 0px 0px 0px 1px white;
  box-shadow:inset 0px 0px 0px 1px white;
}

#sidenav li:last-child a {
  border-bottom:none;
}

#sidenav span.ttp {
  display:block;
  position:absolute;
  top:0px;
  font:normal 94% Arial,Sans-Serif;
  background-color:#39f;
  color:white;
  padding:0px 10px;
  line-height:22px;
  height:22px;
  width:auto;
  left:100%;
  z-index:77;
  margin-left:17px;
  text-indent:0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#sidenav span.ttp em {
  display:block;
  width:0px;
  height:0px;
  border:4px solid transparent;
  border-right-color:#39f;
  position:absolute;
  top:7px;
  right:100%;
}

#sidenav li ul {
  width:150px;
  height:auto;
  background:transparent;
  border:none;
  position:absolute;
  top:-1px;
  left:100%;
  -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  display:none;
}

#sidenav li ul a {  
  border:1px solid #ccc;
  border-bottom:none;
  background-color:#eee;
  display:block;
  width:auto;
  padding:0px 10px;
  line-height:25px;
  text-indent:0px;
  -webkit-box-shadow:inset 0px 0px 0px 1px white;
  -moz-box-shadow:inset 0px 0px 0px 1px white;
  box-shadow:inset 0px 0px 0px 1px white;
}

#sidenav li a:hover {background-color:#ddd;}

#sidenav li ul li:last-child a {
  border-bottom:1px solid #ccc;
}

/* CSS Sprites */
#sidenav a.main {
  background-image:url('main-sprites.png');
  background-repeat:no-repeat;
  width:26px;
  height:25px;
}

#sidenav a.home    {background-position:5px 4px;   }
#sidenav a.about   {background-position:5px -22px; }
#sidenav a.archive {background-position:5px -48px; }
#sidenav a.share   {background-position:5px -73px; }
#sidenav a.photos  {background-position:5px -100px;}
#sidenav a.contact {background-position:5px -126px;}

#sidenav li ul a.social {
  background-image:url('social-sprites.png');
  background-repeat:no-repeat;
  padding-left:30px !important;
}

#sidenav li ul a.blogger    {background-position:5px 4px;   }
#sidenav li ul a.facebook   {background-position:5px -21px; }
#sidenav li ul a.twitter    {background-position:5px -47px; }
#sidenav li ul a.googleplus {background-position:5px -73px; }
#sidenav li ul a.flickr     {background-position:5px -99px; }
#sidenav li ul a.rss        {background-position:5px -125px;}
#sidenav li ul a.mail       {background-position:5px -151px;}

/* CSS Fallback */
#sidenav li:hover .fallback {display:block;}

JQuery

Dan... sedikit kode JQuery yang merupakan pengembangan dari JQuery Tooltip onClick. Kodenya memang tampak banyak, tapi yang banyak itu pada dasarnya hanya deskripsi cara kerjanya saja:

$(function() {

 // Menonaktifkan fallback CSS (Saya akan membahas ini suatu saat nanti)
 $('#sidenav .fallback').removeClass('fallback');

 // Menampilkan dan menyembunyikan tooltip
 $('#sidenav li a.main').hover(function() {
  $(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');
  $('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);
 }, function() {
  $('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {
   $(this).remove();
  });
 });

 // Saat elemen <a> diklik...
 $('#sidenav li a[href="#"]').click(function(e) {
  // Hilangkan semua anak <ul> dan tooltip yang tampil
  $('#sidenav li ul:visible, span.ttp:visible').hide();
  // Tampilkan elemen setelahnya (dalam hal ini adalah elemen <ul>)
  // dengan efek .show('fast') dan set nilai margin-left menjadi 10 piksel untuk menciptakan jarak
  $(this).next().css('margin-left', '10px').show('fast');
  // Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen
  // Selengkapnya: http://api.jquery.com/event.stopPropagation/
  e.stopPropagation();
  return false;
 });

 // Hilangkan semua anak elemen <ul> dan tooltip yang tampil saat elemen selain menu diklik
 $(document).click(function() {
  $('#sidenav li ul:visible, span.ttp:visible').hide();
 });

});

kalau di template anda belum menggunakan JQUERY anda harus menaruh nya sekarang:

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

Selamat Mencoba dan Semoga Bermamfaat....,

Cara Membuat Menu Social Button Melayang

Tutorial Belajar Blog | Tips Blog - Cara Membuat Social Button Melayang ,Tutorial Ini Terinspirasi dari Blogmates om-dayz, Sekedar Berbagi Informasi karena ada teman yang bertanya bagaimana membuat social Button di sebelah kanan pada blog!

Langsung masuk aja ke tutorial cara membuat social button Melayang,

Buka Template > Edit HTML > Expan Template Widget
Cari kode ]]></:bskin>
Lalu Paste kan kode di bawah tepat di atas kode ]]></b:skin>

/* social button http://tutorialbelajarblogger.blogspot.com*/
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2FySKeODc68thB9d6HY_H3h8Cgk1alEcPQBrPW2rkqCdGHNDrFW0BH-ignBegpvfkNBvPXGDftywn218bGXSQnw77efeWYMxsHaRWUEpQGTO80p00pGfFEWOphUAfhVG9qwzrzYVvRs/s1600/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2FySKeODc68thB9d6HY_H3h8Cgk1alEcPQBrPW2rkqCdGHNDrFW0BH-ignBegpvfkNBvPXGDftywn218bGXSQnw77efeWYMxsHaRWUEpQGTO80p00pGfFEWOphUAfhVG9qwzrzYVvRs/s1600/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2FySKeODc68thB9d6HY_H3h8Cgk1alEcPQBrPW2rkqCdGHNDrFW0BH-ignBegpvfkNBvPXGDftywn218bGXSQnw77efeWYMxsHaRWUEpQGTO80p00pGfFEWOphUAfhVG9qwzrzYVvRs/s1600/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2FySKeODc68thB9d6HY_H3h8Cgk1alEcPQBrPW2rkqCdGHNDrFW0BH-ignBegpvfkNBvPXGDftywn218bGXSQnw77efeWYMxsHaRWUEpQGTO80p00pGfFEWOphUAfhVG9qwzrzYVvRs/s1600/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2FySKeODc68thB9d6HY_H3h8Cgk1alEcPQBrPW2rkqCdGHNDrFW0BH-ignBegpvfkNBvPXGDftywn218bGXSQnw77efeWYMxsHaRWUEpQGTO80p00pGfFEWOphUAfhVG9qwzrzYVvRs/s1600/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-moz-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}
@-webkit-keyframes static-bar{0%   {right:-25px;} 100%   {right:0px;}}

Langkah terakhir, pasang Script dibawah ini diatas tag </body>

<div class='staticbar'>
<div class='login'>
<div id='rt-login-button'>
<a class='loginbtn buttontext' href='http://blogger.com' rel='nofollow' target='_blank' title='Login Blogger'>
<span class='desc'>Blogger Login</span></a>
</div>
<div class='rt-social-buttons'>
<a class='lightbox' data-options='{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-twitter-btn' rel='nofollow' title='Twitter Belajar Blog'>
<span>Follow Me On Twitter</span></a>
<a class='lightbox' data-options='{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}' href='http://tutorialbelajarblogger.blogspot.com' id='rt-facebook-btn' rel='nofollow' title='FacebookTutorial Blog'>
<span> Facebook Fanspage</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-buzz-btn' rel='nofollow' target='_blank' title='Google Plus Tutorial Blog'>
<span>Circle Me On Google Plus</span></a>
<a href='http://tutorialbelajarblogger.blogspot.com' id='rt-rss-btn' rel='nofollow' target='_blank' title='RSS Belajar Blog'>
<span>Subscribe to RSS Feed</span></a>
</div></div></div>

Untuk demo Social Button Melayang anda bisa melihat langsung di blog Demo, ataupun Blog ini selamat mengoprek :)) Terima Kasih Om-Dayz

Cara Membuat Menu Blog Keren

Menu Blog Keren

Tutorial Belajar Blog | Tips Blog - Cara Membuat Menu Blog Keren , Pada Sebelumnya Tutorial Belajar Blog Berbagi Tutorial Cara Membuat Tulisan Addres Bar Lebih Menarik, Mungkin Anda Berfikir Menu Blog Keren Seperti apa ? bentuknya seperti pada blog demo saya di sebelah kanan yang berwarna Hijau kalau mousenya di dekatkan maka menu blognya akan keluar,

D E M O

Berikut ini langkah-langkahnya :
1. Masuk ke akun Blogger Anda.
2. Klik Tata Letak.
3. Klik Tambah Gadget.
4. Pilih HTML/JavaScript.
Lalu copy kan script dibwah ini pada HTML/javascript

<script language="JavaScript1.2" src="http://oktri.googlecode.com/files/slide%20menu%20keren.js"></script>
<script>
resizereinit=true;
menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'left',
kviewtype:'fixed',
barbgcolor:"#00ff00",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,
menuItems:[
["Home", "tutorialbelajarblogger.blogspot.com", "_self"],
["My Facebook", "http://www.facebook.com/oktri.darmadi",""],
["Berita", "http://www.okezone.com/", ""],
["Kaskus", "http://www.kaskus.us", ""],
["My Profile", "http://www.blogger.com/profile/02713061222000849084", ""],
["Panduan Blog", "http://tutorialbelajarblogger.blogspot.com", ""],
["Tips And Trics Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Belajar Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Tips Blog", "tutorialbelajarblogger.blogspot.com", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry
]};
make_menus();
</script>

Keterangan :

Ganti Direct Link "http://oktri.googlecode.com/files/slide%20menu%20keren.js" dengan Direct Link File JS anda sendiri, sebab script tersebut bisa over load jika terlalu banyak yg menggunakan, anda bisa download script JS nya.
Ganti link dan judul link yang saya tulis dengan warna merah dan Biru dengan link Anda sendiri.
Ganti Tulisan left yang saya tulis dengan warna Coklat dengan rightjika anda ingin Side Menu ini muncul disebelah kanan body blog.

9. Selanjutnya jangan lupa untuk mengklik tombol Simpan.
10. Selesai...

Semoga Bermanfaat dan Jangan Lupa Untuk Berkomentar.

Cara membuat Kwick Menu Navigasi di Blog

Tutorial seputar Blog - Hallo sobat semua akhirnya saya bisa posting lagi mohon maaf untuk sobat Ok lah langsung saja ke topik.Mungkin untuk sekian kalinya membagi ilmu cara membuat Menu Navigasi,kali ini pun saya akan share Cara Membuat Menu Navigasi Kwicks Dengan jQuery.

Berikut Screenshotnya :

View Demo

Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :

Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates

Lalu taruh kode berikut di atas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya

<script src='https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>

Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Blood Spark

Rabu, 17 April 2013

14 Blockquote Cantik Dan Indah

Cara Membuat menu Slide Info di Blog

cara Membuat Navigasi Menu Melayang

Kerangka Navigasi

JQuery

Cara Membuat Menu Social Button Melayang

Cara Membuat Menu Blog Keren

Cara membuat Kwick Menu Navigasi di Blog

Halaman

Total Tayangan

Banner1

About Us