Cara Membuat Menu Vertikal - tutorial

Cara Membuat Menu Vertikal

Baiklah sahabat pemikir cerdas kali ini kita akan mencoba untuk membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:

Untuk membuatnya tidak terlalu sulit kok sahabat. nah buat sahabat yang tidak sabaran lagi lansung aja kita ke tkp..


Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/orange1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/orange1.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna orange muda (orange1.gif dan orange2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

orange1.gif
orange2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://pemikir-cerdas.blogspot.com">Trik Blog</a></li>
<li><a href="http://pemikir-cerdas.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.
semoga berhasil ya sahabat.

Cara Membuat Menu Vertikal

Pemikir Cerdas - Cara Upload Gambar Ukuran besar di blogger

Cara Upload Gambar Ukuran besar di blogger

sahabat pemikir cerdas kali ini ada Cara Upload Gambar Ukuran besar di blogger tutorial ini boleh saya ambil dari blog Kang Rohman dan saya share disini sahabat. karena ini sangat diperlukan sahabat. mangkanya saya share disini sahabatok deh sahabat lansung aja kita praktekkan cara ampuh ini sahabat.


Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya

:

* Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
* Jika gambar sudah tampil di blog sahabat, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
* Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang saya dapatkan seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/200/Pc..jpg

* Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/s800/Pc..jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/s1600/Pc..jpg

Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s400/blog-aing.jpg

Coba bandingkan dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s800/blog-aing.jpg

Bandingkan juga dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s1600/blog-aing.jpg

Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-9T761yryuhUSKXRnYEYqaBgT27x1YLu6Zt8hFuIuJAD5jt0ctKlUjV8k2eX_iUztuWaYPMCOnBZId-5zqn-hE04tKIFem_xCIt2C6z66VwxIl_O4jCh1FqSzjD2x23NHwFzw0TDBBs/?imgmax=800

Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-9T761yryuhUSKXRnYEYqaBgT27x1YLu6Zt8hFuIuJAD5jt0ctKlUjV8k2eX_iUztuWaYPMCOnBZId-5zqn-hE04tKIFem_xCIt2C6z66VwxIl_O4jCh1FqSzjD2x23NHwFzw0TDBBs/?imgmax=1600

Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.

Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?

Cara Upload Gambar Ukuran besar di blogger

 

Cara Membuat Menu Tab View

Cara Membuat Menu Tab View

Sahabat pemikir cerdas ini ada tutorial Cara Membuat Menu Tab View yang merupakan salah satu untuk mempercantik blog sahabat juga.Dengan menambahkan Menu Tab View pada blog sahabat tentunya pengunjung juga terbantu untuk menemukan isi dari blog kita sahabat.

Tab view itu contohnya seperti ini sahabat:

Beginilah cara untuk membuat menu tab view tersebut sahabat. Semoga berhasil ya sahabat.
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna biru muda, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a><a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div><div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Maaf jika ada kesalahan dan kekurangan ya sahabat.

Cara Membuat Menu Tab View

Membuat Read More Otomatis di Blog

Membuat Read More Otomatis di Blog

Sahabat pemikir cerdas torial kali ini membahas bagaimana caranya membuat Read more secara otomatis. Selain read morenya muncul secara otomatis hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.Deingan demikian juga bisa mempercantik blog sahabat serta juga meringankan tugas sahabat dalam menyusun posisi postingan nantinya jika sahabat juga menggunakan gambar sahabat.
Selamat mencoba sahabat semoga berhasil sahabat.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.
Notice! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Maaf jika ada kesalahan yang sama2 tidak kita inginkan sahabat.

Membuat Read More Otomatis di Blog

Cara Membuat Dropdown Menu

Cara Membuat Dropdown Menu

Sahabat pemikir cerdas masi seputar buat menu ni sahabat, ini ada tutor mengenai membuat dropdown menu sahabat. Bisa menambah kecantikan blog sahabat juga dengan tata letak yang tepat. sahabat contohnya seperti di bawah ini sahabat.

Arsip Blog Cara Membuat Dropdown Menu Cara Membuat Menu Vertikal


 Dengan dropdown menu bisa menghemat space atau ruang di blog sahabat, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak sahabat. hanya saja kita harus bisa menempatkan pada posisi yang tepat sahabat. Untuk sahabat yang ingin mencoba ,lansung aja kita coba sahabat.



Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna biru muda adalah link. ganti text Link 1 dan Link 2 tersebut dengan link2 kamu.caranya buka blog sahabat, nah di judul postingan  klik kanan pointer mouse, kemudian copy link location dan kemudian paste di Link 1 dan Link 2 .Text yang berwarna kuning adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://pemikir-cerdas.blogspot.com/2012/03/cara-menampilkan-seluruh-judul.html"> Cara Membuat Menu Vertikal </option>
<option value="http://pemikir-cerdas.blogspot.com/2012/02/cara-mempercantik-blog-dengan-mudah.html"> Cara Menampilkan Posting Baru </option>
</select>maka hasilnya akan seperti ini : Arsip Blog Cara Membuat Dropdown Menu Cara Membuat Menu Vertikal

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>sebelum kode </select>Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog sahabat. Yang ini cocok untuk Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini yang merupakan kode paling atas dari menu ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :

Arsip Blog Cara Membuat Dropdown Menu Cara Membuat Menu Vertikal

Complete deh...
 semoga berhasil ya sahabat.
Maaf jika ada jika ada kesalahan ya sahabat.

Cara Membuat Dropdown Menu

Cara Membuat Tab Menu di Blog

Cara Membuat Tab Menu di Blog 

Sahabat pemikir cerdas ini ada bagian dari mempercantik blog sahabat. Agar blog sahabat terlihat rapi n cantik blog sahabat perlu ditambahkan Tab Menu .Ini ada tutorial untuk membuat tab menu horizontal sahabat.
 Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Jika sahabat tertarik untuk membuat tab menu horizontal pada blog sahabat silakan coba tutor di bawah ini sahabat. Semoga sukses ya sahabat.

1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.

2. Cari script seperti ini ]]></b:skin> kalo udah ketemu copy script dibawah
ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan yang dicetak tebal biru muda bisa kamu ganti dengan gambar-gambar atau teks di bawah ini:
blackleft.gif---> blackright.gif
greenleft.gif--->greenright.gif
unguleft.gif---->unguright.gif
redleft.gif ----->redright.gif
unguleft.gif---->unguright.gif
yellowleft.gif -->yellowright.gif
blueleft.gif----->blueright.gif
whiteleft.gif----> whiteright.gif

Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Home</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://pemikir-cerdas.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://pemikir-cerdas.blogspot.com dengan link yang dituju. Link tersebut bisa berupa alamat blog lain atau link postingan . Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal warna kuning bisa  ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">

