Tips Membuat Read More Otomatis Blogspot

Tips membuat read more otomatis blogspot yang mudah, simple dan works tenan. Sebelum memulai seperti biasa untuk memperpanjang kata kita harus tahu dulu apa itu read more dan bagaimana cara kerjanya. Read more adalah istilah yang digunakan di dunia website dan blog yang digunakan untuk membatasi tampilan artikel pada halaman utama atau homepage umumnya, dan pada halaman kategori serta halaman hasil pencarian khususnya. Tanpa adanya read more ini, semua artikel yang ada akan terbuka di halaman-halaman diatas yang menyebabkan website atau blog menjadi memanjang, kurang menarik, kesannya seperti web blog satu halaman.

Related Artikel - Tips Membuat Social Media Share Artikel Blogspot

Ok, untuk lebih memahami langsung saja kita praktik, berikut langka-langkahnya:

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit Template"
4. Gunakan CTRL+F, Cari kode </head>
5. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode </head>
   
   
   <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 250; img_thumb_height = 100; img_thumb_width = 100; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>


6. Kemudian gunakan CTRL+F untuk cari kode <data:post.body/> atau <p><data:post.body/></p>
7. Jika kode tersebut lebih dari satu maka replace kode yang pertama dengan script 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:right;padding-top:20px;'>

       <a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>

       </b:if>

       <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kemudian klik save untuk menyimpan perubahan. selanjutnya kita bongkar dulu maksud dari kode javascript diatas:

1. summary_noimg = 500; Jika artikel yang bersangkutan tidak memiliki picture maka yang akan tampil pada halaman depan adalah textnya saja sebanyak 500 huruf
2. summary_img = 250; Jika artikel yang bersangkutan memiliki picture didalamnya, maka yang yang ditampilkan adalah picture itu sendiri dan text sebanyak 250 huruf
3. img_thumb_height = 100; Tinggi picture yang jadi thumbnail di homepage
4. img_thumb_width = 100; Lebar picture yang jadi thumbnail di homepage

Nilai-nilainya bisa diganti sesuai kebutuhan agan sekalian, kemudian untuk icon read morenya jika kurang cocok, agan tinggal replace URL yang dibold itu dengan URL icon milik agan, atau bisa langsung cari inspirasi di Google Image.

Related Artikel - Tips Membuat Breadcrumb di Blogspot

Yap, Demikian tips membuat read more otomatis blogspot, semoga bermanfaat. :)

› Read More

Tips Membuat Breadcrumb di Blogspot

Tips membuat breadcrumb di blogspot dengan mudah tanpa ribet dan works tenan. Tapi sebelumnya kita kenali dulu apa itu breadcrumb dan apa fungsinya? Breadcumb adalah salah satu navigasi website atau blogspot yang sangat penting, mirip seperti menu tetapi cara kerjanya searah dan runtut mengikuti kehalaman mana pengunjung berhenti dalam arti breadcrumb selalu mulai dari hompage, kemudian kategori, sub kategori, tanggal sampai ke artikel yang dituju, ini memberitahu pengunjung sedang berada di website atau blog bagian mana dan memudahkan pengunjung dalam mengunjungi halaman yang pernah dikunjungi sebelumnya tanpa harus mulai dari homepage lagi.

Bagaimana, setelah melihat screen shoot diatas apakah sudah ada gambaran? pasti sudah ada yah, kalau ga ada, saya bingung juga mau jelasin seperti apa. :v Mungkin dengan praktik langung bisa lebih memudahkan pemahaman.

Ok, Begini langkah-langkahnya:

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit Template"
4. Cari kode ]]></b:skin>
5. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>


