SosBoks: Tutorial Blog | Blog Informasi Menarik

Cara Membuat List Headline News Di Blog

in News, Tutorial Blog - on Rabu, Juni 19, 2013 - No comments

Cara Membuat Daftar Headline News Di Blog - Udah lama nih gx Share tentang tutorial blog. Pada kesempatan kali ini, saya mau Share tutorial blog yang mungkin sudah banyak dicari oleh para pengguna blogger. Kebanyakan orang mengetahui Headline News itu berada di atas Header dan berbentuk Horizontal.

Headline News yang ini, sudah di Modifikasi menjadi LIST. Jadi, Headline News yang satu ini bisa ditaruh pada Widget maupun pada Template. Silahkan disimak dan dipahami

Login di Blogger
Klik Tata Letak >> Tambah Gadget >> HTML/Javascript
Masukkan kode berikut

<script src='http://g0oo.tk/hhS' type='text/javascript'> </script>
<script type='text/javascript'>var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts' type='text/javascript'> </script>

Simpan

Keterangan :
var numposts = 5 adalah Jumlah posting yang akan ditampilkan

Sekian Tutorial yang bisa saya berikan. Semoga bermanfaat dan jangan lupa tinggalkan komentar

Cara Membuat Blog Valid HTML 5

in Blog, SEO, Tutorial Blog - on Sabtu, Mei 25, 2013 - No comments

Kali ini saya akan memberikan tutorial Cara Membuat Blog Valid HTML 5. Sebelumnya sobat tau gak Apasih valid HTML5 itu ??? Valid HTML5 itu merupakan kode HTML yang mengikuti kemajuan jaman yang lebih update dari HTML4. Valid HTML5 akan membuat kode HTML template anda support di berbagai Browser. HTML5 ini pun menambahkan beberapa tag diantaranya yaitu <header>, <article>, dan <footer>. Namun tag <center> dihapus dan dianggap tidak valid lagi.

Berikut beberapa cara Membuat Blog Vald HTML 5 :

1. Cari kode seperti

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Kemudian ganti kode tersebut dengan.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

2. Ganti kode

</html>

dengan

</HTML>

3. Cari kode dan hapus kode berikut

<div class='post-share-buttons goog-inline-block'>...sampai...</div>

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

<b:include name='quickedit'/>

<b:include data='blog' name='all-head-content'/>

4. Cari kode ini

<b:skin><![CDATA[

Ganti dengan

<style type="text/css">
<!-- /*<b:skin><![CDATA[

5.Dan juga hapus beberapa widget blog yg sudah tidak Valid HTML 5 lagi yaitu

Google+ Followers
Pengikut
Share Button
Statistic

Sekian tutorial mengenai Valid HTML 5 dari saya. Semoga Bermanfaat dan Blog sobat bisa Valid HTML 5

Cara Membuat Widget Popular Post Bergerak

in Tutorial Blog - on Kamis, Mei 23, 2013 - 1 comment

Cara Membuat Widget Popular Post Bergerak Di Blog - Kali ini saya akan membahas tentang Widget Popular Post yang sudah dimodifikasi menjadi bergerak. Widget ini juga lebih efektif dan tidak memakan banyak tempat.

Widget ini akan membuat loading blog sobat sedikit lebih lambat dari biasanya. Popular Post ini juga bisa menggunakan Thumbnail atau Tidak, itu tergantung selera sobat.

Langsung saya To The Point, di bawah ini ada Tutorial untuk membuat widgetnya.

#1. Membuat Widget Popular Post

Login ke Blogger
Klik Tata Letak => Tambah Gadget => Entri Populer

#2. Modifikasi Widget Popular Post

Pada Tata Letak, Klik Tambah Gadget => Edit HTML/Javascript
Masukkan Kode berikut

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;

}

#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}

#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

Nah, itu adalah Tutorial untuk Membuat Widget Popular Post Bergerak. Semoga Tutorial ini bisa Bermanfaat untuk sobat.

Pengenalan Coding CSS Dalam Blogger

in Blog, CSS, Tutorial Blog - on Kamis, Mei 23, 2013 - 3 comments

Pengenalan Coding Cascade Style Sheets - Kali ini saya mau membahas tentang coding Cascade Style Sheets atau lebih sering dikenal dengan CSS.

Nah, kode CSS itu Coding dasar dari pembuatan Template. Coding CSS juga harus dikuasai oleh para Pembuat Template Blogger, Website, Wordpress, dll. Tapi untuk kali ini saya ingin membahasnya di Blogger.

Coding CSS juga sangat penting dalam pembuatan sebuah situs Website maupun Blog. Untuk itu, jika ingin membuat suatu situs atau blog, kalian diharuskan minimal menguasai coding css.

Jika sobat ingin benar2 menguasai Coding yang satu ini cukup mudah, karena Blogger.com sudah mempermudah untuk penempatan Coding CSS. Untuk awalnya kalian bisa melihat Cara Melihat Coding CSS Di Blogger.

Cara Coding CSS Di Blogger

Pertama, Sobat harus Login ke Blogger.com
Lalu, pada Dashboard - Klik Edit HTML
Kemudian kalian klik di kotak Coding, tekan CTRL+F
Ketik kode berikut

]]></b:skin>

Nah, kode yang diatas Kode Tadi itu adalah Coding CSS

Kode Sederhana Dari CSS

Jika kalian ingin belajar Coding CSS dari awal, maka buatlah dulu kode css yang sederhana dan simple. Seperti contoh kode di bawah ini :

#simple{
width:50px;
height:50px;
border:2px solid black;
}

nah di atas adalah kode sederhana dari CSS yang membentuk sebuah Persegi. Dan di bawah ini adalah keterangan dari masing2 kode css
Keterangan :
width = adalah Lebar suatu objek yang di desain menggunakan CSS
height = adalah Tinggi suatu objek yang di desain menggunakan CSS
border = adalah Garis Disekeliling objek yang di desain menggunakan CSS
50px = adalah Ukuran suatu objek dengan tipe Pixel

Dibawah ini saya akan memberikan Kode Sederhana Untuk Kotak Berisi Text

#simple{
width:50px;
height:50px;
border:2px solid black;
padding:2px;
margin:2px;
}

Keterangan Tambahan :
padding = adalah kode jarak antara text dengan batas kotak
margin = adalah kode jarak antara kotak dengan kotak (jika ada 2 kotak bersebelahan)

Itu semua adalah sedikit penjelasan dari Coding CSS yang saya ketahui. Semoga Bermanfaat untuk sobat dan maaf jika ada kesalahan, karena saya juga masih tahap pembelajaran Coding CSS.

SosBoks