Cara Membuat Related Post atau Artikel Terkait

Cara Membuat Artikel Terkait - Selamat sore sahabat blogger pada kesempatan kali ini kita akan membahas bagaimana cara membuat related post atau kita biasanya menyebutnya artikel terkait, cara membuat artikel terkait kali ini yang saya bahas dalam blog ini adalah sangat mudah, hanya menggunakan sedikit css.

Nah perhatikan langkah-langkah tutorial dibawah ini mungkin bisa membantu anda

1.Login ke Akun blogger sobat

2.Masuk pada template pilih edit HTML pilih lanjutkan

3.Centang Expand Template Widget 

4.Cari kode <data:post.body/> lalu masukkan script dibawah ini dibawah kode <data:post.body/>

Kode:

Kode:

<!-- Related Posts Scroll Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <br/> <H2>.: Artikel Terkait :.</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;albri&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script> </div> </b:if> <!-- Related Posts Scroll Code End-->

5.Kemudian cari kode ]]></b:skin> Paste kode dibawah ini diatas tag ]]></b:skin>

kode:

/*Artikelterkait*/ .rbbox{background-color:Transparent;-moz-border-radius:5px;opacity:0.9;filter:alpha(opacity=40);thisstyleopacity:6;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;-moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;-webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;transform:rotate(-3deg);-moz-transform:rotate(-3deg);-webkit-transform:rotate(-3deg);-o-transform:rotate(-3deg);margin:5px;padding:5px} .rbbox:hover{background:url(http://khaidar.wap.sh/black-market7-Fle/black-market7.blogspot.com_iconku-sharingan.gif)no-repeat left Top #696969;-moz-border-radius:5px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;-moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;-webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);margin:5px;padding:5px}

6.Kemudian Simpan templates
7.Contoh atau demo ada disetiap Akhir sebuah artikel yang ada dalam blog ini bertulisakan artkel terkait

Terimakasih telah berkunjung di http://black-market7.blogspot.com

Baca selengkapnya »

Cara membuat gambar membesar otomatis pada postingan

Cara membuat gambar membesar otomatis pada postingan - Hey kawan semua kali ini saya berbagi tips menarik tentang blog setelah sekian lama tidak menerbitkan postingan tentang bagaimana cara membuat gambar pada postingan otomatis membesar?simaklah langkah - langkah dibawah ini pastinya mudah untuk dipelajari, dan ringan untuk blog sobat.

Langkah - langkah
NB : Tips & Trick bloggernya menggunakan tampilan blogger baru

1.Login ke akun blogger sobat
2.Pilih template kemudian klik edit HTML lanjutkan
3.Centang kode Expand Template Widget
4.Sekarang cari kode ]]></b:skin>  Setelah ketemu Copy paste kode dibawah ini sebelum ]]></b:skin>

Kode:

.post img,table.tr-caption-container{border:none;max-width:560px;height:auto;-o-transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s} .post img:hover{opacity:1.0;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-moz-box-shadow:1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;-o-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-moz-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-webkit-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-o-transition:margin-left 1.5s ease-in .4s margin-top 1.5s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-moz-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-webkit-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;margin:40px 0 20px 10px}

5.Klik Simpan template

Contoh dari tutorial diatas arahkan kursor mouse anda pada gambar dibawah ini

Baca artikel menarik lainnya di sini atau

Atau baca Penting dan Mudahnya berbagi penggalangan dana Online dengan marimembantu.org Dan baca ini juga Layanan Bisnis Pulsa Dan Token PLN

Terimakasih telah berkunjung di http://black-market7.blogspot.com

Baca selengkapnya »

Membuat Kursor Selalu Diikuti oleh Jam

BM7-Halo sabat blogger sekalian, pada kesempatan kali ini saya akan menshare bagaimana cara membuat kursor selalu diikuti oleh jam, menarik bukan???nah perhatikan langkah-langkah di bawah ini dengan seksama
1.Login Ke Akun Blogger Sobat Masing-Masing
2.Pilih rancangan edit HTML
3.Jangan lupa centang Expand Template Widget
4.Setelah itu cara kode ]]></b:skin>
5.Setelah ketemu masukkan kode di bawah ini diatas ]]></b:skin>

BM7:

/* CSS Kursor Diikuti Jam */
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;

}

6.Kemudian Setelah itu cari kode </body>
7.Setelah ketemu masukkan kode di bawah ini diatas kode </body>

BM7:

