August 2016 | #JMBELOG

Nak center kan BLOG TITLE

Posted by at August 30, 2016
Nak Center kan BLOG TITLE

Rujuk sini ya


If you uploaded your header image via Page Elements, Blogger will automatically align it to the left. There are no options for middle and right alignment. So then, it possible to align the image in at the center or to the right of the header?
Yes it is possible -using CSS (Cascading style sheet). But to define a HTML element in CSS you must first know the element ID or class name. After some checking I found out that “header-inner”  is the ID for the content of header widget. So what’s next?
You need to check the image placement method you chose when you uploaded the header image to Blogger in the first place. Different method handled the image differently, thus requiring different codes for alignment.
header image1

Once header image placement is known, it’s time to add in the code snippet.
  1. Go to Dashboard > Template > Edit HTML.
  2. Look for ]]></b:skin> line in your HTML code and add the appropriate CSS code snippet right before it.
Update: Now, instead of the steps above, there is an easier and safer way of adding CSS snippet in your template (opens in a new tab/window). Check it out!
Below are a list of CSS code snippets for you to choose from. Copy and paste them as explained above.

1. If you selected “Behind title and description” option

When you chose this option, Blogger added the banner image as a background to the header. To align it you need to reposition the background image by adding one of these CSS snippets:
(These snippets will not move the header title and description. For header title and description, see Aligning header texts).
  • To center
    #header-inner {background-position: center !important; width: 100% !important;}
  • To align right
    #header-inner {background-position: right !important; width: 100% !important;}

2. If you selected “Instead of title and description” or “Have description placed after the image” option

With this option, the image was added as a <img> HTML element. Use these snippets are to align the element:
  • To center
    #header-inner img {margin: 0 auto !important;}
    #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/
    Use only the first line for normal Layout template. Use both lines if you are using Template Designer.
  • To align right
    #header-inner img {margin: 0 auto 0 300px;}
    You need to adjust the left margin (300px in this example) to “push” the image to the right.
  • To align vertically
    To align the the image vertically, apply top padding to push it down, like this:
    #header-inner img {padding-top: 50px ;}
    Adjust the value until you get the desired position.
For option 1 and 2 to work, your header image width (plus margin and padding if any) must be equal or less than the container (such as header-wrapper, outer-wrapper etc.) width.

3. Aligning header texts (title and description)

The snippets below are for aligning header title and description. They will work with both text-only header and the text in “Behind title and description” image placement option.
  • To center
    #header-inner {text-align: center ;}
  • To align right
    #header-inner {text-align: right ;}
  • To align vertically
    Apply top padding:
    .titlewrapper {padding-top: 50px  !important;}
    Adjust the value until you get the desired position. For the description, use.descriptionwrapper.

4. Placing image and texts side by side

Use one of these if you want split the header into two parts -an image and a text parts, positioned side by side. These snippets are only applicable to “Behind title and description” image placement option.
  • To place image on the left and texts on the right
    #header-inner {background-position: left !important; width: 100% !important;}
    .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}
    Increase left padding to push away texts to the right the header image.
  • To place image on the right and texts on the left
    #header-inner {background-position: right !important; width: 100% !important;}
    .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}
    Increase right padding to push away texts to the left of header image.

Top Commentators Widget for Blogger Blogspot with Avatars

Posted by at August 21, 2016
 Top Commentators Widget for Blogger Blogspot with Avatars


Nak cuba buat klik sini

Muhasabah Cinta - Edcoustic

Posted by at August 19, 2016


Muhasabah Cinta - Edcoustic

Wahai... Pemilik nyawaku
Betapa lemah diriku ini
Berat ujian dariMu
Kupasrahkan semua padaMu

Tuhan... Baru ku sadar
Indah nikmat sehat itu
Tak pandai aku bersyukur
Kini kuharapkan cintaMu

Reff. :
Kata-kata cinta terucap indah
Mengalun berzikir di kidung doaku
Sakit yang kurasa biar jadi penawar dosaku
Butir-butir cinta air mataku
Teringat semua yang Kau beri untukku
Ampuni khilaf dan salah selama ini
Ya ilahi....

Tuhan... Kuatkan aku
Lindungiku dari putus asa
Jika ku harus mati
Pertemukan aku denganMu

Setia - Elizabeth Tan ft. Faizal Tahir

Posted by at August 15, 2016
Selamat pagi sayang ku
Apa khabar diri mu

Maafkan andai mengganggu lena mu

