cara membuat related posts / artikel terkait bawah posting dengan scroll

Untuk tutorial blog kali ini membahas bagaimana cara membuat related posts / artikel terkait bawah posting dengan scroll. Dengan memasang artikel terkait atau related posts di blog tentunya akan membuat atau memudahkan pengunjung untuk melihat artikel anda yang lainnya dan efeknya untuk blog anda akan menambah / meningkatkan pageview blog.

Cara Memasang Artikel Terkait di bawah postingan blog dengan fungsi scroll :
1. Login ke blogger.com
2. Pada dasboard silahkan pilih Template
3. Lalu pilih Edit HTMl
4. Centang kotak expand template widget
5. Tekan Ctrl+F dan cari kode <data:post.body/> atau <p><data:post.body/></p> lalu letakkan kode berikut dibawahnya
6. Apabila menemukan kode <data:post.body/> sebanyak 2 atau 3 buah silahkan pilih yang nomor 2 saja

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/><H2>Related Posts</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <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;ardi33&#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>

7. Lalu cari kode ]]></b:skin> dan letakkan kode berikut diatasnya (kode ini untuk memberi efek Hover)

.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }

8. Simpan Template dan lihat hasil dari related post blog anda yang baru dibuat
Sumber : http://bloggerbondowoso24.blogspot.com/2013/02/cara-membuat-related-post-dengan-fungsi.html

Baca Selengkapnya »

Membuat Related Post Dengan Thumbnail

Related post atau postingan terkait pasti sering loe liat di blog orang laen ya gak gan. Fungsinya bukan cuma pajangan doank tapi buat ningkatin pageview dari pengunjung blog kita gan. Dengan adanya related post atau postingan terkait di blog kita bikin pengunjung lebih mudah nyari konten yang berkaitan sama yang dia baca saat itu.

Kalo di WordPress cara buatnya gampang banget tinggal pasang plugin beres gan. Nah kalo di blogger kita mesti pasang kode di template gan biar related post muncul di bawah postingan. Kayak di blog ini gan ada related postnya juga. Tapi kali ini gw bakal share cara membuat related post dengan thumbnail atau gambar gan.

Mau tau caranya gan? Yuk langsung disimak gan cara membuat related post dengan thumbnailnya, biar blog loe jadi tambah keren dan bikin pengunjung betah. Gw bakal kasi 2 kode gan, yang 1 thumbnailnya statis ato diem dan yang 1 lagi dengan marque ato bergerak gan, cek dis out.

Cek ini gan >>> Edit Template Blogger Versi Baru

Cara Membuat Related Post Dengan Thumbnail Di Blogger

• Pertama masuk ke Blogger terus pilih Template lalu klik Edit HTML dan teken Ctrl + F di keyboard kemudian cari kode </head> lalu centang Expand Widget Templates gan, abis itu loe pastein kode di bawah ini di atasnya.

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-left: 5px;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikEWVtqwyixDlG-pZDHYkkY5T7chSjBResx1uYa6nYq0OAb7ZSAVODMGbufuV9hM3_bI7T8_KWu_aoA4LsMu5d6PekPErpgpZZCvMdVSEScLF2zvsJ4z7mlJWRtWildijVeG-dqhdX2m-a/s1600/images.jpg&quot;;
var maxresults=10;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Postingan Terkait&quot;;
</script>
<script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Kalo udah jangan di save dulu sekarang loe cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> gan. Setelah itu paste kode di bawah ini tepat di bawahnya gan. Loe tinggal pilih kode related post dengan thumbnail yang statis ato yang bergerak ( marque ) gan.

 » Kode Related Post Dengan Thumbnail Statis

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

» Kode Related Post Dengan Thumbnail Bergerak / Marque

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=11&quot;' type='text/javascript'/>
</b:if></b:loop>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script>
<script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Abis dipastein sekarang diedit gan. Buat ngatur posisi judulnya loe edit padding-left: semakin besar semakin ke kanan dan buat ganti judulnya edit Postingan Terkait gan. Terus buat ngerubah warna hover edit aja background-color: ganti sama warna yang laen sesuai selera loe.