<script src='http://pandet-pandet.googlecode.com/files/clock.js' type='text/javascript'></script>

8.Jangan lupa Klik Simpan template

DEMO

Terimakasih telah berkunjung ke http://black-market7.blogspot.com

JANGAN LUPA TINGGALAKAN KOMENTAR DIBAWAH YAA

Baca selengkapnya »

Cara Daftarkan Blog ke Search Engine

Tidak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.

Ada banyak cara agar blog kita banyak dikenal dan dikunjungi,yaitu dengan cara blogwalking atau dengan cara mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.
berikut langkah2 mendaftarkan blog ke search engine.

1.Search Engine Google
Untuk mendaftarkan blog ke search engine google sobat tinggal kunjungi situs ini http://google.com/addurl/
nah kalau sudah pada halaman url tersebut isilah form yang diminta setelah itu klik add url
2.Search engine Yahoo
Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut :

http://black-market7.blogspot.com/atom.xml

atau memakai www pun sama saja :

http://www.black-market7.blogspot.com/atom.xml

3.Apabila sobat mempunyai keinginan lebih, yaitu URL blog sobat terindeks pada puluhan mesin pencari, sobat bisa menggunakan bantuan situs submitter. Coba klik saja Link dibawah ini :
FWB


Sekian Tips dari saya semoga bermanfaat Terimakasih telah berkunjung ke http://black-market7.blogspot.com

Baca selengkapnya »

Pop-UP Windows Dengan Animasi

BM7-Javascript Pop-Up windows dengan Animasi
1.Login ke Akun blogger sobat
2.Masuk pada rancangan Pilih edit HTML
3.Dan Jangan lupa centang Expand Template Widget
4.Cari kode </Head> masukkan kode dibawah ini diatas </head>

BM7:

<script src='http://generation-platinum.googlecode.com/files/animatedwindow.js ' type='text/javascript'/>

Untuk Pemanggilannya

Dengan Gambar

BM7:

<a href="#" onclick="expandingWindow('masukan-url-link-di-sini');return false" title="title"><img src="url-gambar" style="width: auto; height: auto; -moz-box-shadow: 0pt 5px 15px rgb(0, 0, 0); padding: 3px; margin: 0pt 10px 5px 0pt;"></a>

Dengan Tulisan

BM7:

<a href="#" onclick="expandingWindow('masukan-url-link-di-sini');return false"><h1>enter</h1></a>

Dengan Button

BM7:

<form><input value="Enter" onclick="expandingWindow('masukan-url-link-di-sini')" type="button">
</form>

KETERANGAN :
Untuk yang bertanda "#"bisa diganti dengan url yang anda tujuan. Sedangkan untuk 'masukkan url link' masukkan saja url link tujuan sobat.

DEMO

============================================================== ==============================================================
 terimakasih telah berkunjung ke black-market7.blogspot.com ============================================================== ==============================================================

Baca selengkapnya »

Apple-Like Retina Effect

BM7-Apple like retina itulah judul tutorial kali ini dalam pengertian biasa saya menyebutnya gambar membesar kalau dilewati oleh cursor mouse,penasaran apa yang disebut Apple like retina effect perhatikan cara2 simpel di bawah ini

1.Login ke akun blogger sobat
2.Masuklah Pada rancangan pilih edit HTML
3.Centang Expand Template Widget
4.Selanjutnya cari kode  ]]></b:skin>
5.Lalu masukkan Script dibawah ini diatas  ]]></b:skin>

Black-Market7:

#retina{
/* The Retina effect */
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZzxgdrIDBTJsiyiNkP7bQuVrTSiVeCU8mJThSZPnJfufHCC3GvW0R1CswKvIZKXjexp_GH5fCL7-6EAiN2qc8JO7ZpAdY42VliOZz3sAiymufeC5KDulKYycMmeF7S7D-B6jEQ6CEYUO/s1600/00385.jpg') no-repeat center center white;
border:2px solid white;
/* Positioned absolutely, so we can move it around */
position:absolute;
height:180px;
width:180px;
/* Hidden by default */
display:none;
/* A blank cursor, notice the default fallback */
cursor:url('http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/img/blank.cur'),default;
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
/* CSS3 rounded corners */
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
#retina.chrome{
/* A special chrome version of the cursor */
cursor:url('http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/img/blank_google_chrome.cur'),default;
}

