- KonsultasiSyariah.in

Ustadz Online

Sabtu, 17 Januari 2015

Cara Merubah Mengatur Style (tampilan) Buzzboost Feedburner dengan CSS di Blogger dan wordpress hosting sendiri (bukan Wordpress.com).
Oleh Tim Multimedia Ponpes Al-Khoirot

DATAR ISI

Apa itu Feedburner?
Cara membuat akun di Feedburner
Apa itu Buzzboost?
Cara merubah tampilan Buzzboost
Cara Buat Syntax Highlighter di Blogger

Apa itu Feedburner?

Feedburner adalah pemberi layanan manajemen feed sebuah situs yang didirikan pada 2004. Feedburner memungkinkan blogger, podcaster dan videologger untuk mengkustomisasi atau memodifikasi feednya menjadi lebih baik dan lebih inteaktif.

Bagaimana cara membuat akun di Feedburner?

Kalau Anda punya akun Gmail atau Blogger.com, maka Anda akan otomatis dapat memiliki akun Feedburner. Karena Feedburner saat ini sudah dimiliki oleh Google.

Caranya, kunjungi Feedburner.google.com dan masuk dengan akun Gmail atau Blogger.com Anda dan ikuti petunjuk berikutnya.

Apa itu Buzzboost?

Buzzboost adalah salah satu layanan dalam Feedburner yang memungkinkan kita untuk mempromosikan feed blog kita di situs lain yang kita miliki (cross-promotion).

Contoh kode feedburner buzzboost lihat di bawah:

Bolehkah saya memasang kode di atas di blog saya dan bagaimana caranya?

Boleh dipasang di blog Anda. Cara memasang, Blogger.com -> Rancangan -> Elemen Laman -> klik Javascsript / HTML -> masukkan kode tersebut di kotak yang tersedia. Jangan lupa klik simpan.

Apakah saya dapat memasang kode tersebut di Wordpress.com?

Tidak bisa. Karena Wordpress.com tidak menerima kode Javascript. Kode tersebut hanya dapat dipasang di Wordpress hosting sendiri.

Bagaimana hasil tampilan Buzzboost?

Lihat live demo di situs ini yang berjudul "Artikel Terbaru Alkhoirot Network" atau lihat gambar di bawah:

Bagaimana caranya merubah tampilan Buzzboost?

Tampilan atau style buzzboost dapat merubah melalui CSS.
Caranya dengan menambah kode tertentu pada Blogger.com -> Rancangan -> Edit HTML.
Taruh kode berikut di atasnya kode </b:skin>

1. Untuk membuang/menghilangkan kredit "Headline by Feedburner" yang ada di bagian bawah. Tambahkan kode berikut:

#creditfooter
{
display: none;
}

2. Untuk merubah warna headline-nya, tambahkan kode berikut:

div.feedburnerFeedBlock ul li span a
{
color: Red;
}

3. Untuk membuang unordered list (bullet) pada headline, tambahkan kode berikut:

div.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none
}

4. Untuk menambah frame kotak di sekeliling buzzboost tambahkan kode berikut:

div.feedburnerFeedBlock {
border:2px solid #ddd;
background-color:#ffe;
padding:12px;
}

5. Untuk membuat judul headline dalam huruf besar (bold), tambahkan kode berikut:

div.feedburnerFeedBlock ul li span.headline {
font-weight:bold;
}

===
Catatan:

[1] Kredit untuk kode 1 dan 2: http://blog.gadodia.net/feedburner-buzzboost-tips/
[2] Kredit untuk kode setelah no. 2: http://www.google.com/support/feedburner/bin/answer.py?answer=78974

________________________________________

CARA BUAT SYNTAX HIGHLIGHTER DI BLOGGER

1. Masuk ke Blogger.com -> Template
2. Klik Edit HTML -> Lanjutkan (Proceed) -> beri tanda tik pada Expand Template
3. Cari kode berikut: ]]></b:skin>
4. Masukkan kode berikut sebelum atau di atasnya kode nomor 3:

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor {
color: gray; background-color: inherit; }

Link untuk kode di atas lihat di sini.

5. Cari kode ini: </head>
6. Letakkan kode berikut sebelum atau di atasnya kode nomor 5:

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

7. Cari kode ini: </body>
8. Lettakan kode berikut sebelum atau di atas kode nomor 7:

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9. Klik Simpan Template. Selesai.

10. Setiap akan menulis kode html atau javascript di posting blog dekode kode html tersebut.
11. Tambahkan kode html di antara kode di bawah:

<pre name="code" class="cpp">

Letakkan kode html/javascript yang sudah di-dekode di sini.

</pre>