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

Cerpen Sedih : Kisah Orang yang Memukuli Ayahnya

Cerpen Sedih : Kisah Orang yang Memukuli Ayahnya

Sahabat pemikir cerdas ini ada sebuah kisah yang menarik untuk sahabat ketahui sahabat, kisah ini memberikan banyak makna banyak arti kehidupan didalamnya sahabat. Semoga dengan membaca cerita ini memberikan masukan untuk sahabat untuk lebih baik lagi dalam menjalani hari-hari sahabat.
Di sebuah jalan raya, terlihat ada seorang pemuda belia, berkulit coklat, berotot kuat, di tangannya sebuah tongkat keras, yang dia gunakan untuk memukuli seorang laki-laki tua yang telah berusia enam puluh tahun. Orang tua itu berbadan kurus, diam tidak mengaduhkan pukulan tersebut. Orang-orang di sekitarnya berkerumun melihat mereka berdua, bermaksud hendak membebaskannya. Salah seorang dari mereka berkata kepada pemuda itu, "Mengapa kamu memukuli orang tua malang ini? Tidakkah kamu takut kepada Allah?" Orang yang lain berkata, "Apa yang telah diperbuatnya sehingga kamu memukulinya dengan keras seperti ini?"

Akan tetapi pemuda itu terus memukuli orang tua tersebut dan tidak menoleh sedikit pun kepada mereka. Orang yang lain lagi berkata, "Tidakkah kamu takut kalau ada seseorang yang memukuli ayahmu seperti ini?"

Kemudian orang (yang terakhir) itu menoleh kepada orang-orang di sekitarnya dan mengatakan kepada mereka, "Kalian harus mengadukan pemuda ini kepada ayahnya, barangkali dia akan menegur dan memarahinya. Siapa yang mengetahui ayah dari pemuda yang kejam ini?"

Tiba-tiba ada seorang laki-laki yang terlihat memiliki wibawa dan kehormatan. Dia berkata dengan tenang, "Aku tahu pemuda ini, dan aku tahu siapa ayahnya. Sesungguhnya pemuda itu sedang memukuli ayahnya. Orang tua malang yang dipukulinya ini adalah ayahnya sendiri." Mendengar hal itu orang-orang tercengang, raut wajah mereka berubah karena keterheranan yang amat sangat.

Sungguh aneh, bagaimana mungkin ada seorang anak yang memukuli ayahnya sendiri dengan kejam seperti ini? Mereka pun menyerang pemuda itu dan membebaskan sang ayah dari pukulan anaknya. Namun sambil terengah-engah, ayahnya berkata, "Biarkan aku, sungguh Allah Ta’ala telah membalasku. Dahulu ketika aku masih muda, aku pernah memukuli ayahku sama seperti ini, hanya karena dia meminta sebagian uang dariku." Orang-orang merasa takjub karena keadilan Allah Ta’ala. Allah berfirman,artinya, ”Dan sekali-sekali tidaklah Rabbmu menganiaya hamba-hamba(Nya)." (Fushshilat: 46). ( Aqibah Uquq al-Walidain, hal. 130-131.)

Di posting oleh : Abu Thalhah Andri Abdul Halim, dinukil dari : “Sungguh Merugi Siapa yang Mendapati Orang Tuanya Masih Hidup Tapi Tidak Meraih Surga”, karya : Ghalib bin Sulaiman bin Su'ud al-Harbi. Edisi terjemah cet. Pustaka Darul Haq Jakarta.

Cerpen Sedih : Kisah Orang yang Memukuli Ayahnya

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