#main{
/* The main div */
margin:40px auto;
position:relative;
width:750px;
}
#iphone{
/* The iphone frame div */
width:750px;
height:400px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIUAqZ4ikDRyWcb05Gr7hNy11eVvsiFFV8RDh0UVzxwiLvIQOHx78BC6QxEA8arJpdBj8xUaNpdoCfnVaih4_4majyuedh8f0joGmGTg9DveJjBZlLUKEZCMPNyJJ7jIbet4c2Hdb-gDi/s1600/iphone_4G.png') no-repeat center center;
position:relative;
}

#webpage{
/* Contains the webpage screenshot */
width:499px;
height:283px;
position:absolute;
top:50%;
left:50%;
margin:-141px 0 0 -249px;
}

6.Kemudian cari kode </head> dan masukkan script dibawah ini diatas kode </head>

Black-Market7:

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

7.Dan ini kode HTML silahkan anda pasang di bawah tag <body>

Black-Market7:

<div id="main">
<div id="iphone">
<div id="webpage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZzxgdrIDBTJsiyiNkP7bQuVrTSiVeCU8mJThSZPnJfufHCC3GvW0R1CswKvIZKXjexp_GH5fCL7-6EAiN2qc8JO7ZpAdY42VliOZz3sAiymufeC5KDulKYycMmeF7S7D-B6jEQ6CEYUO/s1600/00385.jpg" width="499" height="283" alt="Web Page" />
<div id="retina">
</div>
</div>
</div>

8.Simpan templates anda

DEMO

============================================================== ==============================================================
 terimakasih telah berkunjung ke black-market7.blogspot.com ============================================================== ==============================================================

Baca selengkapnya »

Jquery Link Nudging

Jquery Link nudging adalah setiap kali mouse menyentuh link maka link akan bergerak
Caranya adalaha sebagai berikut
1.Login keblog kalian
2.Pilih rancangan Kemudian pilih Edit HTML
3.Masukkan Script Jquery dibawah ini diatas kode </head>

klik :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

4.Simpan dan Liat hasilnya blog anda
Untuk melihat hasilnya klik demo dibawah ini

DEMO

Terimakasih telah berkunjung keblog saya di : http://black-market7.blogspot.com

Baca selengkapnya »

Jquery Tooltip

1.Loggin keblogger anda masing-masing
2.Kemudian masuk pada rancangan
3.Pilih Edit HTML kemudian centang Expand Template Widget
4.Cari kode ]]></b:skin> lalu pastekan kode dibawah ini

klik :

/* BALON */
#balon a {
color:#fff;
text-shadow:0 0 1px #fff;
}
#balon span {
width: 245px;
height:auto;
z-index:60;
background: -moz-linear-gradient(top, #999, #252525, #999);
position:absolute;
padding: 3px;
left:35%;
text-align: center;
text-decoration:none;
display: none;
line-height:90px;
font-size:30px;
color:#bbb;
text-shadow: 1px 1px 2px #000;
border:1px solid #111;
-moz-border-radius:20px;
-moz-box-shadow: 0px 10px 20px #000
}

5.Sekarang cari </head> kemudian pastekan kode di bawah ini

klik :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#balon li").hover(
function(){
$(this).find("span").attr({
"style": 'display:block'
});
$(this).find("span").animate({opacity:0.9,top: "200px"}, {queue:false, duration:400});
},
function(){
$(this).find("span").animate({opacity:0,top: "-9999px"}, {queue:false, duration:1000}, "linear",
function(){
$(this).find("span").attr({"style": 'display:none'});
}
);
});
});
</script>

6.Lalu untuk pemanggilannya sobat bisa lakukan dengan di edit-html/tambah gadged

klik :

<ul id="balon">
<li><a href="#">Home<span>START PAGES</span> </a></li>
<li><a href="#">About<span>WHO I AM</span> </a></li>
<li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>
</ul>
</div>

7.Contohnya dapat anda Lihat

Disini

Terimakasih telah berkunjung ke : http://black-market7.blogspot.com

Baca selengkapnya »

Jquery Vertical Accordion

Jquery vertical accordion!!!Seperti apa? jawabannya adalah seperti yang tampak pada bagian kiri blog milik saya
seperti gambar di bawah ini

klik :

Nah cara membuat menu seperti gambar diatas dapat dilakukan dengan cara sbb :

Kode dibawah ini Silahkan letakkan dan simpan di atas kode<head>