Kalo udah ketemu copy script yang tadi diatasnya
Untuk background alamat link gambar bisa sahabat ganti jika alamat link di atas tidak berkenan di hati sahabat
6. Simpan hasil pengeditan.

Smoga berhasil ya sahabat, maaf jika ada kesalahan ya sahabat. 

Cara Membuat Tab Menu di Blog 

Cara Menampilkan Seluruh Judul Postingan di Blog

Menampilkan Seluruh Judul Postingan di Blog 

Nah sahabat pemikir cerdas ini ada tutorial untuk sahabat agar blog sahabat kelihatan cantik sahabat . tujuannya agar sahabat  dan pengunjung blog sahabat dapat dengan mudah melihat judul postingan yang telah ada sahabat, jadi g' repot2 untuk buka page satu persatu lagi sahabat. Semoga bermanfaat ya sahabat.buat sahabat yang ingin menampilkan seluruh judul postingan di Blog sahabat atau yang sering disebut dengan Daftar isi, maka cara berikut bisa sahabat lakukan. Tetapi jika sahabat masih belum paham , maka lihat dulu gambar yang ada, atau bisa juga lihat contohnya di samping kanan  blog  ini hanya beberapa judul yang dimasukkan:



sudah paham akan bikin apa sekarang. Jika sudah paham langsung saja copy dan paste kode berikut di Kustomisasi ---> Tata Letak ---> Tambah Gadget --->HTML/JavaScript dan paste pada bagian Content.

<div style="border: 0px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="http://sites.google.com/site/masfaysblog/Home/codedaftarisi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://pemikir-cerdas.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

Lalu ganti http://pemikir-cerdas.blogspot.com dengan alamat blog anda, Selamat Mencoba. Semoga berhasil ya sahabat.

Menampilkan Seluruh Judul Postingan di Blog