• Kalo buat var maxresult sama max-result ganti aja sesuka hati mau berapa jumlah related post yang ditampilin gan. Beres ngedit sekarang tinggal Save template gan dan buka blog loe pasti udah ada related post dengan thumbnail nya sekarang.

Note : Kalo mau ganti image tidak ada gambar, tinggal di ganti aja urlnya di var defaultnoimage gan.


Sekian dulu yang bisa gw share kali ini semoga bermanfaat. Kalo ada yang gak ngerti silahkan ditanyakan dan jangan lupa komentarnya gan.
Sumber : http://seociyus.blogspot.com/2013/01/cara-membuat-related-post-dengan-thumbnail.html

Baca Selengkapnya »

Cara Membuat Artikel Terkait Di Bawah Postingan

Jika anda tidak terlalu percaya dengan apa kata saya diatas, perhatikan sekarang dengan apa yang terjadi pada blog saya ini. Lihat pada widget Statistik Blog dan perhatikan aplikasi Histat saya yang menunjukkan counter Visitor dan Page View. Jika dihitung perbandingan antara keduanya adalah 1:4. sehingga dapat disimpulkan, pengunjung blog saya ini rata – rata membuka 4 halaman artikel setiap berkunjung. Tentunya selain artikel terkait yang saya pasang, saya juga Membuat Recent Post / Artikel yang terbaru saya terbitkan.

Jika anda tertarik ingin meningkatkan page view seperti saya tersebut, maka simak saja langkah dalam membuat artikel terkait dibawah ini karena sangat mudah dilakukan.

Cara membuat Related Post Artikel Terkait :

1. Login ke Akun Blog Anda, dalam hal ini blogger karena saya menggunakan blogspot

2. Klik Templete,  lalu pilih Edit HTML

3. Kemudian anda cari kode <data:post.body/>,

Gunaka CTRL+F agar pencarian lebih Mudah dan jika menemukan kode tersebut lebih dari satu, gunakan kode yang ke-2 dari atas

4. Copy-paste kode berikut ini di bawah kode <data:post.body/> yang sudah saya jelaskan pada point nomor 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;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 = 15;
maxNumberOfPostsPerLabel = 50;
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>

5. Selanjutnya cari kode ]]></b:skin>

6. Copy-paste semua code berikut ini tepat diatasnya kode ]]></b:skin>

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

7. Klik Save/Simpan Templete

KETERANGAN TAMBAHAN:
*ARTIKEL TERKAIT, = bisa diganti sesuai keinginan. misal: Related Post, Baca Juga, Read more ataupun yang lain terserah

*maxNumberOfPostsPerLabel = 50;  = jumlah posting atau artikel terkait yang ingin Anda tampilkan

*maxNumberOfLabels = 3;  = jumlah label terkait yang ingin ditampilkan

*background-color: #F2F2F2; = warna background kotakan artikel terkait dan bisa diganti sesuai selera

*background-color: #EFFBEF; = warna background saat kursor menyorot olom tersebut

*http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png = icon didepan link

Sumber : http://cara-baru-andie.blogspot.com/2013/06/cara-baru-membuat-artikel-terkait-dibawah-posting.html

Baca Selengkapnya »

Tutorial: Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.
Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.


1. Mengubah Objek menjadi Background
Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.
Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
   
2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
   
3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
   
   
4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
   
5. Ketikkan images/index_26.gif pada kolom Bg.
   
6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

---

2. Memasukkan Objek Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.
   
2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
   
3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
   
4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
   
5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
   
6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
   
7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
   

MEMBUAT LINK DAN NAVIGASI
Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.
1. Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.
Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.
Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.
   
2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
   
3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
   
4. Selanjutnya pilih Show Pop up Menu.
   
5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
   