klik :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://ilmu-pengetahuan.googlecode.com/files/superhebat.js' type='text/javascript'/>
<script type='text/javascript'>
ddaccordion.init({
headerclass: &quot;accordion&quot;,
contentclass: &quot;ul_accordion&quot;,
revealtype: &quot;click&quot;, // &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: [&quot;&quot;, &quot;aktif&quot;],
togglehtml: [&quot;prefix&quot;, &quot;&quot;, &quot;&quot;],
animatespeed: &quot;slow&quot;,
oninit:function(headers, expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>

Untuk kode CSS di bawah ini,kamu bisa meletakkan dan menyimpan di atas kode ]]></b:skin>

klik :

/* ---------------
Jquery Molor/acordion
---------------------------------- */
h3.selektor accordion{
font-weight: bold;
font-size:14px;
}
.molormenu{
background:#33333;
width:auto;
margin-top:10px;
font-family:Arial;
}
.molormenu .selektor{
font-weight: bold;
font-size:15px;
font-family:Times;
color: #e79958;
background: -moz-linear-gradient(top, #393E41, #00FFFF);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Snap ITC, Times New Roman, Times New Roman;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://pintarsegala.xtgem.com/ok3-1.gif")repeat center left;
margin-bottom: 5px;
text-transform: uppercase;
padding: 10px 0 10px 10px;
cursor: pointer;
border-bottom:1px solid #666;
}
.molormenu .aktif{
background-image:-moz-linear-gradient(top, #393E41, #00FFFF);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Monotype Corsiva, Times New Roman, Times New Roman;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://pintarsegala.xtgem.com/r85dfm.gif")no-repeat center left;
}
.molormenu ul{
background:transparent;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}
.molormenu ul li{
padding-bottom: 2px;
}
.molormenu ul li a{
color: #fceada;
background: url(http://pintarsegala.xtgem.com/image%20jquery/DoubleRedArrow.gif) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #666;
font-size: 11px;
font-weight:normal;
}
.molormenu ul li a:visited{
background:transparent;
color: #3a3838;
}
.molormenu ul li a:hover{
color:red;
background-color:transparent;
}

Kode HTML jQuery Vertical Accordion Menu
Kode HTML yang berisikan link dan nama setiap link menu yang akan ditampilkan di blog disimpan melalui penambahan widget. Sampeyan bisa menggunakan widget di bagian sidebar kanan atau kiri. Silahkan setiap link beserta nama link untuk diganti sesuai kebutuhan blog.

klik :

<h3 class="selektor accordion">Menu-1</h3>
<ul class="ul_accordion">

<li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-2</h3>
<ul class="ul_accordion">

<li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-3</h3>
<ul class="ul_accordion">

<li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-4</h3>
<ul class="ul_accordion">

<li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-5</h3>
<ul class="ul_accordion">

<li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-6</h3>
<ul class="ul_accordion">

<li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

</div>
</div>

Cara memasang kode HTML dapat dilakukan dengan cara berikut
1.Login keblog sobat
2.Klik rancangan
3.Pilih edit laman
4.Tambahkan gadget
5.Pilih HTML/Javascript
6.Lalu masukkan kode diatas klik save

Baca selengkapnya »

Cara Membuat Daftar Isi Otomatis

Halooo sahabat blogger kini saya akan berbagi tips membuat daftar isi otomatis menggunakan jquery
1.langkah pertama loggin ke akun blogger anda
2.pilih rancangan klik edit html
3.download dulu template lengkap jaga-jaga kalau ada kesalahan dalam pemrosesan.
4.cari kode ]]></b:skin> untuk mempermudah pencarian klik F3
5.Masukkan script dibah ini diatas  ]]></b:skin>

klik :

.judul-label{background:-moz-linear-gradient(top, #393E41, #00FFFF);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Wide Latin, Times New Roman, Times New Roman;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("")repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:Times New Roman;font-size:12px;}.list-ganjil{background-color:#000;color:#FF0000;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top, #D11717, #8C0000)}.list-genap{background-color:#000;color:#FF0000;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top, #D11717, #8C0000)}

5.Lalu Klik save
6.Langkah selanjutnya klik postingan
7.klik entri baru lalu copas kode di bawah ini
8.kemudian masukkan kode di bawah ini

klik :

<script src="http://pintarsegala.xtgem.com/daftarisi.js">
</script>
<script src="http://www.black-market7.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://pintarsegala.xtgem.com/daftarisi.js" type="text/javascript">
</script>

9.lalu klik terbitkan entri
10.yang terakhir lihat blog anda
11.daftar isi sudah jadi dech

Baca selengkapnya »