Andai pernah melukakan
Maafkan ku tak sengaja
Harus kau dan aku selalu bicara

Kau tahu kau satunya
Ku mahu kita selamanya

Kau dan aku mungkin tak sempurna
Kau dan aku tahu takkan mudah
Kau dan aku mahukan sempurna
Kau dan aku mengharap bahagia

Setia aku demi diri mu
Setia aku hanya pada mu

Andai hati mu berubah
Pasti ku cuba fahami
Tetap ku melangkah terus berani

Kau tahu kau satunya
Ku mahu kita selamanya

Kau dan aku mungkin tak sempurna
Kau dan aku tahu tak semudah
Kau dan aku mahukan sempurna
Kau dan aku mengharap bahagia

Setia aku demi diri mu
Setia aku hanya pada mu

Terima seadanya
Perbezaan kau dan aku
Biar pun apa saja
Ku percaya kau setia

Kau dan aku mengharap bahagia...

Setia aku demi diri mu
Setia aku hanya pada mu

Setia ku demi diri mu
Setia ku hanya pada mu

Selamat pagi sayang ku
Apa khabar diri mu

Scroll to Top Button

Posted by at August 14, 2016
Scroll to Top Button

klik sini


CARA CENTER & LETAK WARNA LATAR BELAKANG ( title sidebar )

Posted by at August 12, 2016
CARA CENTER & LETAK WARNA LATAR BELAKANG ( title sidebar )

Rujukan di sini

letak warna pada widget title

Untuk tajuk pada template biasanya bermula dengan kod h1,h2…dan sebagainya.untuk meletak warna latar belakang dan teks agar berada ditengah(center) kita cuma perlu tambah kod dibawahnya:

Masuk kedesign—edit HTML cari kod h2 ditemplate seperti dibawah:

Gunakan Ctrl+F untuk find
h2 {

background-color:#AEB404;
text-align: center;

}

*teks berwarna merah adalah kod yang ditambah

kod warna dengan teks hijau boleh ditukar dengan kod yang dinginkan.


kemudian seperti biasa preview dan save template.

Kejora - Lesti D’Academy

Posted by at August 10, 2016
Kejora temanilah malamku
Sampaikan rinduku yang terlarang
Dia yang kucinta kini tlah berdua
Tak mampu diriku menahan rindu padanya

Kejora pancarkanlah sinarmu
Temani keheningan malamku
Padamu kejora kutitipkan rindu
Untuknya yang kini jauh di mata

Ku berkhayal angankan dirimu
Seakan hadir disini
Temaniku memelukmu
Indah dalam belai kasih sayang

Tak terganti rasa cinta ini
Meski kini kau tak sendiri
Sisa cinta kan jadi cerita
Tersimpan selamanya bersama sang kejora

Kejora sampaikan rindu ini

TABBED WIDGET UNTUK BLOG

Posted by at August 09, 2016
EDIT BLOG 10 : TABBED WIDGET UNTUK BLOG.
Hasil tilikkan JM di google telah JM temui di BLOGS911


<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/s/ioycgaohomw3891/theblogger911.blogspot.com.tabber.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- it will not work without below code to make sure the widget works, do not alter the code below -->
<div id='codeholder'>
<p>
Get<a href="http://theblogger911.blogspot.com/2013/09/the-fastest-and-easiest-tabber-widget.html" target="_blank"> widget</a></p>
</div>

NOAH - Sajadah Panjang

Posted by at August 08, 2016
Ada sajadah panjang terbentang
Dari kaki buaian
Sampai ke tepi kuburan hamba
Kuburan hamba bila mati

Ada sajadah panjang terbentang
Hamba tunduk dan sujud
Di atas sajadah yang panjang ini
Diselingi sekedar interupsi

Mencari rezeki mencari ilmu
Mengukur jalanan seharian
Begitu terdengar suara adzan
Kembali tersungkur hamba

Ada sajadah panjang terbentang
Hamba tunduk dan rukuk
Hamba sujud tak lepas kening hamba
Mengingat Dikau sepenuhnya

Mencari rezeki mencari ilmu
Mengukur jalanan seharian
Begitu terdengar suara adzan
Kembali tersungkur hamba

Ada sajadah panjang terbentang
Hamba tunduk dan rukuk
Hamba sujud tak lepas kening hamba
Mengingat Dikau sepenuhnya
Mengingat Dikau sepenuhnya 
© #JMBELOG is powered by Blogger - Template designed by Stramaxon - Best SEO Template