6. .breadcrumbs { margin:0; padding:5px 5px 5px 0; font-size:95%; line-height:1.4em; border-bottom:4px double #a0a0a0; }


Related Artikel - Tips Membuat Social Media Share Artikel Blogspot

1. Kemudian cari kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> Cari yang dibold saja untuk memudahkan pencarian, dan pilih yang pertama jika lebih dari 1. kodenya agak panjang karena saya menggunakan template bawaan blogspot mungkin di template lain berbeda, tapi yang di bold pasti ada kok. o ya, dalam mencari kode jangan lupa gunakan CTRL+F ya. :v
2. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat dibawah kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>


3. <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Tampilan breadcrumbnya tidak sama dengan yang digambar, karena itu hanya contoh saja.  Agar sama seperti digambar agan harus berkreasi di bagian CSS nya saja. Dan akhir kata, demikian artikel Tips Membuat Breadcrumb di Blogspot kali ini, semoga bermanfaat.

Related Artikel - Tips Membuat Pagination Atau Page Number Blogspot

source code: maskolis

› Read More

Tips Membuat Menu Dropdown Web Blog

Tips membuat menu drop down untuk website atau blogspot, sebenarnya sih tidak harus dropdown, menu juga tergantung kebutuhan sih. Untuk masalah menu biasanya sering berganti-ganti seiring perjalanan web blog agan, kadang tidak pakai dropdown kadang pakai juga. Nah, Pada artikel kali ini sengaja dibuat dropdown untuk mempermudah agan jika mau menggunakan kedua jenis menu tersebut, begini untuk kemudahan di kemudian hari daripada nyari lagi kan kesien :v , jika menggunakan script dari TnT kalau agan ingin menggunakan menu tanpa dropdown, nanti tinggal edit di bagian HTML saja,  karena dropdownnya sudah di handle di script CSS nya. 

Struktur menu dropdown dibuat dari HTML yang di stylize sedemikian rupa menggunakan CSS, kadang ditambah juga dengan Javascript agar lebih responsive. Coba perhatikan kode HTML dibawah ini:

Related Artikel - Tips Membuat Read More Otomatis Blogspot

<div id='navi'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

kode baris ketiga <li class='active'><a href='#'><span>Home</span></a></li> adalah menu tanpa dropdown sedangkan baris keempat sampai baris kesembilan adalah menu dengan dropdown, ini dibuktikan dengan adanya tag <ul> didalam  tag <li>, selebihnya diatur pada script CSS nya apakah mau dropdown kebawah, keatas, kesamping, termasuk designnya juga. class='active' dan tag <span></span> adalah optional tergantung kebutuhan saja. Nah, jika ingin menu tanpa dropdown, agan tinggal hapus tag <ul>...</ul> didalam tag <li>...</li>, tapi kalau ingin menu dengan dropdown agan tinggal tambahkan tag <ul>...</ul> didalam tag <li>...</li>.

Ok, Implementasinya sebagai berikut:

1. Pastikan menu diatas sudah cocok dengan yang agan butuhkan dan Pastikan juga sudah masuk ke akun blogspot, jika belum monggo login dulu. :)
2. Pilih menu "Layout"
3. Diarea Layout, dibawah (Header) pilih "Add a Gadget"
4. Akan muncu window baru Gadget, pilih HTML/Javascript
5. Paste kan kode HTML diatas di gadget tersebut, lalu klik Save
6. Kemudian pilih menu "Template"
7. Pilih "Edit HTML"
8. Gunakan CTRL+F, cari kode ]]></b:skin>
9. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>
   
   
   #navi ul {
   margin: 0;
   padding: 7px 6px 0;
   background: #7d7d7d url(overlay.png) repeat-x 0 -110px;
   line-height: 100%;
   border-radius: 1em;
   font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   width: auto;
   }
   #navi li {
   margin: 0 5px;
   padding: 0 0 8px;
   float: left;
   position: relative;
   list-style: none;
   }
   #navi a,
   #navi a:link {
   font-weight: bold;
   font-size: 13px;
   color: #e7e5e5;
   text-decoration: none;
   display: block;
   padding: 8px 20px;
   margin: 0;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   }
   #navi a:hover {
   background: #000;
   color: #fff;
   }
   #navi .active a,
   #navi li:hover > a {
   background: #979797 url(overlay.png) repeat-x 0 -40px;
   background: #666666 url(overlay.png) repeat-x 0 -40px;
   color: #444;
   border-top: solid 1px #f8f8f8;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   text-shadow: 0 1px 0 #ffffff;
   }
   #navi ul ul li:hover a,
   #navi li:hover li a {
   background: none;
   border: none;
   color: #666;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   }
   #navi ul ul a:hover {
   background: #7d7d7d url(overlay.png) repeat-x 0 -100px !important;
   color: #fff !important;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   }
   #navi li:hover > ul {
   display: block;
   }
   #navi ul ul {
   display: none;
   margin: 0;
   padding: 0;
   width: 185px;
   position: absolute;
   top: 40px;
   left: 0;
   background: url(overlay.png) repeat-x 0 0;
   border: solid 1px #b4b4b4;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
   #navi ul ul li {
   float: none;
   margin: 0;
   padding: 3px;
   }
   #navi ul ul a,
   #navi ul ul a:link {
   font-weight: normal;
   font-size: 12px;
   }
   #navi ul:after {
   content: '.';
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
   }
   * html #navi ul {
   height: 1%;
   }

Related Article - Tips Membuat Breadcrumb di Blogspot

Demikian tips membuat menu dropdown web blog kali ini, semoga bermanfaat. :)

› Read More