6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
   
7. Kemudian masukkan alamat URL pada kolom Link.
   
8. Selanjutnya pada kolom Target, pilih _parent.
   
9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
   
10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    
11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    
12. Klik Tab Position untuk menentukan posisi pop up menu.
    
13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    
14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.
   
2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
   
3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
   
4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
   
5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
   
6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
   
7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
   
8. Untuk melihat hasilnya, tekan tombol F12.

Sumber :http://slametriyanto.net/membuat-web-dengan-dreamweaver/

Baca Selengkapnya »

Template Blogger Untuk Sekolah

Cekula - Template Blogger Untuk Sekolah

Live Demo Download Template

TEMPLATE INFORMATIONS

Template Name	Cekula Blogger Template
Author	By Us / Templatemaxs.com
Descriptions	Cekula blogger template yaitu sebuah template blogger untuk sekolah yang secara cuma-cuma dibagikan untuk dipakai, template ini juga bebas untuk di sebar luaskan, dibagikan dan di modifikasi dengan catatan tidak mengilangkan Tautan pembuat aslinya. Dengan tampilan Template yang rapi beserta Halaman Tata letak yang rapi agar enak untuk dipandang. Fitur : - Logo gambar atau logo teks. - Navigasi menu tanpa edit code - Easy slideshow dengan Coin Slider tanpa edit kode - Auto readmore diperbarui - Artikel berhubungan dengan gambar - 2 Kolom Layout - 2 Block Sidebar dan 2 Kolom sidebar kecil - Tata letak Blog dan Tata letak Admin layout Rapi

Cara Setting Cekula Template
Silahkan install dulu templatenya, panduan install template ada disini.

A. Setting Logo / Judul Blog
1. Buatlah sebuah logo dengan format PNG,JPEG atau GIF (PNG disarankan). ukuran logo idealnya yaitu 275px X 75px.
2. Lalu Masuk ke tata letak
3. Pada bagian (Header) klik Edit (lihat gambar dibawah ini)

- klik tombol browser untuk memilih logo yang akan diunggah
- klik juga "selain judul dan keterangan"
4. Jika sudah klik Simpan

B. Mengatur Menu

1. Masih di halaman tata letak
2. Klik edit pada bagian "Daftar Link"
3. Masukkan link beserta nama link satu persatu
4. Kalau sudah klik Simpan

C. Mengatur Tampilan Slideshow

1. Buatlah gambar dengan ukuran Lebar 935px X 300px, dengan format PNG, JPG atau GIF
2. Masih di halaman tata letak
3. Klik edit pada bagian widget "Slide 1, Slide 2 dan seterusnya" akan mncul halaman seperti dibawah ini
   
   - Keterangan Gambar / Caption : Isilah dengan informasi tentang gambar
   - Hubungan / Link : Masukkan Link dimana gambar akan diarahkan
   - Dari Komputer anda : Klik "Browser" untuk memilih gambar
   - Hilangkan tanda cek pada "Susutkan agar sesuai"
4. Simpan
5. Slide dapat menampilkan hingga 7 gambar slide dan minimal 2 gambar harus diunggah untuk dapat dapat menjalankan slideshow gambar

Untuk penambahan Gadget lainnya silahkan isi dengan gadget yang sekiranya menarik, dan berguna bagi pengunjung blog.

Pengatuan lainnya yaitu penambahan Daftar link dan juga Teks Manual sebagai informasi tentang blog pada bagian Bawah atau Footer .

Template ini akan Insyaallah akan di cek dan diperbaiki setiap 1 bulan sekali, untuk mendapatkan update mengenai Template Blogger Sekolah diatas anda bisa membookmark halaman ini atau berlangganan melalui email dibawah posting ini.
Ada pertanyaan mengenai Cekula Template silahkan tinggalkan komentar.

sumber : http://u-sup.blogspot.com/2013/04/template-blogger-untuk-sekolah.html

Baca Selengkapnya »